WEBVTT 00:00.800 --> 00:01.370 Okay. 00:01.490 --> 00:09.470 In this video, I would like to show you a template how we can actually take our views and display the 00:09.470 --> 00:13.490 real page instead of a simple information as we have here. 00:13.490 --> 00:14.900 That's a simple string. 00:14.900 --> 00:17.330 We can actually display the whole page. 00:17.570 --> 00:24.410 I have to say that this is not something that we will use in our tutorial because at the end we will 00:24.410 --> 00:29.510 use Django as our API to serve just the data, not the templates. 00:29.510 --> 00:35.510 But I think it's very crucial to know that Django is also a front end framework. 00:35.510 --> 00:38.270 So it's a full stack, so you can do that with Django. 00:38.270 --> 00:40.910 So I would like to show you the way to do it. 00:40.910 --> 00:47.990 And then if you need to have a static page or the page generated by the Django, you can also do it 00:47.990 --> 00:48.440 with this. 00:48.440 --> 00:53.030 And I think it will help you understand how the junk works in overall. 00:53.030 --> 00:57.080 So let's do a quick video about templates. 00:57.080 --> 01:04.050 So first thing, what we will need to do is we'll need to go to the settings here and then we have option 01:04.050 --> 01:08.550 templates inside templates, we have tears, which is directories. 01:08.550 --> 01:13.980 And then inside here we can specify where do we keep our templates. 01:13.980 --> 01:16.680 At the moment we have no templates so we can decide. 01:16.740 --> 01:21.450 I will name my folder as templates like that. 01:21.450 --> 01:28.380 So I will need to create that folder and I will create it in a main folder here. 01:28.590 --> 01:38.760 So right click new directory and I will name it templates the same as we have here so I can save my 01:38.760 --> 01:39.720 settings here. 01:40.020 --> 01:47.490 And then inside templates there is an empty folder here and I can right click new file and I can name 01:47.490 --> 01:49.230 that file whatever I like. 01:49.320 --> 01:50.310 So I will do. 01:52.030 --> 01:52.930 First 01:55.150 --> 01:58.690 temp HTML like that. 01:59.740 --> 02:05.680 I will copy this because I will need to I will use it later on in in the video. 02:05.680 --> 02:06.970 So I will click okay. 02:06.970 --> 02:09.910 And we have empty file of type HTML. 02:10.110 --> 02:12.190 HTML, which is web page. 02:12.190 --> 02:23.050 So what I can do here is I can type HTML here and then colon five and then I can click tab and you can 02:23.050 --> 02:26.410 see PyCharm will finish writing HTML for me. 02:26.410 --> 02:29.620 I don't need to do all that writing by myself. 02:30.010 --> 02:31.080 HTML do that. 02:31.090 --> 02:33.010 So that's our snippets built in. 02:33.010 --> 02:35.550 PyCharm So what do we have here? 02:35.560 --> 02:37.840 I'm not going to go through all the details here. 02:37.840 --> 02:44.380 That's a small topic, but inside body here I can put something that I would like to have display on 02:44.380 --> 02:45.100 the web page. 02:45.100 --> 02:55.400 So I will do H1 tag here and then I can say this is my first template like that. 02:55.400 --> 02:59.750 So we have our HTML file ready. 02:59.750 --> 03:04.820 So let's come back to our views and let's clean it up a little bit. 03:05.240 --> 03:10.130 What we can do is I can remove that another. 03:12.270 --> 03:18.450 And we can go to here and also save it. 03:18.450 --> 03:25.560 So at the moment we have our first as we had before, and that will use our first method. 03:27.070 --> 03:32.860 So what we can do to display instead of a simple. 03:34.780 --> 03:38.800 String like this to display the whole page. 03:39.070 --> 03:50.050 We need to do use meta render here instead of this Http response and we need to also import it. 03:50.230 --> 04:01.240 So from Django shortcuts import, render and render takes two arguments. 04:01.240 --> 04:03.220 First argument is a request. 04:03.460 --> 04:09.700 We can put it here and the second one instead of a string, it takes an argument of a file. 04:09.700 --> 04:11.380 So it is first. 04:13.660 --> 04:19.030 Temp HTML and this is the name of the file we have here. 04:19.180 --> 04:23.110 So now our definition first. 04:23.110 --> 04:29.680 Instead of returning a simple string, it renders the first temp HTML. 04:29.710 --> 04:35.050 So let's take a look how it works in our around the server now. 04:36.660 --> 04:38.190 Cannot import name another. 04:39.120 --> 04:43.340 The reason for this is probably we have reference here. 04:43.450 --> 04:47.350 Another and we already remove it from our view. 04:47.370 --> 04:50.320 So we'll just remove that part. 04:50.340 --> 04:51.780 I'll run the server. 04:52.080 --> 04:53.670 We have no errors. 04:53.850 --> 04:59.280 So let's come back here and then we have another demo first. 05:00.150 --> 05:01.780 And this is my first template. 05:01.800 --> 05:04.500 You can see this is actually bigger. 05:04.500 --> 05:07.860 If I click right, click in here inspect. 05:08.160 --> 05:18.990 You can see here that the H1 tag, the same tag that I had set up here, H1 so I can do, for example, 05:20.640 --> 05:21.480 H2. 05:23.340 --> 05:27.690 This is my page and I will save it. 05:27.720 --> 05:30.750 If I come back here and then refresh it. 05:30.750 --> 05:32.880 You see, this is my page. 05:33.690 --> 05:46.000 So basically what's happening here is we have created our template and this is a type of HTML inside 05:46.000 --> 05:52.480 our templates in the settings we set, where we keep our templates in the template section. 05:52.480 --> 05:56.230 So we just scroll down to that place and add it to the dirs. 05:56.230 --> 06:04.510 And then in views you use, render, render takes two arguments request and the name of the file and 06:04.510 --> 06:05.140 that's it. 06:05.140 --> 06:10.360 And this is the way you can point from my URL to our HTML. 06:10.390 --> 06:14.950 But at this point this HTML is very static. 06:14.950 --> 06:18.880 So basically we don't have any dynamic data from Django. 06:18.880 --> 06:26.260 And I will also show you how we can do that, how we can take the data from Django and pass it to to 06:26.260 --> 06:27.160 the template.