Rookie Included Files Activity

(Also known as the "My Classes" activity)
Back

Introduction

The goal of this activity is to learn how to use included files to have site-wide control over the content in your site. We have learned how CSS is so powerful because it gives you site-wide control over the layout, design and formatting of your web pages. In a similar (but still very different) way, included files will give you site-wide control over the content of different regions of your webpages. Lets get started...

**** PHP include code is called "server sided code". This means that all the files must be FTP'ed in order for you to preview your work. Viewing it locally on your computer isn't possible. It MUST be viewed on a server to pull all the information together. ****

Procedure

Getting Started:

  1. Go to spraguehs folder on tech2 (not Dreamweaver!)
  2. Copy/paste "my-classes" folder
  3. Rename the folder to "included-files"
    • Open and rename all files to .php
      • (Example... period1.htm ---> period1.php)
        • **It will warn you it will become unstable... but do it anyway, it will be ok**
        • If there are issues... you always have your original my-classes folder to fall back on :)
    • Now your menu is broken... but this is where the fun begins!!!!

Creating the Include

  1. In DreamWeaver, open a new document and save as navigation.htm inside the included-files folder
  2. Make sure you have selected "split" view so both code and design view are available
  3. IMPORTANT!!! Go into the code and DELETE ALL THE CODE
  4. This file will be "included" and all the <html>, <head> and <body> tags must be removed. We will discuss why in class
  5. Open period1.php. CUT THE ENTIRE NAV DIV OUT OF THE FILE
    • We will add it back in later...
  6. Open navigation.htm and PASTE THE NAV DIV INTO THIS FILE
    • VERY IMPORTANT... It is critical that this is the only code in this file
  7. Save the navigation.htm file... the file to be included is ready

Including the file

  1. Open period 1.php and copy the line of code below EXACLTY AS SHOWN
    • <?php include("navigation.htm"); ?>
  2. Paste this line of code right where the navigation was in period1.php
    • If everything is done correclty, the navigation should "pop" right back into the file
  3. Remove the nav div from all 8 classes and
    • Include the navigation.htm file like you did for period1.php

Fixing the navigation.htm file

Making your entire "my-classes" project more flexible...

Any division of your page that is replicated can be included! This allows you to manage and change any region on any page sitewide.

Repeat this process for your header and your footer

  1. Create files called
    • header.htm
    • footer.htm
  2. Remove the header and footer from each page
  3. Include the files just like we did with the navigation