Project #1
Create a Fan Club Multimedia Web Site
The point of this project is to demonstrate a comprehensive grasp of applying Cascading Style Sheets, Javascript and Multimedia objects to a web site that works on both the Mozilla and the Internet Explorer 5.x platforms. You should pick an area of popular culture that is of interest to you. You will need to find multimedia objects to download and integrate into your web site. Examples might be for a movie, an actor, an author, a TV show or even a politician. You will find it easier if it is for someone of something real but if you have the talent or energy it can be for some wholly fictitious entity, as long as it seems convincing. It may be up to you to create multimedia objects for these sorts of cases. Sites will be graded not just on these requirements but on the usability and attractiveness of the site as well as how well the site communicates its intent. Code should follow XHTML principles. Do not use tools other than a text editor to do your work for this assignment. (It is easy to spot code generated by tools.) You will need to consistently apply an external style sheet to all your web pages, and you will need to create and integrate a form that will be used to allow someone to join your fan club. The instructor will provide a URL that will provide a response page. You will need to use a list of field names provided by the instructor in your form. The form must submit properly and store the information on the server. You will also have to demonstrate a means of showing the members of your fan club from the server's database.
Web Server Requirements (new)
Please put this project on a publicly accessible web server and provide me the URL by the start of class on Saturday, March 22nd. I recommend using the NVCC Student web server since you'll need it for Project #2. For instructions on using the NVCC web server go here. You will need an FTP tool to move the information from your computer to the web server. If you don't have an FTP tool try WS_FTP LE. (LE is light edition and free. Select the right product.) If you are new to FTP you might want to review my ITD-110 slide set on FTP.
CSS Requirements.
 | You must use an external cascading style sheet and apply it to all of your pages. |
| You must use IDs and Classes and apply them using both <div> and <span> tags. |
| Apply a background image using a style sheet to all the pages on your site. |
| Using a style sheet apply a consistent set of fonts rendered for all your web pages. Fonts may be selectively overridden with embedded or external styles. |
Javascript Requirements. The site must contain one HTML form that allows a person to join your fan club. Your club assesses dues and must have at least three levels of membership, each costing different amounts of money and with different privileges. Members pay for their membership with a major credit card. You will have to write Javascript to ensure that the form is filled out error free before it is sent to the web server for validation. This will include making sure that certain fields are not blank, are wholly numeric, have a certain length and money is collected in the appropriate amounts only. The instructor will provide a URL to post the results of your form that will actually keep a roster of your members in a database. Another page of the site will retrieve information about your members dynamically from the web server. You will use hidden fields to pass information about the cascading style sheet and site name for the web server to use. In addition you will have an interface that will show members of the club dynamically. Again the instructor will provide the interface details and you will need to pass certain hidden fields to distinguish your site in the database from other sites in the class. The list will return a list of members sorted by criteria that the user will select via another form.
Multimedia Requirements. You will need to integrate at least one Java applet into your web site. You don't need to write a Java applet; that is outside the scope of this course. There are lots of free applets out there. You can start your search at http://www.hotscripts.com/Java/Applets/ (caution: not all are free). You should provide a small library of multimedia objects (no less than three) that can be rendered by either the Mozilla or the IE browser. They could be sound or video files. These should probably be short clips. You will probably also want to include many still images to dress up your site. All images and multimedia objects must exist on your site.
Caution: IE Version 6 contains a 3 year old "crippled" version of Java. If you are using IE 6 you should download the latest Java Virtual Machine, otherwise newer applets may not work right. The Java VM can be downloaded from: http://java.sun.com/getjava/index.html.
Project #1 Form & Javascript Validation Requirements
Use the following URL for the action attribute for your form:
http://www.oakhillva.com/php/IST-226-P1.php
Make sure you set the method="post" attribute for the form or it may not work.
I have tested the back end server code (written in PHP and using a MySQL relational database) rather extensively so I don't expect any surprises. If you find some mistakes please notify me promptly. A sample form I put together to validate my backend logic (quick and dirty, minus the Javascript) can be found here.
| Form Field Name | Field Requirements |
| orgn_id | Hidden field. Use the last four characters of your student ID. 4 numeric characters are expected. |
| title | Hidden field. Whatever you put here will be displayed in the <title> tag of the response page. This must be plain text. |
| clubname | Hidden field. This is the name of your fan club. It will be displayed in <h1> and centered near the top of the response page. |
| css_location | Hidden field. Enter the absolute URL containing the style sheet to use to render the response page. Presumably it will match what you are using for your site. |
| ResponseAddress | Hidden field. This is an email address that you set. Your member will receive an email thanking them for becoming a member from this address. You might want to match it to an address from your site, perhaps membership@myfanclub.com. |
| ResponseName | Hidden field. This is text name of the person or department that will respond to your member in a thank you email. It is not an email address but it appears with the email address. |
| MemberName | This is the name the member as will be recorded in the member database. Maximum length=30 characters. Minimum length = 5 characters. |
| address1 | The first line of the member’s address. This information is required. Consequently at least 1 character must be entered. Maximum length = 50 characters. |
| address2 | The second line of the member’s address. Maximum length = 50 characters. |
| City | At least 2 characters must be entered. Maximum length = 30 characters. |
| State | State as a two-digit upper case postal code, ex: “VA” |
| ZipCode | 10 characters in 99999-9999 format. The sixth character must be a – and the other characters must be numeric. |
| Email address of member. There must be an @ sign in the field for the form to submit. Maximum length = 50 characters. | |
| CreditCardType | Should be “Visa”, “MC” or “Discover” only. A radio button or select list would be the appropriate choice. |
| CreditCardNumber | Exactly 16 characters and each character must be numeric. No spaces or dashes are allowed. |
| CreditCardExpDate | Must be in the format MM/YYYY with all characters except the / as a number. |
| CreditCardName | This is the name on the credit card. It could be the same as MemberName, but may not be. Maximum Length is 30 characters. |
| Dues | This is the amount charged to the card. It must be a positive integer. Do NOT prepend with a dollar sign or end with an exclamation point. Presumably a dues amount will correspond to either a time period of membership or a membership class. |
| Operation | A one-character description of the operation to be performed. Values are “A” (Add New Member), “D” (Delete Member), “C” (Change Membership) and “R” (Report Membership). The page will return different information based on the operation. A search is done on orgn_id + MemberName. If this combination does not exist and the code is “A” the member is added to the database. If “D” and this combination does exist the member is deleted. If “C” and the combination does exist the information is changed to reflect the information on the newly submitted form. If “R” a report of the membership is returned. For a report note that only this field and the hidden field orgn_id needs to be sent. In most cases a report would be done either via a separate form. |
Last Updated 08/06/2004