Bringing in more Gallery Items to the Browser, using PHP and MySQL

Conventional Web Development with PHP and MySQL – Part 8

Forward: In this part of the series, we look at the coding to bring in more items of the bookshop from the MySQL database to the browser using PHP.

By: Chrysanthus Date Published: 2 Aug 2012

Introduction

This is part 8 of my Series, Conventional Web Development with PHP and MySQL. I assume you have read the previous part of the series before reaching here. This is a continuation. In this part of the series, we look at the coding to bring in more items of the bookshop from the MySQL database to the browser using PHP. We shall first see how the coding of the items (images and corresponding text) is done at the web page.

Coding of Items at the Browser
In one of the previous parts of the series, I said that there would be 4 hard coded book items in the books page. I also said that there would be 4 hard coded pen items in the pens page. This is how it should be in order to make the site search engine friendly. The items hard coded on a page, are the first 4 items in a category of the products table.

Here is the table code for the bookshop page.

    <table id="B1">
        <tbody>
            <tr><td><img src='itemsDir/BookA.jpg' onclick="openWin(0)"><br>Book A Title<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookB.jpg' onclick="openWin(1)"><br>Book B Title<br>This book written by ... published by ... year... explains ...</td></tr>
            <tr><td><img src='itemsDir/BookC.jpg' onclick="openWin(2)"><br>Book C Title<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookD.jpg' onclick="openWin(3)"><br>Book D Title<br>This book written by ... published by ... year... explains ...</td></tr>
        </tbody>
    </table>

The table for the pens is similar. I have added more code here than the one you saw in one of the previous parts of the series. The table now has an ID (we shall see its use soon). Each image in a cell has the onclick event. The onclick event attribute calls a function, passing a number as argument. The left-top cell has the index number 0, the right-top cell has the index number 1; the left-bottom cell has the index number 2 and the right-bottom cell has the index number 3. These numbers correspond to the numbers in an array that holds the item details (explanation) at the browser web page. Remember, an item has a name (title in the case of a book), a short summary and explanation. The explanation is the detail. The explanation for each item is in the cell of the array. You, the coder, has to type out this array, and feed it with the explanations (details).

In the above table, you have the name of item, and short summary for the item. The following ECMAScript can be used to create the array and feed it with data at the web page:

<script type="text/ECMAScript">

    itemArr = new Array();
    itemArr.push("Details 0…", "Details 1…", "Details 2…", "Details 3…");

</script>

The array variable is at the global level. This ECMAScript has to be hard coded. The push method will actually be something like:

    itemArr.push("Details 0…", "Details 1…", "Details 2…", "Details 3…", "dummy" );

The last cell value will not be used at the browser. It is there to make the coding of the corresponding PHP file simple (see below).

The onclick Event
The function called by the onclick event is, openWin(0). The function opens a new window, displaying the image that was clicked at its full size. The window also displays the name of the item, the short summary of the item and the explanation (details) of the item. The name and short summary of the item are taken from the corresponding cell of the table. The explanation is taken from the array.

The open window will have an input number control, where the user can type in the number of the particular item he wants. The opened window will also have two buttons: One button would send the user’s decision of buying the item to the shopping cart; the other button will cancel the operation of choosing and buying the item. We shall see how this window is coded later in the series.

Images
The style sheet of the books or pens page has the following line:

img {width:200px;height:200px}

This line forces any image in its page to be 200px X 200px. The images are actually 400px X 400px. So, if an image tag is copied to the opened window, it will appear at its normal (big) 400px X 400px size. The opened window does not have any style sheet. In practice, the size in the books and pens page may be, 100px;height:100px.

The More Hyperlink
Below the table that has the items for sale, is this hyperlink:

<a href= "more.php?maxNum=4"><strong>More . . .</strong></a>

When this hyperlink is clicked, the PHP file named, “more.php” at the web server is executed (called). This file will read 4 more items from the database and send them in a new web page document to the browser. As seen from the href value above, this PHP file at the server, receives the number,4, as the $_GET['maxNum'] value of the supperglobal $_GET array. This number is the maximum position item number on an item (books or pen) web page. At the moment it is 4 because the number of items is 4. When the new page has been received at the browser, this number would be 8 (i.e. 4+4), but the page will display only the 4 new items. If there were more than 8 category items in the database, then the next number would be 12 (8+4). The items are sent from the server to the browser in groups of 4. In a commercial project it should be at least, groups of 16. In order for the “more.php” script to know the next category item number from which it should pull the next 4 items from the database, it adds 1 to the number of the href value (i.e. $_GET['maxNum']) above. We shall see how the number in the href value is determined, shortly.

You should now modify the “books.htm” and “pens.htm” files with the above table and above hyperlink (copy and paste).

What is sent back to the Browser
When the More hyperlink in the web page is clicked, the “more.php” file in the web server is executed (called). The function of the file is to send the next 4 items in the category from the products table to the browser, in a new page. We see how this is done in this part of the series.

