Demonstrate your ability to create a data-driven PHP page by creating PHP functions and include files so that ch12-proj1.php looks similar to that shown in Figure 12.30. The data needed for this page are in a file named data.inc.php.

Figure 12.30 Completed Project 1

1. Examine the provided HTML file (ch12-proj1.html) that demonstrates what markup your PHP must eventually generate. Examine also the provided data file (data.inc.php) that contains three arrays. You will be modifying ch12-proj1.php (initially it is a copy of ch12-proj1.html) for this project.

2. Move the header and left navigation markup in ch12-proj1.php into two separate include files. Use the PHP include() function to include each of these files back into the original file.

3. In the left navigation area, replace the static list of <li> elements containing the continent names, with a loop that displays the same elements but using the data in the $continents array.

4. Create a function called generateLink() that takes three arguments: $url, $label, and $class, which will echo a properly formed hyperlink in the following form:

   <a href="$url" class="$class">$label</a>

5. In the left navigation area, replace the static list of <li> elements containing the continent names, with a loop that displays the same elements but using the data in the $countries array. Notice that this array is an associative array, so it will require a different type of loop. Use the generateLink() function for the country link. Notice that this link contains a query string making use of the key value of the $countries array.

6. Create a function called outputPostRow() that takes as a single argument a post element (i.e., a single element from the $posts two-dimensional array). This function will echo the necessary markup for a single post. Be sure to also use your generateLink() function for the three links (image, user name, read more) in each post. Notice that these links contain query strings making use of the userId or postId.

7. Create a function that takes one parameter. This parameter will contain a number between (and including) 0 and 5. Your function will output that number of gold star image elements; after that it will also output, however, many white star images so that five stars in total are displayed.

8. Modify your outputPostRow() function so that it calls your star-making function.

9. Remove the existing post markup and replace with a loop that calls outputPostRow().

1. Remember that you cannot simply open a local PHP page in the browser using its open command. Instead you must have the browser request the page from a server. If you are using a local server such as XAMPP, the file must exist within the htdocs folder of the server, and then the request will be localhost/some-path/ch12-proj1.php.

2. Break this problem into smaller steps. After each step, test the page in the browser.

3. Verify that your page works correctly by altering the data in data.inc.php.

Demonstrate your ability to create a data-driven PHP page and to use superglobal arrays.

1. You have been provided with two files: the data entry form (ch12-proj2.php) and the page that will process the form data (art-process.php). Examine both in the browser.

2. Modify ch12-proj21.php so that it uses the POST method and specify art-process.php as the form action.

3. Write a loop that uses the $links array in the data.inc.php to generate the hyperlinks in the header.

4. Define two string arrays, one containing the genres Abstract, Baroque, Gothic, and Renaissance, and the other containing the subjects Animals, Landscape, and People.

5. Write a function that is passed a string array and which returns a string containing each array element within an <option> element. Use this function to output the Genre and Subject <select> lists.

6. Modify art-process.php so that it displays the all the values that were entered into the form, as shown in Figure 12.31. This will require using the appropriate superglobal array.

   Figure 12.31 Completed Project 2

   

   Figure 12.31 Full Alternative Text

1. Test the page. Be sure to verify appropriate error messages are displayed when art-process.php is requested without POST data.

Demonstrate your ability to create a data-driven PHP page, use superglobal data, and to modify HTTP header.

1. Examine ch12-proj3-form.php and view in browser and then the editor. Notice that it contains a <form> using method=get and action=ch12-proj3-result.php. Examine data.inc.php that contains the data for the paintings to be displayed in this form. The ch12-proj3-form.html shows the markup that your code will have to generate.

2. You will implement ch12-proj3-result.php using code similar to that shown in Figure 12.29, except rather than hard-coded font sizes and text labels, you will use the form data passed to it. Examining the form elements in ch12-proj3-form.php will indicate the values to use with the $_GET superglobal array.

3. Implement as well a width query string that, if present, will use the imagescale() function to return an image of the specified width (the height will be the same as the width).

4. You can use this width parameter to generate the thumbnails at the top of ch12-proj3-form.php by adding a loop within the grid-container <section>. Simply loop through the supplied data array, and echo an <img> element with the src attribute set to ch12-proj3-result.php that has a file querystring parameter set to the filename from the data array and a width querystring parameter set to 100. For the supplied JavaScript to work correctly, also set the data-value attribute of the img to the filename also.

5. Generate the options for the <select> list using a PHP loop. Each <option> should have the value set to the filename.

6. When done, the form and the result will look like that shown in Figure 12.32.

   Figure 12.32 Completed Project 3

   

   Figure 12.32 Full Alternative Text

1. Again, break this problem down into smaller steps. The key functionality requires a working ch12-proj3-result.php so steps 2 and 3 will have to be implemented early on.

2. Once your project is working, try saving the generated image file to your computer and then examine it in your operating system. Unlike a JavaScript version of this functionality, this example actually generates an image file containing the text.