Programming Techniques CHAPTER 10 SECTION 1 A DYNAMIC PHOTO - PowerPoint PPT Presentation

Programming Techniques CHAPTER 10

SECTION 1 A DYNAMIC PHOTO GALLERY

OBJECTIVES • Planning the layout of a dynamic gallery • Displaying a fixed number of results in a table row • Limiting the number of records retrieved at a time • Paging through a long set of results

A DESIGN TECHNIQUE • Build a static page • Fill it with placeholder text and images • Replace each placeholder with PHP code one at a time.

EXAMPLE

START WITH A STATIC PAGE You can download this static page from Canvas Demos and Example Files or the Lab 7 assignment. The name is galleryStart.php Rename it gallery.php and follow along with the slides to develop this page yourself.

REVISE Revise the static page to dynamically display: • the thumbnail image • the main image • the caption as alt text Remember to check the HTML source code of the page if something doesn't work.

THE REVISION 1. Connect to the database and execute the query: Adjust this path as necessary according to your own file structure on the server. Remember the config file should be outside of your public_html directory 2. Replace the hard-coded filename with PHP: 3. As of PHP 7, you can use the equivalent shortcut instead: 4. Do the same for the alt attribute using $row['caption']

ADD A LOOP TO DISPLAY ALL OF THE THUMBS Right here we are constructing an HTML $pos will be used image element with the various filenames later and could be and captions from the database omitted here. A do..while loop is used because we have already retrieved the first result. We need to display the first image before fetching the next image. Thus the body of the loop must execute at least once which implies do…while

ADD A LOOP TO DISPLAY ALL OF THE THUMBS The next step is to force a new table row when $pos is the number of columns desired

CREATE THE TABLE OF THUMBS A dynamic site should handle changing database parameters such as the number of images being stored/displayed: • Decide on a default table size (ours will be 2 columns, 3 rows) • Declare those dimensions as constants somewhere near the top of the page:

MAKING THE NEW <TR> If COLS is 2, when $pos becomes 2, you want to end the row, begin a new row and reset the position counter ($pos) Close the last table row

PAGINATION • This has to do with how many thumbnail images you want to display per page. • This comes directly from the constants COLS and ROWS • You can add in the calculation right after the constants are declared near the top:

PAGINATION The next step is to determine how many images there are in the database: Add this line to the existing query

PAGINATION • If there are many images to display, we might have several pages of thumbnails which the user may or may not choose to display. • To that end, write a query to retrieve the filenames of only the ones you currently need. • The MySQL keyword LIMIT does exactly that: SELECT * FROM tbl LIMIT 0, 6

PAGINATION SELECT * FROM tbl LIMIT 0, 6 The first number after LIMIT is the offset from the first row of records: 0 is the first row; 1 is offset 1 or row 2 The second number is how many records to retrieve in total. The above example will retrieve 6 rows beginning with the first row in the table

PAGINATION SELECT * FROM tbl LIMIT 0, 6 Another way to think about this is to assume counting starts at 0, so 0 is the first row, 1 is the second row, and n is the (n+1)th row. The above example will still retrieve 6 rows beginning with the first row in the table

PAGINATION The PHP for the first page: This would be placed somewhere after $startNum and $imgPerPage are assigned.

PAGINATION • The existing do…while loop should handle this reduced set of records correctly, without modifications. • Next, you need to determine if there are more records to display. • If so, there needs to be a link to the next page of results:

PAGINATION • Once the user is on a page other than page 1, a link to the previous set of images should show: • This will be done by adding a row to the end of the table depending on the page number as follows: • If the page number is 2 or higher display the <prev link in the first cell. Otherwise display an empty first cell. • If there are more images to display, the last cell of the row should display the next> link. Otherwise display an empty last cell.

HOW DO THOSE LINKS WORK? To implement the <prev and next> links, make an HTML hyperlink to the same page but add something tricky… Remember what a query string is? It's the data that get appended to the URL when a form is submitted using the GET method. It might look something like: gallery.php?page=2 Well you can make your own query string to send data to a page and retrieve it the same way!

