Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex03.php

Exercise 3: Page Templates with PHP Includes


Resources for this exercise:


In this exercise you will follow the directions in the How to Create a Web Page Template Using PHP Includes tutorial to create a template that uses three PHP include files for a head, navigation bar, and foot. The mantra for working with include files, and for this exercise, is "work backwards." In other words, code the entire page and CSS, upload, test, and validate — and then, after you have fixed all errors, split the file into included files.

You should read through the entire tutorial, and through this exercise, before you begin to do it.

Note: As with all exercises, keep the files of this exercise (include files and stylesheets) completely separate from the files of previous exercises!


1) Create a Web page for exercise 3. Because this Web page will use PHP, when you save this file, the file name must have a ".php" extention. This should be a complete Web page, including several navigation links. If you already have such a page (perhaps your home page for this class) you can start with that code as the basis for your new exercise 3 page.

Note that you should save your exercise 3 page as "template.php". This will make it easier for you to follow the tutorial. You may choose to rename it "exercise3.php" when finished.

2) This page must contain the HTML 5 DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators).

3) This page must contain the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

4) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

5) This page's <title> must indicate that this is your exercise 3 page, so it should say something like "John Sky's DM62 Exercise 3". (Eventually this text should not wind up in one of the include files, because this is content unique to this particular page.)

6) This page must display your name.

7) This page must display "DM62 Exercise 3". (Eventually this text should not wind up in one of the include files, because this is content unique to this particular page.)

8) This page must include a link to an external style sheet. The style sheet must live in a directory called "css" in the root of your public_html directory.

9) This page must indicate the name of the text editor used to do this exercise.

10) The mantra for working with included files, and for this exercise, is "work backwards." In other words, code the entire page and CSS, upload, test, and validate — and then, after you have fixed all errors, split the file into included files. Do not split the file into includes until you have uploaded and tested this complete page, and fixed all validation errors.

11) Now follow the directions in the How to Create a Web Page Template Using PHP Includes tutorial to split this page up into a minimum of three include files (in addition to the three main includes, you will have a nested include, as indicated in step 15).

When following the tutorial, remember that you will be uploading your include files into your "includes" directory, so make your paths accordingly. This means that you must have a directory called "includes" in the root of your public_html directory.

Although you may wish to follow this tutorial very closely, do not simply copy and paste the exact code from the tutorial; that is simply sample code so that you can see how includes work. You must make your own customized page.

12) The link to an external stylesheet (and any internal stylesheet, if you have one) must be in the "top.php" include file.

Your link to an external style sheet must be real; in other words, you must style this page using an external style sheet.

13) Your navigation links, including a relative link to your home page, must be in the "middle.php" include file.

14) Your statement of which text editor you used to do the exercise must be in the "bottom.php" include file.

15) Create an include file for the validator buttons only, and include this include into the "bottom.php" include file. This is known as a nested include. (This is not covered in the tutorial, but will be demonstated in class.)

16) Upload your exercise 3 page (your "template.php") into your public_html folder the server. Remember that, if you are following these directions to the letter, your exercise 3 page is called "template.php", not "exercise3.html".

Upload your three include files into your "includes" folder. You should have already created a directory, directly within your public_html directory, called "includes", to hold your PHP include files for homework exercises, so the relative path from your exercise to your include files will be "includes/filename.php" or "includes/filename.html" (changing "filename" to the file's name, of course).

17) View your page (the page on the server, not the page on your disk) in a browser to make sure it works properly. Remember that PHP only works on the server.; you cannot easily test PHP locally.

18) Make sure the HTML on your page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

19) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

20) If there are any errors, fix them, and validate again.

21) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates. The navigation menu on your home page, that links to your exercises, must be coded as an HTML list.

22) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 2/10/14. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 02/26/14.