Due: Thursday, April 10, 2025

This assignment is worth 50 points. For full credit:

• post homework submissions to BrightSpace by 11:59pm on the due date
• ideally, your Final Project Proposals will be submitted by Tuesday April 8th
• see the Deliverables section below

Flask Project Proposal - Milestone 1

Turn in a one page PRINTED description of your project, formatted like any other paper for a Sewanee class, which includes the following:

• A title, for example "Sewanee Dog Park Website"
• Student name(s)
• A clear and compelling ONE SENTENCE thesis statement for your project, clearly marked.
  For example, "Public Monuments:we will collect data regarding when various public monuments were erected, initial and on-going cost, source of funding, site procurement info, mentions in news, dedicated to who/what, objected to by who for what reason(s), etc.
• A clear and compelling description of your project (no more than 2/3 of the page).
• An implementation plan (no more than a third of the page).

Note: you are not informing me of your project but proposing one for approval. And you do not want to have to start over more than once or even at all so give this some thought.

As part of your proposal you might consider each of the following: intended audience, important and interesting services you intend to provide your audience, availability and quality of information/data with which you intend to populate your database, and a preliminary implementation plan: a breakdown of the timeline & order in which you propose to implement your website & services.

Considerations in choosing a project area/topic:

• Projects SHOULD BE "real" and ideally pro bono publico (think charity, service, professional or little known areas). Look for something you will enjoy learning more about rather than a way to catalog your personal entertainment interests or hobbies.
   
• Choose you find interesting and for which you can find a non-trivial amount of data.
  (Looking ahead: you'll probably want to do some development with "made-up" data but in the end, should have access to real data.)
   
• The following project topics are NOT ACCEPTABLE: music catalogs, books(catalogs, etc), games/gaming, and the like.

Considerations in deciding how to breakdown your project implementation plan.:

Write for a non-technical person in ENGLISH. Do not mention HTML, css, Python, tables, SQL, normalization, or queries.

• Decide what the 'bare bones' of your project is, things that will be developed first. For example, if I was developing a website providing in-home services for the elderly, privacy would be a concern. So password protection would be essential. When and how that was included would have to be part of my implementation plan.
• Think of something to add a bit of depth to your project. For example, on that same eldercare site I might want to look at accessibility, as in "What are the common visual impairments suffered as we grow older? How common is color-blindness? What else is a concern?" This would be part of my implementation plan.
• Decide when & how you will test the website. Can someone look at it and give feedback turning it in? Do not rely on friends, family and/or classmates, but consider someone who will give you unbiased and hard criticism and critique. Even better: find someone who is part of your final intended audience.

Resources:

• Web Forms in Flask Tutorial
• Flask Quickstart: start with Cookies and go through Logging; focus on the Session section
• Demystifying the Secret Key: read the second answer (at the bottom) first, then the first for deeper understanding
• FlaskWTF

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 each Python file and the templates folder for 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 unrelated to the actors webapp (actually from an improved version of the presidents webapp). You won't use any code in the code box showing how to create the RadioField.

Answer 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. Say this app needed 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?

4. Research these class attribute values and give a short description of each (4 points).
5. 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.

Deliverables

• Turn in the Project Proposal to me in class if possible.
• Post the zip files to the Assignments page on BrightSpace.

---