Lab 1 – Semester Project

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. 

  • Create a ChineseZodiac folder on your home machine AND on the root Web folder on your development/testing server (this provides 2 places for the folder and files for backup).
  • Create an images folder inside the ChineseZodiac folder.  Watch how you name the images folder.  If you use an uppercase I, you will need to remember to refer to the folder with the uppercase I in your links.

Lab  1

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

In your text editor, develop the zodiac template page, using any technique you have learned in your web programming classes.  The template will include a header, a footer, navigation, the button navigation you created in Part 2 and the content.  (the header, footer, navigation, button are just placeholders at this point – see next paragraph)  Use HTML 5 and incorporate Responsive Design as much as possible.  Be sure to use comments throughout your HTML, CSS, JavaScript, jQuery, PHP, etc.

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:


Include FilenamesDescription
inc_header.phpInserts the banner image created in Step 1
inc_button_nav.phpInsert the nine buttons created in Step 2.  Code to submit the buttons will be inserted later
inc_text_links.phpInserts the code for a text links bar.  Code to turn the text links into hyperlinks will be inserted later
inc_footer.phpInserts a copyright symbol and the current year
inc_home.phpInserts 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.

Research Paper 101
Calculate your paper price
Pages (550 words)
Approximate price: -

Reasons to trust Research Paper 101

On Time Delivery

We pride ourselves in meeting the deadlines of our customers. We take your order, assign a writer but allow some more time for ourselves to edit the paper before delivering to you. You are guaranteed a flawless paper on a timely manner...

24x7 Customer Live Support

Our team at Research Paper 101 is committed to handling your paper according to the specfications and are available 24*7 for communication. Whenever you need a quick help, you can talk to our writers via the system messaging or contact support via live chat and we will deliver your message instantly.

Experienced Subject Experts

Online Experts from Research Paper 101 are qualified both academically and in their experiences. Many are Masters and Phd holders and therefore, are qualified to handle complex assignments that require critical thinking and analyses...

Customer Satisfaction

We offer dissertation papers as per students’ wishes. We also help craft out the best topics and design concept papers. By ordering with us, you are guaranteed of defending and making through those hard faced professors in the defense panel!

100% Plagiarism Free

We at Research Paper 101 take plagiarism as a serious offence. From the start, we train our writers to write all their papers from scratch. We also check if the papers have been cited appropriately. Our website also has a tool designed to check for plagiarism that has been made erroniusly. In essense, the paper you get will be 100% legit...

Affordable Prices

We understand that being a student is very challenging, some students balance between work and studies in order to survive. We therefore offer pocket friendly rates that are very competitive in the market.

Try it now!

Calculate the price of your order

Total price:

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.

Our Services

No need to work on your paper at night. Sleep tight, we will cover your back. We offer all kinds of writing services.


Essay Writing Service

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.


Editing Support

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.


Revision Support

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.