Flask Tutorial #4 - HTTP Methods (GET/POST) & Retrieving Form Data

hello everyone and welcome back to their Flast tutorials so in today's video we're gonna be talking about two basic HTTP methods which aren't get and post now these are just ways of sending information to our server or to our clients so evers using the website I'm going to talk about the differences between both of them and then go through a basic example of how we can send for example some password data or some name data from a form to the backend of our website so it can be processed and we can do something with that in future videos we'll get into some more advanced things we'll talk about databases logging in sessions all of that and we'll just go with it this until we kind of run out of things to do so before I get too far into this we need to explain what get and what post are which are the to http methods I'm gonna explain today now you've probably heard of both of these before get is the most common way of well getting or sending information to a website or you know to a client depending on whatever way this information is going post is a way of doing this securely so get essentially is an insecure way of getting information it's most commonly used and a basic example of that is let's bring up the website here when we type something in the URL bar or in the address bar so you can see here I've connected to my website I have it running here it just has the home page on it and if i refresh this we see in the console we have a command that pops up saying get now what does this mean well essentially whenever we type something here that's not secure which means you know anyone can see it it's not secure information it will send to the server here and then it will return to us the actual web page using a get method now if we were to use post what we would actually do is send secure information that's encrypted that cannot be you know seen from either ends and is not stored on the actual web server so that is kind of the difference between get and post now I know this might be a little bit confusing right now I'm probably not explaining it in the best way but as we go through the video you guys will understand kind of the main differences between that but the basic way to think of it is whenever you're using a get command it's something that's not secure that you don't care if someone sees it it's typically just typed in through the address bar where it's just a link you redirect to it and then with posts that's something that's secure it's usually form data and it's something that we're not going to be saving on the actual web server itself unless we're gonna be sending that to it apiece all right so let's now go through a basic example I just want to set up a few different pages here for this example first and then we'll get into actually sending the information so what I want to do is a really basic script where essentially we have a little dialog box someone can you know type in hello they can hit a button it's gonna send that information to the server using a post request which we'll talk about in a second or a post method and then we're gonna display that information on another page so what I want to do is set up a page here for logging in or just actually we'll just say yeah we'll just call it log in for now although it's not really a login we'll give this a decorator so at app dot root and then we're just gonna put slash login now in this decorator I'm actually going to add another aspect that we haven't seen yet which is the methods we can use on this login page so by default whenever you connect or you know go to one of these pages you're gonna go with a get request which means that you know we're just gonna get that information it's not gonna be secure and that's fine but we can actually have different methods so if I wanted to find the different methods that are going to be allowed from these pages I can say methods equals make a list and then put post and get because for this specific function or this specific page we're going to need to use those now inside of here right now actually we'll just return render template and then we won't put anything in here X we haven't created a template and let's create one more page we'll say define user it's actually gonna take the variable USR and then inside here we'll just say return render template and then again in here we'll put something else after so let's do at happy root let's make this dynamic so that we can actually just pass through the user right into here so we'll say slash and in this case user like that and we should be actually this is gonna have to say USR my apologies and actually instead of returning render template I'm actually just gonna return some basic HTML because I just want to make this easy so let's just say you know h1 will do this in F strings will say USR will put an F here and then we'll do a slash h1 to close that there okay so now what I'm gonna do is go and build out this login page just a basic HTML form so inside of my templates what I'm gonna do is create a new file let's just call this log in dot html' and then inside here we'll start creating the form so we're gonna first start by extending that based on HTML so we'll say extends and then here if I could spell this correctly based HTML then we'll do these tags for our title so we'll say block title and then we'll end our block here and then inside here we'll just put login page like that okay so let's do some more blocks for the content we'll just do a quick form here nothing too crazy say a block content percent percent and block and now we'll start building out our form so essentially forms our way that we can actually send information to the website we're usually gonna send information through forms so whenever we know we're gonna be you know getting some information from a form we need to put our form tags in HTML I'm sure most you guys know that but I'm just gonna specify that here and we need to say the action that this form is gonna take now the action essentially is just a URL that we want to redirect to once this form is submitted so in this case I'm actually just gonna put the pound sign which means we're gonna go back to the same page and we're just gonna do you know whatever the same page we were at you know slash pound this is kind of a basic way of just saying you know we're gonna stay on the same page now after action we're also gonna put method and in this case our method is actually going to be post two because we're gonna be posting information not getting information usually if you put get in here that means you're actually gonna fill this form with information that you get from the server okay so now we're just gonna do some basic things so I'm just gonna say P I'm gonna say name and here we'll just ask the user for their name will do another P tag oops I don't want to do form there I'll give you slash P and that P tag and then in here we're actually gonna put an input we'll say type equals if I could end this here type equals text and then name equals and make sure you remember this let's just call this an M just for name and then we'll do another input so we'll actually copy this except this time we're gonna make this a submit button she's gonna say input type equals submit and instead of name we're gonna say value equals in this case we'll just put what should we do submit as the value there okay so now we've built out this form this is gonna be a page that we render I don't think I made any mistakes but knowing me I probably did so in here for rendering this template now what we're gonna do is simply just put in log in dot html' and we don't need to pass that any information all right so we've created the form and we've created and rendered this template now so now what we need to do is figure out how we're actually gonna get this information and handle it from this side so let's start by actually this should hopefully update here so let's actually go and look at the website and go to slash log in and just see what we get so when we go to slash log in we can see this is kind of what we're getting now we have you know a basic little box where we can type some things in and we have a submit button and notice that when I hit that we're posting and you can see that it has this little hashtag here and notice that it's different because it's saying post whereas if I were to refresh this then we're gonna get a get request rather than post okay so awesome that is all we have for now so now what I need to do is actually say how can we determine in this login function whether we called the get request or whether we call the post request what we need to do is start by importing request so we're can import requests up here with render template and now I'm gonna show you how we can check whether we reach this page with a get request or a post request it's pretty basic all we're gonna do is just say if request dot method equals equals and make sure this is in all capitals post then we're gonna do something specific otherwise we'll do something else so in this case what I'm gonna do is move this render down here so if we have the get request what we're gonna do is render the log in template because that means you know we didn't click the submit button we're just going to the slash login page so let's show it here but if we have post what I want to do is actually get the information that was from that little name box and then use that and send us to the user page where we can display the user's name so how do we do that well it's actually pretty easy so all we need to do is actually set up a variable that's going to store our users name we need to say user equals request dot form and then what we're going to do in here is put the dictionary key that we want to axe for the name corresponding with whatever input we had here so in this case we had name equals an M so what we're gonna do is put an M as a dictionary key here and what that's gonna do is actually give us the data that was typed into this input box so we could go as far as to you know make sure that this wasn't blank before we go to the next page what I'm actually gonna do is just use this information to redirect us to the user page I'll show us that show you that example and then we'll talk about this bit more so I'm gonna say return and in this case we're gonna say redirect URL for we're gonna say user and then we're gonna say us are equals in this case use it so now what we should be doing is essentially if we click that submit button it should send us over to this user page and then it should just tell us you know whatever that user is that we saw so let's try this and see if it works let's make sure that this refreshed I think it did so let's actually just go to slash login make sure that gets working so yet slash login working fine let's type Tim and hit submit and there we go we can see that we get redirected to a page that says our name now note that we see a post and then we see get and that is kind of the basic way that that works and let's just go back to slash login what's happening here there we go and then if I go to yeah hello and we do that we could see that hello is showing up on the screen so that is the way that we actually get information from a form and obviously if you had more than one you know input type here then you can get all those information by just using the name as a dictionary key on request dot form so that is kind of the basics behind this notice that you know request up form actually comes in as a dictionary which means that you can access each object using the key so whenever like I said already you have names in here you have multiple things make sure they're unique and then you can actually access all of them by just doing requests top form make sure however before you do this that the method was post and not yet otherwise you may run into an issue so that has been HTTP methods how to get some information from a form I know this was a basic example we didn't go through too much but in the next video we'll go in a more advanced example we'll use the post and the gets and actually go through a login example then we'll get into sessions and some more advanced as always if they're saying you guys would like me to cover in this series leave a comment down below and I'll see you guys in another video

Channel: Tech With Tim

Views: 456,955

Keywords: tech with tim, flask tutorial python, flask get form data, how to get form data flask, http methods in flask, using http methods flask, flask http methods, flask post request

Id: 9MHYHgh4jYc

Length: 11min 5sec (665 seconds)

Published: Sat Nov 02 2019