Now, the web page sent to the browser needs to have the features of the items page (books or pens page). The things that change are the page title and the data; the “more.php” file is responsible for sending the new books page or the new pens page, to the browser. This PHP file has to send the document to the browser in 5 portions. The first portion is code for the items page (books.htm or pens.htm), from the top to the title. After that the file should send the “Books in University Bookshop” or “Pens in University Bookshop” title text; that is the second portion. Then the PHP file should send the code beginning from the title to the items table top; that is the third portion. After that it sends the fourth portion, which is the data from the database. These data will be displayed as the 4 items (images and text). Then it sends the last (fifth) portion, which is code from the items table, to end of page (</html>). The PHP file does all this, for the books page or the pens page.

This PHP file actually builds a books page or pens page. However, what it sends is PHP page and not an HTML page, even thought all the code sent to the browser, ends up as HTML code. When this is done, at the browser, if you look in the address bar, you would notice that the extension of the file of the page displayed is, php (and not htm or html). Such a page never existed and had to be created by the PHP script (file) at the server. Such a page cannot be seen by search engines.

Now, in order for the PHP file to know whether it is to send the books title and books data or the pens title and pens data, you have to modify the hyperlink in the item page. If the items page is “books.htm” then the hyperlink would be:

    <a href= "more.php?maxNum=4&category=books"><strong>More . . .</strong></a>

Note the new value (books) of the href attribute. If the items page is “pens.htm” then the hyperlink would be:

    <a href= "more.php?maxNum=4&category=pens"><strong>More . . .</strong></a>

Note the new value (pens) of the href arratibute.

The first code segment of the PHP file will also have to be modified to:

    $maxNum = $_GET['maxNum'];
    $category = $_GET['category'];

Down in the PHP script (file), $category, will be used to determine if the request came from the books web page or the pens web page. If the value of $category is “books” then the books title and data will be sent back; if the value of $category is “pens” then the pens title and data will be sent back.

Unfortunately, I will not code this conditional (if books or pens) in this project. In this simple pedagogic project, I assume that the hyperlink in the items page is for the books page. So the coding in this article does not take the conditional into consideration at any level or situation.

