Category: 20211_itp303

Overview

This assignment will help you get more practice with PHP syntax, form variables, and conditional statements

Sample

See working sample here: http://303.itpwebdev.com/~ta303/samples/lab-php-form/form.php

Requirements

1. Download starter file.
2. Form Page (form.php)
   1. Fill out <form> tag’s action and method attributes appropriately. 
   2. When this form is submitted, it will run submit_form.php.
3. Form Output / Submission Page (submit_form.php)
   1. Perform all validation as needed.
      1. If any of the fields are not filled out (except Flavor), display “Not provided” message in red.
      2. Tip: The provided HTML pages are using Bootstrap. Therefore, you can use CSS class text-danger for red text and the class text-success for green text.
   2. Show a message with current date & time in following format:
      1. This form was submitted on [weekday], [month] [day], [year] at [time].
         1. Example: This form was submitted on Sunday, September 17, 2017 at 03:15:14 PM.
         2. For the hour, use 12-hour format (not 24) with leading zeros.
      2. Use Los Angeles timezone.
      3. Refer to the PHP official documentation and search for the date function to see how to get the formatting exactly right.
   3. Display following values in submit_form.php after the form is submitted:
      
   4. Submission
      1. When completed, you will need to upload this page to the itpwebdev server via FileZilla (like you have done for labs/assignments earlier in the semester).
      2. Connect to the itpwebdev server on FileZilla. Create a folder named assignment08 and upload all files to this folder.
      3. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment08/form.php to check that the assignment file has been uploaded correctly.
      4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
      5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.

To-do for today’s class

• Open up MySQL Workbench to write some more SQL statements.

Slides

Link to download PDF version.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect15-more-sql
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect15-more-sql

To-do for today’s class

• Log in to cPanel (same credentials as FileZilla): http://303.itpwebdev.com/cpanel
• Download MySQL Workbench (version 8.x): https://dev.mysql.com/downloads/workbench/

Slides

Link to download PDF version of slides.

Completed Files

Completed files is a .mwb file that we created together in class. However, seeing it won’t be very helpful. If you are missing something, I recommend re-watching the last ~30 minutes of the lecture or looking at the Workbench Guide pdf.

• Coming soon…

To-do for today’s class

• Download song.sql.
• Login to cPanel and create a new database named username_song_db
• Download and install the latest MySQL Workbench if you haven’t already: https://dev.mysql.com/downloads/workbench/.
• Refer to below EER diagram of Song Database.

Slides

Link to download PDF version of slides.

Completed Files

• 12pm: https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect14-select
• 4pm: https://github.com/nayeonk/itp303-spring-2021-4pm/tree/main/lect14-select

Overview

This assignment consists of two parts: importing DVD database (needed for future assignments) and writing SELECT SQL statements against the DVD and song databases.

Requirements

Part 1 – DVD Database Import

1. Download dvd.sql file.
2. Create a new database in cPanel → MySQL Databases.
   1. Name it username_dvd_db (cPanel will prefix your username for you automatically).
   2. For example: ttrojan_dvd_db.
3. Import dvd.sqlfile to the newly created database.
   1. cPanel → PHPMyAdmin → [Click on username_dvd_db Database] → Import.
4. Verify all tables exist and are populated with data.
5. All tables and relationships should match the figure below.

Part 2 – SELECT SQL Statements

Open up MySQL Workbench and create one .sql file. In this file, you will write seven SQL statements – four statements against the song database and three statements against the DVD database you just imported in Part 1. Above each statement, write a comment with the below prompt.

Important: Use JOIN statements when querying from multiple tables as taught in lecture. Do NOT select multiple tables on FROM statement. See this stackoverflow link for more info and also this piazza post.

Song Database SELECT statements (4)

1. Display albums that have the letters “on” somewhere in the album title. Sort results in alphabetical order by album title.
   Sample results:
   
2. Same as #1, but only show album title and artist name (no artist_id) columns.
   Sample results:
   
   
3. Display tracks that have AAC audio file format. Only show track name (alias: track_name), composer, media type name (alias: media_type), and unit price columns.
   1. Use media_type_id column for comparison instead of media type name.
      Sample results:
      
      
4. Display R&B/Soul and Jazz tracks that have a composer (not NULL). Sort results in reverse-alphabetical order by track name. Only show track ID, track name (track_name), composer, milliseconds, and genre name (genre_name) columns.
   1. Use genre_id column for comparison instead of genre name.
      Sample results:
      

DVD Database SELECT statements (3)

1. Display drama (genre) DVDs that won awards. Sort results by year of when the DVD won an award. Show dvd title, award, genre, label, and rating.
   Sample results:
   
2. Display DVDs made by Universal (a label) and have DTS sound. Show dvd title, sound, label, genre, and rating.
   Sample results:
   
3. Display R-rated Sci-Fi DVDs that have a release date (not NULL). Order results from newest to oldest released DVD. Show dvd title, release date, rating, genre, sound, and label.
   Sample results:
   

Submission

When complete, you must upload the completed .sql file on Blackboard. Go to Assignments -> Assignment 7: SELECT Statements and upload the file.

