These instructions are a combination of the Discovery Exercises at the end of Chapter 1 and 2 (Please read the note below). There is additional information added to help explain what you are to create.
NOTE: If you do not wish to work with the Chinese Zodiac, that is fine. Please find something else that contains 12 members to use in its place –such as 12 breeds of cats or 12 breeds of dogs, 12 makers of cars. The goal is to have 12 of something that has various properties.
You will create a comprehensive web site application. The Chinese Zodiac was selected to be used in this project because it lends itself well to the PHP you will be learning. All the files for the project are located in a folder named ChineseZodiac. The zipped file can be found in the Data Files link on myTCC.
Part 1 – Setting up the Site
Select a color scheme and design and find free Chinese zodiac graphic elements (or elements of your chosen group). There is a set of Chinese zodiac graphic elements provided in your data files in the images folder. You may use those or find a set of individual Chinese zodiac graphic elements on the web.
Create a Web banner image (this will be the logo for the web site) with a title of “The Chinese Zodiac” and a subtitle of “Demonstration for PHP”. If your site is designed to have buttons at the top and a text navigation bar on the left, you will want a banner that is approximately 392 x 72 pixels. If you plan to have both the button navigation and text navigation at the top, you will want a banner that is approximately 468 x 60 pixels. Otherwise if the banner is going to “own” the top of the page, go for 960px or 1280px wide.
The banner can be as complex as you like. Or just a simple background color, with the text title in a contrasting color will be fine.
Save the banner image as ChineseZodiacBanner with an extension of .jpg, .gif or .png in the images folder within the ChineseZodiac folder and save it to your computer and to your development server.
Open the ChineseZodiacBanner image in Firefox and Chrome to determine if it displays well on the web.
Part 2 – Create navigation buttons
Create nine buttons (approximately 150 x 30 pixels) with the following text for the buttons and filenames:
“Home Page” = HomePage.img
“Site Layout” = SiteLayout.img
“Control Structures” = ControlStructures.img
“String Functions” = StringFunctions.img
“Web Forms” = WebForms.img
“Midpoint” = Midpoint.img
“State Information” = StateInformation.img
“User Templates” = UserTimeplates.img
“Final” = Final.img
Change the .img extension on each of the file names to match the appropriate extensions for the image file type – .jpg, .gif, or .png. Save the buttons in the Images folder within the ChineseZodiac folder and save the buttons to your development server.
Part 3 – Create text information about the zodiac
Research the Chinese zodiac (or the topic you chose instead) and write a few paragraphs about it in your text editor to acquaint your audience with the concept of the Chinese horoscope and its origin. Make notes on how the various years are divided among the zodiac signs. Cite your sources. Save the document as ChineseZodiac.txt in the ChineseZodiac folder and save the document to your computer and to your development server.
Part 4 – Find and save Zodiac images
You will need 12 graphic images of the signs of the Chinese zodiac. A set of these images are provided for you in the data file folder for the project. However, you may use other images. A search of the internet will bring up many options.
Try to find images that are similar in size, style and form. Keep the height of the image between 50 and 100 pixels, and the width of the image between 50 and 150 pixels. You will be using these as column headings so you may want to resize them even smaller. You can use Paint, which comes with Windows, or gimp, which is a free graphic editing software, to resize the images. Use the name of the sign as the image file name. For example, use Rooster.jpg for the Rooster image file. Save each of the images with the appropriate extension in the images folder inside the ChineseZodiac folder. Save these images to your computer and to your development server.
Part 5 – Create a template for the web site pages 2 files are created: the index file and css file
You will use PHP include files (more on include files in the lecture notes) to populate the header, footer, navigation, button navigation and the content. Include files allow us to re-use code without having to copy and paste from one page to another. For this initial layout page, insert a placeholder in each section ( such as [This is the header placeholder]) to identify the content that will be included later.
Check that the template views properly in your browser. Save the template with the name index.php on your computer and in the ChineseZodiac folder on the development server.
Create the css file for your website. Name the file: ChineseZodiac.css
Part 6 – Create the include files 5 php files are created
For each of the template sections in the index.php page, create an include file. The include file will only have the tags necessary to format the content, not the entire set of tags (such as <html>, <head>, <title> and <body> – do not put these tags in your include files.) See the table below for a list of the filenames and the description of what will be in those files. For example: an include file for the header php would look like this:
|inc_header.php||Inserts the banner image created in Step 1|
|inc_button_nav.php||Insert the nine buttons created in Step 2. Code to submit the buttons will be inserted later|
|inc_text_links.php||Inserts the code for a text links bar. Code to turn the text links into hyperlinks will be inserted later|
|inc_footer.php||Inserts a copyright symbol and the current year|
|inc_home.php||Inserts a placeholder [Insert home page content here].|
Include files for ChineseZodiac site
Create an includes folder within the ChineseZodiac folder on your computer and on your development server. Save each of the include files (using the above names) into the includes folder on your computer and your development server. Change your php include statement in your template to now add the images folder before the file name:
Part 7 – Adding the includes to the index.php file Update index file
In the index.php file, replace the [placeholders] with include statements to include the five include files created in the previous steps. For example, for the header:
<div class=”header”><?php include(“includes/inc_header.php”); ?></div>
Save your index.php file to your computer and to your development server in the ChineseZodiac folder.
Part 8 – Adding a For Loop and arrays 1 file created – the for loop
In an html file, write a for loop that displays a table with the names of the 12 Chinese zodiac signs as column headings, and with the years displayed below or beside the appropriate column heading (see image at bottom of this section). You may want to resize your graphics again to have them fit in your columns. Begin the table with the year 1924 and end with the current year. You may want to use the modulus operator to determine the number of columns in each row for the table.
Use an array to store and display a picture of the appropriate sign below the text header in each column. Use the pictures you found and uploaded earlier in this assignment.
Save the script as Chinese_Zodiac_for_loop.php in the ChineseZodiac folder on your computer and to the development server.
Sample dates shown vertically:
Sample dates shown horizontally:
Part 9 – Adding a while loop 1 file created – the while loop
Modify the previous script to display the same table using a while loop. Save the script as Chinese_Zodiac_while_loop.php in the ChineseZodiac folder on your computer and to the development server.
Zip the ChineseZodiac folder and upload it to Lab1 File Upload located on myTCC, in Lessons/Assignments in the Lab 1 folder.
Try it now!
How it works?
Follow these simple steps to get your paper done
Place your order
Fill in the order form and provide all details of your assignment.
Proceed with the payment
Choose the payment system that suits you most.
Receive the final file
Once your paper is ready, we will email it to you.
No need to work on your paper at night. Sleep tight, we will cover your back. We offer all kinds of writing services.
No matter what kind of academic paper you need and how urgent you need it, you are welcome to choose your academic level and the type of your paper at an affordable price. We take care of all your paper needs and give a 24/7 customer care support system.
Admission Essays & Business Writing Help
An admission essay is an essay or other written statement by a candidate, often a potential student enrolling in a college, university, or graduate school. You can be rest assurred that through our service we will write the best admission essay for you.
Our academic writers and editors make the necessary changes to your paper so that it is polished. We also format your document by correctly quoting the sources and creating reference lists in the formats APA, Harvard, MLA, Chicago / Turabian.
If you think your paper could be improved, you can request a review. In this case, your paper will be checked by the writer or assigned to an editor. You can use this option as many times as you see fit. This is free because we want you to be completely satisfied with the service offered.