To send any page to the browser, you just have to use the PHP echo construct (function) a number of times. From the same PHP file (script), all the echo constructs send their strings to the same new page at the browser, automatically. Remember, each echo string should be delimited by double quotes ("). Any double quote inside the string, in the PHP file, has to be escaped, like so: " . At the browser, the escaped double quotes arrive un-escaped, and there, they serve their HTML, CSS and ECMASript purposes.

The more.php File
At this point I should make a distinction between the PHP file at the server and the PHP file displayed at the browser: The PHP file at the server is a PHP script, which you can also call a PHP program. The PHP file displayed at the browser, is produced by the PHP script at the server. The one displayed at the browser is not found in any disk, while the one in the server is always in a disk (saved) and called (executed) only when needed. For the situation here, when the More hyperlink in the web page is clicked, the more.php file in the web server is executed (called). The function of the file is to send the next 4 items in the category from the products table to the browser in a new page. We now look at the content of the file:

The first code segment is:

<?php

$maxNum = $_GET['maxNum'];

The maximum index number is copied from the $_GET array to the variable, $maxNum. Since it is possible to use the $_GET['maxNum'] directly down in the code, you can avoid this line. However, it is not very convenient to use the $_GET['name'] or $_POST['name'] directly, so it is always good to type this line, and then use the return variable down in the code.

After that the PHP file logs into the server as root. The aim of this file is to read data from the products table, built a web document with the data and send the new page to the browser. It is not only the root account that can do this, any account that has the SELECT privilege for the Products table can do this. In practice, it is not good to use the root account for this purpose or use the root account arbitrarily; so you should create an account that does not belong to anybody, but has the SELECT privilege for the Products table. Under this condition, the user will not even need to log into the website (database) before he sees more items. Note: I use the root account here because this is a pedagogic exercise.

Next in the code, the link identifier is checked if the connection was successful. If the connection was not made, an error message is sent to the browser. If the connection was made, then the else block of the if-statement is executed. All the code to retrieve data from the Products table and to prepare the web document and send to the browser is in the else block. The following is the second code segment just mentioned; it ends at the beginning of the else block:

    $link = mysql_connect('localhost', 'root', 'psswrd');
    if (!$link)
        {
            echo "<body><h3>Connection could not be made with the server! Try again later.</h3></body>";
        }
    else
        {

Remember, the PHP file of this article assumes that the request from the browser is for the books data. In this file, no particular condition will be respected to show that we are dealing with books. So, the PHP file of this article will send 3 portions to the browser and not 5, as you would expect in a commercial project. Do not confuse between the portions sent to the browser and the code segments of the file. A code segment is like a small module that performs a particular task. A portion in this article is a piece of code (larger) in the form of a string, sent to the browser.

The third code segment is:

            echo "<!DOCTYPE HTML>
<html>
<head>
    <title>Books in University Bookshop</title>
    <style type="text/css">
        img {width:200px;height:200px}
    </style>
</head>
<body>
<header>
<h1>University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm'

id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>

    <table id="B1">
        <tbody>";

This third code segment, which happens to be the first portion sent to the browser, is an echo statement. The string in the echo statement is the top part of the “books.htm” page. It includes the title tag of the page. All of it (top part) is in a string delimited by double quotes. Note that any double quote inside the string has been escaped. At the browser, they will be normal double quotes without the escaping backslash, and they will serve their purpose.

The fourth code segment is:

            //select data, format data with HTML tags and send to browser
            mysql_select_db('Bookshop', $link);
            $startCategoryItemNo = $maxNum + 1;
            $endCategoryItemNo = $maxNum + 4;
            $explanation;
            $productsSlct = "select productName, price, imageFileName, imageDir, shortSummary, explanation FROM Products WHERE category="Book" AND categoryItemNo >= "$startCategoryItemNo" AND categoryItemNo <= "$endCategoryItemNo"";
            $result = mysql_query($productsSlct, $link);
            $loopCounter = 1;
            while ($row = mysql_fetch_assoc($result))
                {
                    $openWinNum = $loopCounter - 1;

                    if (($loopCounter % 2) == 1)
                     {
                            echo "<tr><td><img src=";
                            echo """ . $row["imageDir"] . "/" . $row["imageFileName"] . """;
                            echo " onclick="openWin($openWinNum)"><br>";
                            echo $row["productName"] . " Price: $" . $row["price"] . "<br>";
                            echo $row["shortSummary"] . "<br>";

                            $explanation .= """ . $row["explanation"] . "",";

                            echo "</td>";
                        }
                    else
                        {
                            echo "<td><img src=";
                            echo """ . $row["imageDir"] . "/" . $row["imageFileName"] . """;
                            echo " onclick="openWin($openWinNum)"><br>";
                            echo $row["productName"] . " Price: $" . $row["price"] . "<br>";
                            echo $row["shortSummary"] . "<br>";

                            $explanation .= """ . $row["explanation"] . "",";

                            echo "</td></tr>";
                     }

                    $loopCounter += 1;
                }

            $explanation .= ""dummy"";

To understand this code segment you have to remember the following: Items of the category are got from the database in groups of 4. The explanation (details) column data of the products table are also gotten. This explanation data has to be joined into a string to be used as argument for the ECMAScript push array method. Also remember that the items of each category in the Products table are numbered with integers, from 1 upward.

In the segment, the database is selected; the start and end integers for the items in the category are determined; the variable for the explanation column data is declared; the SELECT string is formed and executed; the while loop counter variable is declared and initialized with 1; then you have the while loop.

Remember, at the browser the first item retrieved is placed at the left-top of the items table; the second, at right-top; the third at the left-bottom and the fourth at the right-bottom. At the browser, the first item is given the index, 0 (not 1); the second is given the index, 1; third, 2, and fourth, 3. These indices correspond to the indices of an ECMAScript array that has the corresponding explanations (details) for the items (one explanation in one array cell).

The while loop has two sub segments. The first one sends the items that will be displayed on the left in the table at the browser. The second sends the items that will be displayed on the right.

The counter is used to determine the item index for the openWin() function call in each image tag. It is also used to determine which item will be displayed on the left and which will be displayed on the right. Remember, the modulus (%) operator returns the remainder of a division; if the divisor is 2, then the return value will either be 0 or 1. In the code, the return value of 1, sends items to the left and the value of 0 sends them to the right.

After the while loop in the code, the explanation variable is added the piece of string, “dummy”. The explanation variable has all the explanations of the 4 items as a string, with “dummy” at its end. In the formation of the string a comma is added after each explanation (value). The push method of ECMA array does not accept a string with a comma at its end. Commas can be within the string (overall argument) but not at the end. When the  “dummy” is added to the end of the string, as indicated above, there is no comma at the end of the overall explanation string. Read the fourth code segment again to properly understand how it operates.

The above code segment sends the second portion to the browser.

The fifth code segment is:

            //sendt the last portion
            echo "        </tbody>
    </table>

    <a href= "more.php?maxNum=$endCategoryItemNo"><strong>More . . .</strong></a>

<script type="text/ECMAScript">

    itemsArr = new Array();
    itemsArr.push($explanation);

</script>

</article>

<script type="text/ecmascript">
    if (sessionStorage.login == "login")
      {
         document.getElementById('login').href = "logout.htm";
         document.getElementById('login').textContent = "Logout";
      }
</script>

</body>
</html>";

        }

    mysql_close($link);

?>

This code segment sends the third and last portion to the browser. This last portion produces the bottom of the HTML document. The code segment is essentially one echo statement. Inside the echo string, you have the ECMAScript items array that will be formed, when the string reaches the browser. The string also has the variables,  $endCategoryItemNo and $explanation, which expand (are replaced) to their values. This last code segment brings us to the end of this part of the series. Remember, you can join the code segments to form a file.

We have had a long ride for this article. We really have to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Bringing in more Gallery Items to the Browser, using PHP and MySQL

Conventional Web Development with PHP and MySQL – Part 8

Introduction

Related Links

Comments