CSci 284 - Homework 6

Due: Thursday, April 9th, 2026

This assignment is worth 50 points. For full credit:

Resources:

Part 1. Using FlaskWTF (38 points)

Work through the Flask: Web Forms tutorial introduced in class. Unlike previous tutorials, this one does not present all the code; all files for the final application can be found on Github or in this zipfile. The main program is actors.py but you'll need the entire directory structure to get all the Python files and the templates folder. Otherwise, you won't have the complete webapp. This tutorial is flawed in that the author inserts an digression in the Configure the Form section about RadioField objects using an example totally unrelated to the actors webapp (actually from an improved version of the presidents webapp). For this assignment you won't need code from this code box about creating the RadioField.

You might be surprised to search for, say, George Clooney and discover he's a bear! The author didn't want to write real bios for all the actors in the dictionary for this app, so used goofy photos and program-generated text instead.

Include a file containing the answers to these questions about the code in actors.py:

  1. What is the purpose of the function redirect in the last statement of the index function (4 points)?
    return redirect( url_for('actor', id=id) )
    
  2. What does the function validate_on_submit in the index function do (4 points)?
     
  3. Imagine you wanted to add a second form containing two text fields, two radio buttons, and a checkbox. What would the class look like for this form? What new imports would be needed (6 points)?

This app has no .css file (in fact it doesn't have a static subdirectory at all). However, in the templates we see class attributes in the (for example) <div> tags, with values like "mx-md-auto" and "col-md-10". What gives?

  1. Research these class attribute values and give a short description of each (4 points).
  2. Where do you think these names are coming from? Where might they be defined? Hint: the <div> tags are concerned with placing sections of the webpage on a grid (4 points).

Turn in the answers to these questions and a screenshot of the example running in a web browser as a zipfile (16 points).

Part 2. Using Bootstrap (12 points)

Visit the Bootstrap-flask code repository and scroll down to the README, where you'll find an Example section. This shows a simple program and template that uses Bootstrap to render a Login form. Build these out in a new directory structure (not the template directory for any of our existing Flask directories). Start the Flask virtual environment and try running with the command

flask --app login.py run
Record what happens. If you get a webpage, take a screenshot of that after entering a password of only 3 characters. Otherwise, screenshot whatever error or other results you see.

Create a zip file containing the files and screenshot and post to BrightSpace.