Overview

This lab helps ensure you understand this week’s material and have all software working for upcoming lectures and assignments. You will design, upload, and populate a simple film database.

Requirements

1. Create a database in cPanel -> MySQL Databases
   1. Name it yourusername_film_db (your DB will be prefixed with your username by default).
2. Open MySQL Workbench. Create a new model.
3. Use the same name from step #1 for your schema name in MySQL Workbench.
4. Design a database to store data from Highest Grossing Films table below.
5. Normalize the database.
6. Establish table relationships.
7. Use appropriate data types.
   1. Hint: Range of INT data type is too small to fit Worldwide Gross field.
      1. https://dev.mysql.com/doc/refman/5.7/en/integer-types.html
8. Column names must be lowercase and separated by underscores for consistency.
   1. Example: worldwide__gross.
9. Populate all tables with correct data.
10. Save the model (saves as a .mwb file) and upload on Blackboard.
    1. Go to Blackboard->Assignments->Lab 7: Simple Film Database Design
    2. If you are unsure of your design choice (how you normalized tables), you can add comments on Blackboard rationalizing your decision.
11. Forward Engineer your model to 303.itpwebdev.com server.
12. You can check that the database is successfully on the server by going to cPanel -> Databases -> phpMyAdmin.

Sample

No sample.

This was a special guest lecture delivered by Prof. David Tang. Recording is available on BB.

Slides

https://docs.google.com/presentation/d/1k1uVoQV32HDFnR1GcWRKlPERtGUY0C0tuAC0Oj7lIuo/edit?usp=sharing

This lecture was pre-recorded. Watch it here (youtube): https://youtu.be/11XLhlAxd1I

To-do for today’s class

• Save this Dropbox folder in the itp303 folder that you are saving all the lecture material in:
  https://www.dropbox.com/sh/vlnl4ukvywrvdvo/AACHmIAB1UKlkRtbLQqFXtsCa?dl=0
  Click Download -> Direct Download on top left to get a .zip of this folder.
• Look at jQuery documentation: https://api.jquery.com/

Slides

Link to download PDF version.

Completed Files

• 12pm:https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect11-jquery/
• 4pm:https://github.com/nayeonk/itp303-spring-2021-12pm/tree/main/lect11-jquery/

Overview

For this assignment, you will create a simple To Do List app using jQuery. This assignment will also help you review your HTML and CSS skills in preparation for the upcoming midterm exam.

Suggested approach: start with HTML first and make the delete / add functionalities work. Work on styling at the very end. Following the requirements step by step is highly recommended.

Sample

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

Requirements

Note: Steps 1-3 are from this week’s lab. If you have submitted the lab, make copies of the lab files for assignment 6. Do not modify lab files past the lab deadline!

1. Code set-up
   1. Create a new .html file, .css file and .js file.
   2. Include the jQuery library in your .html file.
   3. Write all your CSS in the .css file.
      1. Link your .css file into the .html file.
   4. Write all your JavaScript in the .js file.
      1. You can add your .js file in your .html file by using <script src="name_of_file.js"></script>
      2. Use jQuery for all your DOM manipulation and event listening. You will write very little vanilla JS.
      3. Note you can still use JavaScript along with jQuery. For example:

         $("button").on("click", function() {
             let isOn = true; // JS way of creating variables
             if( isOn == true) { // JS way of if/else statements
                 $("input").val("The app is on");
             }
         });

2. Today’s weather information is displayed at the top of the page.
   1. Use Weatherbit.io’s API to get this information. You will need to create a free account to obtain an API key.
   2. Read over the documentation to find out how to get the weather in Los Angeles.
   3. Get the temperature, a description, and the apparent temperature (“feels like”).
   4. The temperature must be in Fahrenheit.
3. To Do list structure
   1. Create a container that will hold all your to do list items. The container should be between 400 – 600px wide.
   2. At the top of the list, add a heading that reads “To Do List.” Add a background color of your choosing.
   3. Below the heading, add an input area that allows users to type in a to do item here.
      1. Include a placeholder that reads “Add to-do item here”.
      2. Do not add a “Submit” button.
   4. Below the input area, create a list of to do items using the <ul> tag. By default, have at least three items hardcoded.
