PHP SOLUTIONS: DYNAMIC WEB DESIGN MADE EASY 8. Save the page and reload it in your browser. This time, when you click a thumbnail, the main image and caption will change. Check your code, if necessary, against gallery_mysql05.php, gallery_mysqli05.php, or gallery_pdo05.php. Passing information through a query string like this is an important aspect of working with PHP and database results. Although form information is normally passed through the $_POST array, the $_GET array is frequently used to pass details of a record that you want to display, update, or delete. Like the $_POST array, the $_GET array automatically inserts backslashes if magic quotes are turned on in php.ini. Since only the filename is being passed through the query string, there s no need to use the nukeMagicQuotes() function from Chapter 3 because quotes are illegal in filenames. That s one reason I didn t pass the caption through the query string. Getting it directly from the database avoids the problem of handling backslashes. Creating a multicolumn table With only eight images, the single row of thumbnails across the top of the gallery doesn t look too bad. However, it s useful to be able to build a table dynamically with a loop that inserts a specific number of table cells in a row before moving to the next row. You do this by keeping count of how many cells have been inserted. When you get to the limit for the row, check whether any more rows are needed. If so, insert a closing tag for the current row and an opening tag for the next one. What makes it easy to implement is the modulo operator, %, which returns the remainder of a division. This is how it works. Let s say you want two cells in each row. When the first cell is inserted, the counter is set to 1. If you divide 1 by 2 with the modulo operator (1%2), the result is 1. When the next cell is inserted, the counter is increased to 2. The result of 2%2 is 0. The next cell produces this calculation: 3%2, which results in 1; but the fourth cell produces 4%2, which is again 0. So, every time that the calculation results in 0, you know or to be more exact, PHP knows you re at the end of a row. So how do you know if there are any more rows left? Each time you iterate through the loop, you extract the next record into an array called $row. By using is_array(), you can check whether $row contains the next result. If it does, you add the tags for the next row. If is_array($row) is false, you ve run out of records in the result set. Phew . . . let s try it. PHP Solution 12-3: Looping horizontally and vertically Continue working with the files from the preceding section. Alternatively, use gallery_mysql05.php, gallery_mysqli05.php, or gallery_pdo05.php. 1. You may decide at a later stage that you want to change the number of columns in the table, so it s a good idea to create a constant at the top of the script, where it s easy to find, rather than burying the figures deep in your code. Insert the following code just before the database connection: // define number of columns in table define(’COLS’, 2);
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

CREATING A DYNAMIC ONLINE GALLERY 6. Clicking the thumbnails still doesn t do anything, so you need to create the logic that changes the main image and its associated caption. Locate this section of code in the block above the DOCTYPE declaration: // get the name and caption for the main image $mainImage = $row[’filename’]; $caption = $row[’caption’]; Highlight the line that defines $caption, and cut it to your clipboard. Wrap the other line in a conditional statement like this: // get the name for the main image if (isset($_GET[’image’])) { $mainImage = $_GET[’image’]; } else { $mainImage = $row[’filename’]; } The $_GET array contains values passed through a query string, so if $_GET[’image’] has been set (defined), it takes the filename from the query string and stores it as $mainImage. If $_GET[’image’] doesn t exist, the value is taken from the first record in the result set as before. 7. You finally need to get the caption for the main image. It s no longer going to be the same every time, so you need to move it to the loop that displays the thumbnails. It goes right after the opening curly brace of the loop. Position your cursor after the brace and insert a couple of lines, and then paste the caption definition that you cut in the previous step. You want the caption to match the main image, so if the current record s filename is the same as $mainImage, that s the one you re after. Wrap the code that you have just pasted in a conditional statement like this: 329
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

PHP SOLUTIONS: DYNAMIC WEB DESIGN MADE EASY 3. To show all the thumbnails, you need to wrap the table cell in a loop. Insert a new line after the XHTML comment about repeating the row, and create the first half of a do… while loop like this (see Chapter 3 for details of the different types of loops): 4. You already have the details of the first record in the result set, so the code to get subsequent records needs to go after the closing

tag. Create some space between the closing

and

tags, and insert the following code. It s slightly different for each method of database connection. For the MySQL original extensions, use this:

For the MySQL Improved object-oriented interface, use this:

fetch_assoc(); } while ($row); ?>

For PDO, use this:

fetch(); } while ($row); ?>

This fetches the next row in the result set and sends the loop back to the top. Because $row[’filename’] and $row[’caption’] have different values, the next thumbnail and its associated alt text are inserted into a new table cell. The query string is also updated with the new filename. 5. Save the page, and test it in a browser. You should now see all eight thumbnails in a single row across the top of the gallery, as shown at the top of the next page. Hover your mouse pointer over each thumbnail, and you should see the query string display the name of the file. You can check your code against gallery_mysql04.php, gallery_mysqli04.php, or gallery_pdo04.php.
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

