Chapter 20:  Styling and Deployment

In our Django app, the container class will go into our base.html template below the navigation bar.   Inside the container class we will display the content from the different templates.

5. Headings

Bootstrap recognizes h1 through h6 tags

It also recognizes display headings.

Display headings are designed to stand out more than normal headings (they have a larger font-size).

There are 4 classes to choose from:

.display-1, .display-2, .display-3 and .display-4

To try it live, see: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_txt_display&stacked=h

6. Bootstrap Margins and Padding

Instead of applying inline CSS for margins and padding, you can use Bootstrap classes

a) Classes for margins

mt-size - top margin (size values can be 0 through 5 and can contain decimal places)

mr-size - right margin (size values can be 0 through 5 and can contain decimal places)

mb-size - bottom margin (size values can be 0 through 5 and can contain decimal places)

ml-size - left margin (size values can be 0 through 5 and can contain decimal places)

m-size - all margins (size values can be 0 through 5 and can contain decimal places)

NOTE: By default, sizes correspond to rem (root element) unit values. 1 represents the current size, .75 is approx 25% less than the current size, and 2 is double the current size.

b) Classes for padding

pt-size - top padding (size values can be 0 through 5 and can contain decimal places)

pr-size - right padding (size values can be 0 through 5 and can contain decimal places)

pb-size - bottom padding (size values can be 0 through 5 and can contain decimal places)

pl-size - left padding (size values can be 0 through 5 and can contain decimal places)

p-size - all 4-sides padding (size values can be 0 through 5 and can contain decimal places)

NOTE: Sizes correspond to rem unit values and work the same was as sizing for margins

7. Text

Bootstrap includes classes for text formatting and alignment. Some of the more popular classes include:

• text-left
• text-right
• text-center
• text-lowercase
• text-uppercase
• text-capitalize

The class names are pretty self-explanatory except for text-capitalize which will capitalize the first letter of every word in the element.

Hands On #2 - Modifying base.html

To see a video demonstration, watch:  https://youtu.be/TPS5V75Uzb0

1. Replace the code in base.html as directed on page 439, 440, 441 and 442

2.  Save your changes.

8. Colors

Bootstrap has contextual color classes that are designed to provide meaning through use of color.

The same colors are used for text, link and backgrounds. Text and link colors are prefixed with text- and background colors are prefixed with bg-

The table below shows the text/link classes along with the background classes and the contextual meaning assigned to the colors:

9. Jumbotron

A jumbotron class creates a large box designed to bring attention to content or information. It is displayed as a grey box with rounded corners and enlarged text.

You should use a <div> element with the jumbotron class. Inside the <div>, you can place any valid HTML element including other Bootstrap elements/classes.

10. Buttons

You can add a btn class to your html buttons for styling purposes.  Make sure you set class="btn btn-style"   where style is one of the styles you want to use (see list below)

There are other button styles you can use:

• .btn
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

The buttons display as shown below:

Example from a Django template:

{% buttons %}
         <button name="submit" class="btn btn-primary">Log in</button>
{% endbuttons %}

Hands On #3 - Modifying index.html (Home Page)

To see a video demonstration, watch:  https://youtu.be/w-UIcItBsaM

1.  Modify index.html as directed on page 443

2.  Save your changes and view the home page in the running app (you should see the boostrap styling)

11. Form Layout and Control Classes

Bootstrap includes classes for laying out forms and for working with the labels and controls in a form.

There are 3 form layouts:

a. class="form"

Labels and controls are stacked on top of each other.

<form action="#" class="form">

How it looks live:

Sample Form

b. class="form-inline"

Labels display to the left of the controls with multiple labels and controls on a line

<form action="#" class="form-inline">

Here's how it looks live:

c. class="row" and class="col"

Use the Bootstrap grid to align form labels and controls

Sample code:

<form action="#" class="form container-fluid">
<div class="row">
<div class="form-group col6">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email3" placeholder="Enter email" name="email">
</div>
<div class="form-group col6">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd3" placeholder="Enter password" name="pwd">
</div>
</div> 

