Assignment 4: Forms and Form Data

Assignment 4: Forms and Form Data
- Preliminaries
- Learning Objectives

due by 9:00 p.m. EDT on Friday, February 14, 2025

Preliminaries

In your work on this assignment, make sure to abide by the collaboration policies of the course.

If you have questions while working on this assignment, please post them on Piazza! This is the best way to get a quick response from your classmates and the course staff.

Learning Objectives

After completing this assignment, students will be able to:

Create a Django web application, with multiple URL patterns, views, and HTML templates.
Use Django context variables into HTML templates.
Display an HTML form data within a Django application.
Process an HTML form submission, read the form data in Python code, and use that data to generate a response to the form submission.
Use CSS to beautify your web page and HTML form(s).
Deploy a simple web application to the public World-Wide Web.

Pre-requisites: Assignment 3

Assignment 4 builds upon all of the basic concepts from Assignment 3. You must have completed Assignment 3 before you attempt Assignment 4.

Sample Implementation

In this assignment, you will create a simple web application for a restaurant, including a welcome page, a menu/ordering page, and an order confirmation page.

Here is a sample implementation: Restaurant Application.

You should not try to replicate this exact web application; rather this is just some guidance about what to expect.

Task 1: Django Application with Forms; Processing Form Data

Create a new Django app called restaurant within your cs412 Django project. Be sure to add this new app within the settings.py list of installed applications.

You will need to create an app-specific urls.py file inside the restaurant directory (it is not created automatically when you create the app). Modify your main project urls.py to include the restaurant/urls.py file.

Note

The requirements are presented here as 3 parts (URLs, views, templates).
You are strongly encouraged to work on one URL/ view/template at a time, and test as you go.
Notice the naming convention: use the same name for the URL, the view, and the template.

The structure of this web application will involve the following URL patterns:
- /main : the page with basic information about the restaurant. the main page should include the name, location, hours of operation (displayed as a list or table), and one or more photos appropriate to such a page.
- /order : display an online order form (details below under HTML templates).
- /confirmation : a confirmation page to display after the order is placed. The confirmation page will display which items were ordered, the customer information, and the expected time at which the order will be ready (a time to be determined randomly, but within 30-60 minutes of the current date/time).
  
  Hint: to create the readytime, use the built-in time module and it’s functions, along with the built-in random module. You will need to experiment to learn how to use these functions together.
Create the required views to support this application:
- main : the view for the main page.
  
  This view simply directs the application to display the main.html template.
- order : the view for the ordering page. This view will need to create a “daily special” item (choose randomly from a list), and add it to the context dictionary for the page.
  
  Finally, delegate presentation to the order.html HTML template for display.
- confirmation: the view to process the submission of an order, and display a confirmation page.
  
  We will implement this view as a custom view function (following the in-class example).
  
  Note: in the future, we will use models (for data persistence) and model forms, but for now we are going to write a custom view function to read the form data.
  
  This view must check the form data to determine which items have been ordered, and add these back to the context for the confirmation page. In addition, the view must calculate the total price for the order – keep it simple, but nonetheless add the items up; include this total in the order confirmation.
  
  Finally, delegate presentation to the confirmation.html HTML template for display.
Create the appropriate Django HTML Templates for this project:
- base.html: a base page that will provide a header and navigation for the page, as well as including any necessary style information.
- main.html : the main web page for the restaurant
- order.html : the food ordering page, which will display the order form.
  
  The form should include 4 menu items and their prices, with checkboxes to add these items to the order. At least one should have some options (e.g., toppings on a pizza, extras). One item should be a “Daily Special”, the name and details of which will be supplied by the web application at run time (via a context variable); The form must include a space to include special instructions, and fields to collect customer information (name, phone, email)
  
  Note: in the future, we will use models (for data persistence) and model forms (in the forms.py file). For now, we are just creating a plain HTML form (as in assignment 2).
  
  **Hint: you will need to include a csrf_token in your form to be able to POST it.
- confirmation.html: the confirmation page to display after ordering
Create/use a CSS file to style your web pages.

You may re-use the CSS file from your previous assignments as a starting point. You may link to a CSS file on your cs-people.bu.edu site, or else create a Django static directory and put your static (e.g., .css) there. See in-class examples.

Test your application on your local development server, and resolve all syntax and logical issues. You will know when it works correctly.

Task 2: Deployment to `cs-webapps`

Deploy your web application to the cs-webapps.bu.edu.

Follow the [deployment instructions here][deployment].

Test your web application on cs-webapps.bu.edu to ensure that everything works correctly.
Resolve any deployment issues.

Submitting Your Work

10 points; will be assigned by the autograder, verifying that you have submitted the correct files/URL, and testing that you website exists at the specified URL. 90 points; will be testing your application and code review

Be sure to name your files correctly!

Create a text file within your main django directory called a4_url.txt, containing the URL to your web page, and nothing else.

For example: https://cs-webapps.bu.edu/azs/cs412/restaurant/.

This file will be used by the autograder to locate your web page, so you must get the URL exactly correct, and you must not include any other text or code in the file.
Add teaching staff as collaborators to your GitHub repository (wderocco8, Aanuszkiewicz, and azs-bu). Read-only access is fine.

Create a text file called github_url.txt in the root of your project (e.g., django directory). Paste your GitHub URL in the file.

Add these files to your git repository using
```
`git add -A`.
```
Commit this to your git repository, using
```
`git commit -m "Added a4_url.txt"`
```
Push it to GitHub, using
```
`git push origin main`
```
Log in to GradeScope to submit your work.

In the Gradescope upload page, upload these two files:
- a4_url.txt
- github_url.txt

Notes:

Upload these files to Gradescope before the deadline.
When you upload, the autograder script will process your file(s).
You may resubmit as many times as you like before the deadline, and only the grade from the last submission will be counted.