Assignment 3: Getting Started with Django

Assignment 3: Getting Started with Django
- Preliminaries
- Learning Objectives

due by 9:00 p.m. EDT on SEPTEMBER 23, 2024.

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 basic Django web application, which can respond to multiple URL patterns and display the appropriate page view for each URL pattern.
Create Django views to service each URL pattern, generate context data, and delegate presentation to the appropriate HTML template.
Write templatized HTML pages for each page view. Develop competence with using Django context variables within an HTML template.
Use HTML template extension to re-use common features from a base template.
Use Django context variables into HTML templates.
Use CSS to beautify your HTML.
Deploy a simple web application to the public World-Wide Web.

Pre-requisites: Django Installation, Git, Heroku Client

Before you can build your first Django application, you will need to follow the instructions on Blackboard about installing Django and the requisite tools:

Django Installation for Mac: Homebrew, Pipenv, Django (Mac)
Django Installation for Windows: Pipenv, Django

You will need to create a Django Project (or use the one you used with examples), and make sure that the installation worked correctly by viewing the default Django web app in your browser.

In addition, you must install the git software for source code version control and the Heroku client for use in deployment.

Sample Implementation

In this assignment, you will create a “Quote of the Day” application, which will display a randomly-selected quotation by some person you deem to be famous.

Here is a sample solution: Quote of the Day Application.

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

Task 1: Your First Django Application

Create a new Django app called quotes 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 quotes directory (it is not created automatically when you create the app). Modify your main project urls.py to include the quotes/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:
- / : the main page, which will display a picture of a famous or notable person of your choosing and a quote that this person said or wrote. The quote and image will be selected at random from a list of images/quote.
- /quote : the same as /, to generate one quote and one image at random.
- /show_all : an ancillary page which will show all quotes and images.
- /about : an about page with short biographical information about the person whose quotes you are displaying, as well as a note about the creator of this web application (you).
Create the required views to support this application:

The application will contain two Python lists in the global scope of the views.py file: a list of quotes (string), and a list of images (image URLs, as strings). Create both of these lists first, with 3 items in each list. You will add more later.

Note: we are not using Django models in this application; we will come back to models at a later time.

Note: the quotes and images should all be from the same one person.
- quote : the view for the main page.
  
  This view directs the application to display one quote and one image.
  
  The view will need to select one of each of these at random, and set them as context variables for use in the HTML template.
  
  Finally, it will delegate work to the quote.html template for display.
- show_all : the view to show all quotes.
  
  This view will add the entire list of quotes and images to the context data for the view. Finally, delegate presentation to the show_all.html HTML template for display.
- about: the view to display information about the famous person whose quotes are shown in this application.
  
  Delegate presentation to the about.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.
- quote.html : the main web page, that will show a single quote along with an image, each selected at random from a hard-coded list written in your Python code.
- show_all.html : show all of the quotes and images, in a neatly formatted page.
  
  Note: this HTML template will need to use a loop to process the list of quotes, and another loop to process the list of images.
- about.html: the about page
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 Heroku

After you are certainly that your app works correctly on your local development server, you will commit these files to your git repository and deploy your web application to Heroku and test that it works correctly on the public World-Wide-Web.

Be sure to name your files correctly!

Add all of your files to your git repository:
- Add all files to your git repository using :
  git add -A
- Commit changes to your git repository, using:
  git commit -m "Created quotes app"
- Push changes to GitHub and Heroku, using:
  git push origin master
  git push heroku master
Test your website on Heroku.

Hint: Did you create the Procfile and requirements.txt files when you installed Django? They will need to be part of your Django project for the deployed version to work.

Resolve any deployment issues.

Submitting Your Work

50 points; will be assigned by code review

Be sure to name your files correctly!

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

For example: https://peaceful-plateau-46679.herokuapp.com/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 this file to your git repository using git add a3_url.txt.
- Commit this to your git repository, using git commit -m "Added a3_url.txt"
- Push it to GitHub, using git push origin main
In the Gradescope upload page, select GitHub as the option for uploading files. You will need to authorize Gradescope to use your GitHub account, and then select a repository and a branch (i.e., main). This will push your entire GitHub repository to Gradescope.

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.