Month: March 2022

Overview

For this assignment, you will write up a proposal for your final project (PDF only, no .docx). Your final project needs to be a full-stack web application on any topic. While you need to design your own database, you may use data from different sources.

Requirements

1. Write up all the below requirements in a document (Word, Google doc, etc). You will need to export a PDF named final_project_proposal.pdf when you are done.
2. Read over the Final Project requirements and think about what web application you want to build for the final project.
3. Topic: discuss what your website is about in 1-2 sentences.
4. Audience: In 1-2 sentences, describe who the intended audience is for this application.
5. Design & Style:
   1. Discuss design and color scheme in 2-3 sentences.
      1. Don’t know where to start? Coolors.co is a great tool to help you generate color schemes.
      2. Design inspiration: dribbble.com, codepen.io, awwwards.com
   2. Provide links to 3 websites that inspired your design.
6. Scope:
   1. How many pages are you planning to have?
      1. What are the pages?
   2. If it is a single page website, how many sections are you planning to have?
      1. What are the sections?
7. Database:
   1. What data will be stored in the database?
   2. Where is data coming from?
8. Database Diagram:
   1. Design the database you will use for this project and create a database diagram using MySQL Workbench.
   2. You do not need to insert any records. Just the schema is sufficient.
   3. Include the database diagram of your database (image).
9. Wireframes (minimum of 4 wireframes total):
   1. Include wireframes of what the home page and one other major page of your web application will look like .
      1. You must include at minimum, one mobile version and one desktop version of each page (2 wireframes per page, 4 wireframes total).
   2. These wireframes can be hand-drawn or created digitally using a graphics tool like Figma (free), Sketch, or Adobe Photoshop. You can also use wireframe tools like Whimsical (free version available), Balsamiq or Omnigraffle.
   3. These wireframes do not need to have a ton of detail (placeholders are fine), but should still give you a good idea what the application will end up looking like. Wireframes that look like any of the three samples below are acceptable.
      1. Sample 1 – Hand-drawn
      2. Sample 2 – Wireframe created by Balsamiq
      3. Sample 3 – Wireframe created by Whimsical
   4. Of course, if you want to add more detail like colors, real images/text, etc, you are welcome to do so!
   5. Insert these wireframes to the document as well.
10. This proposal is not set in stone. You may change any aspect of your final project at any time. However, spending a big chunk of time thinking through the final project now rather than later is a wise idea. Don’t treat this assignment trivially.
11. Submission:
    1. Export this document as a PDF file (name it final_project_proposal.pdf).
    2. Login to cPanel -> Files -> File Manager.
    3. Create a folder (aka directory) named assignment10 and upload the PDF to this folder.
    4. Open up your student_page.html in the public_html folder and add a link to this PDF file.
    5. Re-upload the modified student_page.html to the itpwebdev server.

How to Delete

In class today we ran out of time to cover “delete.” Watch this video to learn how to implement the delete function: https://youtu.be/yN5twjglrHs

To-do for today’s class

• Download starter file: lect19-update-delete/ (Google Drive)
• Refer to song database diagram:
  

  

Helpful Readings

• Prepared Statements (php.net)
• PHP MySQLi Prepared Statements Tutorial (Website Beaver)

Slides

Link to download PDF version.

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect19-update-delete/
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect19-update-delete/

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 🙂

• COVID-19 Report
• BlackJack
  • username: nayeon
  • password: abc123
• Get Inspired
• WheresmyCP
• Super Hero Ranker
• Journaling and Sentiment Analysis
  • username: ttrojan@usc.edu
  • password: abc123

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.

To-do for today’s class

• Save this Google Drive folder in the itp104 folder that you are saving all the lecture material in:
  https://drive.google.com/open?id=1PaMy8DKtSOKwmfGYSAuY8cl9EfmbnJDk&authuser=nayeonki%40usc.edu&usp=drive_fs
  Click on the folder name and then click Download to get a .zip of this folder.
• Note you must be logged in with your USC Google account to access this file.

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

• https://github.com/nayeonk/itp104-spring-2022/tree/master/lect10-css-transitions

Overview

For this lab, you will create the detail pages using your DVD database.

Sample

Note: samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

http://303.itpwebdev.com/~nayeon/dvd-details/

Requirements

HTML/CSS

1. You may use the given starter HTML files (styled with Bootstrap) or create your own HTML files for practice.

Search Form & Search Results