Here's how it looks online:

Standard conventions for controls in the form and form-inline layouts include:

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements
• Add class .form-label to all labels

If you specify <div class="form-group"> and you do NOT specify a layout, you will get the stacked layout

NOTE: The form-horizontal class is no longer used in Bootstrap.

12. Additional information on using Bootstrap with form elements

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Bootstrap also supports the following form controls:

• input
• textarea
• checkbox
• radio
• select

To take advantage of Bootstrap features, make sure you identify the type of form control you are creating

Different form elements use different types of controls:

• Input, Select and Textarea
  • Container uses class="form-group"
  • Labels use class="form-label"
  • Input elements use class="form-control"
• Checkboxes and Radio buttons
  • Container uses class="form-check" or class="form-check-inline"
  • Labels use class="form-check-label"
  • Input elements use class="form-check-input"

<Input> Example:

<div class="form-group">
<label for="usr" class="form-label">Name:</label>
<input type="text" class="form-control" id="usr" name="username">
</div>
<div class="form-group">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" name="password">
</div>

<select> Example:

<div class="form-group">
<label for="sel1" class="form-label">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>

<textarea> Example:

<div class="form-group">
<label for="comment" class="form-label">Comment:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>

<input type="checkbox" > Example:

<div class="form-check">
<label class="form-check-label" for="check1">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="check2">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" disabled>Option 3
</label>
</div>

NOTE: For inline, the only thing that changes is the initial class <div class="form-check-inline"> Everything else stays the same.

<input type="radio"> Example

<div class="form-check">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" disabled>Option 3
</label>
</div>

NOTE: For inline, the only thing that changes is the class in the first line of code: <div class="form-check-inline">

Hands On #4 - Modifying forms using bootstrap

To see a video demonstration, watch: https://youtu.be/5skM5wnLDKs

1.  Modify login.html as directed on page 444

2.  Save your changes and view the login page in the running app

13  Card Class

A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

Example of a basic card:

<div class="container">
<h3>CIT228 Card</h2>
<div class="card">
<div class="card-body">I love programming!</div>
</div>
</div>

Here's how it looks live:

Example of a card with headers and footers:

<h3>CIT228 Card</h2>
<div class="card">
<div class="card-header bg-success text-white">NMC</div>
<div class="card-body">I love programming!</div>
<div class="card-footer bg-success">&copy;2021</div>
</div>
</div>

Here's how it looks live:

CIT228 Card

Hands On #5 - Modifying Summary and Detail pages using bootstrap

To see a video explanation, watch:  https://youtu.be/GJKeWS3VvDM

1.  Modify topics.html as directed on page 445

2.  Modify topic.html as directed on page 446

3.  Save your changes to both pages and view them in the running app

Hands On #6 - On Your Own

To see a video explanation, watch: https://youtu.be/cE1ZhGWfqMg

1. Complete Try-It-Yourself 20-1 and add bootstrap styling to new_topic, new_entry, edit_entry, and register.

2.  Save your changes and view them in the running app.

3.  At this point, you may want to make a backup copy of your project, just in case you have deployment issues

III.  Deployment

There are a couple options for deployment that are FREE.  We are going to deploy to Heroku.  NOTE:  Heroku’s free tier has limits to the number of apps you can deploy and the number of people who can visit your app.  These limits are generous enough to give you practice deploying your apps at no cost.

A.  Installing modules and Setting up Files

1.  Create an account at https://heroku.com/ 

2.  Download and install the Heroku CLI (command line interface) from https://devcenter.heroku.com/articles/heroku-cli/

3.  Install 3 packages using the command prompt (you will need your virtual environment active and the directory should be your main project directory)

Example:

(ll_env)learning_log$ pip install psycopg2-binary
(ll_env)learning_log$ pip install django-heroku
(ll_env)learning_log$ pip install gunicorn

• psycopg2 manages the databases that Heroku uses
• django-heroku manages our apps configuration to make sure it can run on the Heroku servers
• gunicorn provides a server capable of serving apps in a live environment

