1 00:00:00,230 --> 00:00:01,130 Hey, welcome back. 2 00:00:01,130 --> 00:00:04,939 Let's start building our Flask application form app. 3 00:00:04,939 --> 00:00:08,960 So let's jump into PyCharm and create a new project. 4 00:00:08,960 --> 00:00:11,900 So you want to go to file New project. 5 00:00:13,320 --> 00:00:22,740 So I'm going to put this inside users as which is an existing directory and then app 16 flask form. 6 00:00:22,740 --> 00:00:24,420 This will be created. 7 00:00:24,420 --> 00:00:26,400 This directory will be created. 8 00:00:26,430 --> 00:00:30,400 I'm leaving the other parameters as they are and press on create. 9 00:00:30,420 --> 00:00:32,280 So there we go. 10 00:00:33,210 --> 00:00:37,090 And a Flask app has this structure. 11 00:00:37,110 --> 00:00:39,690 It has a templates directory. 12 00:00:41,870 --> 00:00:44,450 And a static directory. 13 00:00:44,450 --> 00:00:45,800 So please name them. 14 00:00:45,800 --> 00:00:50,300 As you see here, the names of these folders are very important. 15 00:00:50,300 --> 00:00:54,770 So static with lowercase letters, templates with lowercase letters. 16 00:00:54,770 --> 00:01:01,580 And then we also create a new python file which usually has the name app dot pi or main dot pi. 17 00:01:01,610 --> 00:01:02,780 Either way, it's fine. 18 00:01:03,020 --> 00:01:08,480 Then inside templates you want to create a new HTML file. 19 00:01:09,310 --> 00:01:12,220 And name it index.html. 20 00:01:12,250 --> 00:01:18,580 The name can be different, but please use the same name as me because this name then will be referred 21 00:01:18,580 --> 00:01:21,010 from the app.py file. 22 00:01:21,010 --> 00:01:31,060 So in the python code we will be sending this HTML code to the front end to the web page here. 23 00:01:31,240 --> 00:01:38,380 So this web page is built using HTML and that HTML code will go inside index.html. 24 00:01:38,380 --> 00:01:39,550 So press enter. 25 00:01:39,790 --> 00:01:43,630 PyCharm will add some sample html. 26 00:01:43,660 --> 00:01:45,760 I'll just select this and delete it. 27 00:01:45,760 --> 00:01:51,730 So that's what we have two empty files and that's the directory structure of a flask app. 28 00:01:51,730 --> 00:01:54,070 So we have static templates. 29 00:01:55,620 --> 00:01:58,470 And app.py inside static. 30 00:01:58,500 --> 00:02:03,180 You may want to put files such as images. 31 00:02:03,180 --> 00:02:09,990 For example, if your app has some images, your website or your web application contains images, you 32 00:02:09,990 --> 00:02:18,060 put those images inside that static folder, or if your website has some CSS codes or some JavaScript 33 00:02:18,060 --> 00:02:23,100 code, you put those CSS files and JavaScript files inside the static folder. 34 00:02:23,580 --> 00:02:24,570 As a start. 35 00:02:24,570 --> 00:02:27,510 Let's add some code in the app.py file. 36 00:02:27,510 --> 00:02:31,910 So we want to import from Flask import the Flask class. 37 00:02:31,920 --> 00:02:37,410 Now flask is not installed yet, so you want to hover your mouse here and go to install package flask. 38 00:02:37,410 --> 00:02:41,490 So that will install flask in my virtual environment. 39 00:02:41,490 --> 00:02:43,350 You see, I have this venv here. 40 00:02:43,350 --> 00:02:50,610 When I created the PyCharm project, PyCharm created this virtual environment That's good to have. 41 00:02:51,870 --> 00:02:57,230 And then we want to create an app instance using that FLASK class. 42 00:02:57,240 --> 00:03:04,710 And this gets as arguments, the underscore, underscore, name, underscore, underscore and then we 43 00:03:04,710 --> 00:03:14,250 say app dot run debug equal to true port equal to 5001. 44 00:03:14,250 --> 00:03:14,970 For example. 45 00:03:14,970 --> 00:03:16,470 You can put anything here. 46 00:03:16,710 --> 00:03:19,170 If we run this, let's try to run it. 47 00:03:19,170 --> 00:03:21,600 So right click and run app. 48 00:03:22,670 --> 00:03:25,100 You should see this message normally. 49 00:03:25,100 --> 00:03:30,410 So that means this is working and you can access the app at this URL. 50 00:03:30,410 --> 00:03:35,690 So you can click that URL to open it with your default browser or you can copy it, copy the URL and 51 00:03:35,690 --> 00:03:37,790 go to your preferred browser. 52 00:03:37,790 --> 00:03:42,470 Or you can right click here and perhaps PyCharm will show this context menu here. 53 00:03:42,470 --> 00:03:49,940 So you can go to open in Chrome and you should see this normally not found for now. 54 00:03:49,940 --> 00:03:52,400 So the app is working. 55 00:03:52,400 --> 00:03:56,240 You didn't get something like, Oh, there is nothing here. 56 00:03:58,840 --> 00:04:01,690 So if we quit this app. 57 00:04:01,690 --> 00:04:04,620 So stop it with that red button. 58 00:04:04,630 --> 00:04:07,000 Now it says process finished. 59 00:04:07,030 --> 00:04:14,200 Now if you go to your browser reload that you'll see this site can't be reached. 60 00:04:14,200 --> 00:04:17,680 So this is a different error from that one. 61 00:04:17,680 --> 00:04:20,829 So the other error, which is when we run the app. 62 00:04:21,480 --> 00:04:23,040 So it's running now. 63 00:04:24,270 --> 00:04:30,330 This is not found, which means this particular page, the home page was not found. 64 00:04:30,330 --> 00:04:32,760 And similarly, you will get something else. 65 00:04:32,760 --> 00:04:39,480 For example, if you go to my page, slash my page, you again will get not found. 66 00:04:39,630 --> 00:04:46,200 So the app is working, but these pages have not been implemented yet and that's what we want to do 67 00:04:46,200 --> 00:04:46,680 next. 68 00:04:46,680 --> 00:04:56,490 So in between these two lines here, we are going to handle requests, URL requests, or technically 69 00:04:56,490 --> 00:04:58,650 known as HTTP requests. 70 00:04:58,650 --> 00:05:08,790 So when you load the page one web page with your enter key in your browser, you are making an HTTP 71 00:05:08,790 --> 00:05:09,690 request. 72 00:05:09,690 --> 00:05:12,780 So that's what flask is for. 73 00:05:12,780 --> 00:05:15,930 Flask can handle those requests. 74 00:05:15,930 --> 00:05:26,330 So with Python, you receive those requests and then you allocate that request to a particular HTML 75 00:05:26,380 --> 00:05:28,390 page, right? 76 00:05:28,390 --> 00:05:33,670 So if the user is visiting the home page, which is this one here. 77 00:05:34,720 --> 00:05:43,390 Then with some python codes here, we will say, Oh, get that home page and then show that index.html 78 00:05:43,420 --> 00:05:46,240 page here on the website. 79 00:05:46,270 --> 00:05:46,810 Right. 80 00:05:46,810 --> 00:05:55,210 And similarly, when the user goes to my page, then we'll send something else. 81 00:05:55,210 --> 00:06:02,350 We'll have another HTML file here, my page dot HTML and we will render that in the website. 82 00:06:02,350 --> 00:06:04,650 So that's how Flask works. 83 00:06:04,660 --> 00:06:11,470 So what we'll do next is we will populate this area here with code so that we can handle those HTTP 84 00:06:11,470 --> 00:06:12,070 requests. 85 00:06:12,070 --> 00:06:13,030 I'll see you in the next video.