1 00:00:00,630 --> 00:00:03,630 In the previous video, we created a website. 2 00:00:03,719 --> 00:00:06,870 Actually, this is not a website, it's just a web page. 3 00:00:06,960 --> 00:00:11,670 Now we're going to create a website which has multiple pages. 4 00:00:11,700 --> 00:00:15,900 And to create a website you need a web framework. 5 00:00:16,110 --> 00:00:19,610 And we're going to use the flask web framework for that. 6 00:00:19,620 --> 00:00:22,710 So Flask is a Python library. 7 00:00:22,980 --> 00:00:24,900 That means you need to install it. 8 00:00:25,920 --> 00:00:31,650 So make sure you have created a Python project and then I have mine. 9 00:00:31,650 --> 00:00:33,780 That's pure file, which is currently empty. 10 00:00:33,780 --> 00:00:38,340 And I have this tutorial that's a HTML file which I'm going to use. 11 00:00:39,030 --> 00:00:42,360 You can find this attached in the lecture resources if you don't have it. 12 00:00:42,360 --> 00:00:49,890 And you'll also find this cat dot PNG file which is needed by this HTML document. 13 00:00:50,790 --> 00:00:54,180 So let's go to main and import flask. 14 00:00:54,270 --> 00:01:00,720 Actually, we only need the flask class from the flask library. 15 00:01:00,720 --> 00:01:02,790 So install package flask. 16 00:01:03,540 --> 00:01:08,520 The package is being installed so the web framework is being installed. 17 00:01:08,700 --> 00:01:16,110 So this web framework is what's going to manage multiple HTML pages. 18 00:01:16,260 --> 00:01:24,060 So you can think of a web framework as a manager of multiple pages, and it's responsible that these 19 00:01:24,060 --> 00:01:26,940 pages interact with each other correctly. 20 00:01:28,770 --> 00:01:33,240 So Flask was installed successfully on my computer. 21 00:01:33,240 --> 00:01:40,130 And the first thing we want to do now is we want to create a website object. 22 00:01:40,140 --> 00:01:43,240 So this flask here is a class. 23 00:01:43,260 --> 00:01:49,830 And this class creates websites, object instances, or you're going to say flask object instances, 24 00:01:49,830 --> 00:01:52,380 but think of it as a website object. 25 00:01:52,380 --> 00:01:58,980 So just like we have strings to represent text, we have numbers to represent numbers, lists to represent 26 00:01:58,980 --> 00:02:00,990 series of objects. 27 00:02:00,990 --> 00:02:04,440 We also have website objects to represent websites. 28 00:02:04,440 --> 00:02:08,310 So let's create a variable and say flask. 29 00:02:08,610 --> 00:02:13,410 So that's class and give a name to this. 30 00:02:13,410 --> 00:02:14,370 It can be anything. 31 00:02:14,370 --> 00:02:15,420 We'll change it later. 32 00:02:15,420 --> 00:02:18,810 But for now, let's say website, whatever it is. 33 00:02:19,530 --> 00:02:22,560 So with that we have a website object. 34 00:02:22,590 --> 00:02:28,080 Now we need to connect HTML pages with this website object. 35 00:02:28,110 --> 00:02:36,720 To do that we refer to the app variable, this variable using this special symbol for ADD symbol. 36 00:02:37,050 --> 00:02:40,170 I'll explain in just a bit why we use that symbol. 37 00:02:40,710 --> 00:02:47,460 And so you refer to that and then to the root methods of that app object. 38 00:02:47,880 --> 00:02:54,690 And inside here includes you give a path, let's say home. 39 00:02:56,380 --> 00:03:04,750 So you know that whenever you go to a website and you click on different links, those links take you 40 00:03:04,750 --> 00:03:10,020 to a particular path to that website, particular URL in that website. 41 00:03:10,030 --> 00:03:13,510 So each page has a particular URL. 42 00:03:13,540 --> 00:03:24,460 So this HTML that will connect now will have this URL and the HTML will be inside this function that 43 00:03:24,460 --> 00:03:26,050 we need to define in here. 44 00:03:26,080 --> 00:03:27,680 Let's call this function home. 45 00:03:27,700 --> 00:03:29,290 You can call it whatever you like. 46 00:03:30,130 --> 00:03:35,050 And this will return this HTML document. 47 00:03:35,410 --> 00:03:42,970 And so that HTML document will be rendered whenever the users visit your website URL slash home. 48 00:03:43,630 --> 00:03:45,730 So for that, we need to return. 49 00:03:45,730 --> 00:03:47,530 But you cannot return 50 00:03:49,750 --> 00:03:52,570 tutorial dot HTML directly like that. 51 00:03:52,600 --> 00:03:58,240 You need to return it through a function which you need to import first. 52 00:03:58,270 --> 00:04:01,540 The function is called the render template. 53 00:04:01,960 --> 00:04:08,620 And then you go here and then you say render template tutorial. 54 00:04:08,620 --> 00:04:10,120 That's HTML. 55 00:04:10,210 --> 00:04:16,459 But the total that HTML has to be inside a specific folder in the root directory. 56 00:04:16,480 --> 00:04:23,560 That folder should be named templates with lowercase letters and ending with se. 57 00:04:23,590 --> 00:04:27,010 So not template but templates. 58 00:04:27,700 --> 00:04:30,100 So you see, my folder is here. 59 00:04:30,100 --> 00:04:34,300 It's in the same directory with with main dot pie. 60 00:04:34,330 --> 00:04:40,330 So that's the root directory and inside template you want to drag tutorial dot html. 61 00:04:41,950 --> 00:04:43,900 So make sure that tutorial is there. 62 00:04:43,910 --> 00:04:48,330 So tutorial dot html and here you say tutorial dot html. 63 00:04:48,340 --> 00:04:54,520 So flask will look for HTML documents inside that template folder by default. 64 00:04:54,520 --> 00:05:00,610 So flask is configured to look for a template folder in your root directory. 65 00:05:00,850 --> 00:05:09,450 And lastly, we need to say here that to run and give an argument for the debug. 66 00:05:09,460 --> 00:05:15,750 So the debug arguments should be true and this will allow you to see errors on the web page, either 67 00:05:15,790 --> 00:05:16,170 errors. 68 00:05:16,170 --> 00:05:19,090 So you want to see them to understand what's going on. 69 00:05:19,510 --> 00:05:26,470 Make some space here and yeah, let's run this to run this app you can just right click and go to run 70 00:05:26,470 --> 00:05:29,590 main and that's the URL of the app. 71 00:05:29,590 --> 00:05:30,490 So click that. 72 00:05:30,610 --> 00:05:40,360 And we see this not found page because we haven't created such a URL yet. 73 00:05:40,360 --> 00:05:41,860 So that would be the home page. 74 00:05:41,860 --> 00:05:49,630 If you delete home from there and save the script, go here, refresh the page, then you should see 75 00:05:49,630 --> 00:05:51,250 this view. 76 00:05:51,280 --> 00:05:59,350 Otherwise, if you wanted to have home here, then you should type in home here. 77 00:05:59,650 --> 00:06:00,340 Right? 78 00:06:00,370 --> 00:06:02,740 And then you go to this page. 79 00:06:02,740 --> 00:06:11,500 So now it's rendering fine, because the URL so this URL is connected to that HTML document. 80 00:06:11,500 --> 00:06:18,670 So in other words, what's happening is that when the user visits that URL, this function is called, 81 00:06:18,820 --> 00:06:24,580 so that root is connected to this function and the decorator makes it possible. 82 00:06:24,580 --> 00:06:33,130 So this at symbol here means that this line is a decorator and it decorates this function. 83 00:06:33,130 --> 00:06:42,280 So basically it connects that method to this function so that when this is visited on the browser, 84 00:06:42,310 --> 00:06:45,520 this is called and tutorial that HTML is rendered. 85 00:06:45,880 --> 00:06:46,810 That's the idea. 86 00:06:47,290 --> 00:06:52,150 Now if you want more pages, you can duplicate this function. 87 00:06:53,980 --> 00:06:57,580 And here write something else such as a boat. 88 00:06:57,910 --> 00:07:00,850 And then here say something like about that. 89 00:07:01,160 --> 00:07:07,420 HTML creates an about that file about. 90 00:07:08,830 --> 00:07:11,350 So there we go about that HTML. 91 00:07:11,380 --> 00:07:13,510 Maybe write something here in the body tag. 92 00:07:13,510 --> 00:07:14,170 Hello. 93 00:07:14,380 --> 00:07:16,690 I am about page. 94 00:07:17,260 --> 00:07:23,770 Go to main that why make sure everything looks fine or you need to change the home function to something 95 00:07:23,770 --> 00:07:25,330 else else like a boat. 96 00:07:25,330 --> 00:07:35,890 Then save the script, go to the browser and change the URL to a boat and you'll get that page as you 97 00:07:35,890 --> 00:07:36,670 can see here. 98 00:07:36,700 --> 00:07:38,410 Hello, I'm the about page. 99 00:07:38,590 --> 00:07:47,290 Then next what you can do is you can go to tutorial dot email and you can go to the nav element and 100 00:07:47,290 --> 00:07:52,570 make sure that you have the URL of the abode in here. 101 00:07:52,570 --> 00:07:53,020 So. 102 00:07:55,130 --> 00:07:56,150 About here. 103 00:07:57,920 --> 00:07:58,940 About here. 104 00:07:59,210 --> 00:08:06,890 That means when you click that about menu item from here. 105 00:08:10,770 --> 00:08:19,650 That should take you to the about page, but you need to add one more slash here in the root. 106 00:08:20,220 --> 00:08:21,180 So let's refresh. 107 00:08:21,660 --> 00:08:22,440 There we go. 108 00:08:23,780 --> 00:08:25,850 So again, what we just did. 109 00:08:25,850 --> 00:08:27,260 So let me wrap it up. 110 00:08:27,620 --> 00:08:35,980 What we just did is that we have this app with two pages, two URLs, two pages. 111 00:08:35,990 --> 00:08:44,570 The first URL is the domain name, which in our case, since it is local, the domain name is 1 to 7 112 00:08:44,570 --> 00:08:48,050 .0.0.15 hundreds. 113 00:08:49,040 --> 00:08:56,870 So domain name slash home gives us that page and this page renders tutorial that email and this tutorial 114 00:08:56,870 --> 00:09:08,180 that HTML has this content and this menu bar in here and the uploads link points to the about page. 115 00:09:08,210 --> 00:09:10,220 It's a page of our website. 116 00:09:10,610 --> 00:09:17,960 So when the user clicks that link this is visited and when that is visited, this function is called 117 00:09:17,960 --> 00:09:22,400 and that function renders the about the XML documents. 118 00:09:22,820 --> 00:09:23,840 So that's the idea. 119 00:09:23,840 --> 00:09:27,200 That's how you create multiple page websites. 120 00:09:27,200 --> 00:09:32,630 And you can do that with flask as you just so now we have an issue here with the image. 121 00:09:32,630 --> 00:09:34,520 So the image is not being displayed. 122 00:09:34,940 --> 00:09:41,900 To display images, you need to create another folder in the root directory and call it static. 123 00:09:43,310 --> 00:09:46,040 And inside static you put the images. 124 00:09:46,040 --> 00:09:50,420 So I'll drag this cat dot PNG image to static. 125 00:09:51,050 --> 00:09:54,590 And you also need to do something else besides putting the image there. 126 00:09:54,590 --> 00:10:04,940 You need to go to to toggle that HTML, locate the image that I img tag which is in here and you need 127 00:10:04,940 --> 00:10:06,710 to change this. 128 00:10:06,980 --> 00:10:18,050 So this is dynamic now and you need to give this syntax so double underscores and you say you URL for. 129 00:10:19,520 --> 00:10:23,240 Static and single quotes. 130 00:10:24,440 --> 00:10:28,350 And then a comma and then a single quotes. 131 00:10:28,370 --> 00:10:30,590 Cut that P and G. 132 00:10:30,800 --> 00:10:34,310 So you need to declare the folder where cat is. 133 00:10:34,310 --> 00:10:36,770 And be careful here. 134 00:10:36,770 --> 00:10:44,330 All this, the parentheses, the curly parentheses should go inside double quotes. 135 00:10:44,480 --> 00:10:46,160 So please double check this. 136 00:10:46,250 --> 00:10:49,550 We have this brackets here which closes in here. 137 00:10:49,640 --> 00:10:58,580 And then as our C has this enclosed in quotes, and then we have four static enclosed and single quotes 138 00:10:58,580 --> 00:11:00,500 cannot plug in single quotes. 139 00:11:00,500 --> 00:11:02,570 And these should be double quotes. 140 00:11:03,170 --> 00:11:07,130 And these two need to be in parentheses. 141 00:11:07,460 --> 00:11:09,500 So basically, this is like a method. 142 00:11:09,500 --> 00:11:15,220 It's like a python method with two arguments static and CAD PNG. 143 00:11:15,260 --> 00:11:17,370 So static is a string candidate. 144 00:11:17,390 --> 00:11:18,620 PNG is a string. 145 00:11:19,070 --> 00:11:25,430 So this method is inside double curly brackets and the curly brackets are inside double quotes. 146 00:11:26,300 --> 00:11:28,910 So let's go back to the website. 147 00:11:29,450 --> 00:11:35,330 So we need to go to one of the valid URLs we have home or about. 148 00:11:36,470 --> 00:11:39,170 So that's slash home. 149 00:11:41,080 --> 00:11:45,640 So that's one of the errors you might get on the Web page. 150 00:11:46,300 --> 00:11:50,770 So this is as well for takes two positional arguments, but three were given. 151 00:11:50,920 --> 00:11:52,200 So let's check it. 152 00:11:53,170 --> 00:11:55,770 We need to go to dot HTML. 153 00:11:56,290 --> 00:12:00,730 And I know that the problem here is that you need to give this argument name. 154 00:12:01,150 --> 00:12:03,550 So with that, let's go and refresh. 155 00:12:03,910 --> 00:12:05,890 And finally, that's the image. 156 00:12:06,850 --> 00:12:10,930 The cat is very angry because we had lots of errors, obviously. 157 00:12:11,320 --> 00:12:12,220 But that's fine. 158 00:12:12,610 --> 00:12:16,600 Yeah, that's the final code for this app. 159 00:12:17,050 --> 00:12:20,750 So that's what a web framework does. 160 00:12:20,770 --> 00:12:31,300 You have a python file and the python file is managing multiple HTML pages and it's defining when these 161 00:12:31,480 --> 00:12:36,760 HTML pages should be displayed on the website through these root methods. 162 00:12:37,360 --> 00:12:37,650 Yeah. 163 00:12:37,660 --> 00:12:38,690 Thanks for following. 164 00:12:38,710 --> 00:12:43,210 We will continue with flask because we need to build an API with flask. 165 00:12:43,450 --> 00:12:50,380 So in the next videos we need to build the web page of our API where we show the documentation of our 166 00:12:50,440 --> 00:12:51,010 API. 167 00:12:51,040 --> 00:12:52,060 So see you there.