4.  Create a requirements file to tell Heroku which packages our project depends on.  At the command prompt, run the following command to create the requirements.txt file

(ll_env)learning_log$ pip freeze > requirements.txt

NOTE:  You can open the requirements.txt file to see the packages and version numbers installed into your project

When the app is deployed, Heroku will install all the packages listed in the requirements.txt file, so the environment on the server should be the same as our local environment.

5.  Make sure Heroku is using the same version of Python as you.

Run the following command:

python --version

6.  In VSCode (or a text editor) create a new file called runtime.txt and save it to the directory containing manage.py  (this should be your main directory)   Enter the following code into the file:

python-version#

where version# is the number you saw after running the command

Example:

python-3.9.1

7.  In VSCode, modify settings.py for Heroku - add the folloiwng code to the bottom of the file:

# Heroku settings.
import django_heroku
django_heroku.settings(locals())

The code imports the django_heroku module and calls the settings function which modifies settings needed for the Heroku environment.

8.  Create a Procfile that tells Heroku to use gunicorn as a server and to use the settings in learning_log/wsgi.py to launch the app).  The log-file tells heroku which events to log.  The file has no extension and begins with a capital P  It should be saved in the same directory as your manage.py file

web: gunicorn learning_log.wsgi --log-file -

Hands On #7 - Installing Modules and Setting up Files

To see a video demonstration, watch: https://youtu.be/6EUHD7sRTQM     NOTE:  Even though we are pushing the project to Git and deploying to Heroku from Git, you won't be able to see the files in GitHub itself. 

1. Create a free account at  https://heroku.com/    

2.  Download and install the Heroku CLI (command line interface)   https://devcenter.heroku.com/articles/heroku-cli/   (there are directions for different platforms at the site).  I installed using the default settings which is what I recommend that you do too.

3.  From the command prompt, navigate to your app and activate the virtual environment.  Install the following packages (page 448)  NOTE:  There has been a modification to the first command because the one in the book no longer works:

(ll_env)learning_log$ pip install psycopg2-binary

(ll_env)learning_log$ pip install django-heroku

(ll_env)learning_log$ pip install gunicorn

4.  Create the requirements.txt file (page 448)   Just execute the command pip freeze > requirements.txt  at the command prompt

NOTE:  The command prompt will display when it is done, but you won't see any additional output.  If you go into VSCode, you can open and view the text file  It should be in the main directory below manage.py

Example:

5.  Determine your Python version and create the runtime.txt file as directed on page 449   (this can be done in VSCode, just save the file to the main directory where manage.py is and make sure you save it as a text file)  NOTE: To determine the python version learning_logs is using, enter python --version at the command prompt in your virtual environment (the example below shows Python 3.9.1 which is what I   I entered into my runtime.txt file)

Text file added using VSCode:

6.  Modify the settings.py file as directed on page 450  (the new code should go at the bottom of the file)

# Heroku settings.
import django_heroku
django_heroku.settings(locals())

7.  Create a new file named Procfile (with no file extension).  In VSCode, when you go into file and save as, click the save as type list arrow and select No Extension.  It should be in the same directory as manage.py and should contain the following code (see page 450):

web: gunicorn learning_log.wsgi --log-file -

Hands On #8 - Pushing to GitHub and Heroku, Setting up your DB on Heroku

Make sure everything in your app is running properly before you complete hands on 8 and 9!

To see a video demonstration, watch: https://youtu.be/07O06dI2r0E

The process of uploading to GitHub and deploying to Heroku are integrated (you will be using the command prompt for both).   You will also be using the command prompt to perform migrations on your database to deploy it to Heroku.  Make sure you have created a Heroku account and that you have downloaded and installed the Heroku CLI

Part 1 - Configuring GitHub and Pushing to GitHub

1. Using the command prompt, follow the steps on page 451 to configure GitHub

2.  Using VSCode, create a .gitignore file and save it to the main directory where manage.py is located  (the filename begins with a dot and there is no extension)   See page 451

ll_env/
__pycache__/
*.sqlite3

