1 00:00:00,270 --> 00:00:04,710 Now to begin, all we need is a simple Flask application. 2 00:00:05,100 --> 00:00:08,340 You can either write this out from scratch for practice, 3 00:00:08,610 --> 00:00:13,610 or you can head over to the course resources and you can download this file as a 4 00:00:13,800 --> 00:00:17,640 zip file. Once you've unzipped it and opened it in PyCharm, 5 00:00:17,850 --> 00:00:20,520 you should see a server.py file 6 00:00:20,790 --> 00:00:25,790 which contains all of the basic code that is required to render hello world onto 7 00:00:26,610 --> 00:00:27,443 the screen. 8 00:00:27,930 --> 00:00:32,930 So if we go ahead and just run this file and go to the local URL of our website, 9 00:00:34,410 --> 00:00:39,090 you should just be able to see hello world. Now, 10 00:00:39,120 --> 00:00:42,720 the next thing I want you to do is to create an HTML file 11 00:00:42,900 --> 00:00:46,530 which you'll call index, and inside this HTML file, 12 00:00:46,740 --> 00:00:51,740 we're going to give it a title of just my website and the more important part is 13 00:00:52,560 --> 00:00:55,830 going to occur in the body. For practice, 14 00:00:55,860 --> 00:00:59,490 go ahead and see if you can create an h1 that says hello world 15 00:00:59,820 --> 00:01:04,819 instead of returning just a hello world as text, and render this index HTML onto 16 00:01:06,540 --> 00:01:11,160 the screen instead. Pause the video and see if you can complete this challenge. 17 00:01:14,040 --> 00:01:14,370 All right. 18 00:01:14,370 --> 00:01:18,630 So the first thing we have to do was to create an h1 that said hello world. 19 00:01:19,440 --> 00:01:22,290 And once we've created our index.html, 20 00:01:22,530 --> 00:01:27,510 we want to render it as a template instead of just returning this text. 21 00:01:27,990 --> 00:01:32,340 So to do that, we're gonna need this render template function at the top. 22 00:01:32,850 --> 00:01:34,800 So if we're going to say render template, 23 00:01:35,070 --> 00:01:39,180 and then the template we want to render is called index.html. 24 00:01:39,570 --> 00:01:44,040 But one thing you have to remember is that this file has to be inside a folder 25 00:01:44,070 --> 00:01:49,070 called templates because Flask has specific requirements for things like 26 00:01:49,680 --> 00:01:51,180 static files and templates. 27 00:01:53,340 --> 00:01:58,020 So now we should be ready to rerun our app so that it will take into account the 28 00:01:58,020 --> 00:02:03,020 new files and then go to our website and you should see this hello world is 29 00:02:03,180 --> 00:02:07,230 being rendered from our index.html. Now, 30 00:02:07,260 --> 00:02:11,039 one of the things you might be wondering is why is this a template? 31 00:02:11,100 --> 00:02:12,870 Why are we rendering a template 32 00:02:13,200 --> 00:02:17,370 when in fact what we're doing is just sending over an HTML file? 33 00:02:17,910 --> 00:02:21,930 Well, the HTML files can actually act as a template 34 00:02:22,320 --> 00:02:25,800 as long as we know how to work with a templating language. 35 00:02:26,820 --> 00:02:30,330 The templating language that we're going to use is called Jinja 36 00:02:30,780 --> 00:02:33,210 and this is specific for Python. 37 00:02:33,750 --> 00:02:38,750 It allows us to use some syntax like these curly braces, percentage signs, 38 00:02:40,110 --> 00:02:45,000 or double curly braces in order to specify inside the HTML file 39 00:02:45,330 --> 00:02:50,010 which parts should actually be evaluated as Python code. 40 00:02:50,640 --> 00:02:51,690 Let me show you something. 41 00:02:52,380 --> 00:02:56,190 We've already seen that just by putting this text in between the h1 42 00:02:56,520 --> 00:03:00,310 we get this rendered as text in the h1. 43 00:03:01,090 --> 00:03:05,410 And if I go ahead and I wrote something like 5 * 6, 44 00:03:05,710 --> 00:03:08,980 what would you expect our website to look like? Well, 45 00:03:08,980 --> 00:03:12,610 if I go ahead and hit save, and because we're in debug mode, 46 00:03:12,670 --> 00:03:16,960 then our server should allow us to refresh the page and you see, 47 00:03:16,960 --> 00:03:21,490 it's just the plain text of what I wrote right here. Now, however, 48 00:03:21,580 --> 00:03:26,580 if I go ahead and add two curly braces around this expression, 49 00:03:27,700 --> 00:03:31,690 then this now suddenly becomes evaluated as Python code. 50 00:03:32,140 --> 00:03:36,790 So let's hit save again and let's hit refresh and you can see now 51 00:03:36,790 --> 00:03:40,030 instead of 5 * 6, I get 30. 52 00:03:40,510 --> 00:03:43,600 So this is actually being seen as Python code 53 00:03:43,900 --> 00:03:47,680 and the calculated outcome is being put into this h1. 54 00:03:48,550 --> 00:03:51,310 This is why this is known as a templating language, 55 00:03:51,640 --> 00:03:53,800 because it means that we can have an HTML 56 00:03:53,800 --> 00:03:58,720 which acts as the template where the title doesn't change, the head doesn't 57 00:03:58,720 --> 00:03:59,080 change, 58 00:03:59,080 --> 00:04:04,080 the styling doesn't change, and only the parts which we specify inside these curly 59 00:04:04,510 --> 00:04:09,510 braces actually get evaluated as Python code and inserted into the template. 60 00:04:12,250 --> 00:04:15,520 I'm going to add back the hello world inside an h1 61 00:04:15,940 --> 00:04:20,940 and also our Python expression inside this Jinja markup so that you can see 62 00:04:22,420 --> 00:04:23,410 both versions. 63 00:04:24,040 --> 00:04:29,040 The next thing I want to do is what if I wanted to generate a random number? 64 00:04:29,890 --> 00:04:32,950 Let's say I was to create an h3 and inside here 65 00:04:32,950 --> 00:04:37,630 I wanted to generate a random number. How would I do that? 66 00:04:38,950 --> 00:04:43,120 Well, when we're working with something that requires an import, for example, 67 00:04:43,120 --> 00:04:46,420 to get a random number, we're going to need to import the random module, 68 00:04:46,690 --> 00:04:51,220 then it's best to write our code inside our Python server. 69 00:04:52,120 --> 00:04:53,500 Let me show you how this works. 70 00:04:53,590 --> 00:04:58,240 Let's go ahead and import random so that we can generate a random number. 71 00:04:58,660 --> 00:05:03,520 And I'm going to do that inside this home function. Now, 72 00:05:03,550 --> 00:05:07,030 in this case, I'm just going to generate a random number between 1 and 10. 73 00:05:07,570 --> 00:05:11,380 But the most important thing is I want to be able to send this random number 74 00:05:11,650 --> 00:05:16,650 over to my index.html and incorporate it into this template when I render 75 00:05:17,680 --> 00:05:22,270 it. So what I can do after the first parameter 76 00:05:22,330 --> 00:05:25,390 which is the name of the template file, 77 00:05:25,930 --> 00:05:29,470 I can add as many keyword arguments as I need. 78 00:05:30,550 --> 00:05:32,620 If we take a look at this render template, 79 00:05:32,860 --> 00:05:35,380 you can see that after the name of the template, 80 00:05:35,470 --> 00:05:38,890 the next parameter has the double star context. 81 00:05:39,160 --> 00:05:44,160 This is basically the same as when you see the double star keyword arguments or 82 00:05:44,680 --> 00:05:45,513 kwargs. 83 00:05:45,940 --> 00:05:50,080 Basically it says that you can add as many keyword arguments as you want 84 00:05:50,440 --> 00:05:54,970 and each of these keyword arguments need to have a name for the variable and a 85 00:05:54,970 --> 00:05:56,110 value for the variable. 86 00:05:56,560 --> 00:06:01,560 And the reason why they need have a name and value is because we can refer to 87 00:06:02,300 --> 00:06:07,300 that variable by its name inside the templated HTML file. 88 00:06:08,630 --> 00:06:12,650 So for example, if I go ahead and send over a variable 89 00:06:12,650 --> 00:06:17,650 which I'll call num and then set it equal to this random number we've generated 90 00:06:19,490 --> 00:06:23,720 here. Well, now, once this template gets rendered, 91 00:06:23,990 --> 00:06:28,040 it's going to pass over this variable with this name and with this value. 92 00:06:28,550 --> 00:06:32,750 So now in our index.html, I can tap into that variable name 93 00:06:32,780 --> 00:06:33,650 which is num 94 00:06:33,980 --> 00:06:38,980 and I can insert it using these double curly braces into the position that I 95 00:06:39,260 --> 00:06:42,530 want it to be. So that's going to go inside that h3. 96 00:06:43,010 --> 00:06:47,030 And now if I hit save and go ahead and refresh my website, 97 00:06:47,270 --> 00:06:51,290 you can see I've got this random number and then a number show up. 98 00:06:51,680 --> 00:06:53,330 And every time I hit refresh, 99 00:06:53,570 --> 00:06:58,570 you can see that number changes to a different random number between 1 and 10. 100 00:06:59,600 --> 00:07:04,430 So we've seen how we can render an HTML file just by using render 101 00:07:04,430 --> 00:07:07,640 template, but we've also seen that inside the template, 102 00:07:07,910 --> 00:07:12,860 we can use these double curly braces in order to create single lines of Python 103 00:07:12,860 --> 00:07:13,693 expressions 104 00:07:13,880 --> 00:07:18,620 which can be evaluated and then inserted into the position that we desire. 105 00:07:19,160 --> 00:07:23,270 Now, we've also seen that we can pass over any variable 106 00:07:23,270 --> 00:07:27,920 we desire as keyword arguments after the name of the template. 107 00:07:28,610 --> 00:07:32,930 So now I've got a challenge for you. On a lot of websites, for example 108 00:07:32,930 --> 00:07:36,500 if you go to the Jinja website which you'll find in the course resources 109 00:07:36,650 --> 00:07:41,270 and you scroll to the very bottom, there's usually a line of copyright text. 110 00:07:41,570 --> 00:07:44,270 So it will say copyright and the current year 111 00:07:44,660 --> 00:07:47,030 and then the name of the creator or the company. 112 00:07:47,840 --> 00:07:52,840 Now that year is supposed to be the current year to say that this website's 113 00:07:54,440 --> 00:07:57,470 copyright is valid in this current year. 114 00:07:58,010 --> 00:08:01,100 But very often, even Jinja included, 115 00:08:01,430 --> 00:08:06,170 they don't actually update their footer because it's probably just some hard- 116 00:08:06,170 --> 00:08:10,670 coded text, as you can see right here. Now, 117 00:08:10,700 --> 00:08:15,260 this is something that annoys a lot of web developers and web designers. 118 00:08:15,920 --> 00:08:20,870 And they are outraged by the idea that people would have just some plain text 119 00:08:21,200 --> 00:08:23,960 as their copyright. We're programmers, right? 120 00:08:23,990 --> 00:08:28,990 We should be able to update our footer dynamically by using code. 121 00:08:29,780 --> 00:08:34,780 And this is a website which has a pretty much a sort of campaign against 122 00:08:35,510 --> 00:08:40,340 websites with outdated footers. And if you take a look at their footer, 123 00:08:40,429 --> 00:08:43,460 you can see that this is not just a piece of plain text. 124 00:08:43,789 --> 00:08:48,790 This is actually a script using JavaScript to work out the value of the current 125 00:08:50,030 --> 00:08:55,010 year. And so it's always going to be up to date no matter what year it is. 126 00:08:55,560 --> 00:08:59,250 So we also want to have a dynamic footer year, 127 00:08:59,790 --> 00:09:03,960 but we're not going to be doing it with JavaScript and definitely not with PHP. 128 00:09:04,350 --> 00:09:06,150 We're going to be doing it with Python. 129 00:09:07,290 --> 00:09:11,580 So this is the challenge for you. Using what you've learned in this lesson, 130 00:09:11,880 --> 00:09:16,880 see if you can create a footer element so we can put it inside a footer tag 131 00:09:17,340 --> 00:09:19,920 like this. And inside this footer tag, 132 00:09:20,040 --> 00:09:24,570 I want you to create a paragraph element that can say any piece of text 133 00:09:24,990 --> 00:09:29,250 as long as it contains the copyright year, which should be the current year 134 00:09:29,310 --> 00:09:32,310 worked out programmatically using Python. 135 00:09:32,970 --> 00:09:36,390 Pause the video and have a think about how you might solve that challenge. 136 00:09:41,520 --> 00:09:41,910 All right. 137 00:09:41,910 --> 00:09:45,960 So the first thing we're going to do is create our paragraph and we're going to 138 00:09:45,960 --> 00:09:50,370 say something like copyright and then the year 139 00:09:50,700 --> 00:09:52,680 and then we're going to say, um, 140 00:09:52,740 --> 00:09:57,740 something like built by... This is a pretty common footer. 141 00:09:59,190 --> 00:10:02,370 Now what we want to do is we want to replace these YYYYs 142 00:10:02,370 --> 00:10:06,480 with the actual year. So, as you can imagine, 143 00:10:06,510 --> 00:10:11,510 I'm going to be using these double curly braces to insert the year into here. 144 00:10:12,180 --> 00:10:16,230 But first I have to generate that. So going back to our server.py, 145 00:10:16,590 --> 00:10:19,050 I'm going to import the datetime module 146 00:10:19,050 --> 00:10:24,050 which you've used many times before to generate the current date and time. 147 00:10:24,600 --> 00:10:27,300 And we're going to use it specifically this time though, 148 00:10:27,330 --> 00:10:28,890 to generate the current year. 149 00:10:30,840 --> 00:10:34,920 And it's going to be done using the datetime module, the datetime class, 150 00:10:35,250 --> 00:10:39,330 and then we're going to call the now method in order to get the current date 151 00:10:39,330 --> 00:10:42,120 time and then we're going to tap into the year property. 152 00:10:42,900 --> 00:10:47,730 So now in addition to passing over that random number as num, 153 00:10:48,060 --> 00:10:53,060 I'm also going to pass over a new variable with the name of year and the value 154 00:10:53,520 --> 00:10:56,310 of the current year that we just worked out from here. 155 00:10:56,940 --> 00:10:59,460 So now when this template is rendered, 156 00:10:59,490 --> 00:11:02,400 it's also going to receive a variable called year 157 00:11:02,730 --> 00:11:06,720 which we can insert right here into the copyright like that. 158 00:11:07,410 --> 00:11:11,310 So now if I go ahead and hit save, go back to our website, 159 00:11:11,610 --> 00:11:16,470 hit refresh, you can see our footer show up copyright 2020, 160 00:11:16,530 --> 00:11:20,820 which is the current year I'm living in, and it has the rest of the text. 161 00:11:21,240 --> 00:11:23,580 So now no matter which year it is 162 00:11:23,640 --> 00:11:28,640 we will never need to update our footer ever again because it's being automatically 163 00:11:28,890 --> 00:11:30,480 updated using code.