4. Change the city and remember the city
   1. Add a dropdown at the top of the to do list. Add three cities of your choices as options in the dropdown (Los Angeles can be one of them).
   2. When user changes the dropdown, call the Weatherbit API again and get the weather for the city that the user selected.
   3. Save the city that the user chose last in Local Storage.
   4. When the page is refreshed, the city selected in the dropdown must be the city that the user chose last (retrieve from local storage. Web Storage was covered in lecture #8).
5. Deleting an item
   1. Have three items hardcoded in so that you can easily test the delete function.
   2. When a user clicks on the to do item text (not the square), change the color of the item and strike it out. Both of these changes can be done using CSS properties. When a user clicks on the to do item text again, change the text style back to normal.
   3. When a user clicks on the square (or X if you have not replaced it with a square icon yet) next to the to do item, remove the to do list item entirely from the DOM.
      1. Fade out the item before removing it.
      2. Hint: there is a jQuery method that removes DOM elements.
   4. The to do item must be removed ONLY when the square is clicked.
   5. If the item is not crossed out and a user clicks on the square button, do not cross out the item when it is removed. The item must only be removed and not crossed out.
6. Adding an item
   1. A to do item is added to the bottom of the list when a user types into the input area and presses the ENTER key. There is no button to submit this information.
      1. Hint #1: Forms get submitted when user presses ENTER key.
      2. Hint #2: jQuery has a method that allows you to easily append items.
   2. After adding an item, try to delete the item that was just added. You may find that you cannot delete the dynamically created item. Read about Event Delegation and Event Propagation here to help you solve this problem: http://learn.jquery.com/events/event-delegation/
7. Styling
   1. Icons – The square icon and plus icon shown in the sample are from the icon library Font Awesome here: https://fontawesome.com/
      1. Read the documentation to learn how to load Font Awesome library into your code and how to use a specific icon.
      2. You are free to use any icons you wish. You do NOT have to use the square or plus icon shown in the sample, but do pick icons that make sense 🙂
   2. Font Family – Choose a font family that is not a default web font (e.g. Arial or Times New Roman). Google Fonts is a great resource.
   3. Colors – Choose your own colors. Colors do not need to match the given sample.
      1. Add a background color for the whole browser.
      2. Add a background color where you display the weather information.
   4. Hover effect – When a user hovers over any of the list items, change its background color to a color of your choosing.
   5. Box-shadow – Not discussed in lecture before, but it is a neat CSS property that enhances the look of the list. Add a box shadow around the container of the to do list.
      1. Read more about the box-shadow property at MDN.
      2. A quick google search will reveal many sites that generate box-shadow effects for you.
8. The plus icon
   1. When the plus icon is clicked, show / hide the input area.
   2. Add an effect so that it feels the input area is sliding up and down. See sample for details.
9. Web Storage
   1. Add/remove to do items to local storage so that if the user closes the browser tab and comes back to it, the to do items are still 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 FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named assignment6 inside the public_html folder. Then upload this assignment HTML file and images to the assignment6 folder. Refer to the guide if you’re not sure how to upload the assignment file.
3. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment6/todolist.html to check that the assignment file has been uploaded correctly.
4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
6. (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 6: To Do List. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Overview

This lab is intended to help start your Assignment 6. Refer to the assignment requirements while you are working on this lab.

Sample

Requirements

1. Code set-up
   1. Create the following new files:
      1.  todolist.html file,
      2. style.css file, and
      3. main.js file.
   2. Include the jQuery library in your .html file.
   3. Write all your CSS in the .css file.
      1. Link your .css file into the .html file.
   4. Write all your JavaScript in the .js file.
      1. You can add your .js file in your .html file by using <script src="name_of_file.js"></script>
      2. Use jQuery for all your DOM manipulation and event listening. You will write very little pure JS.
      3. Note you can still use JavaScript along with jQuery. For example:

         $("button").on("click", function() {
             let isOn = true; // JS way of creating variables
             if( isOn == true) { // JS way of if/else statements
                 $("input").val("The app is on");
             }
         });

2. Simple HTML structure
   1. Before working on adding/deleting items or styling the app, create a basic HTML structure that will help you start the assignment.
   2. Create an area at the top of the page with some text about today’s weather. A placeholder is fine for now.
   3. Below the weather information, create a container that will hold all your to do list items. Make this container somewhere between 400 and 600px wide.
   4. At the top of the to do list, create a heading that displays “To Do List.”
   5. Below the heading, add an input area that allows users to type in a to do item here.
   6. Below the input, use the <ul> tag to create a list of at least three to do items.
   7. Within the list item, add a placeholder for the “square” icon. This can simply be a character for now (In the sample, it is the X). Later, you can replace this character with the icon from Font Awesome library.
3. Simple CSS
   1. In your newly created .css file, add some basic CSS to help you get started.
   2. Add a border around the weather and to do list.
   3. Set a width to the weather and to do list.
   4. Center the weather and to do list to the browser.
   5. That’s sufficient for the lab. Feel free to add more CSS if you’d like.
4. Weather API information is displayed at the top of the page.
   1. Get Los Angeles’s weather information from the Weatherbit.io’s API. Sign up for a free account to obtain an API key.
   2. Read their documentation to find out how to get Los Angeles’ current temperature (in Fahrenheit), a short weather description and the apparent temperature (what it “feels like”).
      1. Start by looking for the endpoint of the API. What’s the URL you need to hit to communicate with this service?
   3. Use jQuery’s ajax method get the information from Weatherbit.

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 FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named lab6 inside the public_html folder. Then upload this assignment HTML file and images to the lab6 folder. Refer to the guide if you’re not sure how to upload the assignment file.
3. In your browser, go to http://303.itpwebdev.com/~yourusername/lab6/todolist.html to check that the assignment file has been uploaded correctly.
4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
6. (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 -> Lab 6: To Do List Starter. You will get some points deducted for not uploading correctly but at least you will not get a zero.