BRIAN: In this lab, your task is going to be to write a web application that
keeps track of people's birthdays.
Your web application is going to display a table of birthdays
with people's names in one column and their birthday month and birth
day in another column, as well as have a forum where
users can add a new birthday to a database
by typing in the name of a new person, the month in which they were born,
and the day in which they were born, and then using that information
to then store that inside the database and then have your website update based
on that database, displaying the names and birthdays of all of the people
that are in the database.
In order to do so, the first thing to understand
is the structure of the database that we give you.
And we'll give you a database that has one table called birthdays.
This table has an ID.
Every birthday also has a name of the person whose birthday were storing
as well as an integer for the month and the day of that person's birth.
Let's take a look now at the distribution code
that we give you as part of this application.
This is a flask application.
So let's first take a look at application.py.
What you'll notice is that inside of application.py,
we're giving ourselves access to this database
by using the CS50 library to get access to birthdays.db representing
the database inside of this variable called DB.
Next, we have a single route in this web application, just the slash
route which is the default one, that accepts two request methods,
GET and POST.
Get will be the request method we use when
someone is just visiting our page as by typing its URL or clicking on a link.
And POST will be the request method we use
when the user is submitting some form data,
like submitting a person's birthday to be added to the database.
If the request method is POST, we've already written this part for you,
well, that means the user has submitted something via a form.
And so what you'll want to do is add that user's entry
with their name and their birthday into the database.
And then they get redirected back to the default route.
But otherwise, if the user is just getting the website,
they're not submitting a new birthday, then we're going to display index.html.
Ultimately, index.html needs to also get access
to information about all of the people's birthdays inside of the database.
So you'll want to add logic here to query the database
to get access to all of those birthdays and pass them into index.html.
Let's now take a look at index.html which
is inside of our Templates folder.
You'll notice that here we have a section that
says add a birthday then nothing beneath it just yet.
This form is going to be up to you to create.
And then we have a table for displaying birthdays,
where every row in that table is going to have
one cell for the name of the person, and one cell for their birthday,
month and day.
But you'll notice that the body of this table right now is empty.
Your task ultimately is going to be to inside of index.html loop
through all of the birthdays that you've got access to from the database
and print one row into this HTML template
for each of those birthdays, printing one row that has a name for the person
as well as their birthday.
So let's recap what you're going to do as part of this lab.
The first thing you should do in application.py
is query for all birthdays and pass that data to index.html.
This is in the else section of that route for a standard GET request.
Because when someone is getting your page,
you want to query for all of the birthdays from the database
and then give that information to index.html
so that your HTML template can take advantage of that data
to render all of those table rows.
The next step in index.html is to render those table rows.
For each of the birthdays that you got from the query,
you're going to render each as a row in that table
with one cell in that table for the name and one cell
in that table for the birthday.
Recall that you can create a table row in HTML using the TR tag.
And you can create a cell in that row using TD, TD standing for table data.
And you'll likely want to use some kind of loop here
as well to be able to loop over your list of all of those birthdays,
and for each of those birthdays rendering one row that
shows up inside of your HTML table.
After you've implemented that part of the application,
you should be able to view the birthdays that are already in the database.
But now we want the ability to add new birthdays to that database as well.
So in index.html, you'll add a form to let users add a new birthday.
That form should give users the ability to specify
the name of a person, what month they were born in,
and what day they were born on, and then click
some button that lets them submit that form
to add a new birthday to the database.
And then finally in application.py you'll
need to add logic to handle those form submissions accessing whatever
data was submitted via that form, and inserting
that new birthday into the database.
After you've done that, users should be able to visit your website application,
fill out that form by typing in their name, a month, and a day,
and have their birthday added to your database of birthdays.
And as a result, their name and birthday should appear inside of your HTML table
as well.
How might you go about doing this?
Well to run SQL queries on your database, you can use db.execute.
Recall that DB is the name representing that database that we
have inside of our flask application.
And execute will let you run a query like a select
or an insert on that database from your Python program.
And recall too that if you add question marks into that query,
you can use those as placeholders for other values
such that you can substitute in values that
came from the user as via a form submission for example
as part of the query that you're running.
As you do so, you'll also want to bear in mind
the distinction between these two different request methods, GET
and POST.
When the user is getting the page, all you're going to do
is query for all of the birthdays and display
that HTML page that has that table of all of the birthdays.
POST meanwhile, is what's going to happen when the user submits a form.
So you want to make sure that your form has a method of POST to make sure
that when you're sending data, you're sending that data via POST.
And then make sure that your route is able to handle those POST requests,
adding each of those birthdays to the database
such that the next time the user visits that page, their birthday
will be on that page as well.
My name is Brian, and this was birthdays.