Weekly Assignment

CS2623: Server-Side Programming
SSP03: Control Structures

Objective:

Create a template
Utilize include files
Create iteration structures
Create a table dynamically
Use arrays to access names and images

Points

Full Credit: 40 Points
Late/Resubmit Credit: 36 Points

Situation

The Discovery Projects at the end of Chapter 2 will be used to create the actual template that will be used for the ongoing website. The information about include files on pp. 109-111 is crucial for this assignment. In add ti on, it would probably be beneficial to complete Exercise 2.5 on pp.119-121 before beginning this assignment. (For campus classes this is normally done in class). On step 8, it would look more professional if the image did not have a border.

This may be a bit confusing since it is different from other websites you have probably created. The header, buttons, links, and footer will only be created once. Each new assignment will be created as an include file that is displayed in the home content area replacing inc_home.php. (see example below). Therefore, only this main index.php will include DTD, meta tags, <body>, <html> tags etc. The other pages that are created throughout the semester will NOT validate on their own, but MUST validate when viewed inside of index.php.

Also,since all of the webpages will be displayed in the main index.php file, the information about paths in include files (Chapter 2) will not apply. However, it is still important since the majority of the sites use that method. With that being said, this website will provide you with a different experience which can prove helpful in your future web development endeavors.

Need a Visual Reference?
View the following video on YouTube of past student sites. In most of the cases the entire web page is not included in the screen shot, just enough to let you see the functionality of each project assignment. These videos are in a restricted area and intended for use only by students in this class.
Disclaimer: If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct.

Control Structures

The video shows the site after the .php files have been incorporated into index.php. We are NOT to that point. It was thought that viewing it in this format, students could see the "big picture" of how the site will eventually be created. Also, although it may not appear as such, on this site the text links are at the top and button links are on the left. Also there is one extra link entitled "Final Project" which we will not be including.

Specifications

Discovery Projects 2-1 to 2-5 on pp. 122-123.
Make a copy of the zodiac folder and rename the copy ChineseZodiac (this will be your new working folder).
Create a new folder inside of ChineseZodiac and name it includes. This will hold the include files for the project.
Discovery Project 2-1 (Follow the instructions in the text with the following specifications.)
- Create a basic XHTML page and save it as index.php (PHP will be added later) that uses <div> tags (do not use tables) that will eventually hold the include files shown in Table 2-1. The following is an example. Your actual webpage may vary depending on your design, but all of the div tags and areas for five include files must be present. In the example, the buttons are at the top and the text links are on the side. This may be varied depending on your design, just make sure both are present.
- Although this design does not align with the newer look of web pages, please use it. The sections/blocks/components are tightly integrated into the Zodiac assignments. Students who have a good understanding of the layout for this assignment should be able to adapt other websites to the newer format currently being used by Microsoft, Apple, CNN, Amazon and other sites.
- This means there will be five sets of <div> tags each of which have an appropriate class. The text between the <div> tags will be temporary text identifying the area AKA placeholder.
- It must include Strict DTD code and meta tags.
- Attach the CSS file that you created from the previous homework. Modify as necessary.
Discovery Project 2-2 (Follow the instructions in the text with the following specifications.)
- Create the include files as shown in Table 2-1 and save them in the includes folder. Note: There are only 8 buttons not 9.
- The footer include must also include: contact information, date last modified, and OCCC Disclaimer
- Student accounts do not have access to the root of the web directory so it will remain as an includes folder inside of ChineseZodiac
Discovery Project 2-3 (Follow the instructions in the text with the following specifications.)
- In other words, the placeholders you created in Discovery Project 2-1 will be replaced by include statement for the files created in Discovery Project 2-2
- Index.php will now look like a real web page
- Modify the CSS so that each of the <div> tags/include files are appropriately formatted.

Discovery Project 2-4 and 2-5(Follow the instructions in the text with the following specifications.)

Creating the Pages - General
- Okay this will be a little confusing... Chinese_Zodiac_for_loop.php and Chinese_Zodiac_while_loop.php will eventually be included in the home content area of the main website. But for now, they will be separate from the index.php created in 2-1 to 2-3. Since they will eventually be displayed inside of index.php, do not include DTD information, <head>, <body> and related tags. Do, however, temporarily include a link to the CSS file. This will be removed later. The CSS file must be included for now so that the pages may be properly formatted
Names and images of animals
- Create a sign array that contains the names of the animals. Example: $SignName[0]="Rat" $SignName[1]="Ox"
- Rename the images to match the sign names. Example: Rat.jpg, Ox.jpg
- Now, the name of the animal (column header) and images could be displayed using a loop.
  Column headers
  echo "$SignName[$intCounter]"
  Corresponding images
  echo "<img src='images/" . $SignNames[$intCounter] . ".jpg' alt='" . $SignNames[$intCounter] . "' />"
  Partial example of output keeping in mind that your images and formatting will be different.
Creating the table

If needed, use the following code reference for creating a dynamic table. (Note: since the number of years is unknown and can vary it has to be created to accommodate any the number of years,hence the dynamic table.

For reference only: The following is a list of the animals and the order in which they are to appear in the Zodiac Calendar. Make sure the years are listed under the correct animal name.

Rat	Ox	Tiger	Rabbit	Dragon	Snake	Horse	Sheep	Monkey	Rooster	Dog	Bear
1912	1913	1914	1915	1916	1917	1918	1919	1920	1921	1922	1923

Upload the entire ChineseZodiac folder to Apollo1 (There will now be three folders on Apollo1: zodiac, projects. and ChineseZodiac

Recurring Specifications:

The footer must which includes the following must be included on all pages: your name, date last revised, contact information (email.occc.edu email address is sufficient), and the following disclaimer.

Oklahoma City Community College does not necessarily endorse the content or respective links of this page.
XHTML must validate STRICT on all pages
CSS must validate for CSS3 Standards
Code must be easy to read and properly indented.
Documentation must be appropriate and meaningful.
Meta Tags including the following must be included on index.php. The content must be revised to information that is meaningful to the page.

<meta name="author" content="Your Name" />
<meta name="revised" content="12/18/2015" />
<meta name="description" content="Description of web page" />
<meta name="keywords" content="Add appropriate key words" />
Tables may not be used for general layout and only when specifically indicated in an assignment.
JavaScript may not be used in assignments unless specifically indicated. One exception is the date late modified at the bottom of the web page.

Assignment Submission

Follow the Assignment Submission requirements outlined in http://www.occc.edu/aphilipp/htm_ssp/CS2623_CodingStandards.htm.
Upload the files/folder to your apollo1 account.
View the web page/s in Firefox, Chrome, Safari, and Internet Explorer.
Validate and double check to make sure all items are visible from all computers.
Submit the three URLs of your web pages in MoodleRooms.
The URLs will be
- http://apollo1.occc.edu/user#####/ChineseZodiac/index.php (must validate)
- http://apollo1.occc.edu/user#####/ChineseZodiac/Chinese_Zodiac_for_loop.php (validation not required, but will be in the future)
- http://apollo1.occc.edu/user#####/ChineseZodiac/Chinese_Zodiac_while_loop.php (validation not required, but will be in the future)
Submission links must open web page in a new window (not inside of MoodleRooms) and display the page (and not a directory)
XHTML code must validate STRICT and CSS must also validate for CSS3 or earlier (for index.php only at this point). The Web Developer Toolbar in Firefox will be used for grading.
Assignments not meeting the previous requirements (opening in a new window and XHTML/CSS Validation) cannot be graded. If it is still within the late/resubmit period, they can be re-uploaded and resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted.