People App¶

Today, we'll explore the People App to ensure that everyone is comfortable with it.

Goal¶

Understanding a complete database web app.

Plan¶

1. Announcements
2. understanding the structure of our apps
3. putting cs304dbi in our venv (if needed)
4. your questions
5. Together: building people_app
6. Breakout: form to specify the birth month for search
7. Mid-semester eval

Announcements¶

• Questions about Proposal?
• Grading status
• Forms assignment (solo)
• Lookup assignment (I'll assign partners over the break)

Structure¶

Having a mental picture helps to understand the structure of our apps.

Starting¶

To start our work for today, make sure you activate your virtual environment:

source ~/cs304/venv/bin/activate 

You'll have to do that every time, so it's useful to know about command history. You can repeat that command by doing:

!sou

Constructing the DB Web Interface Example¶

In the following exercise, we're going to look at all the pieces, so that it's clear what they do. The longest file is 57 lines.

cd ~/cs304/
cp -r ~cs304flask/pub/downloads/people_app people_app
cd people_app

1. code people.py and look at it.
2. do python people.py in the shell:

code people.py
python people.py

This last step will fail if you are missing cs304dbi module. Hopefully not.

Copy cs304dbi to VENV¶

If it failed, copy the cs304dbi.py file to your virtual environment:

cp ~cs304flask/pub/downloads/pymysql/cs304dbi.py ~/cs304/venv/lib/python3.9/site-packages/

Now, run the people.py again and it should work.

Running the App¶

Let's continue looking at the app.

1. Look at the template in the editor
2. Look at app.py in the editor

Run the app:

python app.py

View in the Browser¶

I'll demo and you'll try this too:

• /
• /people/
• /people-born-in/9
• edit the url to try a different month

This a complete database web app!

It doesn't do a lot, but we've filled in every step of our initial picture:

Poll¶

poll: yes or no: I mostly understand the people_app.

• 1: 1
• 2: 0
• 3: 17
• 4: 6
• 5: 0

So, most of you are in the middle, undecided about how well you understand the People app.

Quiz questions¶

This is a good time to answer your quiz questions.

People App Code¶

I'm happy to talk through the people app and the people app reading for as long as you like.

development version

Exercise 1¶

Modify the people app that you copied earlier so that it can also list people born on particular days of the week.

This is nearly isomorphic to the existing routes, but you'll create a route and supporting functions and create a URL.

There's a MySQL function that will return the day of the week for any date: dayofweek

Exercise 2¶

Add a CSS style file. Make the background color and foreground color interesting.

Exercise 3¶

Add a form to choose the month or weekday from a menu. Some key facts:

• The form needs to have a <select> menu, with an <option> for each month or day
• You can set the value attribute of the <option> if you want the value in numeric form
• Don't forget to give the input a name
• The METHOD of the form should be GET. Why?
• The ACTION of the form should be the url_for (hint, hint) for some handler function
• That handler function will extract the form data from request.args. Why?

Like:

<form method="GET" action="{{url_for('my_function')}}">
   <label> month
       <select required name="dow">
           <option value="">choose day of week</option>
           <option value="1">Sunday</option>
           <option value="2">Monday</option>
           <option value="3">Tuesday</option>
           <option value="4">Wednesday</option>
           <option value="5">Thursday</option>
           <option value="6">Friday</option>
           <option value="7">Saturday</option>
       </select>
    </label>
    <input type="submit">
</form> 

and

@app.route('/choose-month/')
def my_function():
    dow = request.args.get('dow')

Breakout¶

Work on the exercises.

Please fill out mid-semester evaluation. Thanks!

Summary¶

I hope you're feeling more comfortable with Flask apps.