Time to Organize the Book Collection!

I consider my book collection to be pretty large. I make genuine efforts to read through all my books, but by the time I finish one book, I’ve bought two more.

While I like curling up with just one book and reading straight through it, I’ll often find myself working on reading three, four, or more books at the same time (not the exact same time, but switching between them). That’s about the time when I notice my lack of bookmarks (or maybe just my inability to use them reliably). I’ve lost my place, so I put the book down saying I’ll come back later. Well, Crime and Punishment is still sitting on my dresser two-thirds done, and I’m not about to re-read 500 pages just to refresh myself with the story.imgres

Fed up with losing my place and abandoning books, I’ve decided to use this as a time to learn some web programming and make a dynamic website that will keep track of what books I own and how far along in each one I am. Not only this, but it will have bar graphs! Yay!

The first step of doing this project was deciding what sorts of information to track. For right now, I’m going to track:

  • Title
  • Author
  • Total Page Count
  • Current Page

It should be easy to add other information as necessary, such as publisher or date information.

I’d like to display this information in the form of a chart, with each book getting its own row and bar graph progress bar. Since web design isn’t my greatest strength, I enlisted the help of my friends at Stack Overflow and some resources from Google (I can’t find them, but will link if/when I do.) to help me implement bar graphs and to provide a table that looked a lot better than the standard HTML <table> tag.

The strategy that I went with was making the <div>, <li>, and <ul> tags look like <table>, <tr>, and <td> tags, using CSS. This introduced some difficulties though since using <li> means I have to build the table column-by-column, rather than row-by-row. It would have been really easy to build the table row by row since I could just fetch the entire table using PHP mysqli calls, and then for each iteration of the loop, create and fill out a row. Instead, building the table column-by-column meant selecting an element from each book one at a time, printing that element, then moving on to the next element. I’m not sure how good this approach is from a performance perspective, but from an ease to programmer prospective, it was a major pain in the butt.

This is a screenshot of the final result

This is a screenshot of the final result

I’d like to just give you access to all my code, but since it contains sensitive information (i.e. my passwords, ip addresses, and database info), I’ll just post the most interesting parts of the code below.

First things first, here’s the CSS style sheet:

[sourcecode language=’css’]

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;

.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 20px;
line-height: 20px;
border:2px solid #C9C9C9;

.graph .bar span { position: absolute; left: 1em; }

.table ul
border:1px solid #C9C9C9;
.table ul li
padding:5px 10px;
.table ul li.title
.table ul li.even
.table ul li.odd

float: left;
padding: 5px;


The above code provides the CSS implementation for bar graphs as well the code for making the nice fancy tables.

I’d edit and post the PHP code, but it’s about 250 lines long and I don’t think you want to read all that (if you do, let me know and I’ll send you a copy). Instead, here are copies of the meat of the program without a lot of the extra fluff (error checking and security stuff).

[sourcecode language=’php’]

  • Progress
  • query(“SELECT *** FROM ***”);
    $status = “even”;
    while($currentProgress = $progress->fetch_array(MYSQLI_NUM))
    echo ‘

    if($status == “even”)
    $status = “odd”;
    $status = “even”;



Page Count:

Current Page:

Book ID:

New Page Count:


The above two blocks of PHP code are just a small part of the web site (application?), but they are the most interesting parts.

The first part opens the table up, adds a new column, then iterates through each record in the database and plots a progress bar. New columns can easily be added to the table by following a template like that one, and that’s just how I created the other columns.

The second block of code creates all the ways for the user to interact with the database. Don’t worry, there’s some security to properly handle, shall we say, evil input. (Though since I said that, I’m sure someone will destroy it all.)

I was thinking about it, I could talk about my work forever, but I’m sure it’d be much more entertaining for you to just play with it yourself. Well, here it is.

Feel free to add some books, delete some books, update some books, whatever you like really! (No SQL injection though please!)

I had a lot of fun creating this and it was the first thing I made of any value that used a database and I think it turned out better than my last tool. I’m not completely sure (call me out if you disagree), but I think this could be considered a web application. After all, it takes input from the user, stores it, processes it, and gives feedback to the user, just like a desktop application would. And if Jeff Atwood is correct, soon all applications will be web based like this, but that’s a whole separate post  (since I disagree with him).

I think for any project, it’s important to recognize that you’re done, but also how you can and will improve the project. If I decide to work on this some more, I plan to:

  • Make the interface prettier.
  • Improve the bar graphs. (red at 0% read and green at 100% red)
  • Make the input boxes not bounce all around the page.
  • Have better input validation. (no current page > pagecount or have either values less than 0)
  • Put some more security on it. (right now, anyone can delete your book lists, as I’m sure will happen on my website)
  • Possibly add an interface to be able to send SMS messages to the app to update it. (much more convenient).

Now that I have this cool web app to manage my books and how far along I am in them, will I be better able to manage my library? Truthfully, probably not, but that wasn’t the final goal of this project (it should have been though!). I learned a lot and that’s a pretty good outcome. I probably won’t update my book database daily whenever I read, but it will be handy to keep track of books I’ve finished reading or maybe if I know I’m going to be putting a book down for a while. Maybe now is a good time to give Crime and Punishment another try…

About samkerr

I'm an eclectic person. I like to dabble in a multitude of things. I'm sure you'll find my blog reflects that.
This entry was posted in Code, Utilities and tagged , , , , . Bookmark the permalink.

2 Responses to Time to Organize the Book Collection!

  1. Nick says:

    If you ever decide you despise PHP, check out CherryPy for an easy to get started http/web framework. It is quite bare bones but has lots of extensibility points for integrating thing such as template libraries.


  2. Nick says:

    The tutorial linked above is a good introduction to both CherryPy and Genshi, an xml based templating language.

Leave a Reply

Your email address will not be published. Required fields are marked *