NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,334 Hi guys, and welcome back. 2 00:00:01,364 --> 00:00:05,624 In this video, let me tell you how to use the render template function from 3 00:00:05,624 --> 00:00:09,254 flask to send longer HTML strings. 4 00:00:09,554 --> 00:00:12,284 Render template also has a couple other uses, which we will 5 00:00:12,284 --> 00:00:13,934 discover throughout this section. 6 00:00:14,414 --> 00:00:15,164 Let's get started. 7 00:00:16,139 --> 00:00:20,699 Writing HTML strings directly into our application code is okay as long 8 00:00:20,699 --> 00:00:22,559 as the size of the string is minimal. 9 00:00:22,769 --> 00:00:26,249 But if we want to start sending multiple pages or just large strings 10 00:00:26,249 --> 00:00:30,149 to the browser, putting them in the app code is not a good idea. 11 00:00:30,599 --> 00:00:33,989 So we're going to learn how to separate larger HTML strings into 12 00:00:33,989 --> 00:00:39,089 files, HTML files, and how to use the render template method to send 13 00:00:39,269 --> 00:00:41,279 that static content to the user. 14 00:00:41,925 --> 00:00:43,095 I just said static content. 15 00:00:43,095 --> 00:00:46,395 Static content is any content that can be delivered without having to 16 00:00:46,395 --> 00:00:49,095 be generated, modified or processed. 17 00:00:49,525 --> 00:00:53,545 The server delivers the file to the user and the user receives it and uses it. 18 00:00:53,545 --> 00:00:57,655 It doesn't have to go through any processing by the user first. 19 00:00:58,155 --> 00:01:02,085 So the server delivers the same file to each user that requests it and 20 00:01:02,085 --> 00:01:04,545 there is no difference per user. 21 00:01:04,940 --> 00:01:08,971 So static content is one of the simplest and most efficient ways to 22 00:01:08,971 --> 00:01:11,821 transmit things over the internet because they're very straightforward. 23 00:01:12,564 --> 00:01:16,284 So the HTML file that we're going to be sending to the user in this example is 24 00:01:16,284 --> 00:01:21,414 static content, because we're not going to process the HTML file or change it in 25 00:01:21,414 --> 00:01:23,964 any way before sending it to the user. 26 00:01:24,464 --> 00:01:29,594 When working with Flask, our HTML files usually go into a folder called templates. 27 00:01:29,954 --> 00:01:33,584 That's the default name for the folder and that's what Flask is going to expect. 28 00:01:33,734 --> 00:01:37,894 So create a templates folder and make sure that templates and 29 00:01:37,894 --> 00:01:41,038 app.py are both in the same folder. 30 00:01:41,098 --> 00:01:46,048 So here, my Intro to Flask folder contains app.py and Intro to 31 00:01:46,048 --> 00:01:48,118 Flask also contains templates. 32 00:01:48,328 --> 00:01:48,598 Okay. 33 00:01:48,598 --> 00:01:50,278 There's a few other things in there, but don't worry about those. 34 00:01:50,573 --> 00:01:53,183 So just make sure that these two are both in the same folder. 35 00:01:53,723 --> 00:01:58,653 Then inside templates, we're going to create something like first_page.html. 36 00:01:58,673 --> 00:02:00,773 This is going to be the first page that we're going to send. 37 00:02:01,043 --> 00:02:07,823 And we're going to basically copy what we had earlier on in our HTML string. 38 00:02:08,273 --> 00:02:11,723 We've got here an HTML comment that doesn't get evaluated by the browser. 39 00:02:11,753 --> 00:02:13,113 And then we've got the doc type. 40 00:02:13,113 --> 00:02:16,073 And I'm going to add the head in here just for good measure. 41 00:02:16,133 --> 00:02:18,123 Although as you see it's not necessary. 42 00:02:18,399 --> 00:02:21,984 And then we're basically going to do the same, but we're going to create a new 43 00:02:21,984 --> 00:02:28,914 file called second_page.html and here, we're going to put basically second page. 44 00:02:29,334 --> 00:02:33,954 And this is the second page, just so we know how to send multiple pages. 45 00:02:34,284 --> 00:02:35,574 This is just a demonstration. 46 00:02:35,924 --> 00:02:38,714 And the app was still running, but I've stopped that just now, because 47 00:02:38,714 --> 00:02:42,834 when you create new files, it's usually a good idea to restart it your app. 48 00:02:43,333 --> 00:02:45,133 So you can see that we've got two end points. 49 00:02:45,133 --> 00:02:48,433 This one returns, hello world, and this one returns our HTML. 50 00:02:49,033 --> 00:02:52,423 We're now going to use this end point to return one of these files. 51 00:02:52,573 --> 00:02:54,193 What we do is from Flask. 52 00:02:54,193 --> 00:02:58,103 We import Flask and also render_template. 53 00:02:58,903 --> 00:03:03,913 Render template is a function that takes in a name of a file. 54 00:03:04,323 --> 00:03:06,243 And will load that up and send it to the user. 55 00:03:06,273 --> 00:03:11,483 So instead of hello world, we're going to return render template first_page.html. 56 00:03:11,993 --> 00:03:12,233 Okay. 57 00:03:12,233 --> 00:03:15,593 So now that we've got this we can start the application with Flask run. 58 00:03:16,273 --> 00:03:19,623 And we can now open this end point with our browser. 59 00:03:20,113 --> 00:03:23,623 You can see that what we get is the content of that first page. 60 00:03:23,653 --> 00:03:25,723 We've got the title and the text. 61 00:03:26,223 --> 00:03:29,133 What Flask has done in the background is it's opened this page. 62 00:03:29,193 --> 00:03:33,333 It's got the contents and it sends them over to the browser. 63 00:03:33,833 --> 00:03:36,673 You can see that it's basically identical to sending the string 64 00:03:36,733 --> 00:03:39,463 but it's just a little bit easier and a little bit more organized. 65 00:03:39,883 --> 00:03:42,343 We can do the same thing with the second page. 66 00:03:42,843 --> 00:03:43,383 Just like that. 67 00:03:43,833 --> 00:03:47,313 And now we can go over and make this into second,. 68 00:03:47,313 --> 00:03:48,153 For example. 69 00:03:48,563 --> 00:03:51,623 And you can see another thing that we're noticing here is that the function 70 00:03:51,623 --> 00:03:54,503 names are largely irrelevant in Flask. 71 00:03:54,533 --> 00:03:58,463 We will get to how they can be useful later on, but what the user is going 72 00:03:58,463 --> 00:04:02,483 to interact with are the end points and the function names are only really 73 00:04:02,483 --> 00:04:06,233 useful for our application itself, but the user doesn't care about them. 74 00:04:06,743 --> 00:04:11,153 So now that we've got this, we can go back here and we can go to slash second. 75 00:04:11,453 --> 00:04:13,253 And this is the second page. 76 00:04:13,723 --> 00:04:17,273 Something you'll do quite often in these pages is you can put a HTML 77 00:04:17,333 --> 00:04:21,023 link in one of these pages that sends you over to the second page. 78 00:04:21,113 --> 00:04:22,223 And you can totally do that. 79 00:04:22,403 --> 00:04:24,323 In fact, I would encourage you to try that out. 80 00:04:24,503 --> 00:04:27,683 See if you can link from the first page to the second page and from 81 00:04:27,683 --> 00:04:29,513 the second page to the first page. 82 00:04:29,916 --> 00:04:31,506 Alright, that's everything for this video. 83 00:04:31,506 --> 00:04:32,856 Thank you guys for joining me. 84 00:04:32,976 --> 00:04:34,476 I'll see you in the next one.