1 00:00:00,030 --> 00:00:05,819 All right, in this lecture we'll start building of Python script which is the 2 00:00:05,819 --> 00:00:11,849 backbone of our web application and what we have so far is the front end, so we have 3 00:00:11,849 --> 00:00:19,740 the index dot HTML page which when you enter some data there and you submit an HTTP 4 00:00:19,740 --> 00:00:27,330 POST method is being triggered that POST METHOD navigates to this success dot 5 00:00:27,330 --> 00:00:35,130 HTML side and underneath this method is sending the email and the height. Now we 6 00:00:35,130 --> 00:00:40,710 want to make use of this pair of data and use it in Python so and we also 7 00:00:40,710 --> 00:00:48,629 got this static where we have this CSS file. Great, now let's go ahead and 8 00:00:48,629 --> 00:00:52,860 create the Python script but first as you know from the section where we built 9 00:00:52,860 --> 00:00:57,930 this website with Flask earlier in the course you need to create a virtual 10 00:00:57,930 --> 00:01:02,969 environment you can also make it without using a virtual environment, but it's 11 00:01:02,969 --> 00:01:09,030 a good idea to have it because it helps you isolate your environment in a fresh 12 00:01:09,030 --> 00:01:14,820 Python installation which later you can use for deploying your web application 13 00:01:14,820 --> 00:01:21,270 on the cloud or on the web server so I'll open a terminal here shift 14 00:01:21,270 --> 00:01:27,930 right-click open command window here and you want to make sure you have virtual 15 00:01:27,930 --> 00:01:34,590 env installed, so pip install virtual env. I have it installed and then once you 16 00:01:34,590 --> 00:01:45,090 have installed it you go and say Python with a n flag then venv and the name of the 17 00:01:45,090 --> 00:01:50,520 folder where you want your virtual environment to be created and this 18 00:01:50,520 --> 00:01:57,240 should be virtual if you are on a Linux you'd have to write here virtual env and 19 00:01:57,240 --> 00:02:04,200 I believe this should be a virtual env on a Mac, but on windows you write venv 20 00:02:04,200 --> 00:02:10,440 virtual and the name of the folder. Yeah, that created an empty folder for now. 21 00:02:10,440 --> 00:02:14,370 Now the folder is being populated with an installation 22 00:02:14,370 --> 00:02:24,000 of Python and pip as well. Yeah, that's done, so yeah, inside here as 23 00:02:24,000 --> 00:02:29,730 you see we have this scripts folder where you can find Python, so Python and 24 00:02:29,730 --> 00:02:32,690 also pip. So that suggests that you can now in 25 00:02:37,349 --> 00:02:46,500 your terminal you can go ahead and point to the virtual folder so virtual and then 26 00:02:46,500 --> 00:02:57,359 script and pip at the end and then install Flask so that's one way to do it which 27 00:02:57,359 --> 00:03:02,370 means you're using your visual Python, the Python that I just installed 28 00:03:02,370 --> 00:03:06,720 with the virtual env to install Flask so Flask would be installed for your virtual 29 00:03:06,720 --> 00:03:13,709 environment or another way to do it, so we did this way will it be the website 30 00:03:13,709 --> 00:03:20,220 with Python now I want to show you another way which goes by pointing to 31 00:03:20,220 --> 00:03:26,910 activate which is here activate, pointing to this bait file and 32 00:03:26,910 --> 00:03:32,370 that will trigger your visual environment in the console which means 33 00:03:32,370 --> 00:03:38,549 every, if you just kind of Python now that means the Python of your virtual 34 00:03:38,549 --> 00:03:43,620 environment will be triggered so let me exit this. Similarly when you're on your 35 00:03:43,620 --> 00:03:49,709 Python Flask you can do Python and the name of your app or you can do it the 36 00:03:49,709 --> 00:03:54,629 old way like we used to do it so virtual scripts and then slash Python and 37 00:03:54,629 --> 00:04:00,060 point to your app dot pi file so some people use it explicitly without 38 00:04:00,060 --> 00:04:04,440 activating the environment but some others just activate it and then they use 39 00:04:04,440 --> 00:04:09,480 that environment. Throughout these lectures we'll be using this activate 40 00:04:09,480 --> 00:04:15,629 because I think will help us to be more focused on the main things not think 41 00:04:15,629 --> 00:04:21,120 about passing path there and it's also good for me not to type this thing all 42 00:04:21,120 --> 00:04:27,070 the time while I'm talking so I hope that is clear so let me go ahead and do 43 00:04:27,070 --> 00:04:36,250 pip install Flask now. That was successful and now I'll go ahead and 44 00:04:36,250 --> 00:04:44,140 open Atom so make sure you open it in here. If you're using all the packages, 45 00:04:44,140 --> 00:04:51,820 other editors you need to create a Python file in your main folder, so I'll 46 00:04:57,400 --> 00:05:01,990 the same level with templates, static and the virtual folder so what I'll do now is 47 00:05:01,990 --> 00:05:08,050 I'll create, I'll think about the structure of my app.py file, I'll create these 48 00:05:08,050 --> 00:05:12,610 functions and also import the libraries that I need and for now let's only 49 00:05:12,610 --> 00:05:17,680 think about how to get the email address and the height entered by the user so we 50 00:05:17,680 --> 00:05:27,940 need Flask. From class import to Flask. We also want the render template method 51 00:05:27,940 --> 00:05:33,300 which will render our HTML templates and we also need Request from Flask and 52 00:05:33,300 --> 00:05:39,730 with Requests we will be able to access these HTTP request that is being made 53 00:05:39,730 --> 00:05:45,340 from the browser and then we can read this request so we can fetch this email 54 00:05:45,340 --> 00:05:51,250 address and the height. We'll see how we implement that in a while. Then the usual 55 00:05:51,250 --> 00:06:00,100 things so app equals to Flasks and name. So I assume you know what these do 56 00:06:00,100 --> 00:06:04,030 because you should have taken the lecture where we built this Flask website. 57 00:06:04,030 --> 00:06:12,010 So that should be clear, yeah and then we need a function with a decorator so app 58 00:06:12,010 --> 00:06:17,110 dot route and so when the user reaches the home page this function will be 59 00:06:17,110 --> 00:06:26,560 executed let's call this index. This will return a return render template index 60 00:06:26,560 --> 00:06:31,150 dot HTML. So with this Python should be able to go 61 00:06:31,150 --> 00:06:36,970 to the templates folder and get the index dot HTML file and render it in the 62 00:06:36,970 --> 00:06:42,700 home page, that's clear and leave and yeah we can test that but first we 63 00:06:42,700 --> 00:06:49,570 need to this book. So if name equals to main which means if the script is being 64 00:06:49,570 --> 00:06:55,390 executed and not being imported we will execute these lines, so app 65 00:06:55,390 --> 00:07:02,740 dot debug, we want to set it to true and also app.run. We want to 66 00:07:02,740 --> 00:07:09,310 run the application in the default port, so if I don't give any port here and 67 00:07:09,310 --> 00:07:14,560 this application will run on port 5000. If you want to specify port do 68 00:07:14,560 --> 00:07:22,630 something like 5001. I'll leave it empty. Yes, this should work 69 00:07:22,630 --> 00:07:29,650 now so I'll go ahead and try this and I'm using my computer terminal because 70 00:07:29,650 --> 00:07:34,750 the terminal embedded in Atom was having some bug at the moment, so it's the same 71 00:07:34,750 --> 00:07:40,660 thing that shouldn't be a problem. Yeah, so I'm in an active visual 72 00:07:40,660 --> 00:07:47,920 environment there so I'll go ahead Python app dot py and execute, so this 73 00:07:47,920 --> 00:07:54,550 is saying that my application is running on this IP which is the equivalent to 74 00:07:54,550 --> 00:08:02,130 localhost and column five thousand, so trigger the browser now and go to 75 00:08:02,130 --> 00:08:10,270 localhost 5000. Yeah, here is the application it looks 76 00:08:10,270 --> 00:08:15,550 pretty much done but we're not there yet. We have quite a lot of things to do 77 00:08:15,550 --> 00:08:24,310 so this is not even finding the success dot HTML page and it says the request 78 00:08:24,310 --> 00:08:32,740 URL was not found on the server and the reason to that is because this index dot 79 00:08:32,740 --> 00:08:39,460 HTML so when the user presses that button this action is being executed so 80 00:08:39,460 --> 00:08:44,140 the application is trying to find the success dot HTML but it doesn't find it 81 00:08:44,140 --> 00:08:49,660 and the reason to that is because we have a map we have a rendered that HTML 82 00:08:49,660 --> 00:08:56,560 file in any of our mappings here so we're mapping this URL and there we are 83 00:08:56,560 --> 00:09:03,700 rendering this index.html, but not success dot HTML, so we want 84 00:09:03,700 --> 00:09:09,780 to create a decorator here. App.route and how can we call that URL? Let's say 85 00:09:15,400 --> 00:09:21,130 success, so let's be the same name with success.html. They can be 86 00:09:21,130 --> 00:09:26,830 different, but it doesn't matter. So when this URL is visited we want to execute 87 00:09:26,830 --> 00:09:38,940 this function let's call this success as well and we want to say render template 88 00:09:38,940 --> 00:09:48,250 success dot HTML actually a return render template success dot HTML. 89 00:09:48,250 --> 00:09:55,690 Now this will almost work. Let me save the script, so the app is running and I 90 00:09:55,690 --> 00:10:06,760 say this will almost work because it does work if we visit the URL manually, but if 91 00:10:06,760 --> 00:10:11,310 we try to send some data to the server this still doesn't work as you see. The 92 00:10:16,390 --> 00:10:22,830 reason to that is because in the success, in the index.html page as I said 93 00:10:22,830 --> 00:10:28,960 this is just rendering a file which flask is not being able to find so you 94 00:10:28,960 --> 00:10:36,850 need to pass jinja2 placeholders here with these double curly brackets, so you'd 95 00:10:36,850 --> 00:10:47,589 say URL for success, good. Now I still expect to get another error, but let's 96 00:10:47,589 --> 00:10:53,200 see what we get this time, so I want to go step by step, one step at time so 97 00:10:53,200 --> 00:11:00,850 that you understand things, yeah, submit. And this says method not allowed this time. 98 00:11:00,850 --> 00:11:04,850 The method is not allowed for the requested URL. 99 00:11:04,850 --> 00:11:11,610 So the URL was successfully requested, but the method is not allowed so what 100 00:11:11,610 --> 00:11:18,150 method is this? Well, that'd be a post method, but by default when you create 101 00:11:18,150 --> 00:11:24,600 these decorators here and these implicitly declare a get method. If you 102 00:11:24,600 --> 00:11:32,370 want to do a post method, you'd want to explicitly declare that as a list so 103 00:11:32,370 --> 00:11:42,440 post and save that, go again to your webpage, submit and success. 104 00:11:42,440 --> 00:11:48,089 Well the routings are working correctly, but where are this email and height 105 00:11:48,089 --> 00:11:53,250 values? So they are being passed to the server as a post method but we need to 106 00:11:53,250 --> 00:11:57,750 capture them and to do that we would capture them inside this success 107 00:11:57,750 --> 00:12:04,410 function, so these two values are being generated when the user visit this URL 108 00:12:04,410 --> 00:12:10,530 by pressing that button so at this moment we want to capture these two values. 109 00:12:10,530 --> 00:12:16,200 Sometimes you might also get a get method through this URL so for that 110 00:12:16,200 --> 00:12:28,020 reason you may want to make sure that if request.method equals to post, then 111 00:12:28,020 --> 00:12:36,770 what you do is let's create a variable say email equals to request dot form and 112 00:12:36,770 --> 00:12:49,020 get the form element with a the name email name. So what I did here is we want to 113 00:12:49,020 --> 00:12:53,570 make sure if you're getting a post request because the user might also 114 00:12:53,570 --> 00:12:58,860 visit this URL through other means and we want to make sure that's a post 115 00:12:58,860 --> 00:13:05,339 request so we are getting this email and the other height values and if that's a 116 00:13:05,339 --> 00:13:13,140 post request we grab that email and then we return this template, so this request 117 00:13:13,140 --> 00:13:18,179 is the one the method or the class that we're getting 118 00:13:18,179 --> 00:13:24,839 from this import and that has this method, so this request is being able to 119 00:13:24,839 --> 00:13:30,569 read the method of the request and stores that in this method object, so if 120 00:13:30,569 --> 00:13:36,419 that method, if this is equal to post than we're dealing with post method and 121 00:13:36,419 --> 00:13:43,679 we want to grab the form element from this request so this HTTP request has 122 00:13:43,679 --> 00:13:48,449 some elements and if you want you can look up for that on the internet to 123 00:13:48,449 --> 00:13:53,009 learn more about HTTP requests so there are quite a few things you can read 124 00:13:53,009 --> 00:14:00,179 about that and so this has this form element and that form element which you 125 00:14:00,179 --> 00:14:08,729 can see from index.html so this is form and this form has this key with this 126 00:14:08,729 --> 00:14:15,299 name and this key has the value that the user enters so what I could do here 127 00:14:15,299 --> 00:14:24,419 before I go to the height, I could print out the email and see what happens but I 128 00:14:24,419 --> 00:14:35,549 have to keep the console open there so here is the browser and here is a console 129 00:14:35,549 --> 00:14:43,970 because we will see the output hopefully printed out in the console so 130 00:14:43,970 --> 00:14:51,629 here we go and let me make a post request so I'm just sending some data to 131 00:14:51,629 --> 00:15:03,149 the server and obviously this console work was from another process that 132 00:15:03,149 --> 00:15:07,229 didn't have to do with what we're doing. Here, so this is the console I wanted to 133 00:15:07,229 --> 00:15:15,889 see and yeah here we can see the two requests so the first is a get request 134 00:15:15,889 --> 00:15:22,379 which was the index.html page so when I reload the index dot HTML page, we 135 00:15:22,379 --> 00:15:27,089 got a get request but then I entered this data and that was the post request 136 00:15:27,089 --> 00:15:30,839 to this URL so the first was the home page 137 00:15:30,839 --> 00:15:34,870 so the slash, and the second was the success URL and 138 00:15:34,870 --> 00:15:42,610 you can see the email address here printed out. Alternatively if you want to see 139 00:15:42,610 --> 00:15:53,830 how things are working you could print out the request.form, so let's do the 140 00:15:53,830 --> 00:16:05,620 same thing as we did submit this as you see this is something called an 141 00:16:05,620 --> 00:16:10,360 immutableMultiDict. So it's like a dictionary and this is 142 00:16:10,360 --> 00:16:18,430 holding this data, so email name the name of that input, HTML tag and then the 143 00:16:18,430 --> 00:16:26,980 height name and the value here, so when we do this, this here, that means we are 144 00:16:26,980 --> 00:16:33,790 accessing the value of this dictionary key. Good, now we can do the same for 145 00:16:33,790 --> 00:16:49,230 height, so height request dot form and height name. Let's print that out and 146 00:16:49,230 --> 00:17:02,320 height just to make sure everything is working correctly. Send them, and yeah 147 00:17:02,320 --> 00:17:09,820 here is the email, the height and yeah we're doing very well here. We were 148 00:17:09,820 --> 00:17:17,710 able to get this two pieces of data, then what we need to do next is we need to 149 00:17:17,710 --> 00:17:22,720 set up this database and then store this data in the database, so we'll be working 150 00:17:22,720 --> 00:17:29,230 on PostgreSQL and we'll be doing that throughout the next lectures, so talk to 151 00:17:29,230 --> 00:17:31,000 you in the next lecture then!