#100DaysOfCode in Python Transcripts
Chapter: Days 76-78: Getting Started with Python Flask
Lecture: Dict data in Flask
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 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.