WEBVTT 0 00:00.270 --> 00:04.710 Now to begin, all we need is a simple Flask application. 1 00:05.100 --> 00:08.340 You can either write this out from scratch for practice, 2 00:08.610 --> 00:13.610 or you can head over to the course resources and you can download this file as a 3 00:13.800 --> 00:17.640 zip file. Once you've unzipped it and opened it in PyCharm, 4 00:17.850 --> 00:20.520 you should see a server.py file 5 00:20.790 --> 00:25.790 which contains all of the basic code that is required to render hello world onto 6 00:26.610 --> 00:27.443 the screen. 7 00:27.930 --> 00:32.930 So if we go ahead and just run this file and go to the local URL of our website, 8 00:34.410 --> 00:39.090 you should just be able to see hello world. Now, 9 00:39.120 --> 00:42.720 the next thing I want you to do is to create an HTML file 10 00:42.900 --> 00:46.530 which you'll call index, and inside this HTML file, 11 00:46.740 --> 00:51.740 we're going to give it a title of just my website and the more important part is 12 00:52.560 --> 00:55.830 going to occur in the body. For practice, 13 00:55.860 --> 00:59.490 go ahead and see if you can create an h1 that says hello world 14 00:59.820 --> 01:04.820 instead of returning just a hello world as text, and render this index HTML onto 15 01:06.540 --> 01:11.160 the screen instead. Pause the video and see if you can complete this challenge. 16 01:14.040 --> 01:14.370 All right. 17 01:14.370 --> 01:18.630 So the first thing we have to do was to create an h1 that said hello world. 18 01:19.440 --> 01:22.290 And once we've created our index.html, 19 01:22.530 --> 01:27.510 we want to render it as a template instead of just returning this text. 20 01:27.990 --> 01:32.340 So to do that, we're gonna need this render template function at the top. 21 01:32.850 --> 01:34.800 So if we're going to say render template, 22 01:35.070 --> 01:39.180 and then the template we want to render is called index.html. 23 01:39.570 --> 01:44.040 But one thing you have to remember is that this file has to be inside a folder 24 01:44.070 --> 01:49.070 called templates because Flask has specific requirements for things like 25 01:49.680 --> 01:51.180 static files and templates. 26 01:53.340 --> 01:58.020 So now we should be ready to rerun our app so that it will take into account the 27 01:58.020 --> 02:03.020 new files and then go to our website and you should see this hello world is 28 02:03.180 --> 02:07.230 being rendered from our index.html. Now, 29 02:07.260 --> 02:11.040 one of the things you might be wondering is why is this a template? 30 02:11.100 --> 02:12.870 Why are we rendering a template 31 02:13.200 --> 02:17.370 when in fact what we're doing is just sending over an HTML file? 32 02:17.910 --> 02:21.930 Well, the HTML files can actually act as a template 33 02:22.320 --> 02:25.800 as long as we know how to work with a templating language. 34 02:26.820 --> 02:30.330 The templating language that we're going to use is called Jinja 35 02:30.780 --> 02:33.210 and this is specific for Python. 36 02:33.750 --> 02:38.750 It allows us to use some syntax like these curly braces, percentage signs, 37 02:40.110 --> 02:45.000 or double curly braces in order to specify inside the HTML file 38 02:45.330 --> 02:50.010 which parts should actually be evaluated as Python code. 39 02:50.640 --> 02:51.690 Let me show you something. 40 02:52.380 --> 02:56.190 We've already seen that just by putting this text in between the h1 41 02:56.520 --> 03:00.310 we get this rendered as text in the h1. 42 03:01.090 --> 03:05.410 And if I go ahead and I wrote something like 5 * 6, 43 03:05.710 --> 03:08.980 what would you expect our website to look like? Well, 44 03:08.980 --> 03:12.610 if I go ahead and hit save, and because we're in debug mode, 45 03:12.670 --> 03:16.960 then our server should allow us to refresh the page and you see, 46 03:16.960 --> 03:21.490 it's just the plain text of what I wrote right here. Now, however, 47 03:21.580 --> 03:26.580 if I go ahead and add two curly braces around this expression, 48 03:27.700 --> 03:31.690 then this now suddenly becomes evaluated as Python code. 49 03:32.140 --> 03:36.790 So let's hit save again and let's hit refresh and you can see now 50 03:36.790 --> 03:40.030 instead of 5 * 6, I get 30. 51 03:40.510 --> 03:43.600 So this is actually being seen as Python code 52 03:43.900 --> 03:47.680 and the calculated outcome is being put into this h1. 53 03:48.550 --> 03:51.310 This is why this is known as a templating language, 54 03:51.640 --> 03:53.800 because it means that we can have an HTML 55 03:53.800 --> 03:58.720 which acts as the template where the title doesn't change, the head doesn't 56 03:58.720 --> 03:59.080 change, 57 03:59.080 --> 04:04.080 the styling doesn't change, and only the parts which we specify inside these curly 58 04:04.510 --> 04:09.510 braces actually get evaluated as Python code and inserted into the template. 59 04:12.250 --> 04:15.520 I'm going to add back the hello world inside an h1 60 04:15.940 --> 04:20.940 and also our Python expression inside this Jinja markup so that you can see 61 04:22.420 --> 04:23.410 both versions. 62 04:24.040 --> 04:29.040 The next thing I want to do is what if I wanted to generate a random number? 63 04:29.890 --> 04:32.950 Let's say I was to create an h3 and inside here 64 04:32.950 --> 04:37.630 I wanted to generate a random number. How would I do that? 65 04:38.950 --> 04:43.120 Well, when we're working with something that requires an import, for example, 66 04:43.120 --> 04:46.420 to get a random number, we're going to need to import the random module, 67 04:46.690 --> 04:51.220 then it's best to write our code inside our Python server. 68 04:52.120 --> 04:53.500 Let me show you how this works. 69 04:53.590 --> 04:58.240 Let's go ahead and import random so that we can generate a random number. 70 04:58.660 --> 05:03.520 And I'm going to do that inside this home function. Now, 71 05:03.550 --> 05:07.030 in this case, I'm just going to generate a random number between 1 and 10. 72 05:07.570 --> 05:11.380 But the most important thing is I want to be able to send this random number 73 05:11.650 --> 05:16.650 over to my index.html and incorporate it into this template when I render 74 05:17.680 --> 05:22.270 it. So what I can do after the first parameter 75 05:22.330 --> 05:25.390 which is the name of the template file, 76 05:25.930 --> 05:29.470 I can add as many keyword arguments as I need. 77 05:30.550 --> 05:32.620 If we take a look at this render template, 78 05:32.860 --> 05:35.380 you can see that after the name of the template, 79 05:35.470 --> 05:38.890 the next parameter has the double star context. 80 05:39.160 --> 05:44.160 This is basically the same as when you see the double star keyword arguments or 81 05:44.680 --> 05:45.513 kwargs. 82 05:45.940 --> 05:50.080 Basically it says that you can add as many keyword arguments as you want 83 05:50.440 --> 05:54.970 and each of these keyword arguments need to have a name for the variable and a 84 05:54.970 --> 05:56.110 value for the variable. 85 05:56.560 --> 06:01.560 And the reason why they need have a name and value is because we can refer to 86 06:02.300 --> 06:07.300 that variable by its name inside the templated HTML file. 87 06:08.630 --> 06:12.650 So for example, if I go ahead and send over a variable 88 06:12.650 --> 06:17.650 which I'll call num and then set it equal to this random number we've generated 89 06:19.490 --> 06:23.720 here. Well, now, once this template gets rendered, 90 06:23.990 --> 06:28.040 it's going to pass over this variable with this name and with this value. 91 06:28.550 --> 06:32.750 So now in our index.html, I can tap into that variable name 92 06:32.780 --> 06:33.650 which is num 93 06:33.980 --> 06:38.980 and I can insert it using these double curly braces into the position that I 94 06:39.260 --> 06:42.530 want it to be. So that's going to go inside that h3. 95 06:43.010 --> 06:47.030 And now if I hit save and go ahead and refresh my website, 96 06:47.270 --> 06:51.290 you can see I've got this random number and then a number show up. 97 06:51.680 --> 06:53.330 And every time I hit refresh, 98 06:53.570 --> 06:58.570 you can see that number changes to a different random number between 1 and 10. 99 06:59.600 --> 07:04.430 So we've seen how we can render an HTML file just by using render 100 07:04.430 --> 07:07.640 template, but we've also seen that inside the template, 101 07:07.910 --> 07:12.860 we can use these double curly braces in order to create single lines of Python 102 07:12.860 --> 07:13.693 expressions 103 07:13.880 --> 07:18.620 which can be evaluated and then inserted into the position that we desire. 104 07:19.160 --> 07:23.270 Now, we've also seen that we can pass over any variable 105 07:23.270 --> 07:27.920 we desire as keyword arguments after the name of the template. 106 07:28.610 --> 07:32.930 So now I've got a challenge for you. On a lot of websites, for example 107 07:32.930 --> 07:36.500 if you go to the Jinja website which you'll find in the course resources 108 07:36.650 --> 07:41.270 and you scroll to the very bottom, there's usually a line of copyright text. 109 07:41.570 --> 07:44.270 So it will say copyright and the current year 110 07:44.660 --> 07:47.030 and then the name of the creator or the company. 111 07:47.840 --> 07:52.840 Now that year is supposed to be the current year to say that this website's 112 07:54.440 --> 07:57.470 copyright is valid in this current year. 113 07:58.010 --> 08:01.100 But very often, even Jinja included, 114 08:01.430 --> 08:06.170 they don't actually update their footer because it's probably just some hard- 115 08:06.170 --> 08:10.670 coded text, as you can see right here. Now, 116 08:10.700 --> 08:15.260 this is something that annoys a lot of web developers and web designers. 117 08:15.920 --> 08:20.870 And they are outraged by the idea that people would have just some plain text 118 08:21.200 --> 08:23.960 as their copyright. We're programmers, right? 119 08:23.990 --> 08:28.990 We should be able to update our footer dynamically by using code. 120 08:29.780 --> 08:34.780 And this is a website which has a pretty much a sort of campaign against 121 08:35.510 --> 08:40.340 websites with outdated footers. And if you take a look at their footer, 122 08:40.430 --> 08:43.460 you can see that this is not just a piece of plain text. 123 08:43.790 --> 08:48.790 This is actually a script using JavaScript to work out the value of the current 124 08:50.030 --> 08:55.010 year. And so it's always going to be up to date no matter what year it is. 125 08:55.560 --> 08:59.250 So we also want to have a dynamic footer year, 126 08:59.790 --> 09:03.960 but we're not going to be doing it with JavaScript and definitely not with PHP. 127 09:04.350 --> 09:06.150 We're going to be doing it with Python. 128 09:07.290 --> 09:11.580 So this is the challenge for you. Using what you've learned in this lesson, 129 09:11.880 --> 09:16.880 see if you can create a footer element so we can put it inside a footer tag 130 09:17.340 --> 09:19.920 like this. And inside this footer tag, 131 09:20.040 --> 09:24.570 I want you to create a paragraph element that can say any piece of text 132 09:24.990 --> 09:29.250 as long as it contains the copyright year, which should be the current year 133 09:29.310 --> 09:32.310 worked out programmatically using Python. 134 09:32.970 --> 09:36.390 Pause the video and have a think about how you might solve that challenge. 135 09:41.520 --> 09:41.910 All right. 136 09:41.910 --> 09:45.960 So the first thing we're going to do is create our paragraph and we're going to 137 09:45.960 --> 09:50.370 say something like copyright and then the year 138 09:50.700 --> 09:52.680 and then we're going to say, um, 139 09:52.740 --> 09:57.740 something like built by... This is a pretty common footer. 140 09:59.190 --> 10:02.370 Now what we want to do is we want to replace these YYYYs 141 10:02.370 --> 10:06.480 with the actual year. So, as you can imagine, 142 10:06.510 --> 10:11.510 I'm going to be using these double curly braces to insert the year into here. 143 10:12.180 --> 10:16.230 But first I have to generate that. So going back to our server.py, 144 10:16.590 --> 10:19.050 I'm going to import the datetime module 145 10:19.050 --> 10:24.050 which you've used many times before to generate the current date and time. 146 10:24.600 --> 10:27.300 And we're going to use it specifically this time though, 147 10:27.330 --> 10:28.890 to generate the current year. 148 10:30.840 --> 10:34.920 And it's going to be done using the datetime module, the datetime class, 149 10:35.250 --> 10:39.330 and then we're going to call the now method in order to get the current date 150 10:39.330 --> 10:42.120 time and then we're going to tap into the year property. 151 10:42.900 --> 10:47.730 So now in addition to passing over that random number as num, 152 10:48.060 --> 10:53.060 I'm also going to pass over a new variable with the name of year and the value 153 10:53.520 --> 10:56.310 of the current year that we just worked out from here. 154 10:56.940 --> 10:59.460 So now when this template is rendered, 155 10:59.490 --> 11:02.400 it's also going to receive a variable called year 156 11:02.730 --> 11:06.720 which we can insert right here into the copyright like that. 157 11:07.410 --> 11:11.310 So now if I go ahead and hit save, go back to our website, 158 11:11.610 --> 11:16.470 hit refresh, you can see our footer show up copyright 2020, 159 11:16.530 --> 11:20.820 which is the current year I'm living in, and it has the rest of the text. 160 11:21.240 --> 11:23.580 So now no matter which year it is 161 11:23.640 --> 11:28.640 we will never need to update our footer ever again because it's being automatically 162 11:28.890 --> 11:30.480 updated using code.