1 00:00:00,890 --> 00:00:02,040 Hey, welcome back. 2 00:00:02,060 --> 00:00:07,130 In this video, we will write some code in between these two lines. 3 00:00:07,130 --> 00:00:13,190 So in this line, we created an app instance using the flask class. 4 00:00:13,190 --> 00:00:19,520 So this represents the instance, the app, basically, and then the app runs here. 5 00:00:19,520 --> 00:00:26,540 So that executes the web app so that we can visit that web app through its URL. 6 00:00:26,540 --> 00:00:30,950 Now, in between here, we want to handle those HTTP requests. 7 00:00:30,950 --> 00:00:35,660 So let's start with the first request app dot route. 8 00:00:36,440 --> 00:00:37,850 Let's handle the home page. 9 00:00:37,850 --> 00:00:40,610 The home page is represented by this slash. 10 00:00:40,700 --> 00:00:48,260 So if you were to handle another page such as your URL, slash my page, then you would have to write 11 00:00:48,260 --> 00:00:50,540 here, slash my page. 12 00:00:50,540 --> 00:00:52,730 But now it's just a slash. 13 00:00:52,730 --> 00:01:01,320 So with that, that's a decorator with that symbol, we are writing a decorator and that decorator here 14 00:01:01,350 --> 00:01:03,960 will call this function. 15 00:01:03,960 --> 00:01:06,900 Let's call this function index, right? 16 00:01:07,410 --> 00:01:19,560 And so when the user visits that web page, we want to return the index dot HTML page index, dot HTML 17 00:01:19,590 --> 00:01:20,010 page. 18 00:01:20,010 --> 00:01:22,710 But we don't do this. 19 00:01:22,800 --> 00:01:24,690 We do something else. 20 00:01:24,690 --> 00:01:29,790 I mean, you can do this actually, but you will not get the expected results. 21 00:01:29,940 --> 00:01:31,440 Let's try this. 22 00:01:31,680 --> 00:01:33,360 So let's run the app. 23 00:01:35,070 --> 00:01:35,390 Right. 24 00:01:35,720 --> 00:01:37,820 Go here, reload. 25 00:01:37,850 --> 00:01:40,990 So make sure you are reloading the home page. 26 00:01:41,000 --> 00:01:42,020 That one. 27 00:01:43,770 --> 00:01:44,580 This is what you get. 28 00:01:44,580 --> 00:01:49,920 So that index.html is simply shown as a string. 29 00:01:49,920 --> 00:01:51,030 So this is just a string. 30 00:01:51,030 --> 00:01:53,460 It can be anything, right? 31 00:01:53,850 --> 00:01:58,320 So if you do that reload, you say you get anything. 32 00:01:58,320 --> 00:01:58,980 Right. 33 00:01:59,310 --> 00:02:06,780 Now what we want to do instead is we want to say render template. 34 00:02:07,230 --> 00:02:12,810 This is a function, but we need to import that function from flask. 35 00:02:12,810 --> 00:02:17,070 So from flask import flask comma render template. 36 00:02:17,250 --> 00:02:18,620 So there we go. 37 00:02:18,630 --> 00:02:29,130 And then if we reload the page now we'll get nothing because there's nothing inside index.html. 38 00:02:29,340 --> 00:02:32,340 So let's write some HTML code here. 39 00:02:32,790 --> 00:02:35,820 HTML starts with that doc type. 40 00:02:38,940 --> 00:02:44,160 HTML tag followed by an HTML tag. 41 00:02:44,430 --> 00:02:54,330 So opening the tags and closing the tags with this slash here and in between goes the body. 42 00:02:55,410 --> 00:02:57,150 So make some tabs here. 43 00:02:57,150 --> 00:03:01,680 Use tab to indent and let's have a heading here H1. 44 00:03:02,770 --> 00:03:05,800 Job application form. 45 00:03:05,800 --> 00:03:07,300 So now I can go here. 46 00:03:07,300 --> 00:03:14,740 I can simply refresh with Ctrl or command R and we'll get that heading here on top, right? 47 00:03:15,340 --> 00:03:19,990 So this is the visible part of an HTML page. 48 00:03:19,990 --> 00:03:27,790 Whatever you put inside the body tags, you'll see it on the web page, but there are some other metadata 49 00:03:27,790 --> 00:03:32,200 you need to input and you do that inside the head tags. 50 00:03:32,200 --> 00:03:33,040 So. 51 00:03:33,040 --> 00:03:37,060 Right, some head tags, opening head tags and closing head tags. 52 00:03:37,060 --> 00:03:42,250 And in between these two, you want to have a meta tag. 53 00:03:44,700 --> 00:03:52,500 You want to specify the character set at UTF eight and close that tag. 54 00:03:52,500 --> 00:03:53,640 So meta tag. 55 00:03:54,850 --> 00:04:05,470 And you need another meta tag here which specifies the viewing options of your app, such as the parameters 56 00:04:05,470 --> 00:04:06,490 of the width. 57 00:04:12,920 --> 00:04:15,410 Initial scale set it to one. 58 00:04:15,530 --> 00:04:21,589 Shrink to fit equals to no. 59 00:04:21,769 --> 00:04:24,080 And then close that meta tag. 60 00:04:24,080 --> 00:04:28,730 So this makes sure that your app will work well in many browsers. 61 00:04:28,730 --> 00:04:35,030 So that's about the HTML document for now, you can find this HTML code attached. 62 00:04:35,030 --> 00:04:38,600 So the index.html file attached in the lecture resources. 63 00:04:38,600 --> 00:04:42,350 So if you don't want to type those in, just copy paste my code. 64 00:04:42,530 --> 00:04:45,890 So let's try to see if everything works fine. 65 00:04:45,890 --> 00:04:46,160 Yeah. 66 00:04:46,160 --> 00:04:50,150 So as I said, this is in the body text. 67 00:04:50,410 --> 00:04:55,430 So that's the visual part, the visible parts and everything you have here. 68 00:04:55,430 --> 00:05:02,090 These are metadata which indicate the behavior of the browsers, how the browsers should handle your 69 00:05:02,090 --> 00:05:02,750 web app. 70 00:05:03,760 --> 00:05:05,980 So that's about this lecture. 71 00:05:06,430 --> 00:05:14,730 Our Flask app is running, so now we're ready to add some more content to the HTML front end. 72 00:05:14,740 --> 00:05:21,550 So which is those input fields of our application form, the job application form. 73 00:05:21,550 --> 00:05:23,070 So let's do that in the next video. 74 00:05:23,080 --> 00:05:23,500 See you.