Web Forms With WTF! - Flask Fridays #5

what's going on guys john elder here from codingame.com and in this video i'm going to show you how to use web forms for your flask project with what the forms and python alright guys like i said in this video we're going to look at web forms using what the forms but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to that channel give me a thumbs up for the youtube algorithm and check out coding.com where i have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 on membership with all my courses videos and books for one time via just 49 which is insanely cheap okay like i said in this video we're gonna look at web forms using something called what the forms wtf and i've got other videos on a prior flask playlist that show you how to use forms without what the forms if you want to just sort of bare-knuckle you know create these things on your own but there's some drawbacks to that for instance there's no uh csrf tokens there's no form validation there's no image uploaded there's a file upload system all those good things that you want with a web form and what the forms does that for you automatically so it's really cool it's really easy to use and that's what we're gonna start to look at in this video so we've got this little form here says what's your name i can type john click the button says hello john and you'll notice this is a nice looking form it kind of glows when we click on it that's bootstrap we've bootstrapified this we've got a nice button that looks bootstrappy and all that good stuff so that's what we're going to work on in this video so we've got our code that we've previously used i'm using the sublime text editor in the git bash terminal as always and you can find the link to the code for this in the comment section below as well as the link to the playlist for the other flask videos in this flask friday series it's flask friday so the first thing we need to do is head over to our terminal and install what the forms and notice i'm in my c flasker directory notice my virtual environment is turned on it says main there which means our git is initialized so we're good to go so let's go pip install flask wtf what the forms cracks me up so that will go ahead and install that and that's really all we need to do so now i can flask run to turn our server back on make sure this is running okay so that's good so to use this we need to import it into our main hello.pi file so up here at the top we can go from flask underscore wtf what the forms import flask form and that's capitalized and we also need a couple more things so let's go from wt forms we want to import a couple of things we want to import string field and we also want to import submit field and you'll notice the second word and all these are capitalized this is a very c type of naming convention because what the forms is not a flask thing it's is sort of a framework agnostic form system and then they've ported it to all the different things so there's a version of what the forms for flask which we just installed what the forms but it's still built on the core what the form system which i imagine is written in c or something anyway so that's that we also need from wtforms.validators we want to import data required and we'll talk about what this is and what these things are in just a second basically anytime we want to build something in a form we have to import it so a string field is basically just this input box right we're going to type strings into it text right the submit button when we click on it is a submit field right so if we had another one with images we would have an image field probably i've got a list of them i'll paste it in just a second and likewise this validators if for instance we don't type something in the field and we click the button we want something to pop up and say hey you didn't fill that out that's a validator and the specific validator that we want is data required there's all kinds of validators there's validators for email addresses to validate whether it's a valid email address there's validators for urls there's a whole bunch of them i got a list i'll paste it in so you can see them we'll go through a lot of them going forward but for today we just want these three things so okay we've got everything imported now we need to come down here and create a form class so let's say create a form class and with this class we're going to create it here and then we can use it whenever we want just by sort of calling it in a specific function so if we've got like the user page and we want to use that form we can import that form into this user function right here or whatever right but we have to create it first so uh actually let's do this sort of at the top just so that it's right up there all right so creative class form and actually before we do that we need to do one more thing we need to create a secret key so with forms there's something called a csrf token cross site request forgery i think csrf and what that does is it creates a little secret key on the form that then will sync up behind the scenes with another secret key and make sure that a hacker hasn't hijacked your form and is trying to do some weird stuff so all modern web forms have csrf tokens and in order to use the csrf token with what the forms we need to create a little secret key on the back end here so to do that we just go app.config and then square brackets and then inside of here quotation marks and then secret underscore key we're going to create basically an environmental variable we're going to store it in app config which is a nice place to store things like this in our app so to do this now we just create a secret key so you type in some password that only you know right don't share this with anyone don't push this into github if you're going to push it on github if it's public you know you don't want people to be able to see this secret key so for now we're just going to leave it right here because i don't really care but in the future we might try and hide this a little better if we're going to post this stuff to github and it's going to be public for the world so keep the secret i'm just going to type in my super secret key that no one is supposed to know whatever so that's my secret key right so it will take that scramble it up do some stuff with it we don't really care what that's all about that'll work for now so okay we've got our secret key now we can create our class for the form itself and what i want to do is create a form that has one input box and one submit box just very simple very basic form while we're learning how to do this so i'm going to create a class and i'm going to call this namer form because we're going to ask for somebody's name so i'm going to call it name or form it doesn't really matter what you call it and we want to inherit flask form which is this guy we imported up here right so we're going to use flask form in there and now we just sort of define what we want we want a name and we want a submit button right so for name this is going to be a string field remember this guy up here right so it's a string field and then we can give it a little label if we want i can say what's your name and then let's also give this a validator so we can go validators and then equal and then square brackets and then we want data required and this is a function so with little parentheses and this data required is just this data required up here that we imported earlier right so like i said if you don't fill out the form this little validator will pop up and say hey you didn't fill out the form please enter something in this field right that's what a validator does and what are we validating just data just we want something to be in the field we don't really care what it's just data so it's required and it's data so we use data required so for submit this is up here we call this submit field so down here we want to use submit field and then for the button itself we want it to say submit right okay so that's really all there is to it we can now use this form whenever we want on a web page so let's create a new web page let's go up to our templates and create a new file and let's go to file save as and i'm going to call this name.html and let's go to our index page here i'm just going to copy all of this and bring it over here and paste it and we can get rid of all this stuff but we do want the block content right we want to extend our base so that we get our nav bar and all that good stuff and then we want the block content so just for right now let's just type uh what's your name in an h1 tag just so that we can see if this page exists while we create it so we've got the template now let's head over to our hello.pi file and create the actual route and the function so let's go create name page so we need a route so let's go app.route and i want to point this at slash name now we also need to do something else we need to give this a method we're actually methods and we want to be able to use the get method as well as the post method and if you're not familiar with get and post anytime you have a form you're either going to get or post that form right so you usually almost always post a form and you get a web page right so you know when you fill out a form you click the button you're essentially posting it to the back end so we have to define that this page will be able to allow things to be posted to it right so we put methods equal post so that's our route now let's define the function itself so let's go define name now normally for instance this user we return render template and we still want to do that so i can put that in there but we want to point this to name.html which is this file we just created here right and we don't need to pass anything in here just yet so i'll leave that blank but now we also need to pass in our form that we created up here right so to do that we just come down here and we say the name of this thing is none it doesn't have a name and i'll explain what that is in just a second and then the form we want to use is name reform right so this is name reform with parentheses because up here we called it name or form right so we're saying hey use that form basically so now the reason why i'm creating a variable called name is because when we fill out this form it's creating let's see where's our form it's creating a name right and when the page loads the first time there isn't gonna be a name so we're gonna set that to none and then if somebody fills out the form with a name name will equal whatever they put in that form but for the first time there's it's going to say none and you'll see why in just a second because we want to do a little logic when the page first loads so okay we've got name and we've got form now we need to pass these onto the page itself so we do that down here like always we can just set name equal to name and let's set form equal to form so this form is this guy this name is this guy right and we'll access them on the page itself by referencing this name variable and this form variable now we're almost done we also need to validate some stuff so we want to go if form dot validate underscore on underscore submit and that's a function then name equals form dot name dot data and form dot name dot data now equals nothing so we're saying hey if if somebody submits the form then take whatever name they submitted assign it to this name variable because otherwise name is none right so we're gonna say hey if they filled it out make name whatever they filled out in that thing and then we'll sort of clear it for the next time around and then we'll pass these things in to our template right here so okay that looks good so let's go ahead and save this and let's run this just to see if this page shows up so our server is running in the background head back over here and let's go to localhost colon 3000 there's no link there we need to create one but for now i can just come up here and type in slash name and it says what's your name so that seems to be working so before we go forward let's create a quick link in our nav bar that points to this page so we don't have to type it in every time so let's head over to our nav bar over here come down here find a link this one will work i'm just going to copy it paste it in again but the url for is now going to point to name and we don't need to define a name beforehand and then i want the link url to just say name so okay let's go and save this and run it make sure that looks okay so come back to the main page hit reload name shows up when i click it it goes what's your name okay so far so good now we need to put the form itself on this page so let's head back over here to our name page and i'm going to get rid of this and we want to do some logic here so the first time around if somebody comes to the page we want the form to appear and we wanted to say what's your name right if they click on the button it will post and redirect back to this same page and if that's the case we want to say hello bob or whatever and we don't want that form to be there anymore because they've already filled it out right so we need a little logic for that so we can so we can use our regular jinja here and we can go if name so if name exists then what well if name exists let's go h1 hello and then let's just print out whatever that name is exclamation mark because i'm very excited right else again jinja we want to do something else and we want to go h1 what's your name and then we want the form i'll just type form for now and then down here somewhere we need to end if because whenever we open an if statement we always need to close it and inside of here we need to put the form itself so actually let's put a little line break in here so there's a space between the what's your name and the form itself so how do we use the form well whenever you create any form in any web framework at all you create a form tag you set the method equals to post almost always and then you always close your form tag at the end so now we just need to build out this form so let's create a couple of tags here and the first thing we want is form dot hidden underscore tag and that's a function this will create our csrf token and you notice we're calling form dot things if you remember back in our hello.pi file we're passing form so we can reference form dot whatever and this form dot whatever has all of the stuff that we defined in the class when we created it right so we can reference all that stuff so hidden tags is one of the things we can do we can also do form dot name dot label right and that is going to be up here this label right here that we put in here right so that's the label for this field so that's cool and we also want the input box itself so that's form.name right because of course back here we called this name it's a string field that's input box basically okay so form.name this one probably needs a function thing we'll do that and let's also put a line break here and now we need the button so the button is just form dot submit all right and that should do the trick so let's go ahead and save this and see how this looks come back over here hit reload okay so it says what's your name now notice this doesn't look great we haven't boot strapified it yet but all right it looks like it should work so let's type in john click the button hello john and it works now we come back to name again it starts all over again so that's all there is to this and it's really cool now what if i don't fill out the form but i still click the button hey it turns red a little thing pops up please fill out this form field that's what the validator is very very cool and uh really easy really nice to use so okay we've got this thing now it doesn't look great let's bootstrapify this remember if we head back over here to our code and look at our base.html we've used the bootstrap framework so that means we can use all the bootstrap stuff in our code so let's come back over here to getbootstrap click on docs for documentation come down here to forms there it is and click overview now they've changed the whole form system for bootstrap five this is very different in all the prior versions and bootstrap five just came out it's pretty new so it's a little different if you've used bootstrap before now in order to use things we used to have to create a forum group and then use form control tags for everything right you still use form control tags you don't have to use the the other thing the form group i think it was called so we actually don't have to do anything at all we don't have to call a class on form all we have to do is give whatever we want a class of form control for the thing labels get a class of form label right so let's do that one first so i'll just copy that now where do we put this in our code this is a little tricky well we've got this form name dot label we can give this parentheses and we can pass in a class right there all right so you see there it is let me give it some space i just pasted in class form dash label and we could do the same thing to these guys here all right so let's head back over here to bootstrap and let's see we want class form control so i'll copy that bring that back over here and for our name right there i'll pass that in class form control and finally for the submit button itself we want let's see btn btm primary and this will change color based on the button that you pick primary is a blue button which we probably don't want but we could start out there so okay class btn btn-primary so okay let's go ahead and save this and reload this see how this looks and boom now we have bootstrap forms we click on them they kind of glow they stretch out the whole screen we can resize that later if we want this is a nicer looking text the button is blue now i don't really like the button so we can come over here to components click on buttons here's a list of buttons here's this gray button it's called secondary so instead of btn primary we'll use btn secondary so we just copy that because i like that grey button it goes with our theme more right dark colors and stuff so head back over here and instead of primary boom it's secondary save this come back reload boom just that easy now it's gray we might want to change this button up here to secondary instead of green uh so we could do that real quick if we want head over to our nav bar there it is and look down here for the search thing there it is btn outline success we want btn outline secondary if we save this and run it boom now that's gray yeah whatever and we'll keep it like that because we've got a theme going on here and again this now works so maybe we'll try bob this time hello bob and you'll notice the form disappears it just says hello bob we can go back by clicking name up here and it starts it all over again but very cool and that's how you create forms now i mentioned earlier come back and look at our main code here we use the string field and the submit field we also use the validator of data required and i mentioned there's a bunch of these that you can choose from so i've got a list let me just paste it real quick and we'll go through it very very quickly let me just copy these bring it over here and maybe in our class form i'll just paste these in and i'll leave this in here so you can check the github repository if you want to copy these down or whatever but we've got boolean field boolean is true or false we've got a date field date time field the difference between date and date time is obviously date time has time right so that's cool decimal fields point 1.006 whatever decimal numbers file fields if you want to upload a file hidden fields multiple fields field list float field form field integer field whole numbers password field if you want to do a password put little stars on the thing when you type that's cool radio field for radio buttons select field for drop down selections select multiple fields submit field we already use that one string field we already use that one and text area field that's like a box like a square box very useful and then as far as validators go there is the data required we already used that one this was email it validates whether it's a valid email address which is super useful equal to input required ip address if it's an ip address length mac address which is a which is a computer networking thing number range from 10 to 20 whatever optional regular expressions url that's a super useful one did they enter in a correct url a uuid is i think unique user identification number any of or none of so these are the different validators really we'll go through and use a lot of these or several of them as we go forward building out this project same thing here we'll use several of these going through and building out this project but that's the list if you want to look at it and also if you're very very curious you can just come over here and go to google and type in flask wtf what the forms and this is the flask what the forms documentation has all kinds of stuff you can read about if you're interested or you can look at the original what the forms right this is the sort of the core what the forms and then this flask what the forms is sort of a port for it that allows us to use the original what the forms with flask that was very cool so that is how to use forms in your flask project with cool things like validators and stuff like that like i said you can bare knuckle this and create your forms without using what the forms but then you have to do all the code for all the validation the csrf token is a huge pain if you try and do that on your own it's almost not even possible you can use things like recaptcha with what the forms that you you know it's a lot harder to do on your own so i just recommend that you use what the forms if you're going to use forms in your flask project super easy as you've seen in this video it doesn't take but a few minutes and uh really cool so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where you can use coupon code youtube1 to get thirty dollars on memberships to pay just forty nine dollars to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from codinbue.com and i'll see you in the next video

Channel: Codemy.com

Views: 9,701

Keywords: flask web forms tutorial, flask web forms, flask wtforms, flask wtforms bootstrap, flask wtforms tutorial, flask wtf tutorial, flask wtforms dynamic fields, flask wtforms validators, flask wtf csrf, python flask wtforms, codemy.com, codemy, john elder, john elder flask, flask tutorial #5, intro to flask-wtf, flask form data, flask form handling, into to flask-wtforms, into to wtforms, flask tutorial for beginners, form handling in flask, python flask website

Id: GbJPqu0ff9A

Length: 22min 56sec (1376 seconds)

Published: Fri Feb 12 2021