Final Project Requirements

Posted on | by nayeon

Final Project Overview

For the final project, you will create a full-stack, database-driven web application that uses the all languages taught in this class (HTML, CSS, JavaScript, PHP, SQL). Your web application may be on any topic, as long as you satisfy the requirements below. Your web application must work on itpwebdev.com or a different valid domain if needed. The final project is due on Friday, 05/06 at 11:59pm.

Requirements

General Requirements
  1. Create a folder named final_project and save all project files into this folder.
  2. You must build this web application using the technologies taught in this class (HTML, CSS, JS, SQL, PHP).
  3. This must be a fully functioning, polished web application that is uploaded to the itpwebdev server. This means:
    1. No JS/PHP/SQL errors should be displayed.
    2. All pages are working properly (no 500 or 404 errors).
    3. No extraneous text used during development (e.g.var_dump() strings).
HTML/CSS Requirements
  1. At least four (4) distinct pages
    1. It is up to you on how to design each of the pages. However, each page must have substantial and real content that support the topic of your web application.
    2. “Coming Soon” pages do NOT count as a real page.
    3. Confirmation pages do NOT count as a page (e.g. add_confirmation.php that displays a success message that users have added a record into the database successfully).
  2. Original layout
    1. Come up with your own layout (UI) and workflow.
    2. Do not use class examples, labs, or assignments with modified content. This will result in 0 (zero) score.
    3. You may use Bootstrap or other CSS frameworks but you may NOT use an HTML template or copy the exact design of an existing website.
  3. Navigation menu & logo
    1. A distinct navigation menu exists in all pages of the application.
    2. A logo that exists on all pages of the application. The logo can be text or an image.
  4. External stylesheet
    1. At least one (1) external stylesheet that includes CSS that is shared among multiple pages (e.g. CSS for the navigation menu).
    2. All other CSS can be written in internal stylesheets or its own external stylesheet.
  5. Consistent design
    1. All pages must have a similar structure (header, navigation, footer, etc.).
    2. Consistent look and feel (such as colors, fonts, etc) are used throughout the pages.
  6. Intuitive User Interface (UI)
    1. Clickable elements should be clearly marked,
    2. All links take users somewhere, even if it’s a Coming Soon page (no dead links),
  7. Responsive design
    1. All pages must look polished on mobile, tablet, and desktop devices. No squished or unreadable text, elements going off-screen, etc. Graders will check each page in each of these device sizes:
      1. Mobile: (0 – 767px)
      2. Tablet: (768px – 991px)
      3. Desktop: (992px and larger)
    2. Mobile-first approach is recommended, but not required.
  8. Correct and error-free code
    1. HTML Validation:https://validator.w3.org/.
JavaScript Requirements
  1. Any user input must be validated first by JavaScript, even if the server-side code will also do validation.
  2. Interactivity
    1. Must implement at least one event handler (click, hover, keypress, etc) for a meaningful interaction on at least one page that is NOT related to input validation.
  3. You may use jQuery.
Database Requirements
  1. Design (and normalize) your own database.
    1. Do not use the song, DVD, or football databases from lectures, assignments, or labs.
  2. At least three (3) tables and two (2) table relationships.
  3. Populate the database with sufficient data.
    1. There must be at least 10 rows in at least one table.
    2. If implementing pagination, the database needs to have enough records to show a few pages.
    3. Optionally, you may use data from other sources, such as:
      1. https://www.data.gov/
      2. https://data.ca.gov/
      3. https://data.lacity.org
      4. https://geohub.lacity.org
PHP Requirements
  1. Use MySQLi to connect and interact with the database.
    1. All MySQLi errors as discussed in class are checked and handled.
  2. CRUD functionality 
    1. Web application needs to Create, Retrieve, Update, and Delete records from the database.
    2. You can allow any user to CRUD or only allow privileged users to perform certain actions (e.g. only admin users can delete records).
  3. Handle any user input errors, even if JavaScript already does so.
Project Extras

