CS50 Video Player
    • 🧁
      • 🍪
      • 🍉
      • 🍿
    • 0:00:00BRIAN: In this lab, your task is going to be to write a web application that
    • 0:00:04keeps track of people's birthdays.
    • 0:00:06Your web application is going to display a table of birthdays
    • 0:00:10with people's names in one column and their birthday month and birth
    • 0:00:13day in another column, as well as have a forum where
    • 0:00:16users can add a new birthday to a database
    • 0:00:19by typing in the name of a new person, the month in which they were born,
    • 0:00:22and the day in which they were born, and then using that information
    • 0:00:25to then store that inside the database and then have your website update based
    • 0:00:30on that database, displaying the names and birthdays of all of the people
    • 0:00:34that are in the database.
    • 0:00:36In order to do so, the first thing to understand
    • 0:00:38is the structure of the database that we give you.
    • 0:00:41And we'll give you a database that has one table called birthdays.
    • 0:00:45This table has an ID.
    • 0:00:47Every birthday also has a name of the person whose birthday were storing
    • 0:00:51as well as an integer for the month and the day of that person's birth.
    • 0:00:56Let's take a look now at the distribution code
    • 0:00:58that we give you as part of this application.
    • 0:01:01This is a flask application.
    • 0:01:03So let's first take a look at application.py.
    • 0:01:06What you'll notice is that inside of application.py,
    • 0:01:09we're giving ourselves access to this database
    • 0:01:12by using the CS50 library to get access to birthdays.db representing
    • 0:01:17the database inside of this variable called DB.
    • 0:01:22Next, we have a single route in this web application, just the slash
    • 0:01:26route which is the default one, that accepts two request methods,
    • 0:01:30GET and POST.
    • 0:01:32Get will be the request method we use when
    • 0:01:34someone is just visiting our page as by typing its URL or clicking on a link.
    • 0:01:39And POST will be the request method we use
    • 0:01:41when the user is submitting some form data,
    • 0:01:44like submitting a person's birthday to be added to the database.
    • 0:01:48If the request method is POST, we've already written this part for you,
    • 0:01:52well, that means the user has submitted something via a form.
    • 0:01:56And so what you'll want to do is add that user's entry
    • 0:01:59with their name and their birthday into the database.
    • 0:02:02And then they get redirected back to the default route.
    • 0:02:05But otherwise, if the user is just getting the website,
    • 0:02:08they're not submitting a new birthday, then we're going to display index.html.
    • 0:02:13Ultimately, index.html needs to also get access
    • 0:02:17to information about all of the people's birthdays inside of the database.
    • 0:02:21So you'll want to add logic here to query the database
    • 0:02:24to get access to all of those birthdays and pass them into index.html.
    • 0:02:30Let's now take a look at index.html which
    • 0:02:32is inside of our Templates folder.
    • 0:02:35You'll notice that here we have a section that
    • 0:02:38says add a birthday then nothing beneath it just yet.
    • 0:02:40This form is going to be up to you to create.
    • 0:02:43And then we have a table for displaying birthdays,
    • 0:02:46where every row in that table is going to have
    • 0:02:49one cell for the name of the person, and one cell for their birthday,
    • 0:02:52month and day.
    • 0:02:54But you'll notice that the body of this table right now is empty.
    • 0:02:57Your task ultimately is going to be to inside of index.html loop
    • 0:03:02through all of the birthdays that you've got access to from the database
    • 0:03:05and print one row into this HTML template
    • 0:03:09for each of those birthdays, printing one row that has a name for the person
    • 0:03:13as well as their birthday.
    • 0:03:15So let's recap what you're going to do as part of this lab.
    • 0:03:19The first thing you should do in application.py
    • 0:03:22is query for all birthdays and pass that data to index.html.
    • 0:03:27This is in the else section of that route for a standard GET request.
    • 0:03:31Because when someone is getting your page,
    • 0:03:33you want to query for all of the birthdays from the database
    • 0:03:36and then give that information to index.html
    • 0:03:40so that your HTML template can take advantage of that data
    • 0:03:43to render all of those table rows.
    • 0:03:46The next step in index.html is to render those table rows.
    • 0:03:50For each of the birthdays that you got from the query,
    • 0:03:53you're going to render each as a row in that table
    • 0:03:56with one cell in that table for the name and one cell
    • 0:03:59in that table for the birthday.
    • 0:04:01Recall that you can create a table row in HTML using the TR tag.
    • 0:04:06And you can create a cell in that row using TD, TD standing for table data.
    • 0:04:13And you'll likely want to use some kind of loop here
    • 0:04:15as well to be able to loop over your list of all of those birthdays,
    • 0:04:19and for each of those birthdays rendering one row that
    • 0:04:23shows up inside of your HTML table.
    • 0:04:25After you've implemented that part of the application,
    • 0:04:28you should be able to view the birthdays that are already in the database.
    • 0:04:32But now we want the ability to add new birthdays to that database as well.
    • 0:04:36So in index.html, you'll add a form to let users add a new birthday.
    • 0:04:42That form should give users the ability to specify
    • 0:04:44the name of a person, what month they were born in,
    • 0:04:47and what day they were born on, and then click
    • 0:04:49some button that lets them submit that form
    • 0:04:52to add a new birthday to the database.
    • 0:04:54And then finally in application.py you'll
    • 0:04:57need to add logic to handle those form submissions accessing whatever
    • 0:05:01data was submitted via that form, and inserting
    • 0:05:04that new birthday into the database.
    • 0:05:07After you've done that, users should be able to visit your website application,
    • 0:05:11fill out that form by typing in their name, a month, and a day,
    • 0:05:14and have their birthday added to your database of birthdays.
    • 0:05:17And as a result, their name and birthday should appear inside of your HTML table
    • 0:05:22as well.
    • 0:05:23How might you go about doing this?
    • 0:05:25Well to run SQL queries on your database, you can use db.execute.
    • 0:05:30Recall that DB is the name representing that database that we
    • 0:05:34have inside of our flask application.
    • 0:05:37And execute will let you run a query like a select
    • 0:05:40or an insert on that database from your Python program.
    • 0:05:44And recall too that if you add question marks into that query,
    • 0:05:48you can use those as placeholders for other values
    • 0:05:50such that you can substitute in values that
    • 0:05:53came from the user as via a form submission for example
    • 0:05:56as part of the query that you're running.
    • 0:05:59As you do so, you'll also want to bear in mind
    • 0:06:02the distinction between these two different request methods, GET
    • 0:06:05and POST.
    • 0:06:06When the user is getting the page, all you're going to do
    • 0:06:10is query for all of the birthdays and display
    • 0:06:12that HTML page that has that table of all of the birthdays.
    • 0:06:16POST meanwhile, is what's going to happen when the user submits a form.
    • 0:06:20So you want to make sure that your form has a method of POST to make sure
    • 0:06:24that when you're sending data, you're sending that data via POST.
    • 0:06:27And then make sure that your route is able to handle those POST requests,
    • 0:06:31adding each of those birthdays to the database
    • 0:06:34such that the next time the user visits that page, their birthday
    • 0:06:37will be on that page as well.
    • 0:06:40My name is Brian, and this was birthdays.
  • CS50.ai
Shortcuts
Before using a shortcut, click at least once on the video itself (to give it "focus") after closing this window.
Play/Pause spacebar or k
Rewind 10 seconds left arrow or j
Fast forward 10 seconds right arrow or l
Previous frame (while paused) ,
Next frame (while paused) .
Decrease playback rate <
Increase playback rate >
Toggle captions on/off c
Toggle mute m
Toggle full screen f or double-click video