Side Bars

Create an Include File for a Side Bar

1. Create a file in the includes folder and name it hobbies-sidebar.inc.php
2. Open the blog home page (blog/index.php) and do the following:
   1. Cut the ASIDE tag out and paste it into hobbies-sidebar.inc.php.
   2. Update the link in hobbies-sidebar.inc.php to the light house image (use IMAGES_DIR).
   3. Add the code that is selected in this screen shot to the blog home page (line 6, and lines 22-24)

Updating the CSS

1. Although we just declared and initialized the $sideBar variable, let's comment out that line for now. The page should still work, you just won't see the side bar when you look at it in the browser.
2. Open the main.css file and set the background color of the MAIN tag to yellow.
3. View the blog page in the browser and note that the main tag does not take up the full width of the page when there is no side bar.
4. Update header.inc.php to look like this. These are the changes that have been made:
   1. A variable named $contentClass near the top (on line 3 of the screen shot). This variable is initialized by using the conditional opererator (which is also known as the ternary operator).
   2. The variable is echoed on line 29 of the screen shot. It is used to set the value of the CLASS attribute for the content DIV.
5. Add this CSS code to the style sheet (main.css).
6. Refresh the blog home page in the browser.
7. We could talk about CSS specificity now.
8. Remove the yellow background from the MAIN tag.

Updating the Rest of the Pages

Leave the blog home page without a side bar for now, but update the other pages in the same way, and have them display the hobbies side bar. Here are the steps to repeat in the other pages:

1. Remove the aside tag from each page.
2. Add the $sideBar variable and initialize it to a value of hobbies-sidebar.inc.php
3. Add the IF statement PHP code to the bottom of the page (DON'T use ../ in the path to the sidebar include file)
4. Test the page in the browser

Summary

Note the pattern we are following on our pages:

• Include the config file first
• Set page specific variables (we could store these values in a database if we wanted to, which would give us a new level of flexibility)
• Display the header (which uses the page specific variable settings)
• Display the page content
• Display the side bar (if there is one)
• Display the footer

Our site is becoming more dynamic and flexible (the css code changes based on whether or not there is a side bar shown on the page!) And because we've arranged things using include files, our site is much easier to maintain!