Lab 6

1. To understand the role of a server-side scripting language to generate web content.
2. To understand the parts of a web page that are repeated on every page and the parts that are unique.
3. To properly use functions to generate reusable web page components
4. To properly use loops to generate iterative web page structures.
5. To properly use if statement to generate conditional web page structures.

If you haven't already, download and unzip project2.zip

Use WinSCP to connect to our remote server.

Details about your specific server, userid and password were emailed to you. Here is the general information:

• Hostname: ftp.sienasellbacks.com   or   ftp.breimer.net
• Username: userid@sienasellbacks.com   or   userid@breimer.net
• Password: Sent via email
• Port: 21
• Use FTP; Do not use SFTP or SCM

Be sure to replace userid with your actual Siena userid; But, do not add @siena.edu

1. Upload your entire projects folder to your remote server by dragging the folder from left to right. This should include both project1 and project2
2. View your project2 on the web server by typing the URL   http://www.sienasellbacks.com/userid/projects/project2/   or   http://www.breimer.net/userid/projects/project2/   into Chrome.
3. Make sure you can view page1.php

Open functions.php in Brackets

For the following part, write you answers in a PHP comment on line 2 of file you just opened.

1. What is the name of the function?
2. How many parameters does it take?
3. How many PHP commands are executed?
4. What does echo do?
5. Why are we printing an entire websites?
6. Where is page_name being printed?
7. What does file_get_contents do? Read about it here: php.net/file-get-contents
8. Which two content areas are identical for all web pages made by the function?
9. Which three content areas can vary depending on the input to the make_page function?

Open page1.php in Brackets

For the following part, write you answers in a PHP comment on line 2 of file you just opened.

1. Why do we include functions.php?
2. What other function are we calling?
3. How many parameters are we passing to this function?
4. What is the page_name of the web page we are making?
5. What three files are we using to make the web page?
6. Which of those files is the main article contents?

1. Open page1.html in Brackets
2. Save it as page2.html
3. Replace all the content with a h2 tag with the content "Page 2"
4. Add p tag with some random words as the content.
5. Save the file again as page2.html
6. Open page1.php again.
7. Save it as page2.php.
8. Change the 1st parameter of the make_page function call to "Sample Page 2"
9. Change the 3rd parameter to use "page2.html" as the main article content.
10. Be sure to save your changes as page2.php.
11. Upload your project2 folder to the the remote server using WinSCP
12. View your project2 on the web server by typing the URL   http://www.sienasellbacks.com/userid/projects/project2/   or   http://www.breimer.net/userid/projects/project2/   into Chrome.
13. View page2.php and make sure it includes your random content.
14. Resize your browser window to see how the columns of this website temmplate are responsive. Note that when the browser width is very narrow, the template has only one column, but can have two or three columns for wider displayes.

• make_page is essentially a template for making a web page that has three content areas:
  • main article
  • a side menu for an article that might have a submenu of links
  • an aside area for related content
• The template always uses the file "navbar.html" for the header content area.
• The template always uses the file "footer.html" for the footer content area.
• The template uses a Bootstrap Grid to implement a responsive multi-column layout. Bootstrap defines a row as 12 column units.
• The header and footer always use 12 column units, i.e., class="col-12"
• On large devices (lg), the nav, article and aside use 3, 6 and 3 column units to create a 3-column layout.
• On small devices (sm), the nav and article use 3 and 9 column units to create a 2-column layout and the aside uses 12 units which pushes it down to the next row.

Make the following changes to the template:

1. Move the header so that it is above the main containter. This will enable the navbar to stretch across the entire width of the browser window instead of being inside the Bootstrap container.
2. Move the footer so that it is below the closing main tag. This will put the footer outside the Bootstrap container.
3. Modify the Bootstrap grid so that on a small display the nav uses 12 units and the article and aside use 8 and 4 units respectively.
4. Consider that a web pages might need unique embedded CSS. Add a 5th parameter to the function:
   

   make_page($page_name, $side_menu, $page_content, $aside_content, $style = null)

   By giving it the value null, this parameter becomes optional, so you we do not have to modify the function calls. But if you add a 5th parameter, you can use the $style variable to slice some CSS code into the template.
5. Similar to how the $page_name is sliced into the title tag, slice the $style immediately above the body tag so that it is right below the link tags.
6. Modify page2.php to add the following embedded CSS as 5th parameter to the template:
   

   make_page('Sample Page 2', 'sidemenu.html', 'page2.html', 'relatedlinks.html', '<style>a {color: pink;}</style>');

1. Consider that some web pages might not have a side menu or an aside, add the following if statement before you echo any content to generate the main content depending on if side_menu and aside_content are null or not:
   
2. Slice $main_content inside the main container of the template.
3. Using what you have learned, create another web page page3.php that uses page1.html as the main article content but passes null as side_menu and aside_content parameters.
4. Test your new page by uploading it to the server and navigating to URL of page3.php

Rather than load the navbar and footer from files, you can replace the file_get_contents functions with your own defined functions for generating your navigation menus. Here are examples of how these functions can be implemented: functions.txt