Creating the .inc Files for the .php Pages

1 - Summary - Creating the .inc Files for the .php Pages

The Goals
  • Learn how to use the PHP Include command and create your own include files
               that control the look and feel of an entire web site.
  • Using the Site Definitions dialog boxes for Dreamweaver
               to create a site that Dreamweaver will recognize as a PHP site.
  • Creating 2 copies of layout2.html with their own unique titles
               so that the original and the two copies use the same .inc files.
  • Creating the .inc files so that there is one Header and Navigation Column
               for all the Pages in a particular site.
  • Creating the TemplateHead.inc for the code before the title tag.
  • Creating the Template.inc for the code between the title tag and main content.
               This means Template.inc has the code for the header div and the main-navigation div
               that all the pages use.
  • Creating the TemplateFooter.inc so all the pages use the same footer.
  • Testing the site to make sure the .inc files are working properly.
Creating the .inc Files for the .php Pages
  • There are nine steps to this exercise
  1. Turn on the XAMPP Control Panel
  2. Making a copy of the files by copying the multiflex3 folder and making two extra copies of layout2.html, Renaming the three files for the php file extension.
  3. Adding a fouth button to the Menubar wih a dropdown that will let us navigate between three files.
  4. Use cut and paste to create TemplateHead.inc
  5. Use cut and paste to create Template.inc
  6. Use cut and paste to create TemplateFooter.inc
  7. Testing the changes

1 - Details - Creating the .inc Files for the .php Pages

1- Turn on the XAMPP Control Panel
  1. Make sure the XAMPP Control Panel is running with the two Start buttons pressed.
2 - Making a copy of the folder and files, and Creating a new site named temp03.
  1. Using My Computer, copy the multiflex3 folder inside of htdocs, as temp03 inside of htdocs, making temp03 a peer to multiflex3. (Note: you can right-click the multiflex3 folder, and select copy from the submenu. Then move the mouse cursor to the white area of My Computer, right-click and select paste. This will give you a folder named (Copy of multiflex3). Right-click this folder and select Rename from the submenu. Rename the folder temp03.)
  2. Open Dreamweaver.
  3. Create a site named temp03, make sure the path points to the temp03 folder that you just made, and make sure the site is a PHP and MySQL site.
  4. Using the File Panel from Dreamweaver, look inside of our temp03 folder, and open layout2.html
  5. Save layout2.html as layout2.php
  6. Change the title from Multiflex-3.12 / Layout-2 to Multiflex-3.12 / Layout-2 / One. This will make the title unique from layout2.html. There are two ways you can change the title. (1) look for the <title> tags in the code and edit it, or (2) use the Title: box to the right of the Design button. Save layout2.php as layout2one.php to keep your title change.
  7. Edit the title again, but this time change the word "One" to "Two".
  8. Click the Save As item from the File Menu, and save this document as layout2two.php. This will give us another page with its own unique title of Multiflex-3.12 / Layout-2 / Two.
  9. Remember, if you made too many mistakes, you can always copy the original files from multiflex3 to temp03.
  10. Do the rest of the work inside your new temp03 folder.