CREATING A DYNAMIC ONLINE GALLERY them (we ll work out how to display them in rows of two later). Activating the link for each thumbnail requires a little more thought. You need a way of telling the page which large image to display. Passing information through a query string In the last section, you used $mainImage to identify the large image, so you need a way of changing its value whenever a thumbnail is clicked. The answer is to add the image s filename to a query string at the end of the URL in the link like this: You can then check whether the $_GET array contains an element called image. If it does, change the value of $mainImage. If it doesn t, leave $mainImage as the filename from the first record in the result set. Time to dive back into the code . . . PHP Solution 12-2: Activating the thumbnails Continue working with the same file as in the previous section. Alternatively, use gallery_mysql03.php, gallery_mysqli03.php, or gallery_pdo03.php from the download files. 1. Locate the tag surrounding the thumbnail. It looks like this: Change it like this: MySQL5 Web Hosting services.

PHP SOLUTIONS: DYNAMIC WEB DESIGN MADE EASY $mainImage and $caption. You ll see later why I ve assigned the values from the first record to separate variables. Amend the code in the table like this: .

web and email hosting services if you need stable and cheap web hosting platform for your web applications.

CREATING A DYNAMIC ONLINE GALLERY 4. The code for submitting the query and extracting the first record from the result depends on which method of connection you are using. For the original MySQL functions, use this: // submit the query $result = mysql_query($sql) or die(mysql_error()); // extract the first record as an array $row = mysql_fetch_assoc($result); For MySQL Improved, use this: // submit the query $result = $conn->query($sql) or die(mysqli_error()); // extract the first record as an array $row = $result->fetch_assoc(); For PDO, use this: // submit the query $result = $conn->query($sql); // get any error messages $error = $conn->errorInfo(); if (isset($error[2])) die($error[2]); // extract the first record as an array $row = $result->fetch(); The code for the original MySQL extension and MySQL Improved is exactly the same as you used in the previous chapter. The PDO code, however, introduces a new method, fetch(), which gets the next record from the result set. You can t use a foreach loop like in the previous chapter, because you need to get the first result on its own. 5. All three methods now have the first record from the result set stored as an array in $row. This means that $row[’image_id’] contains the primary key of the first record, $row[’filename’] contains its filename, and $row[’caption’] contains its caption. You need the filename, caption, and the dimensions of the large version so that you can display the images in the main body of the page. Add the following code: // get the name and caption for the main image $mainImage = $row[’filename’]; $caption = $row[’caption’]; // get the dimensions of the main image $imageSize = getimagesize(’images/’.$mainImage); The getimagesize() function was described in Chapters 4 and 8. 6. You can now use this information to display the thumbnail, main image, and its caption dynamically. The main image and thumbnail have the same name, but you eventually want to display all thumbnails by looping through the full result set, so the dynamic code that needs to go in the table cell needs to refer to the current record in other words, $row[’filename’] and $row[’caption’], rather than to 325
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

PHP SOLUTIONS: DYNAMIC WEB DESIGN MADE EASY Figure 12-4. The stripped-down version of the static gallery ready for conversion 2. The gallery depends entirely on a successful connection to the database, so the first thing you need to do is include connection.inc.php. Add the following code just before the closing PHP tag above the DOCTYPE declaration in gallery.php (new code is highlighted in bold): Remember, connection.inc.php needs to be the correct version for the way you plan to connect to MySQL using the original MySQL extension, the MySQL Improved object-oriented interface, or PDO. The include command for the connection script is used as the condition for an if statement. The condition also uses the negative operator (an exclamation mark) and the error control operator (@). If the connection script is included successfully, the code inside the if statement is ignored; but if the file can t be found, a custom error message is displayed, and the rest of the script is abandoned. In a live application, you would probably redirect visitors to a custom error page. 3. Connect to the database by calling the dbConnect() function in the include file, and prepare the SQL query ready to submit it. The gallery needs only SELECT privileges for the database, so pass query as the argument to dbConnect() like this (the code for steps 3 to 5 goes immediately before the closing PHP tag): // create a connection to MySQL $conn = dbConnect(’query’); // prepare SQL to retrieve image details $sql = ‘SELECT * FROM images’;
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

CREATING A DYNAMIC ONLINE GALLERY elements that need to be converted to PHP code highlighted in bold (you can find the code in gallery01.php in the download files for this chapter):

Images of Japan

Displaying 1 to 6 of 8

Water basin at Ryoanji temple, Kyoto

Converting the gallery elements to PHP Before you can display the contents of the gallery, you need to connect to the phpsolutions database and retrieve all the records stored in the images table. The procedure for doing so is the same as in the previous chapter, using the following simple SQL query: SELECT * FROM images You can then use the first record to display the first image and its associated caption and thumbnail. PHP Solution 12-1: Displaying the first image If you set up the Japan Journey website in Chapter 4, you can work directly with the original gallery.php. Alternatively, use gallery01.php from the download files for this chapter. You also need to copy title.inc.php, menu.inc.php, and footer.inc.php to the includes folder of the phpsolutions site. 1. Load gallery.php into a browser to make sure that it displays correctly. The maincontent part of the page should look like Figure 12-4, with one thumbnail image and a larger version of the same image. 323
If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.

PHP SOLUTIONS: DYNAMIC WEB DESIGN MADE EASY Figure 12-2. Working out what needs to be done to convert a static gallery to a dynamic one Figure 12-3 shows the framework I created to hold the gallery together. The table of thumbnails and the main_image