Lab Assignment
In this lab, you will use dynamic content to make every web page on your website have the same appearance. To do this, every web page must be divided into three sections: header, content, and footer. The labs leading up to this have been designed to push you to separate your content from the other sections of your web page, so you should be ready.
• Don't confuse "header" with the
... section of your HTML - those are two completely different things
• Don't think that you need to go in and add a div with id='header' and a div with id='footer' - your header and footer are conceptual divisions
Step 1
Pick one of your web pages to get started. Pick the one that is most cleanly divided into a header, content, and footer. I'm going to assume you picked the index.html file, so every time I mention that you should do something with index.html, use the file you picked, which could be products.html or contact.html or rollotookus.html...
Copy the index.html file and give the copy the name header.inc (please use that file name because the auto-grader will be looking for a file by that name - even though you could use ANY name, the autograder isn't smart enough to look for other file names).
• If you copy it on your personal computer, you will need to upload it when you are done with it
• If you SSH into the server and you want to copy it, the command is: cp index.html header.inc
Edit the header.inc file. Scroll down to the first line of content and delete all of the content and everything below the content. All that the file has left is your header. Save the header. You are done.
Step 2
Repeat step one, but for the footer. Copy index.html to footer.inc. Edit the footer.inc file. Delete everything down to the end of the content. Save the footer.inc file.
Step 3
Edit the index.html file. Delete everything down to the start of the content and replace it with:
Next, delete everything after the content and replace it with:
Your index.html file should now have the header include, your content, and the footer include - nothing else.
Important note on copying and pasting: Text editors mess with quotes. So, if you copy and paste from this document, the single quotes will actually be curly quotes. PHP uses single quotes and double quotes. It does not use curly quotes. So, you will get a syntax error. PHP will see those curly quotes and have no clue what you are trying to do. Therefore: Type the code by hand! Don't copy and paste!
Step 4
If you are working on your personal computer, upload your work to the server. Make sure you upload to the public_html folder and not your home folder.
If you did your work on the server itself, skip step 4.
Step 5
You should see your complete web page. Use the "view source code" option in your web browser. Notice that you have HTML without any PHP. You have the output of the PHP program you wrote.
Step 6
Repeat for the rest of your web pages. You may run into issues because some pages (like your orders page) have extra code. It is save to include extra code in all pages. It just won't get used.
Every web page should now have an identical header/footer. Many students have minor differences from page to page. For example, the page you are on is highlighted in the menu. The title changes from page to page. The logo is larger on the home page than the rest of the pages. Etc...
The following is an example of how to change the title text per page. You do not HAVE to do this. It is extra. You can use this example to work out how to make other changes as well - such as only including your order validation script on the orders page.
In your header.inc file, your title should look something like:
My Web Page
Replace the actual title with a variable. The name of this variable will be title:
<?php echo $title; ?>
In PHP, $ means "this is a variable." So, $title means "the variable named title." The echo command simply means that we will print the variable value. You can use print instead of echo if you like.
Right now, $title doesn't have a value. So, at the very top of your header.inc file, we will check to see if it has a value and, if not, give it a value:
The function "empty" returns true if $title is not set, is an empty string, or is false. So, if it is not set, we give it a default value. Then, when it is printed in the title section, it will at least have the default value.
Now, assume I have a products.html page and I want to use a custom title. I add a line directly before I include the header.inc file:
$title = "Products:My Web Page";
include(‘header.inc'); ?>
It may seem confusing that I'm setting the value of $title in my products.html file, but using it in the header.inc file. Don't think of them as separate files. From the point-of-view of PHP, it is one long continuous file.
Now, you can customize the title from page to page. You could also do other things. For example, what if on my orders.html page I included the variable: $include_validation_script = true;
Don't be overly concerned with if-then-else statements or creating and using new variables. We will get into that next week.
Attachment:- Website-1.zip