Converting your website to use PHP

Pre-Reqs

Part 1 - Setting Up The Project

  1. Create a Git repository on BitBucket called My New Site, and clone it into your doc root directory.
  2. You should have this folder in your doc root dir: web-programming-final-project. Copy the contents of this folder into the my-new-site folder that you cloned in the previous step.
  3. Inside the my-new-site folder, create a folder named INSTRUCTIONS. You should put the instructions for each step of this project in this folder.
  4. Stage and commit the files you just added to the project.
  5. Make sure that your Apache web server is running (check the XAMPP control panel).
    Navigate to the site's home page in the browser. The url you enter should look like this: localhost/my-new-site/

Part 2 - Disecting the home page into parts

  1. Rename all .html files to be .php files (don't forget the one in the blog folder)
  2. Inside the my-new-site folder, create a folder named includes
  3. Inside the 'includes' folder, create a file named header.inc.php. Yes, there are two file extensions!
  4. Inside the 'includes' folder, create a file named footer.inc.php. Yes, there are two file extensions!
  5. Open up the home page (index.php) in your editor, we will disect this file into parts. The first part will include lines 1-24 and the last part will include lines 64-72. When you are done with the following steps, you index.php page will have only a main tag (and it's contents) and and aside (and it's contents).
    NOTE: Make sure you are looking at the correct page, if you are looking at the code for blog/index.php then close the file and open the index.php file that is inside the my-new-site folder.
  6. Select the code from the top of index.php down to (and including) the opening div tag that has an id attribute set to 'content' (lines 1 - 24).
    Cut the code you just selected and paste it into header.inc.php (make sure to save all your changes)
  7. Now, in index.php, find the closing tag that went with the opening div tag that was on line 24.
    Select all code starting with that closing tag, down to the very bottom of the page.
    Cut the selected code, and paste it into footer.inc.php.
  8. Now let's add PHP code to the top and bottom of index.php that will link to header.inc.php and footer.inc.php.
    Add this code to the top of index.php.
    Add this code to the bottom of index.php.
  9. It's very important to make a distinction between links in our PHP code vs. links in our HTML, CSS, or JavaScript I like to refer to links in PHP code as server-side links and links in HTML, CSS, or JavaScript code as client-side links.
  10. We need to make some updates in header.inc.php and footer.inc.php since we converted our .html files into .php files.
    In header.inc.php, update the links inside the nav tag to point to .php files rather than .html files.
    In footer.inc.php, update the link to the privacy policy page.
  11. Refresh index.php in the browser, you should see NO changes to the way the page appears if you did everything correctly.

Part 3 - Updating the other web pages

  1. Now you'll replace the code in the top and bottom of the other web pages in the site, and replace it with PHP code that links to header.inc.php and footer.inc.php.
    When you are done, each of the following pages should only have a main tag and an aside tag (and the PHP code that links to the header and footer files). Note: Now all the pages have the exact same title and meta/description, which is not what we want (we'll fix that soon).
    Note: The pictures page and the contact page will be broken (since they need links to .js files that are not included inside of header.inc.php).
    Note: The blog page is completely broken. Do you know why? You'll see a PHP error when you try to view the page in the browser. And once we fix this error, you'll discover that there are other problems as well.
    We'll address these problems in the next step, when we talk about paths, and linking to files.
    What is the advantage of moving our code into header.inc.php and footer.inc.php?

Part 4 - Fixing the page title and description

  1. Next we'll add two variables to the PHP code at the top of each page, make sure to put these variables before the require() function call that links to header.inc.php
  2. Open the home page in your editor (index.php - make sure it's NOT the index.php file in the blog folder)
  3. Add a variable named $pageTitle and initialize it to an appropriate value, maybe something like: Welcome to My Site
  4. Add a variable named $pageDescription and initialize it to an appropriate value, maybe something like this: Welcome to my website, it's about me, my hobbies, and web development
  5. Your code should look like this
  6. Repeat the previous step for all the other web pages, make sure to initialize the variables to an appropriate string for each page. Make sure to update blog/index.php as well.
  7. Now we'll add some code to header.inc.php that will echo out the page title and description.
    Update the code in header.inc.php to look like this. Be careful with the syntax!
  8. Test your pages to make sure the title and description are working for each page.
    In the next step, we'll fix some of the other problems that we discussed earlier

Part 5 - Fixing the Pictures and Contact Pages

The pictures page and the contact page depend on certain JavaScript code in order to work properly. Normally, we'd put a script tag inside the head tag that would link to an external .js file. But we don't really want to put script tags that link to .js files in header.inc.php unless those .js files are used by all the pages in our site.

There are a few different ways we could solve this problem. The simplest solution is to put the appropriate script tags inside of pictures.php and contact.php.

  1. Open pictures.php and add a script tag that links to photo-gallery.js. Make sure that the script tag is placed somewhere after the PHP code that is at the top of the page.
  2. Open contact.php and add a script tag that links to contact-form.js
  3. Test the pages to make sure they are working properly. As mentioned, the blog home page is not working. Do you know why? We'll address the problems with the blog home page in the next step.