#100DaysOfCode in Python Transcripts
Chapter: Days 76-78: Getting Started with Python Flask
Lecture: Dict data in Flask
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Okay, now we've got our site, let's make it interesting. Let's deal with some actual data. So, earlier I got you to create a data.py file.
0:10
That would be this one here. It's nice and empty. So, this is where we're going to create our data. As you can imagine, with most applications,
0:18
you're not going to have the data inside one file. Everything's going to be spread out. So, let's put the data in one file here,
0:26
and we're going to call it fav_beer because that's what I wish I was drinking right now. So, what's my favorite beer? Let's run it through.
0:37
So, I'm just creating a dictionary here, a dict, that has a name as the key, and the type of beer, or the name of the beer, as the value.
0:49
So, I'm just going to populate this with five entries and show you that. So, here comes some magic. And we are back. Take a look at that.
0:58
So, I've populated this quick dictionary here. Going to save the data.py file, and then we're going to call it in our Flask app.
1:06
We're going to import it, okay? So, what do we run here to import it? We're going to go from, woops, clicked in the wrong spot.
1:14
We're going to run from data, the data file, we're going to import that actual dict, all right? So, you can, deer. I don't like deer, I like beer.
1:25
So, you can imagine if you had multiple variables, or dictionaries, or lists in that file, you would import them here, all right?
1:34
So, from data import fav_beer. Now, how do pass that dictionary off to the Jinja2 template? Alright, we're going to do that in this rendered template,
1:45
'cause we're returning, we're returning that variable. We're going to return this dictionary to the template,
1:51
we're passing it off, handing it off, all right? If you could've seen my hand gestures just now, it would've been hilarious. So, fav_beer.
2:02
But is that right? Not quite. With Flask, you've got a bit of a special way of specifying these variables, all right?
2:11
So what we're doing is, at this point here, we've said fav_beer=fav_beer, right? Now, what we're doing is we're assigning
2:21
the fav_beer dictionary to the fav_beer object that is going over to the template, okay? That's just how it works.
2:34
I know it looks odd, and I know it probably is a little bit confusing, but that's how it works. You can't just say, you can't delete this
2:43
and just have the one object going across. You have to tell it, okay, I'm assigning this object, this data, this dictionary to the actual Flask object
2:56
that's going to be accessible from the Jinja2 template, all right? So, that's actually nice and easy.
3:04
That's all we have to actually edit in our Flask app. Then most of this is actually done in the index file. So, let's bring up Notepad again,
3:16
where we've got this. Now, I'm going to do a bit of magic here again, because I don't want you to see me have to type all of this stuff out.
3:24
All right, so let's just add in a whole bunch of extra HTML stuff to make the page a little nicer. Let me do that now, and fade to black.
3:33
And we're back. So, look at this, I've thrown in a head tag, I've thrown in some extra lines for style sheets, okay?
3:43
I did not want to have to deal with CSS myself, so I've gone to bootstrap and grabbed all of their yummy style sheet stuff, all right?
3:51
We've thrown in title, favorite beer tracker, and we've got our body tag. I've done some in-line CSS here,
4:00
just to add a margin on the left of 50 pixels, got a H1 tag header in there. Now, if we run this, let's just see how it looks
4:07
without any actual Python code running here. So, we'll quickly go back here, run Python app.py, kicks off the server, normal 127.
4:21
Bring up my browser, load that, and bang, favorite beers. We've got that little margin here, got the H1 tag, and we've got the title up there.
4:30
Now, how are we going to do this? How are we going to present that dictionary worth of data? We have a key, we have a value.
4:37
Well, you can think, you're probably going to want a table of some sort, some sort of a spreadsheet. We'll go with a table, that sounds nicer.
4:45
Now, to run a table tag, we run, we'll type this sort of thing in there. Now, I'm just going to quickly copy and paste this
4:55
specific bootstrap tag, which will make our table look really nice. That way, I don't embarrass myself. All right, chuck that in there.
5:08
Now, we're going to create the table row. Now, you know, for this you do need some basic HTML, but you know, just head to W3 schools, or what have you,
5:16
and you'll have yourself up and running in no time. So, we're going to have a table header called name.
5:21
I'm going to have a table header called beer, or beverage. We'll go with "beer of choice," I think that works better.
5:31
All right, close off the table row. Now, how are we going to do this? You think to yourself, we've got a dictionary that could potentially grow.
5:44
If this was some sort of a production thing, it's going to grow, so we can't manually specify every single line one by one.
5:53
This is where the Python code comes in. Now, we're going to run a for loop, just like, if you could imagine, for a script on the command line,
6:01
you're going to run a for loop to print out all of the keys and values of that dictionary. We're going to do that now, but we're going to do it
6:08
with a table wrapped around it. So, no matter what data gets added to our dictionary, this table will grow every time the page is launched,
6:17
so that's pretty cool, right? So, to run Python code within the Jinja2 template, there's a certain format, and that's the
6:27
left curly brace with a percent sign. If you see that opening on one of these Jinja templates, that denotes you're about to execute some code.
6:38
So, for name and beer. You could write for k,v, whatever you want to do. Remember, these are arbitrary. So, for name, beer in fav_beer.items.
6:51
That's how we open the dictionary to access the keys and values, and then we close that off. Now what are we going to do?
6:59
Well, every time you pass through this loop, you're going to create a table row, and in that table row, you're going to create
7:09
one cell, so to speak, and the first one is going to be titled "name." So what this is this is a substitute flag for the Jinja2 templates.
7:25
So, anything that goes in here within these two brackets has to be a variable. So, we're going to put in whatever the key is, name.
7:36
So again, if you put the letter k there as you normally would, you'd put k in here. So, the name from that name key in our dictionary
7:45
is going to pop into this cell here, all right? So, TD and the next one is going to be our beer, all right?
8:02
And that's it. So now, no matter how many people you add to your beer tracker table, or dictionary, I should say, this table will grow every time
8:14
you reload the page, all right? So, let's close this off, and now, we can close off the for loop. Now, this is very important.
8:26
If you do not close off the for loop, your Python code will fail. It will tell you that there was no closure of the actual for loop.
8:36
And last but not least, we close our table. And that, my friends, is it. Now let's launch it. So, to do that, we make sure we save,
8:50
make sure everything's saved, go back into app.py, and we rerun the script, and there you go, it's run the web server,
9:02
load up the website, bang, look at that. We have this nice, cool table. Julian likes White Rabbit Dark Ale. Mm, yummy.
9:14
Bob, I'm guessing, likes some sort of light beer, I assume, 'cause that's Bob, right? Mike B. From Oregon, well, Oregano beer, Oregano beer?
9:23
I have no idea. And Cornelius and Dan, who happen to be friend of mine at work, like these beers. So, that's it.
9:31
That was dealing with data, with a dictionary, and passing it to Jinja2 templates to create yourself a little bit of a front end.
9:41
So, this is really cool. This is now where you can start seeing your own application.