Building an Online Shop's Product Detail Page | WebReference

Building an Online Shop's Product Detail Page

By Leidago Noabeb


In the previous article we looked at how to create an online shopping front. We also created and normalized the database tables needed to run this part of the shopping experience. However, we did not complete the process of viewing individual products. We are going to complete that process in this article and then we will look at how to create a shopping cart mechanism for the remainder of the series.

So let's continue to create the PHP page that will help us view the details of a book that a user wants to view. Here's how a user gets to this page. First, the user is offered a chance to select from a list of categories of the type of books that they want to read. Types can include for example Comedy or Thriller or Romance, etc. Once the user has selected a category, a list of all of the books in that category will be displayed. If the user wants to view a particular book, then all they have to do is click on the title of the book and all of the details of the book such as the title, price and ISBN number will be displayed to them. This is what we are going to look at in the first part of this article. Below is a screen shot of what this page looks like:

Figure 1

In the picture above you can clearly see the all of the details of the chosen book; details such as how much the book costs, its ISBN number, author and publication date. The page also provides you with a drop down box in which you select the number of copies you want. Once the user clicks on the "Add to Cart" button, the chosen book will be added to the cart and then the cart itself will be shown to the user. Now, for the code. Create a PHP document called bookdetails.php and add the following code:

Lets walk through this code line by line, so you can see the logic of it. A book ID is passed by the previous script that will be used by this script to retrieve the book details. The very first line after the tags gets the database connection details:

Now, this is a standard way of getting the database connection credentials to connect to the database server. However, it is full of security risks. Any attacker that gets access to your "home directory" will be able to get his hands on your username and password. Therefore, I would recommend storing this file in a directory that is outside of your home directory or public folder. This way, even if an attacker gets into your public directory, he will not be able to get hold of your database details. Then a couple of variables are initialized; normally you would not need to initialize variables, but in some environments, a warning is issued saying that the variables are not defined or initialized. The next "if()" statement checks to see if a valid book ID was passed:

This is also called filtering data. It basically makes sure that the data is what it is suppose to be, for example, we know that the bookID is numeric, if it is not, then the "is_numeric()" function will catch it and throw an error:

Here, you can also use another method to verify that the bookid is numeric; for example, regex is perfect for this kind of validation. It is very important to verify and validate any data that did not originate from you and that could possibly give an attacker control of your application. The next part of the code assumes that the bookid is numeric and that it has not been tampered with. Because this page deals with displaying all of the details about a book, and the details of all of the books in our database are held in multiple tables, we have to run a couple of queries to retrieve all of the data that is related to this particular book. For example, the authorID is stored in the books table but not the author name(it is stored in the author table), the genreID is stored in the books table but not the genre name(it is stored in the genre table) etc. This is exactly what the code does next. First it cleans the bookId that was sent by using the mysql_real_escape_string() function:

and then runs the first query to retrieve the genre name and author ID:

Once the author ID has been retrieved, it is then used to retrieve the author name, which is stored in the author's table:

Next, we store any errors in the $errormsg variable and close all the tags:

That is all the data we need from the database. Now, all that is left for us to do is to display the book details on the page. We want to display useful information about the book, such as the name of the author, the ISBN number of the book, date of publication and more importantly how much the book costs. It would perhaps be useful to have a field in the books table that has a short description of what the book is about, to entice the user into buying the book. All of this has to be clearly displayed for the user. That is what we will do as you can see from the code below:

As you can see, the table above shows all of the details about the book. I've highlighted the labels so you can see them for yourself. Then last but not least, we have the form that will provide the user with the option of selecting how many copies of the book he wants to buy:

This also includes a hidden field that will send the bookid over to the "addtocart.php" script that we will discuss later:

That concludes the first part of our shopping front application. Next, we are going to look at how to create a shopping cart and how to integrate it into the shop front that we created here.