Bicentennial Seal
CS 325: Web Programming
(Spring 2014)

Syllabus

Teachers

Assignments
Assignments


Other Pages

Project 5:
Individual Final Project


Assigned: Tue May 06 2014
Due: 10:59:00 AM on Thu May 15 2014
Team Size: 1
Language: HTML + CSS + PHP + JavaScript + Ajax + SQL
Out of: 257 points


Your final project for the semester!

Part 0, 30 points: Create a webpage for yourself, an Independent Awesomeness Consultant. As an IAC, you are often fielding phone calls from people who are looking to imbue themselves with Awesomeness. Your site should explain why you are so good at helping people discover Awesomeness (or some other relevant cool thing). Create a weekly schedule, by hour, and color code the times to describe when you are most and least likely to be phoneable.

Part 1, 40 points: Add a page with a bunch of quotes about how awesome you are as an IAC! Make this page even more awesome by having the quotes be of different sizes. Try to arrange them sort of like a Wordle, except they will be longer quotes. To do this, you'll have to try to rotate elements. There is a CSS3 way to do it (that no major browser supports) and a CSS browser-specific way to do it. Include both in your CSS (to prepare for the CSS3 takeover). You should include at least 10 quotes.

Part 2, 40 points: Add a comment board. Visitors can post a comment, which your server stores in an SQL table. Each comment should be in its own record along with the commenter's username. You should then display all those comments, along with the date and time the comment was made. Hint: Check out PHP's getdate function to get the date the comment was made.

Part 3, 40 points: Add an edit button to comments on the comment board. Clicking this button should allow the user to edit the text in the comment. Include a submit button that places the new text in that comment without reloading the page.

Part 4, 20 points (Bonus): Automatically update comments on your page without refreshing the page.

Part 5, 40 points: Use a separate SQL table for user information, including the length of time they've been your friend. Use a join to calculate the number of comments they've left overall on your site and report that number near their name for each of their comments.

Part 6, 30 points (Bonus): Insist that users must log on to post comments under their username. Allow new users to sign up for accounts and create their own username/password combination.

Part 7, 40 points: Add some sort of graphical widget to showcase your awesomeness. Your graphical widget should change visually according to user clicks (but not leave the page).

Part 8, 15 points (Bonus): Make your widget animate even when it's not actively receiving user clicks. It should not just change colors; elements should move around.

Part 9, 10 points: Include good navigational tools so that I can get back and forth between pages without ever having to use the back button.

Part 10, 17 points: Use good web-coding style. That means:

  • All HTML is in the webpages (.html or .php files). Please come see me if you're having trouble removing usage of .innerHTML in JavaScript.
  • No unbalanced or deprecated tags in your HTML.
  • No IDs used multiple times!
  • All CSS is in the style sheets (.css files).
  • No deprecated attributes or properties!
  • All JavaScript is in scripts (.js files). No obtrusive JS in your HTML!

Submitting your Project:

Upload your code to our webserver (cslamp). Reply to my email requesting your final submissions. In that email:

  • include the URL where I can view your project on cslamp in a web browser.
  • mention what your graphical widget is and on which page I can find it.
  • briefly describe your SQL tables for user accounts and comments.
Sweet! Thank you so much for taking this course! :)

Reminder: I won't open these emails until I grade the projects. If you ask a question in the email, I won't get to it until after the project due date.