NOTE: We are telling GitHub to ignore what is in the ll_env/ directory, the __pycache__/ directory and anything that ends in sqlite3  The ll_env directory can be recreated at anytime and doesn't need to be on GitHub, the __pycache__/ directory is something Django creates when running .py files.  We don't want our test database deployed, so we do not want it uploaded to Git.

3.  Make sure you have hidden files on your system displayed (see steps for various OS on pages 451-452). NOTE: On Windows 11, click the View list arrow, select Show and make sure a check is next to Hidden Files.

4.  Run the commands to add and commit the project to GitHub (see page 452)

a) Initialize the repository, add all files that aren't being ignored and commit the changes to GitHub  (the -am flag in the commit statement tells Git to include all changed files and to record a log message)

b)  Check the status to make sure you are on the master branch and that the working tree is clean  (anytime you want to push to Heroku, this is the status you need to see)

Part 2 - Deploying to Heroku from GitHub

You will be directing Heroku to retrieve the files from GitHub to create your app on it's server

1.  Push the files to Heroku as directed on page 452

a)  After typing heroku login, you will be directed to the browser where you login.  After you login, you can close the browser and return to the command prompt.  you will see something like the example below. You will notice the green logged in text above the command prompt AND the login command that was executed below the command prompt (which is a little weird). 