3 - Adding a fouth button to the Menubar wih a dropdown that will let us navigate between three files.
  • We will create a fourth button with a drop-down menu of three items to navigate between layout2.php, layout2one.php, and layout2two.php. We only need to place this logic in layout2.php, because layout2one.php, and layout2two.php will inherit this ability thru the include files.
  • We will do some work inside the layout2.php file. This will be familiar to you because in a previous exercise we already learned how to add buttons and drop-down menus to a Menu bar.
  1. In the file panel, open the layout2.php
  2. From the Design side, highlight or select Header Layouts from the Menu bar.
  3. Click the Code button. Header Layouts should be selected in the code.
  4. You want to copy and paste the code from Header Layouts, the third button for the Menu bar, as the fourth button for the menu bar. Header Layouts has seven items for its drop-down menu, we only need two. The fourth button will go to layout2.php the first item in the drop-down menu will go to layout2one.php, and the second item in the drop-down will go to layout2two.php. The instructions to do this starts now.
  5. Warning: there are two ending div sttms that we do not want to lose. Place your cursor just before the first one under the </ul> and press the Enter button on the keyboard twice. This should separate the closing ul from the two closing div sttms.
  6. Select all the lines from the comment for the navigation item <!-- Navigation item --> to the closing </ul> sttm. (there are 16 lines you are copying, it includes another closing ul tag. Make sure you select all the lines including that second closing ul tag.) Right click and select Copy from the submenu.
  7. Select the line just above the two closing div tags and right-click, paste. The cursor should end up on the beginging of the line with the two closing div's. Press Enter twice to put some white space between our code and the two closing div sttms.
  8. Delete the lines containing header3.html to header7.html. We do not need them. We only need two items in our drop-down menu.
  9. Replace the text Header Layouts from the <li> line and replace it with Layout2.
  10. Replace the pound sign, some folks call it a hash sign (#) with layout2.php.
  11. The next <li> contains the first item fom the drop-down menu.
           Replace Header-1 (T+M+B) with Layout2one.
  12. Replace header1.html from the link as layout2one.php.
  13. The next <li> contains the second item fom the drop-down menu.
           Replace Header-2 (T+M) with Layout2two.
  14. Replace header2.html from the link as layout2two.php.
  15. We just took care of the of the three links need to navigate the three new php pages we just created. Save the current document of layout2.php, and Preview it by pressing F12. Test the button and drop-down menu, look at the title bar of the pages you are going to to prove that it worked. To get back to the page with the fourth button, use the Back button from the browser. When we have finished the assignment, these two pages without the fourth button will display them through the use of the include sttms.
4 - Creating TemplateHead.inc
  • We will use layout2.php to create TemplateHead.inc. Then we will go into layout2one.php and layout2two.php and have those two pages use the same include file.
  • In layout2.php, we will use the first 25 lines to create TemplateHead.inc. Notice the 26th line in layout2.php is the line with our unique title. We will not use that in the include file so we can keep it unique to layout2.php.
  1. In Dreamweaver, first lets create an empty file named TemplateHead.inc for use of the first 25 lines from layout2.php. Click File, New... Once inside of the New Document Dialog box, select Other from the Category list, and Text from the Other list, and click the Create button.
  2. Save the file as TemplateHead.inc inside the temp03 folder.
  3. Back in layout2.php, highlight or select all the lines down to <title>, this should be the first 25 lines, in layout2.php
  4. Right-click, Cut
  5. Open TemplateHead.inc, right-click paste.
  6. Save TemplateHead.inc
  7. Open layout2.php. We now have to place the PHP include code on the first three lines. Currently <title> is on the first line, make sure you are in the first position of that line and press enter to push <title> to the second line.
  8. On the first line type: <?php
  9. On the second line indent with the Tab key from the keyboard and type:
         include("TemplateHead.inc");
    make sure you included the parentheses and double quotes appropriately.
  10. On the third line type: ?>
  11. The fourth line should have the <title> on it.
  12. Save layout2.php, preview the page, press F12 to test it. It worked for me.
  13. Now we need to do the same to layout2one.php and layout2two.php. You can open the two files. Copy the top three lines from layout2.php, and select the first 25 lines of layout2one.php, without losing its title line and paste the three line into the program.
  14. Do the same for layout2two.php
5 - Creating Template.inc
  1. In layout2.php, search for <!-- B.1 MAIN CONTENT -->. In my document that is line 278. All the lines above that comment includes the logic for the header, which includes the menu bar, and the navigation pane on the left side of the page. All the logic that follows the comment is for the main part of the page. All the code that follows the comment will remain inside of layout2.php. All the code above it up to the line just below our <title> will go into the new include file. Lets create the new include file first.
  2. Click File, New... Once inside of the New Document Dialog box, select Other from the Category list, and Text from the Other list, and click the Create button.
  3. Save the file as Template.inc inside the temp03 folder.
  4. Back in layout2.php, starting with the line above the comment <!-- B.1 MAIN CONTENT -->, highlight or select all the lines up to the line just below <title> which is either the fourth or fifth line of the page.
  5. Right-click and select Cut. All those lines should disappear, but they are stored in Window's clipboard.
  6. In Template.inc, right click and select Paste. This places all the lines that we just selected from layout2.php into Template.inc. I have 271 lines of code in Template.inc.
  7. Save Template.inc
  8. Back in layout2.php we have to enter the following code just below the <title> line:
    <?PHP
          include("Template.inc");
    ?>
  9. Right after the code just entered, layout2.php displays the comment <!-- B.1 MAIN CONTENT -->
  10. I made sure that the comment was below the ?> line.
  11. I also had a blank line above <title>, I got rid of it.
  12. I also wanted to indent the line with the word include("Template.inc"); just to make the code look pretty.
  13. Save layout2.php
  14. Test layout2.php by previewing it by pressing F12.
  15. If everything works out you are ready to do the same to layout2one.php and layout2two.php. Here's the plan.
  16. Open layout2one.php and search for <!-- B.1 MAIN CONTENT -->
  17. Highlight or Select all the lines of code up to, but do not include, the <title> line.
  18. From layout2.php, you should select the three lines of code that uses Template.inc and right-click and copy to get these three lines of code in the Windows Clipboard:
    <?PHP
          include("Template.inc");
    ?>
  19. Go back to In layout2one.php and with all those lines still selected, CTRL V or Shift Insert to paste, to have the three lines of code replace all those lines that you know are already in Template.inc
  20. You will know if that worked out because <!-- B.1 MAIN CONTENT --> should be the next line after ?> in layout2one.php
  21. You can test layout2one.php by previewing it. If it works, you should see the fourth button that the include file is placing in the Menu bar. If that works out, we are ready to do the same for layout2two.php.
  22. (Do I really need to give you the directions?)
    If so do the following. In layout2two.php search for <!-- B.1 MAIN CONTENT -->
  23. Highlight or Select all the lines of code up to, but do not include, the <title> line.
  24. From layout2.php, you should select the three lines of code that uses Template.inc and right-click and copy to get these three lines of code in the Windows Clipboard:
    <?PHP
          include("Template.inc");
    ?>
  25. Go back to In layout2two.php and with all those lines still selected, CTRL V or Shift Insert to paste, to have the three lines of code replace all those lines that you know are already in Template.inc
  26. You will know if that worked out because <!-- B.1 MAIN CONTENT --> should be the next line after ?> in layout2two.php
  27. You can test layout2two.php by previewing it. If it works, you should see the fourth button that the include file is placing in the Menu bar. If that works out, we are ready for the BIG test, does the two items in the fourth button drop-down menu work, displaying he proper text in the Title Bar of the Browser for each of the three pages. If so pat yourself on the back.
  28. Next, we have to create the code for the TemplateFooter.inc file.
6 - Creating TemplateFooter.inc
  1. The plan is to cut and paste the last 13 lines of code from layout2.php to TemplateFooter.inc, which does not exist yet. The last 13 lines start with the comment <!-- C. FOOTER AREA -->. Look at it.
  2. From Dreamweaver, click File, New... Once inside of the New Document Dialog box, select Other from the Category list, and Text from the Other list, and click the Create button.
  3. Save the file as TemplateFooter.inc inside the temp03 folder.
  4. Open layout2.php in Dreamweaver.
  5. Cut and Paste all the code starting with <!-- C. FOOTER AREA --> to </html> to Windows Clipboard.
  6. Open TemplateFooter.inc and Paste the code inside of it.
  7. Save TemplateFooter.inc again.
  8. Open layout2.php in Dreamweaver, look at the last few lines of code. There are 4 closing div's in a row.
  9. On the next line, type the following:
    <?PHP
          include("TemplateFooter.inc");
    ?>
  10. Save layout2.php Preview the page and verify that the footer looks kosher. If it does, repeat this process for layout2one.php and layout2two.php. (This time I am not giving you the code because this is not that hard to figure out.)
  11. Save the layout2one.php and layout2two.php in Dreamweaver.
  12. You can Preview the pages by pressing F12.
  • This takes care of the assignment, I hope it was not too difficult for you.
  • Next we will do the final test.
7 - Testing the Changes
  1. We have been really testing all along. If you can navigate to all three pages, and the Footer looks good, You have completed this assignment.
  2. Try not to lose this folder, because you need it for another assignment when you make one of these pages use the Blue Banner and Logo. To accomplish this you will be required to copy this temp03 folder to another folder.
  • Congratulations, the work on the .php and .inc side of the pages is complete.