PAGINATION The PHP (after the last row of thumbnails closes): HTML character entity codes for < and >

PAGINATION Check out how that works: https://satoshi.cis.uncw.edu/~mferner/CSC465/JJ/gallery.php Click the next> link and look at the query string in the URL. That's not coming from a form. It's coming from the query string created in the PHP hyperlink tag.

PAGINATION So, then what you do is handle it the same way you would with form data. At the top of the page, just after you calculate $imgPerPage , add the following (explanation on next slide):

PAGINATION The first time the page is called, there's no query string, so we want to display page #1 beginning with 0 offset ($startNum) in the query LIMIT ($imgCounter will be used in the line of text "Displaying 1 to 6 of 8" or "Displaying 7 to 8 of 8".) Suppose $page is 2, and $imgPerPage is 6, the query offset should be 6 (because page 1 displayed images 0-5) and the "Displaying" text should be 7 to… Since $startNum is being set in the if/else statement, delete the later line which initializes it to zero.

PAGINATION Suppose instead of 8 images, there are 14 in the database. That would require a second page with the text: " Displaying 7 to 12 of 14 " The 7 is $imgCounter discussed previous slide. The 14 is $numImages which was determined from the database query.

PAGINATION " Displaying 7 to 12 of 14 " $startNum To calculate whether the 12 should simply be ((7-1)+6) or, as on the last page in the original example, "Displaying 7 to 8 of 8", determine if there are more images than $imgPerPage * $page :

PAGINATION And finally:

MAKE THE THUMBNAILS CLICKABLE When a user clicks on a thumbnail image on the page, it should be displayed as the main image on the page. The default image will be the first image retrieved from the current set of image names for the current name. Again, test this out at: https://satoshi.cis.uncw.edu/~mferner/CSC465/JJ/gallery.php

MAKE THE THUMBNAILS CLICKABLE • Using the same technique as determining the page, when the user clicks a thumbnail image, the page needs to be re-loaded with the given main image. • This can come from the query string as constructed at the thumbnails' hyperlink • But note also that we need to know the current page number so that we know which set of thumbnails to display on the new page.

MAKE THE THUMBNAILS CLICKABLE • Make the following modifications to the thumbnails' display so that the resulting URL would be something like: … gallery.php?mainImage=maiko.jpg&page=1

MAKE THE THUMBNAILS CLICKABLE Then to process the newly requested page (near the end of the processing section: Note that the caption isn't carried in the URL. It would be cumbersome and might not encode correctly, so it won't be determined here.

MAKE THE THUMBNAILS CLICKABLE To determine the right caption to put with $mainImage , just add a test to the do…while loop to grab the caption if the thumbnail being displayed is the same as $mainImage:

MAKING THE NEW <TR> But what if we ran out of images and have an incomplete row?

CLEANING UP To make sure each table row has the same number of cells (best practice HTML), make the following two changes: 1. Just after the do…while loop ends (and before the closing </tr> add:

CLEANING UP The navigation row (<prev and next> links) is also part of the table. 2. In between the output for the first cell and the output for the second cell (both are if/else statements) add:

LAST STEP Use the variables $mainImage and $caption (for the alt text and for the figcaption) in the figure element at the bottom of the page. Also remove the hard-coded length and width attributes because not all of the images are that size. This will display them at their original dimensions without distortion.

SUMMARY (1) Dynamic page development: • Start with a static page. • Implement one feature at a time and test. • Look at the rendered HTML source code to troubleshoot (Ctrl-U) in the browser.

SUMMARY (2) The MySQL keyword LIMIT can restrict the number of rows returned in a query result: SELECT * FROM tbl WHERE cond LIMIT offset , number

SUMMARY (3) Hyperlinks and query strings: • PHP can be used to construct 'generic' HTML tags including clickable links and constructed query strings • The data in a query string is retrievable with $_GET[ ] just like with a form submission