#100DaysOfWeb in Python Transcripts
Chapter: Days 17-20: Calling APIs in Flask
Lecture: Passing variables between Flask app code and a Template
0:01 Before we get started in actually playing
0:03 with APIs we just need to quickly, quickly cover
0:06 off how to pass variables from our Flask app
0:11 the actual Python code, through to that
0:13 Jinja template to display it on the webpage.
0:16 So right now we've just been passing off
0:19 standard text through print commands.
0:22 This time we are actually going to pass off
0:25 a variable that can change.
0:27 So in this example we're going to use the date.
0:30 So using a date time string we're going to pass
0:34 that off to the webpage and then display that.
0:38 And that's a great example because the date time
0:40 string will change every time the page is loaded
0:43 because the time keeps ticking, right?
0:46 So to do that let's edit first our routes dot PY file.
0:53 That's where we're actually going to do
0:55 the number crunching or the code so to speak.
1:03 Once we're in this file because we are going
1:06 to actually put the date time returning
1:08 on our index page that's where we want to display it.
1:14 We need to put our code within our index function.
1:18 As this is just a simple date time though
1:21 if you really think about it we just need
1:23 to return that string so there's not much
1:25 that we need to do in here.
1:27 All we really have to do to keep it super-simple
1:30 is import date time and then assign the time
1:34 to a variable.
1:35 So let's import datetime.now from datetime
1:38 import datetime.
1:42 And then let's just create a little time object
1:46 called time_now because we'll take the time_now.
1:50 And then we will just quickly do datetime.today.
1:54 And what that will do is it'll get date time
1:56 dot today, it assign it, it convert it
1:58 to a string and then assign it to the time_now variable.
2:03 And then all we have to do is return that.
2:05 So if you think about it we are returning
2:08 with our render template index.html.
2:13 We are also going to pass off a variable.
2:17 So that will go in these brackets here just after this one.
2:22 Now, just let me type this out before I explain it.
2:28 Now, this looks a bit confusing but what
2:29 we're doing is we're actually sending our time
2:33 now variable, this one here, to our Jinja
2:37 template as a variable called time, as an object
2:41 called time, okay?
2:42 You might see in other Flask apps where these
2:45 are named the same thing.
2:47 In other words, time_now equals time_now
2:49 would be a traditional way of doing it
2:52 but just for demonstrative purposes I'm going
2:55 to name them differently and that is so that
2:59 you can see which variable is which.
3:01 So this one here, time_now, is the one
3:03 that we're specifying up here in our Python script.
3:06 And time is what we are going to call
3:09 in our Jinja template.
3:11 All right, so that's all we have to do to update
3:14 our routes dot PY file to send the date time
3:17 object over to our Jinja template.
3:20 So let's save that.
3:22 Let's head over to our templates folder.
3:26 And let's have a look in index.html.
3:31 As you can see from our previous Flask section
3:35 we have our index, everything that's unique
3:37 to our index.html page, in between these
3:40 block content tags.
3:42 And all we want to do is have a message that says
3:45 that we are printing the time.
3:47 So we can do that underneath here.
3:50 Let's just throw another p tag in or how about
3:53 we throw a h1 tag here.
4:01 The current date is, and as we learned
4:03 from the previous videos, anything that is Python
4:08 code is going to be within these types
4:09 of brackets and then we close it off here.
4:14 Now as I mentioned in the previous file
4:16 the variable that we are sending off to our Jinja
4:18 template is the word time, okay?
4:22 So we actually put in two of these brackets
4:25 to indicate that we're playing with a variable here.
4:27 I know it's hard to see with the highlighting
4:28 there so let's just space that out.
4:31 And we throw in the word time.
4:33 That's our variable.
4:34 So because this is an actual object or a variable
4:37 that we are calling from our Python script
4:40 it goes between these double curly brackets.
4:44 And that's it.
4:45 So the current date is, and then we can throw
4:48 in that time, and we save that, and we run our Flask app.
4:59 And with that running let's bring up the browser
5:01 and take a look.
5:03 All right, and here's our website running.
5:05 We are on the 100 days page up here
5:08 so let's click the home tab and this
5:09 will initiate the index.html route.
5:13 And there we go, the current date is 2018
5:18 October the 11th, and there's our timestamp.
5:23 Now, one thing you will notice is if we move
5:25 back to the 100 days page and then move back
5:28 to our home tab, the actual time is not changing.
5:34 And the reason this won't change
5:35 is because of where we've specified
5:38 that assignment variable.
5:40 If we just cancel our script we go into routes
5:46 dot PY and this is being specified at this level.
5:52 It's being specified outside the route
5:55 outside the index function.
5:57 And what that means is it is only being assigned
6:01 when the Flask app is run.
6:03 So if we cancel the Flask app and then rerun it
6:06 this will update with the time.
6:08 All right, so that is why that won't change
6:10 until you close your app and relaunch it.
6:13 If we actually want this to run every time
6:16 that page is loaded, we have to put that
6:18 within the index route, the index function here.
6:23 That way every time this is called it activates down here.
6:27 So let's just copy and paste that.
6:28 All right, there we go.
6:30 And right quick, Flask run, bring up our web browser.
6:38 All right, back to the home tab.
6:40 There's the time, 9:57 p.m. 23 seconds.
6:44 Launch it again, it's gone to 27 seconds.
6:47 And that's how we can redo that every single time.
6:51 And that is how we pass a variable off
6:55 to our Jinja template.
6:57 Just remember we have the render template
7:00 that we're returning and we're just specifying
7:02 the variable there.
7:03 We put the actual Python variable on the right
7:05 and we assign it to a variable that we want
7:08 to call within the Jinja template.