Overview
HTML and CSS are both client-side (front-end) programming languages. Most client-side languages are static in nature and visible to the user (if they choose to view your source code in the browser). PHP is a server-side (back-end) language, meaning that its primary purpose is to communicate with the server behind the scenes to compile pages that are delivered to the user as HTML and CSS. You cannot see server-side languages in action by viewing the source code of a page. That being said, server-side languages are used to generate dynamic content on a webpage. They allow you to re-use code in places on your site in ways that a basic HTML template will not. We will not be exploring PHP in depth in this class, but to give you a very basic introduction, we will use it to make the process of maintaining and updating the code that you use on more than one page in your site less repetitive.
Video Tutorials
Written Instructions
- Create a new folder named "includes" in your firstinitiallastname-portfolio directory.
- Open your template.html file in the code editor of your choice and perform the following actions:
- Ensure that your code is clean, valid, and complete. Add comments where necessary to clearly indicate where sections of code begin and end.
- Save it as a new file named "template.php" in the root folder of your firstinitiallastname-portfolio site.
- Cut (not copy) the code from the sections of code that are redundant to each page in your site (the theme elements) and paste it into new HTML files to be stored in your includes folder.
- In your php template, replace the code you remove with the following: <?php include('includes/filename.html'); ?>
- Test your work in a browser by navigating to your local site in-browser (using your domain alias as the URL) and then to your file.
- Repeat this process until all redundant code is out of your PHP template and stored in HTML files in your includes folder.
- Apply the same changes to your style guide page to create a new style-guide.php page in the root of your site.
- Delete style-guide.html from the root of your site.
- Add variables to your template to customize areas of content in your included code files where needed, and add PHP statements to your included code files to retrieve the values of each variable where needed.
- Add the same variables to your style-guide.php page to customize areas of content in your included code files where needed, and update the values of each variable to be unique to the style guide page.
- Challenge: Create a keyword meta element in the head code for your pages, and use PHP to provide unique keyword content for each page of your site.
- Ensure that your template page code and style-guide code passes validation for both HTML and CSS.
- Sync your work to your student space (>eLocker).
Deliverables
- Compress your firstinitiallastname-portfolio site directory into a ZIP folder and upload it here for review.
- Post a link to your corresponding project folder on your student space embeddedin descriptive anchor text so I can verify that your public directory matches your local directory.
- Discuss your experience with using basic PHP to eliminate redundant code from your web pages. At a minimum, copy/paste the following prompts into the comments field with your submission and answer each inline:
- In your own words, what is the purpose of an include statement in PHP?
- In your own words, what is the purpose of a variable in PHP?
- Do you see the benefit of using PHP to eliminate redundant code from a website? Why or why not?
- Was this assignment more or less difficult than you imagined it would be? In what ways?
Timeline
- 4.11: Launch
- 4.20: Submit for Interim Feedback. Correct all errors reported in feedback.*
- 4.24: Due
*Note: One Interim submission for feedback is required for this project.You may choose one of the two interim submission dates. |