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