1 of 43

This is CS50

Scan your ID for attendance

2 of 43

Think.

Pair.

Share.

3 of 43

4 of 43

View

5 of 43

6 of 43

Controller

View

7 of 43

8 of 43

Controller

View

Model

9 of 43

10 of 43

birthdays/

static/

styles.css

templates/

index.html

app.py

birthdays.db

11 of 43

Routes

12 of 43

https://www.nytimes.com/crosswords

13 of 43

https://birthdays.net/

14 of 43

https://birthdays.net/add

15 of 43

@app.route("/")

def index():

# Return index page ("homepage")

16 of 43

@app.route("/")

def index():

return render_template("index.html")

17 of 43

flask run

18 of 43

Forms

19 of 43

<form action="/" method="post">� ...�</form>

Route to request

Request method

Form element

20 of 43

<input name="friend" type="text">

<input name="month" type="number">

<button type="submit">Submit</button>

Elements of forms

21 of 43

<input name="friend" type="text">

<input name="month" type="number">

<button type="submit">Submit</button>

Elements of forms

Submits form when clicked!

22 of 43

Download birthdays…

  • Download the distribution code from the CS50 page

23 of 43

Add a form

In index.html, add a form to submit new birthdays. The form should have the following attributes:

  • The form should submit to the default "/" route, using the POST method.
  • The form should include an input for a name, as well as the month and day of a birthday.
  • The form should include a button to submit the form.

24 of 43

Updating a model

25 of 43

request.form.get("friend")

<input name="friend" type="text">

POST

26 of 43

request.args.get("friend")

<input name="friend" type="text">

GET

27 of 43

INSERT INTO table (column1, column2)

VALUES (value1, value2);

28 of 43

db.execute()

29 of 43

db.execute("SELECT * FROM birthdays

WHERE month = ?", month)

30 of 43

db.execute("SELECT * FROM birthdays

WHERE month = ?

AND day = ?", month, day)

31 of 43

Update a database

In app.py, insert a new entry to the birthdays table of birthdays.db when the user submits data via POST:

  • Use request.form.get to get the values from each named input element.
  • Use db.execute with ? placeholders to insert those values into the birthdays table.
  • Be sure to validate user input. For example, check if a value is None before inserting the value into the database.

32 of 43

Template Rendering

33 of 43

render_template("index.html",

message="Hello")

<p>The message is: {{ message }}</p>

34 of 43

render_template("index.html",

bdays=["Feb 2", "Feb 28"])

{% for bday in bdays %}

<p>{{ bday }}</p>

{% endfor %}

35 of 43

<p>This birthday is in {{ bday.month }}</p>

render_template("index.html",

bday={"month": "Feb", "day": 24})

36 of 43

{% ... %}

​

{{ ... }}

Jinja expressions (e.g., for)

Jinja variables (e.g., bday, message)

37 of 43

{% extends “layout.html” %}

​

​

{% block title %} {% endblock %}

​

{% block main %} {% endblock %}

38 of 43

Render birthdays

In app.py and index.html, query for birthdays and display them in a table.

  • Use db.execute to query for a list of birthdays in the birthdays table.
  • Use Jinja syntax to print out birthdays one by one in a table.

39 of 43

Problem Set 9

40 of 43

41 of 43

Problem Set 9 Tips

  • Start early
  • Recall that db.execute("SELECT …") will return a Python list of dictionaries, where each dictionary is a row with keys corresponding to column names.
  • When designing your database, try to minimize redundancy. If you already have a user's history of transactions, how could you derive their portfolio?
  • Remember to validate user input before using it! Are values numbers where they should be? In the right range?
  • A demo application is available https://finance.cs50.net/

42 of 43

Tutorials

Office Hours

43 of 43

This was CS50