1. Same requirements as in Assignment 8.
2. You may re-use your Assignment 8 files.
3. Each DVD title should be a link to Detail Page.
4. If you took an extension for A8 and do not have the search pages complete, hard code a song track result in the search_result.php and link that result to the detail page.

Detail Page

1. Check for any errors & missing data.
   1. Output appropriate error messages.
2. Display all information corresponding to the DVD.
   1. Title,
   2. Release Date,
   3. Award,
   4. Label (name, not primary ey),
   5. Sound (name, not primary key),
   6. Genre (name, not primary key),
   7. Rating (name, not primary key),
   8. Format (name, not primary key).
3. Link for users to go back to search results. OK if search query is not saved.

Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

1. Open a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
2. Login with your username and password (this password does not sync with your USC NETID password. You set this password in Lab 1. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
   
4. Double click to navigate inside the public_html folder.
5. Create a new folder inside the public_html folder by clicking on the +Folder button on the top left.
   
6. Name the folder lab10. Double click it to navigate inside this folder.
7. Click on “Upload” to upload all assignment files to this folder.
   
8. Drag and drop all assignment files to upload into this folder.
9. In your browser, go to http://303.itpwebdev.com/~yourusername/lab10/search_form.php to check that the assignment file has been uploaded correctly.
10. One last thing. In your computer, open up student_page.html that you created in Lab 2. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
11. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
12. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Below is a screenshot sample of what it should look like.
    
13. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments/Labs -> Lab 10: DVD Detail Pages. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Overview

For this assignment, you will complete a CRUD application using your DVD database.

Sample

Note: samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

http://304.itpwebdev.com/~zune/assignment_07/index.php

Caching

Browsers like to cache previous versions of your web files. After you upload the completed files to the server and test them, you might notice that your changes are not showing. For example, add a new DVD and search for it. If the new DVD does not show up in the search_results.php, your browser may be caching a previous version of this file.

If this happens, open MySQL Workbench and double-check that your database is accurate. Then, try to hard refresh the page by pressing Shift on your keyboard while clicking the refresh icon in the browser. This will force the browser to show the late version of the file.

Requirements

HTML/CSS

1. You may use the given starter HTML files (styled with Bootstrap) or create your own HTML files for practice.

CRUD Workflow

1. You can use any workflow, as long as you provide full CRUD functionality

Main Page (index.php)

1. Page title
2. Links to Search Form and Add Form

Search Form & Search Results

1. Same requirements as in Assignment 8.
2. You may re-use your Assignment 8 files.
3. Each DVD title should be a link to Detail Page (completed in Lab 10).
4. Additionally, each DVD Title on Search Results page should have a delete button where users can click to delete the title.

Detail Page

1. Same requirements as in Lab 10.
2. You may re-use your Lab 10 files.

Add Form

1. Check for any errors and missing data.
   1. Output appropriate error messages.
2. DVD Title text field (indicate as required field).
3. Following drop-downs dynamically populated with data from the database.
   1. Genre,
   2. Rating,
   3. Label,
   4. Format,
   5. Sound,
   6. Use primary keys for value attributes,
   7. Display the name (genre, rating, etc) as a drop-down option,
   8. Include Select One (empty/no selection) as the first option in each drop-down.
4. Award Text Area.
5. Release Date Date Input (<input type='date'...>).

Add Confirmation

1. All PHP & MySQL errors are handled and displayed.
   1. Including missing user input for required fields.
2. Add DVD to the database using prepared statements.
   1. Only DVD Title is a required field.
   2. Other fields should have user-selected values or NULL.
3. Display the following message if DVD is added successfully in green:
   1. [DVD Title] was successfully added.
4. Note: When searching for newly added records, you might have to do hard-refresh (Control/Command + R) to see them.

Delete & Update Functionality

1. Users need to be able to update and delete each DVD record.
   1. Show confirmation popup before actually deleting the record.

Delete Page

1. Check for any errors & missing data.
   1. Output appropriate error messages.
2. Delete DVD record from the database.
3. Display the following message if DVD is deleted successfully:
   1. [DVD Title] was successfully deleted.

Edit Form

1. Check for any errors & missing data.
   1. Output appropriate error messages.
2. DVD Title text field (indicate as a required field).
3. Following drop-downs dynamically populated with data from the database.
   1. Genre,
   2. Rating,
   3. Label,
   4. Format,
   5. Sound,
   6. User primary keys for value attributes
   7. Display the name (genre, rating, etc) as drop-down option,
   8. Include Select One as first option in each drop-down.
4. Award Text Area.
5. Release Date Date Input (<input type=”date”>…)
6. DVD Title ID hidden field with value set to current DVD’s primary key.
7. Only DVD Title is a required field for user input. All other fields are optional.
8. All form fields need to be pre-populated or have current DVD’s data pre-selected.
   1. For example:
      1. Pre-populate DVD Title text-field with DVD’s current title.
      2. Pre-select drop-downs with DVD’s current drop-down value.
9. Submit & Reset buttons.

Edit Confirmation Page

1. Check for any errors & missing data.
   1. Output appropriate error messages.
2. Update the DVD record in the database using prepared statements.
3. Display the following message if DVD is updated successfully:
   1. [DVD Title] was successfully updated.
4. Provide a link to the details page for edited DVD record.

Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

1. Open a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
2. Login with your username and password (this password does not sync with your USC NETID password. You set this password in Lab 1. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
   
4. Double click to navigate inside the public_html folder.
5. Create a new folder inside the public_html folder by clicking on the +Folder button on the top left.
   
6. Name the folder assignment09. Double click it to navigate inside this folder.
7. Click on “Upload” to upload all assignment files to this folder.
   
8. Drag and drop all assignment files to upload into this folder.
9. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment09/index.php to check that the assignment file has been uploaded correctly.
10. One last thing. In your computer, open up student_page.html that you created in Lab 2. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
11. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
12. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Below is a screenshot sample of what it should look like.
    
13. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Assignment 9: CRUD DVD App. You will get some points deducted for not uploading correctly but at least you will not get a zero.

When & Where: Online, through Gradescope.com can start the exam between Thu, 04/07 12:00 pm to Fri, 04/08 6:00 pm.

Length & Format: 80 minutes, online exam.

Topics: Database Basics, Database Design (Lecture #13) to CRUD Part 2 (Lecture #19)

Types of Questions: 

• Multiple choice – select one answer
• Multiple choice – select all that apply
• True/False
• Fill in the blank
• Short Code

How to take the exam:

• Log in to gradescope.com. You will need to create an account if you haven’t already with your USC email address.
• Once you have logged in, you should see “Midterm: Server-side Exam”
• Have questions during the exam? Because you are allowed to take the exam at any time, we will be unable to answer questions you have during the exam like you would in a physical setting. Make your best-educated guess and for really uncertain questions make a note about it separately and email it to the instructor after the exam.

Important Notes:

• This is an open-book exam. You may use notes, slides, and online resources. The only thing you CANNOT do is collaborate with any human beings on this exam. Do not discuss with anyone about the exam. Your exam must be completed on your own, by yourself.
  • Any suspicion of collaboration will be reported to SJACS.
• I highly recommend you create one single reference sheet instead of scouring your notes/slides/etc during the exam. This is a timed test so you want to limit time wasted on looking stuff up.
• You will be asked to design a database and create an EER diagram (like the Simple Film Database lab). You can hand-draw one up, take a photo of it and upload it, or use Workbench to create one.

Tips:

• Anything that appeared on the lecture or the slides is fair game. The best way to study for this exam is to review the code from lectures and your labs and assignments and review what each line of the code does. Rewriting some of the code is very helpful.
• Review the links under Resources/Helpful Reading under each lecture notes to get a deeper understanding of topic(s) taught in that lecture.

Study Guide:

• Midterm II Study Guide

Short Coding Sample questions:

• Sample questions
• Solutions (Pro tip: try the questions without seeing the solutions first)
• There is no full practice exam for this exam.

To-do for today’s class

• Download starter file: lect18-detail-insert/ (Google Drive)
• Refer to song database diagram:
  

  

Slides

Link to download PDF version.

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect18-detail-insert
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect18-detail-insert

To-do for today’s class

• Download starter file: lect17-php-mysqli/ (Google Drive)
• Refer to the song database diagram:
  

  

Helpful Readings

• PHP MySQLi documentation: http://php.net/manual/en/book.mysqli.php

Slides

Link to download PDF version.

Lecture Files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect17-php-mysqli/
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect17-php-mysqli/

To-do for today’s class

• Save this Google drive folder in the itp104 folder that you are saving all the lecture material in:
  https://drive.google.com/open?id=1Fl0DglVje5OAkqDAv0OwWTIbHNmBzzvN&authuser=nayeonki%40usc.edu&usp=drive_fs

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

• https://github.com/nayeonk/itp104-spring-2022/tree/master/lect09-iframe-media