Month: November 2021

Lecture 22: cURL, Server-Side APIs

Posted on | by nayeon

Note: We did not meet for today’s lecture. A recording of the lecture material is below. In previous class, I mentioned the material will cover Spotify and Yelp APIs but unfortunately, those recordings are no longer accessible. I have included at least the code for Yelp and Spotify APIs for those interested.

To-do for today’s class

Slides

Link to download PDF version.

Slides for Yelp & Spotify API

Resources

Completed files

Lecture Recording

Covers the Stripe API, not Yelp or Spotify API.

Assignment 11: Final Project – Front-End

Posted on | by nayeon

Overview

This assignment serves as a milestone to help you progress along your final project. Now that you submitted a proposal and have an idea of what kind of web application you want to build for the final project, you can start writing code.

Requirements

  1. Refer to the wireframes you created in your final project proposal. Your first step in building the final project will be writing HTML and CSS to build the front end parts of your web application. In other words, you are building the “shell” of your web application. Later, you will need to insert PHP into these pages to connect to your database and run the necessary SQL queries, so keep in mind how you want the backend logic to flow as well.
  2. Setup: Create a folder named assignment11 and add save all files in here. When ready to submit, upload this entire folder to the web server via FileZilla.
  3. Create at least four (4) pages.
  4. You may use CSS frameworks like Bootstrap but you may NOT use HTML templates. Layouts must be your own original work.
  5. Must have a clear purpose and topic. All pages make up a cohesive website.
    1. Have a clear and obvious logo (can be text) or page title in the same area on every page.
    2. Have a clear and obvious navigation menu that makes it easy for users to navigate around the site.
  6. All pages must meet the responsive web design requirements of the final project. The pages must look complete on the following three breakpoints:
    1. Mobile: 767px and smaller
    2. Tablet: 768px – 991px
    3. Desktop: 992px and larger
  7. While you are not graded on the aesthetic value of the website, you will be docked points if there are any obvious issues such as:
    1. Unreadable text, due to:
      1. text is too small
      2. color of text blends in with the background
    2. Text or images get cut off at the edges of the screen
    3. Extraneous horizontal scrolling (i.e. don’t let the user scroll if you don’t need to).
  8. You do not need to write any PHP or SQL at this point (although you can if you’d like).
  9. Use hardcoded values and/or placeholders for data that you will eventually receive from the back-end (similar to the starter code provided for you for the CRUD lectures).

Lecture 20: Membership, Sessions

Posted on | by nayeon

To-do for today’s class

Slides

Link to download PDF version.

Helpful Readings

Completed files

 

Assignment 10: Final Project Proposal

Posted on | by nayeon

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 Sketch
    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. Connect to the itpwebdev server on FileZilla.
    3. Create a folder (aka directory) named assignment10 and upload the PDF to this folder.
    4. Open up your student_page.html and add a link to this PDF file.
    5. Upload the student_page.html to the itpwebdev server.

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 12/09 12/10 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 that exists in all pages of the application.
    2. A logo that exists in 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) 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 server side will also do validation.
  2. Interactivity
    1. Must implement at least one event handler (click, hover, keypress, etc) for a meaningful interaction in 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 few pages.
    3. You can 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. JSON/ JSONP API or REST (Server-Side) API,
    1. You cannot use an API demoed in class or used in your assignments or labs (e.g. Movie DB, iTunes, etc)
    2. List of Public APIs
  2. JS library, plugin, or framework (jQuery does not count)
  3. PHP library or framework
  4. CSS / JS Animations:
    1. Must be more complex than simple transition from one CSS property to another. 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
  5. Different User Permission Levels:
    1. At least three levels: general (everyone), registered users, admin (privileged) users
    2. For example:
      1. Everyone is able to browse the database
      2. Registered users can create new records (blog posts, comments, etc). Registered users only able to edit or delete their own records.
      3. Admins able to perform CRUD on entire database.
  6. Frontend ↔ Backend AJAX ( JavaScript ↔ PHP )
  7. Sessions or cookies not related to registration or login
  8. Pagination
  9. Web Storage
  10. File Upload
  11. 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 FileZilla.
  2. Link the final project homepage to your student_page.html.
  3. Pro tip: there is 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 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 🙂

Midterm: Server-Side Information

Posted on | by nayeon

Midterm: Client-Side Information

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

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”
  • For the short code questions, write your code on Sublime Text or other text editor first. Then copy paste the answers to gradescope. This will help maintain the format of the code (e.g. indentation) and also you can run your code before submitting it.
  • 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.
  • Study guide will be posted on Piazza. A practice exam will also be available on gradescope.

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.

Midterm Review Session

  • There will be a review session scheduled with a TA outside of class time. Details will be posted on piazza.

 

 

Lecture 19: CRUD Part 2

Posted on | by nayeon

To-do for today’s class

Helpful Readings

Slides

Link to download PDF version.

Completed files