NOTE This file was generated by Descript 1 00:00:00,093 --> 00:00:01,353 Hi guys, and welcome back. 2 00:00:01,383 --> 00:00:06,273 In this video, let's learn about how to receive form data using Flask. 3 00:00:06,603 --> 00:00:09,063 I know that earlier on in the course we learned about HTML 4 00:00:09,063 --> 00:00:10,683 forms and how to send data. 5 00:00:10,803 --> 00:00:14,793 So now we do the other side of it and actually receive the data and use it. 6 00:00:15,093 --> 00:00:19,353 So this is going to allow us to receive the entries that our users submit. 7 00:00:19,593 --> 00:00:20,433 Let's get started. 8 00:00:21,294 --> 00:00:25,824 The first thing we want to do is we want to link this form to our Flask app so 9 00:00:25,824 --> 00:00:30,924 that when we submit the form, we receive some data here that we can then store. 10 00:00:31,734 --> 00:00:36,024 Later on, once we've managed to get data and store it, we're going to learn how 11 00:00:36,024 --> 00:00:40,584 to put that data in here so that we don't have all this hard coded and instead 12 00:00:40,584 --> 00:00:42,414 we've actually got what the user typed. 13 00:00:42,918 --> 00:00:46,278 How do we get form data here into Flask? 14 00:00:46,795 --> 00:00:50,035 The first thing is to look at the method of the form. 15 00:00:50,045 --> 00:00:53,095 So let's go over to our template and let's go to the form. 16 00:00:53,335 --> 00:00:54,925 You can see the method is POST. 17 00:00:55,495 --> 00:00:58,255 That means that when we type something here and submit the form. 18 00:00:58,255 --> 00:01:02,485 That's going to make a post request to the form action, 19 00:01:02,635 --> 00:01:04,555 which you can see is slash entry. 20 00:01:05,082 --> 00:01:08,982 I'm going to change that I'm going to leave the action as forward slash which 21 00:01:08,982 --> 00:01:11,442 is the same page as the form is on. 22 00:01:11,892 --> 00:01:15,432 Which means I can just remove it entirely and the form will submit 23 00:01:15,432 --> 00:01:17,772 data on the same page that it is at. 24 00:01:18,281 --> 00:01:19,301 Why do I want to do that? 25 00:01:19,421 --> 00:01:22,451 Well, because I don't want to create it separate end point that accepts the 26 00:01:22,451 --> 00:01:26,441 form data and then sends us back to the same page where we were already. 27 00:01:26,711 --> 00:01:30,041 Because after all, we only have this page in the app so after submitting the 28 00:01:30,041 --> 00:01:32,051 form, we do want to stay in this page. 29 00:01:32,541 --> 00:01:34,971 However that does mean that we now have to tell Flask that 30 00:01:34,971 --> 00:01:39,471 this endpoint might receive POST requests as well as GET requests. 31 00:01:39,771 --> 00:01:43,581 So we can say methods equal get and post. 32 00:01:44,086 --> 00:01:48,136 Note that this is a keyword argument that goes after the end point 33 00:01:48,136 --> 00:01:50,803 route in here as another argument. 34 00:01:50,803 --> 00:01:52,123 So we do have to put it in there. 35 00:01:52,313 --> 00:01:55,193 It does not go in the function parameters list. 36 00:01:55,706 --> 00:02:00,356 So now we've got a request that's coming in to this function. 37 00:02:00,746 --> 00:02:03,086 It might be one of two requests. 38 00:02:03,236 --> 00:02:07,676 It might be the browser loading the page, which is what we've done so far. 39 00:02:07,976 --> 00:02:11,566 And we know that that should render the template home.html. 40 00:02:11,966 --> 00:02:15,866 But what happens if the request that's coming over to this function is a 41 00:02:15,866 --> 00:02:18,326 result of the user submitting the form? 42 00:02:18,805 --> 00:02:20,125 We want to do something else. 43 00:02:20,155 --> 00:02:23,575 We want to grab the field contents and do something with that data. 44 00:02:24,056 --> 00:02:30,380 So we will do, if request.method is equal to post, then we can do something else. 45 00:02:30,783 --> 00:02:33,273 Request is not a variable that exists yet. 46 00:02:33,333 --> 00:02:35,913 We do have to import it from Flask. 47 00:02:36,033 --> 00:02:41,103 So now from Flask we're importing the Flask class render template and request. 48 00:02:41,436 --> 00:02:46,086 The request variable is a value that has something inside it 49 00:02:46,116 --> 00:02:49,836 whenever we're in a function that is currently responding to a request. 50 00:02:50,330 --> 00:02:55,070 We can't use request out here because here we're not responding 51 00:02:55,070 --> 00:02:57,710 to a request made by the browser. 52 00:02:57,920 --> 00:03:02,150 We're only doing that inside a function that has an endpoint associated with it. 53 00:03:02,643 --> 00:03:05,723 If the request method is post we can grab the entry content. 54 00:03:05,753 --> 00:03:11,303 Remember that when the form submits the data is added to a payload and sent 55 00:03:11,303 --> 00:03:13,103 with a request, and we can do that. 56 00:03:13,103 --> 00:03:17,823 We can access that data with request.form.get content. 57 00:03:18,223 --> 00:03:21,883 In Flask request.form is something that looks very much like a dictionary. 58 00:03:21,913 --> 00:03:26,713 So by doing request.form.get of the content which is the name of this field. 59 00:03:26,743 --> 00:03:27,613 Let's double check that. 60 00:03:27,650 --> 00:03:28,130 It is. 61 00:03:28,626 --> 00:03:32,136 Then we're going to get the content that is associated with that field. 62 00:03:32,620 --> 00:03:37,260 If the field doesn't exist or it has a different name doing request.form.get 63 00:03:37,750 --> 00:03:39,730 of content will return None. 64 00:03:40,263 --> 00:03:42,633 What we're going to do is we're going to print the entry content. 65 00:03:42,723 --> 00:03:44,193 Just to see that this works. 66 00:03:44,193 --> 00:03:45,633 So let me restart the app. 67 00:03:45,873 --> 00:03:47,523 And remember that I'm restarting the app. 68 00:03:47,553 --> 00:03:48,993 That's just what I feel comfortable with. 69 00:03:49,203 --> 00:03:53,823 But if you feel comfortable setting the environment to development and having it 70 00:03:53,883 --> 00:03:55,923 auto refresh, then by all means do that. 71 00:03:56,013 --> 00:03:58,323 I will be doing that later on in the course, but for now I want 72 00:03:58,323 --> 00:03:59,553 to keep it simple for you guys. 73 00:03:59,553 --> 00:04:02,453 So I'm just restarting the app every time I make a major change. 74 00:04:02,963 --> 00:04:03,953 So that's us to restarted. 75 00:04:03,953 --> 00:04:05,393 We're going to refresh the page. 76 00:04:05,670 --> 00:04:09,960 Now we're going to type something in here and press add entry. 77 00:04:10,440 --> 00:04:13,050 You can see down here in the console, although it is a bit small, 78 00:04:13,260 --> 00:04:15,120 we get the words: Hello, world! 79 00:04:15,613 --> 00:04:17,563 That's because the data came through here. 80 00:04:17,923 --> 00:04:19,153 It was a post request. 81 00:04:19,393 --> 00:04:23,413 So we came into here, we got the content using request.form 82 00:04:23,683 --> 00:04:24,583 and then we printed it out. 83 00:04:25,126 --> 00:04:28,376 Something else that I want to do that we will need to store alongside 84 00:04:28,376 --> 00:04:30,116 the entry content is the date. 85 00:04:30,146 --> 00:04:31,526 You can see that we use the date in there. 86 00:04:31,796 --> 00:04:35,186 And we need the date at which an entry was created. 87 00:04:35,426 --> 00:04:37,076 So let's grab the date. 88 00:04:37,576 --> 00:04:39,436 I'm going to do import datetime. 89 00:04:39,925 --> 00:04:41,785 And as well as printing the entry content. 90 00:04:41,965 --> 00:04:45,625 We're also going to print datetime.datetime that accesses the 91 00:04:45,625 --> 00:04:48,355 datetime class of the datetime module. 92 00:04:48,835 --> 00:04:54,625 Today, and that is going to give us a datetime object that has today's date. 93 00:04:55,118 --> 00:04:56,348 So let me save that. 94 00:04:56,558 --> 00:04:57,878 I'll restart the app again. 95 00:04:58,398 --> 00:05:03,150 We will submit another form, press add entry, and now you can see we 96 00:05:03,150 --> 00:05:05,070 get this date printed out there. 97 00:05:05,578 --> 00:05:07,678 However, this date is a bit too long. 98 00:05:07,678 --> 00:05:09,298 It's not quite what we want. 99 00:05:09,508 --> 00:05:13,618 So what I'm going to do is I'm going to format it in a slightly different way. 100 00:05:14,113 --> 00:05:17,683 I'm going to create a variable which says formatted_date, for 101 00:05:17,683 --> 00:05:20,823 example, and that's going to be datetime.datetime.today.strftime 102 00:05:22,443 --> 00:05:25,023 for string format time. 103 00:05:25,333 --> 00:05:28,269 Here we're going to pass in the date formatting many language text. 104 00:05:28,269 --> 00:05:31,629 Which is %Y %m %d. 105 00:05:31,989 --> 00:05:35,739 And that is going to tell the datetime object to format itself as 106 00:05:35,739 --> 00:05:40,419 a string in this format, the year as four digits, the month as two 107 00:05:40,419 --> 00:05:42,849 digits, and the day as two digits. 108 00:05:43,366 --> 00:05:47,518 Now we can use formatted_date in here instead of datetime.datetime I 109 00:05:47,518 --> 00:05:51,238 know that this is a bit long so I'm going to close this sidebar there. 110 00:05:51,238 --> 00:05:52,288 We don't need it at the moment. 111 00:05:52,658 --> 00:05:56,888 We can restart the app once again, and we will have the entry content as 112 00:05:56,888 --> 00:06:00,098 well as the date in a proper format. 113 00:06:00,398 --> 00:06:02,198 So you can see we've got Hello, world! 114 00:06:02,198 --> 00:06:04,028 and 2020-11-13. 115 00:06:04,010 --> 00:06:08,441 So this is how we can get the form contents from a POST request. 116 00:06:08,711 --> 00:06:10,511 Now we do have to do a few more things. 117 00:06:10,631 --> 00:06:14,831 We have to store these entries somewhere and we have to send 118 00:06:14,831 --> 00:06:17,141 them back to the template so that they are actually displayed 119 00:06:17,141 --> 00:06:19,181 instead of this hard-coded entry. 120 00:06:19,541 --> 00:06:21,551 Let's go and do that in the next few videos. 121 00:06:21,623 --> 00:06:21,953 All right. 122 00:06:21,953 --> 00:06:23,603 Thank you guys for joining me in this video. 123 00:06:23,693 --> 00:06:25,193 I'll see you in the next one.