BRIAN YU: Let's take a look at how you might have solved your birthdays. In this lab your task was to design a web application that could keep track of users' birthdays. And the first thing you wanted to do was to just display an HTML page that showed you all of the birthdays that were currently stored in the database. To do that, you first, in your Python code, needed to query for all of those birthdays. 

Let's see how you might have done that. Here, underneath the else, which means the request method is get, we're going to run db.execute to execute a SQL query on your database. The query we wanted to execute was Select * FROM birthdays to get access to all of the birthdays data, saving all of those rows inside of a list called birthdays. Then when we rendered index of HTML, we wanted to pass to that template a variable called birthdays, which was equal to birthdays, that variable that we queried for just a moment ago. 

Now let's take a look at how we actually use that birthdays list inside of index.html. We had already given to you a table where you were going to store those birthdays. But the body was previously empty. What you wanted to do was to loop over each of those birthdays, and for each of those birthdays render a row of that table that had two cells, one cell for the name and one cell for the birthday. 

So here we have a for loop that, in this language called Jinja, the templating language that Flask uses, we use curly brace and % sign for any of these logical operations. So here I'm saying for birthday and birthday, in syntax that looks very similar to Python syntax. 

But for each one of those birthdays, I want to render a table row, a tr. And inside of that row, I first have one table data cell, td, with the name of the person whose birthday I'm representing. And I can access that as birthday.name, where name here corresponds to one of the columns from my SQL table that I was querying from before. Recall that birthday here is one row of that SQL table, which is represented in Python as a Python dictionary. 

And so here in Jinja, I can say birthday.name to get access to the name of that person. And likewise, in the second table data cell, I want to represent their birthday. And so here I'm saying birthday.month for the month of their birthday, slash, and then birthday.day for the day of their birthday as well. 

And so that will then render all of the birthdays that are currently inside of the database. But we didn't want our website to just display all of the birthdays from the database. We also wanted to give users the ability to add new birthdays to the database as well. 

So to do that we could add an HTML form to our website. Let's see how we might do that. If we scroll up on this page, here underneath add a birthday, we have a form. The action of the form is slash. This is what route the user should submit this data to when the form ultimately gets submitted. 

Then the method is post. The method is what request method should be used when sending this form data. And in this case, we're using post. But another option would have been get, for example. 

So we're sending data via post. And what inputs do we need? Well, we need one input to let the user type in their name. Name in this case is going to be name, where this value in quotation marks is just some label that we're giving to that input field so that later, in our Python code that we'll take a look at in a moment, we have some way of referencing these different input fields. We need some way of knowing what's the name, what's the month, and what's the day, and giving each input field a name is how we do that. 

So the name of this input field just happens to be "name," because we're storing the user's name. Placeholder is just some helpful text the user is going to see, which is name. And the type of this is going to be a text input. 

We also have an input for storing the month. We'll display a nice user placeholder for month to let them know they should be typing a month here. The type of this is going to be a number. And then optionally, if you wanted to, HTML also supports additional attributes you can give to inputs like min and max to say that the month needs to be between 1 and 12, for example. 

And likewise, we do something similar for day. We have an input whose name is day. We display some placeholder text for that day. And this is also going to be a number that, in this case, needs to be between 1 and 31. 

Then finally, at the end of this form, we have one last input whose type is submit. This is going to render as a button that is going to submit this form. And the value of the input field here is what should be displayed on that button. So this button is going to display the words, add birthday. 

So this creates a form inside of our HTML page. But nothing yet happens when we submit that form. To do that, we need to add some logic to application.pi to handle that form submission. 

So let's go back to application.pi. And if the request method is post, meaning if the user is submitting data as by submitting that form that we just created a moment ago, the first thing I need to do is figure out what values the user typed into that form. And for that I can use this function, request.form.get. And then the argument is the name of the input field that I want to get the value of. 

So recall that back in index.html, I had an input whose name was name, an input whose name was month, and an input whose name was day. And so to access those three values, I can say request.form.getname, request.form.getmonth, and request.form.getday. These three values line up exactly to the names of the input fields from my HTML form. And I'm going to save those values inside of name and month and day as new variables. 

Then I'm going to use db.execute to insert a new row into the birthdays table. I'm going to add a new birthday, specifying values for name and month and day. And then I'm using three question marks as placeholders for those values. 

At the time that I'm writing this code right now, I don't know what the name of the month and day are going to be. Those are going to be provided by the user. And so I use placeholders and then specify them as additional arguments to db.execute, specifying the name variable, the month variable, and the day variable as the values that I want to insert into this table. 

So now that I have all of the pieces of this web application. I can try it out by running my web application. In the terminal, I'll cd into my birthdays directory. And then run flask run to start up my web application. 

And when I click on this URL, I'll now open up my web application. And the first thing you'll see is that I do see all of the birthdays that were currently stored inside of my database. I used db.execute to get all of those birthdays, passed them into my index.html template, and now I'm displaying a table with all of that data. 

And if I wanted to add a new birthday, I could do so using this form that has three input fields, one for the name, maybe Luna, one for the month, maybe February, one for the day, like the 13th. Then I click Add Birthday. And that has the effect of adding a new birthday to my database. And then the next time I see this page, it now renders with the new birthday added to it as well, so that I can keep track of all of the birthdays already in the database and add new birthdays to the database, too. 

My name is Brian. And this was birthdays.