Choose to implement at least two (2) of the following extras:

  1. A CSS framework or library (except Bootstrap), such as Foundation, Materialize, tailwind, etc.
  2. A CSS pre-processor such as Sass.
  3. JSON/ JSONP API or REST (Server-Side) API,
    1. An API demoed in class or used in your assignments or labs (e.g. Movie DB, iTunes, Weatherbit, etc) can be used but it will NOT be counted as an extra requirement.
    2. List of Public APIs
  4. JS library, plugin, or framework (jQuery does not count)
  5. PHP library or framework such as Laravel
  6. CSS / JS Animations:
    1. Must be more complex than a simple transition from one CSS property to another. A good rule of thumb: transition at least two properties. Some examples:
      1. https://codepen.io/matchboxhero/pen/EwdmmP?editors=1100
      2. https://codepen.io/benstanley/pen/icqok
  7. Different User Permission Levels:
    1. At least three levels: general (everyone), registered users, admin (privileged) users
    2. For example:
      1. Everyone is able to search and get results.
      2. Only registered users can create and update new records (blog posts, comments, etc).
      3. Only admin users are able to delete records.
  8. Frontend ↔ Backend AJAX ( JavaScript ↔ PHP )
  9. Sessions or cookies not related to registration or login
  10. Pagination
  11. Web Storage
  12. File Upload
  13. Other – consult the instructor.
Final Project Summary
  1. When finished with the final project, write up a project summary by filling out one of the templates.
    1. MS Word Doc
    2. Google Doc (Click File -> Make a copy to make a copy of it to your own Google Drive. Then fill it out).
  2. Save this as a PDF and upload it to the itpwebdev server.
  3. Link the PDF on your student_page.html. Label it “Final Project Summary.”
Submission
  1. Upload the final_project folder with all of its contents to the itpwebdev server via cPanel -> File Upload.
  2. Link the final project homepage to your student_page.html.
  3. Pro tip: there are ALWAYS issues when uploading files to the “live” web server. Give yourself plenty of time to upload (i.e. don’t upload to the itpwebdev server 5 minutes before the deadline).
  4. “But it works on my computer” is not an acceptable excuse. This is a web application – it must work correctly on the web and must be accessible to anyone with the Internet.

Past Final Projects

Below are several different types of web applications but all of them met the basic requirements. Get as creative as you’d like. Treat this like a project that you want to use to show off to potential employers 🙂

Resources

See this edstem post for a full list of resources you can use on this final project. In web development, there are so many free resources. This list covers some that have been helpful to students in the past.

Final Project Extension

Only if you absolutely need it — you may take an extension that will give you an extra day to complete the final project (due Sat 5/7 by 11:59pm). To obtain an extension, fill out this form by 5/6 11:59pm: https://forms.gle/6wD5KBas2jYMoUWN9 .

There will be a 7% penalty for using an extension and no office hours on Saturday. So only take the extension if you really need it. Responses to edstem posts will also be limited.

Final Project Presentations

On the day/time that is scheduled for the Final Exam for this class, we will meet on Zoom for final project presentations. Everyone is required to attend but presenting your final project is optional for extra credit. 

Presentation Date/time
  • 12pm section: Wed 5/11 at 2-4pm Pacific time.
  • 4pm section: Thu 5/5 at 4:30pm – 6:30pm Pacific time.
Presentation

The presentation is expected to be about 5 minutes long. Give us a tour of your final project and highlight any specific features that you want to show off. 

Tell us your:

  • Name
  • Year
  • Major
  • The topic of your final project
  • Why did you choose this topic?
  • Who is the main audience for this project?
  • Click through the pages and give us a tour of your final project.
Sign up to present

Because we have a limited time slot for final project presentations, only the first 22 people that sign up will be able to present. To sign up, add your name to this google sheet: https://docs.google.com/spreadsheets/d/1dkgugE9HBjZPMncNLWypz1dBPrVlR44eeBMtJ6WxbnY/edit?usp=sharing.