b) Continue with the Heroku commands: heroku create followed by git push heroku master   (NOTE:  I had to type over output when I gave the git push command, don't worry about that, just type from wherever the command prompt is located).

The heroku create command builds the empty project.

The git push heroku master command pushes the project to Heroku which in turn builds the project on the servers   At the bottom of the output, you will see a URL you can use to access the live project (in the example below, the URL is https://fierce-taiga-14357.herokuapp.com/

2.  Run the heroku ps command to make sure the server process started correctly (see page 453)

The ps command also shows how much time the project can be active within the month (Heroku allows 550 hours of active time per month.   If you exceed the limit, you will get a server error page.  550 hours is about 22 days, which is enough time for our assignment and term projects.

Below the usage information, it is telling us that the Procfile we created has been started.

3.  Open the app in the browser using the heroku open command (see page 453).  At this point, your files are online, but your database isn't set up yet (don't try to add anything to your site until the database is there!)

Part 3 - Running Migrations to create the database on Heroku

1.  Run the heroku migration command as directed on page 454.

When you first execute the command, you should see something similar to the example below:

When the command is done, you should see something similar to the output below:

At this point, when you visit the app, you should be able to use it like the one you had locally.  The only difference is you won't have any data to work with because that doesn't get copied over.

Problems?

If there is a problem in one of your deployed pages, you can fix the page (make sure you test it locally). Then, you can execute the following commands in the command prompt to push the change to heroku:

1. Navigate to learning logs and activate the virtual environment.

C:\Users\Lisa.LAPTOP-B4JF6RME>cd documents/CIT228-Spring22/learning_log/ll_env/Scripts

C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log\ll_env\Scripts>activate

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log\ll_env\Scripts>cd ../../

2. Login to GitHub with your username and email

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git config --global user.name "your git username"

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git config --global user.email "your git email address"

3. Use the git add . command to add your changes (only needed if you added new pages)

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git add .

4. Use the git commit command with a comment about what you changed

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git commit -am "Fixed formatting in logout page and topics page"

5. Check the status of the update using git status

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git status

6. Login to heroku

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>heroku login

7. Push the change to heroku

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>git push heroku master

8. Run the command to check Heroku's server processes (if the app isn't already running)

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>heroku ps

9. Run the command to open the app (if the app isn't already open)

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>heroku open

10. If you have made any changes to the models, you will need to run the migrations command again. If you haven't changed the models, then do not run the command

(ll_env) C:\Users\Lisa.LAPTOP-B4JF6RME\Documents\CIT228-Spring22\learning_log>heroku run python manage.py migrate

Example: In the example below, I was already logged into git and heroku. I only changed a couple of the HTML pages, so I didn't need to run migrations.

To remove the app, you can execute the following command from the command line:

heroku apps:destroy --app appname

appname is whatever you renamed the app to (if you didn't rename the app, it is the default name Heroku assigned to your app)

B.  Creating a Superuser and Customizing the Deployed App

You can create a superuser account on heroku similar to the way you created one for your app. The main difference is that we will be opening a Bash terminal (which is part of the Linux Operating system).  As long as we are connected to Heroku, we can use the Bash terminal to interact with the server.

1.  Steps to create a superuser account on Heroku using the command prompt:

1.  Create a superuser account from our virtual environment and main directory by running the following command to get into Bash:

(ll_env)learning_log$ heroku run bash

2.  Execute the following Linux command to view files and directories:

ls

NOTE:  When you are using Bash, you need to use Linux commands instead of Windows commands

3.  To create the superuser after we have bash running, enter:

python manage.py createsuperuser

Answer the questions at the prompt the same way you did before (although if you used admin for a username, you should pick something more secure)

4.  Type exit when you are done

2.  Creating a User-Friendly URL on Heroku

The URL assigned to your app will probably not be user-friendly.  You can rename it using the following command in the command prompt:

(ll_env)learning_log$ heroku apps:rename learning-log

NOTE:  You will need to select a unique name for your app; otherwise, renaming won't work.

Once your app is renamed, the original URL is destroyed.  The apps:rename command completely moves the project to the new URL

3.  Securing the Project

By default debugging information is displayed in the local app because we need it to problem solve;however, we don't want that to display in the live app. 

To turn off debugging when the app is running in a production environment, we are going to edit the settings.py file

The current code in the settings.py file is shown below:

We are going to modify the code to the following:

import os

if os.environ.get('DEBUG') == 'TRUE':
    DEBUG = True
elif os.environ.get('DEBUG') == 'FALSE':
    DEBUG = False

Once you modify the code and push it to GIT and Heroku, we can use the command prompt to set the DEBUG variable to FALSE.  Once we do that, it will run through the code we have added and set the variable to False on the server.  If there is a problem and we need to turn it on again, we can do so through the command prompt.

4.  Creating Custom Error Messages

The problem with the error messages is they are the same for pages that don't exist (404 errors) and internal server errors ( 500 errors, which are coding errors).   We can customize the 404 and 500 error messages using templates that match our apps appearance. 

Steps to create custom error messages:

1.  Create a templates directory inside your main directory  (ie. learning_log/templates)

2.  Create a 404.html file and a 500.html file inside the template directory.

a)  The files should extend the base.html template
b) The error message should go in the page_header

Example of a 404.html page:

{% extends "learning_logs/base.html" %}

{% block page_header %}
<h2>The item you requested is not available. (404)</h2>
{% endblock page_header %}

Example of a 500.html page:

{% extends "learning_logs/base.html" %}

{% block page_header %}
<h2>There has been an internal error. (500)</h2>
{% endblock page_header %}

3.  Modify the settings.py file to include the new templates - you will add the code to the existing DIRS:[] command in the TEMPLATES list:

Also in the settings.py file, temporarily modify DEBUG and set it to False so you can see the changes before pushing them to the Heroku server

4.  Run the local server and test the error pages by running the following commands, one should generate a 500 error and the other should generate a 404 error

http://localhost:8000/letmein/

http://localhost:8000/topics/999/

5.  Adjust the code in settings.py and set DEBUG back to True

6.  Push the changes you made to Heroku by adding and committing them to GitHub and then pushing them from git to Heroku

git add .

git commit -am "Added customer 404 and 500 error pages"

git push heroku master

NOTE:  using git add .  tells GitHub we are adding new files and they need to be tracked

Hands On #9 - Finishing Up (Creating a Superuser, Changing the URL, Securing the Project and Customizing Error Messages)

To see a video demonstration, watch https://youtu.be/-e8gOmJquv8

Part 1 - Creating a superuser on the live app

1.  Create the superuser account on Heroku as directed on pages 454-455.  Since this is a live site, make sure you select secure usernames and passwords (admin is not a good username)  IMPORTANT:  You cannot press backspace to remove characters you don't want.  YOU CAN PRESS CTL + X while pressing the backspace key to remove characters (that will work :)  NOTE:  You can create more than 1 superuser account if you can't remember the first one or if you have problems.  The usernames need to be unique

2.  Once the superuser has been created, type exit to get out of bash  (you should see the normal learning_log prompt once you have exited bash)

3.  Go into the browser and add /admin/ to the end of your app's URL to get to the admin login screen (this is the same screen we used locally).  As an administrator you have full rights to all data added by all users. You will be able to add, edit and delete data.

Part 2 - Creating a user-friendly URL

1.  Rename the app as directed on page 455.   The name should be unique, so you may want to modify the name a little.

NOTE:  Since the URL is different now, you will need to run the heroku open command again.

URL of live site:  https://livetolearn-log.herokuapp.com/

URL of live site #2: https://healthyhabit-log.herokuapp.com/

Part 3 - Securing the Site

1.  Edit the settings.py file and scroll to the bottom of the file where the Heroku settings are locatead.  Insert the import os and if/elif statement as shown on page 456 

2.  Since you modified a file, we need to commit it to Git and push the modified file.  Follow the instructions on page 457 to commit and push your changes to Git.

3.  If you have a clean working tree in Git, push your updates to Heroku as directed on page 457

4. After you push the updated settings to Heroku, you can configure the DEBUG environment variable in the command prompt and set it to FALSE.   See page 458

NOTE:  When you change an environment variable, Heroku automatically restarts your project to implement the change.

5.  To see the effect of the change, go to your live page and enter /letmein/ at the end of the URL. Then, launch the test server (your localhost) using a new command prompt and try the same thing - you should notice a difference in the error messages displayed.

The change we made will display the message below on the live server if you enter an invalid URL:

You will get the following message on the local (test) sever if you execute the same invalid URL:

Part 4 - Creating Custom Error Messages

1.  Using VSCode create a templates folder inside the main learning_log directory where manage.py is located.

2.  Inside the templates folder, create a 404.html error page as directed on page 458

3.  Inside the templates folder, create a 500.html error page as directed on page 459

4.  Modify settings.py to tell it about the new template folder as directed on page 459.

WARNING: You will need to add import os to the top of the settings.py file; otherwise, you will get an error when you try to push the page to Heroku

5.  Change the local DEBUG environment variable to False as directed on page 459  (this is near the top of the settings.py file)

6.  Test the changes on your locally using localhost.  Just enter the following commands (the first will display the 404 error and the second will display the 500 error):

http://localhost:8000/letmein/

http://localhost:8000/topics/999/

7.  Change the DEBUG environment variable back to True in your settings.py file

8.  Follow the directions on page 460 to add the changes to Git and push them to Heroku

Part 5 - Redirecting Users to a Specific Error Page

1.  When users make an entry like 999 for an existing topic, they should route to a 404 error instead of a 500 error (there isn't a problem with the code, the problem is the entry they are trying to display doesn't exist).   

To fix this, we will modify the learning_log/learning_logs/views.py file and direct the user to the correct error template.  See the directions on page 460

NOTE:  You are changing the database call from

to

The new code will either retrieve the database topic OR it will display the 404 error

Make sure you modify the import statement at the top of the views.py file  (you need to pull in the get_object_or_404 function so we can use it!

2.  Make sure you save your changes.  To test this locally, enter http://localhost:8000/topics/99999/  You should see the detailed error message display, but it will be a 404 error instead of a 500 error. 

3.  Since we did not add any new pages, we only need to run the commands to commit the changes and push them to Heroku

Example:

Summary of what to turn in...

There are no additional exercises this week because you will be working on your last project.

For this assignment, you will need to add a link to your deployed app AND you will need to zip your learning_log files and upload them to the dropbox (in case I need to look at them)   Since you already deployed the app and used GitHub, I am not going to make you add the files to your CIT228 repository, unless you want to  (if you would prefer to do that, you can just put a link to the files in the dropbox)