Exercise 04

PHP POWERED INTERFACE

PROJECT UPDATE

For the final class project you will create a "new" interface for the PHP project. I want you to think about a brand for the site and the audience for the site.

You need to create new navigation also. Consider the types of tutorials and the tutorial content. Organize the tutorials into catagories. You should then create custom names for the links. The link names should be informative, yet as short as possible. The "type" and "style" of your navigation will directly impact the link name character count. Be creative.

You must include suggestions for similar tutorials (minimum of one suggestion for each tutorial array) to the viewer using the "side bar" or HTML5 aside element. This should already be part of the original design template/HTML outline.

Your footer must include:

  • Your name
  • Semester info
  • Class name
  • School name
  • University name
  • Copyright symbol and date/year
  • Links to "other" tutorial sites
  • "Other" relevant links or content, which may be useful. Again, think about the usefulness of the footer and how you can use the footer as a marketing tool.

Videos suporting what we went over in class specific to the redesign.

In this exercise you will create what appears to be a multi-page web site, which uses a PHP array to dynamically load content into a single page (the main interface).

The content for the site will include "all" of the single page tutorials created for Exercise 03.

The design theme, tone, and manner, are up to individually. Your interface may be any size and function in any manner of your choosing. Your only limitation is the 600px area for the tutorial.

Be sure to provide some room around the tutorial element and your design elements. Some students may be allowing their tutorial content to "go" directly to the edges of the 600px area.

Also, be sure to set the tutorial element height to "auto". I you use a border on the tutorial element then be sure to compensate to ensure the tutorial "gets" a full 600px width.

Basic Requirements

  • The layout does not need to be responsive;
  • Design a menu system of your choice to organize the various tutorials.
    • Later in the exercise the menu will be a php file you include in the main index.php page.
  • Design a footer, which provides author, copyright, and date information. You should work towards enhancing the footer to supply additional information and or resources.
    • Later in the exercise the footer will be a php file you include in the main index.php page.
  • Link your css styles;
  • The tutorial page content area is limited to 600px in width. The width of the "graphical wrapper" is up to you.
  • You will also need to include a 200px wide side bar. The side bar can be to the left or the right of the tutorial area.
  • Style the side bar anyway you like, but do not include "any" content at this time.

 

Student Learning Outcomes

Once this project is complete you should be able to:

  • Ability to follow project requirements;
  • Establish and maintain an FTP site;
  • Establish and maintain an "Remote Testing Site";
  • Demonstrate ability to concieve and code a modular "menu" structure;
  • Design a module graphical user interface;
  • Ability to incorporate PHP code snippits into a functional array;
  • Demonstrate ability to explain "how" a PHP array "functions"

 

RESOURCES

I suggest you download the videos to your desktop for the best playback.

 

Note: Dreamweaver is the editor/ftp tool for the following videos

PHP overview and basics

PHP Array project videos :: Updated for spring 2016 semester

I have updated the organization of the project assets to make the entire process more efficient. Below you will find six videos, which cover the organization and process for the project.

I suggest you download the videos to your desktop for the best playback.

 

FAQs about the project

  • What files go on the testing server? | Answer
  • How should I be viewing my site as I work? | Answer
  • What files go on the school's server? | Answer
  • Why are some or all of the linked CSS or include files not showing up? | Answer
  • How do I link images or other files in my project? | Answer
  • Why do my CSS styles change when a tutorial loads into my template? (The tutorial may change due to your CSS) | Answer

Videos specif to the redesign (they are also above in the project update section)

Videos suporting what we went over in class specific to the redesign.