Building the First Page
The first page that you will build is the browse page, browse.php
. The easiest way to do this is to use an HTML designer like FrontPage or DreamWeaver to design a template HTML page that has the layout and details of the page. Browse.htm
, which can be found in the source code
for this article, was designed like this, and can be seen in Figure 4
. You can then take this HTML and turn it into a PHP page by changing the file extension to .php
, and adding the code to drive this page from a database.
If you look under the hood of this page, you will see that it has four tables.
The first table is at the top of the page with Team 1, Team 2, and Team 3 as columns. For the PHP, you will want to write X number of columns where X is the total number of categories, and the contents of each column will be the text associated with that category. Finally, you will want that text to link back to this page, passing the ID of the category to the page so that the rest of the page will display the products in that category. Take a look at the PHP/HTML mixture that achieves this:
<table border="1" width="100%" id="table1" class="ms-color2-main">
$sql = "SELECT * from Categories";
$result = @mysql_query($sql);
while ($row = mysql_fetch_array($result))
<a href='browse.php?id=<?php echo($row['id']) ?>'>
<?php echo($row['description']) ?></a>
As you can see, the code is quite straightforward. You first output the <TABLE> in html, and then the <TR> (table row). You then kick into PHP and run a query of all categories. Iterating through the results of this query, you then output the <TD> (table column), embedding the contents of each record in turn within this TD. You want to embed two things: first, the ID, so that the URL link will read browse.php?ID=X
where X is the ID of the current record. Second is the text within the TD, which you should set to the description of the current record.
The other three tables on the template page are three examples of how the product details would be rendered. The real ones will be generated using an iteration through the products of that category within the database.
The code for this is in Listing 1.
|Figure 4. The Basic Layout: the Browse Page: This shows the basic layout for the browse page.|
This may look a little difficult to read, but once you understand the HTML that constructed the template table you will see that it is quite straightforward. It simply queries the DB for the full list of products within the specific category, and then, looping through each one outputs a table with the picture, description and price details. It also has some logic to calculate the shipping cost based on the weight, and if the product is currently out of stock, it doesn't give a link to buy that product. You can see this screen in action in Figure 5. You may notice that the teams I have used in this example are fictitious, so no pictures of their jerseys are available, and the pictures in the sample come from other teams.
The following SQL shows an example of SQL that searches the DB for products that match the word 'Green.'
( ( Upper(`description`) like '%GREEN%') OR ( Upper(`detail`) like '%GREEN%'))
Looking back at the home page of the Web site, you will see that the form submits a text field called T1K
to the search page. Your search PHP will then take this as a $_POST
parameter, and can build the query from it as shown in below:
$SearchParam = strtoupper($_POST['T1']);
$SearchParam = "";
$sql = "SELECT * FROM PRODUCTS where ((Upper(`description`) like '%" . $SearchParam;
$sql = $sql . "%') OR (Upper(`detail`) like '%" . $SearchParam . "%'))";
$result = @mysql_query($sql);
From here, the rest proceeds exactly like the browse screen (Listing 1
) to produce identical results (Figure 5
Buying the Product with PayPal
In Figure 5, you saw 'Buy It Now' links on products that were in stock. Clicking these will take you to a PayPal payment page. You could have populated this screen with the PayPal buttons, and on a live site that would be a good idea to prevent another click. For simplicity of code, this example separates the PayPal button generation onto a separate PHP page called buyit.php.
PayPal uses a Forms submission mechanism to process payments. All you have to do is put a form on your Web site that links to their site to send the payment to you. An example of a PayPal form that sends $75.00 to a PayPal account called 'email@example.com':
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="firstname.lastname@example.org">
<input type="hidden" name="item_name" value="THE PRODUCT NAME">
<input type="hidden" name="item_number" value="THE PRODUCT ID">
<input type="hidden" name="amount" value="THE VALUE">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but23.gif"
border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
|Figure 5. Product Browsing in Action: This shows how the code in Listing 1 will look.|
Therefore, if you write a PHP page that generates this HTML, preloaded for the product ID, your PayPal e-mail address and relevant pricing, you can sell your goods online. If you remember back to the browse/search pages, they gave a hyperlink to buyit.php?id=X where X depends on which product you link. Using this information, you can query the DB for the details of X, and generate the correct button (see Listing 2).
It would be much more efficient and user friendly if this code was part of browse.php and search.php, embedding the PayPal button on the search results instead of having another click. It was separated here for readability only.
A user now clicking on this button will be taken through the workflow of PayPal to send you their hard earned money.
The next steps could be to use the Instant Payment Notification scheme on PayPal to detect that the payment has been received, and as the ID of the product is known, this could call your shipping service to note that the goods need to be shipped to the buyer as well as automatically removing the inventory levels for the purchased products.
This article hopefully gave you a good start into building your own online store, loading it with products and making those products browseable and searchable by your customers as well as offering a methodology whereby they can pay you for those products! Have fun, and happy selling!