Birthdays

Open VS Code.

Start by clicking inside your terminal window, then execute cd by itself. You should find that its “prompt” resembles the below.

$

Click inside of that terminal window and then execute

wget https://cdn.cs50.net/2023/spring/psets/9/birthdays.zip

followed by Enter in order to download a ZIP called birthdays.zip in your codespace. Take care not to overlook the space between wget and the following URL, or any other character for that matter!

Now execute

unzip birthdays.zip

to create a folder called birthdays. You no longer need the ZIP file, so you can execute

rm birthdays.zip

and respond with “y” followed by Enter at the prompt to remove the ZIP file you downloaded.

Now type

cd birthdays

followed by Enter to move yourself into (i.e., open) that directory. Your prompt should now resemble the below.

birthdays/ $

If all was successful, you should execute

ls

and you should see the following files and folders:

app.py  birthdays.db  static/  templates/

If you run into any trouble, follow these same steps again and see if you can determine where you went wrong!

Before you begin, it’s helpful to understand the current state of your application. Run flask run in your terminal while in your birthdays directory to start a web server that serves your Flask application. Click on the link provided by Running on URL where URL is the URL of your application.

To allow users to add birthdays to your database, birthdays.db, you’ll first need to provide them a form via which to input the data. To create a form, you can use an HTML form element.

HTML forms are composed of input elements, where each input allows the user to enter some piece of information. Recall that birthdays.db is a SQLite database with one table, birthdays, and that this table has four columns: id, name, month, and day. No need for the user to give the birthday an id themselves (SQLite will take care of such!), but you should have the user input a name, a month, and a day for each birthday. Try adding the following form:

<form>
    <input name="name" placeholder="Name" type="text">
    <input name="month" placeholder="Month" type="number" min="1" max="12">
    <input name="day" placeholder="Day" type="number" min="1" max="31">
</form>

Notice that—per its documentation—input elements have many possible attributes, among them name, placeholder, and type. Via the name attribute can you set a name to refer to a particular input in a form: the name, month, or day input, for instance. The placeholder attribute adds text to the input box while it doesn’t (yet) have a value, and the type attribute specifies the type of input (number, text, date, password etc.) the user can enter.

Forms, as you may recall, need to be submitted. It’s common practice to have an input with a type of submit. When that input is clicked, the form will be submitted along with the data the user has entered in the form’s input elements.

<form>
    <input name="name" placeholder="Name" type="text">
    <input name="month" placeholder="Month" type="number" min="1" max="12">
    <input name="day" placeholder="Day" type="number" min="1" max="31">
    <input type="submit" value="Add Birthday">
</form>

Forms commonly need some route to which to send their data. Try using the action and method attributes of a form element, which—upon form submission—specify to the browser which route it should request and which request method to use. The action attribute specifies the route, while the method attribute specifies the request method.

<form action="/" method="post">
    <input name="name" placeholder="Name" type="text">
    <input name="month" placeholder="Month" type="number" min="1" max="12">
    <input name="day" placeholder="Day" type="number" min="1" max="31">
    <input type="submit" value="Add Birthday">
</form>

Upon submission, this form makes an HTTP POST request to the / route. It includes the data the user has added to its input elements in the request body.

You’ve added a form element that submits to the / route via the POST request method. Now, you can use Flask to write Python code that will control what happens when your application receives a POST request to the / route.

You’ll want to break this problem down into smaller problems:

1. Access the form data submitted.
2. Add that form data to your database, birthdays.db.
3. Redirect the user back to the / route (this time with a GET request), so they can see the list of all birthdays. The distribution code implements this step for you.

Write some pseudocode to remind yourself to do the above.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data

        # Add entry to database

        return redirect("/")

    else:

        # TODO: Display the entries in the database on index.html

        return render_template("index.html")

First, try accessing the form data submitted via POST. Recall that Flask gives you a function, request.form.get, which can do just that. For any form submitted via POST, it can take the name of a form element’s input and return that input’s value. For instance, request.form.get("day") will return the value of the input whose name attribute is equal to “day.”

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data
        name = request.form.get("name")
        month = request.form.get("month")
        day = request.form.get("day")

        # Add entry to database

        return redirect("/")

    else:

        # TODO: Display the entries in the database on index.html

        return render_template("index.html")

To debug, you might try using print to print the values of the form’s inputs. You should see them in your terminal each time you submit the form.

Next, you’ll want to add these form values to your database, birthdays.db. Notice that the distribution code already establishes a connection to the database using db = SQL("sqlite:///birthdays.db"). From here forward, then, you can use db.execute to run any SQL query on birthdays.db. Per its documentation, the execute method can use ? in a query as a placeholder, the values of which can provided as additional arguments.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data
        name = request.form.get("name")
        month = request.form.get("month")
        day = request.form.get("day")

        # Add entry to database
        db.execute("INSERT INTO birthdays (name, month, day) VALUES(?, ?, ?)", name, month, day)

        return redirect("/")

    else:

        # TODO: Display the entries in the database on index.html

        return render_template("index.html")

Now that the user can add entries to your database, you’ll want to ensure they can view those entries on the web page itself. Try breaking this problem down into smaller problems:

1. Query for all birthdays
2. Render the birthdays in index.html

Write some pseudocode to remind yourself to do the above.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data
        name = request.form.get("name")
        month = request.form.get("month")
        day = request.form.get("day")

        # Add entry to database
        db.execute("INSERT INTO birthdays (name, month, day) VALUES(?, ?, ?)", name, month, day)

        return redirect("/")

    else:

        # Query for all birthdays

        # Render birthdays in index.html

        return render_template("index.html")

First, consider how to query for all birthdays in birthdays.db. Recall that you can use db.execute to execute any SQL query on birthdays.db. It’s quite the hint, but the below query should return all rows and columns in birthdays.db, storing the result in a variable called birthdays. Per its documentation, the execute method returns a list of dictionaries. Each dictionary represents one row in the result set, whose values you can access using column names as keys.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data
        name = request.form.get("name")
        month = request.form.get("month")
        day = request.form.get("day")

        # Add entry to database
        db.execute("INSERT INTO birthdays (name, month, day) VALUES(?, ?, ?)", name, month, day)

        return redirect("/")

    else:

        # Query for all birthdays
        birthdays = db.execute("SELECT * FROM birthdays")

        # Render birthdays in index.html

        return render_template("index.html")

Next, consider how to render this list of birthdays in index.html. Recall that the render_template function can take additional keyword arguments of variables you’d like to render in the resulting HTML. For example, the below will take the birthdays variable and allow you to render it in your HTML under the name birthdays.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":

        # Access form data
        name = request.form.get("name")
        month = request.form.get("month")
        day = request.form.get("day")

        # Add entry to database
        db.execute("INSERT INTO birthdays (name, month, day) VALUES(?, ?, ?)", name, month, day)

        return redirect("/")

    else:

        # Query for all birthdays
        birthdays = db.execute("SELECT * FROM birthdays")

        # Render birthdays in index.html
        return render_template("index.html", birthdays=birthdays)

Finally, you’ll need to render the birthdays in index.html. Recall that the tr tag can be used to create a table row and the td tag can be used to create a table data cell. And recall that, with Jinja, you can create a for loop inside your index.html file.

<tbody>
    {% for birthday in birthdays %}
        <tr>
            <td>{{ birthday.name }}</td>
            <td>{{ birthday.month }}/{{ birthday.day }}</td>
        </tr>
    {% endfor %}
</tbody>