Style Django Forms With Bootstrap - Django Blog #5

what's going on guys John elder here from Kota me.com and in this video we'll style or add post page for our blog with Django and Python I guess like I said in this video we're gonna style our ad post page but before we get started if you like this video I want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out Co to be calm all right dozens of courses with hundreds of videos to teach you to code use coupon code youtube one to get $30 off membership that's all my courses videos and books for a one-time fee at just $49 which is insanely cheap okay so we left off last time we have created this ad post page we can add a blog post but the styling on this thing is not great and since we're generating this forum automatically it becomes kind of tricky how do we style the forum there's not like the regular form fields that we can add CSS classes to so what do we do well that's we're gonna look at in this video and it's not that bad so if we come back here and look at our add post page you remember we're just using this tag right here this form as P and this is kind of interesting here we're doing this as P this is like a P tag a PHT ML tag that means every field in our form will be surrounded in its own P right you can also do as you L if we save this hit reload boom now it's an unordered list right you see these dots next to everything and you can also do as table and this will create an actual table now if we save this and run it this is gonna look a little weird everything's kind of stretched out because we need a table tag so we could come up here and just you know create a table like this and then come down here and close our table to egg like that if we save this come back here now it looks a little bit better but this thing is below so we would have to tweak that as well and it's just a little weird now this is better-looking if you just want to do the table thing right we could grab this button for instance and put it down here if we save this this would probably look a little bit better yeah so this is better but it's still not great we're still not getting any style here so let's go ahead and change this back let's get rid of all of that that and let's change this back to as P save this and check this again okay so this is the way it is so in order to style this we actually have to create a Django form and then sort of use that form on this page and to do that we need a forms dot PI file so we head back over to our code you'll notice we've got it let's see here's our blog the blog app right we've got views we've got URLs we don't have any forms we've got models dot PI we don't have any forms so we can just come up here to the blog right click and create a new file and let's just go file save as we want to call this forms dot pi all right and here we want to import some things we want to go from Django import forms and we also want to import our model so that we can use our model so from dot models import host and that's just this models file right here dot models is the same as models pi and this post is our posts that we've created our post model right so we're just importing that so okay now we need to create a class and let's just call it you call it anything you want I'm gonna call it post form right and this inherits forms dot model form and a model form allows us to create form fields for our model in this case our post model right so okay that's that now we want to create another class inside of this called meta and inside here we want to designate what model we want to use we want to use our post model right and then what fields do we want to have on this form well these are just gonna be the fields from our models pie so title title tag author and body so we could just put those in here so title title underscore tag and put these all in quotation marks right separate them by commas and this is just a Python list what was the other one author and then body right okay so we sort of defined our our fields in our form now we need to actually do the thing we want to do add the actual styling and and to do that we create this widget a dictionary right and inside of here we just designate what we want so for each of these forms or for each of these fields we'll just go for instance title key value pairs of a dictionary are separated with : and then here we just do what we want to do so we want to call forms dot text input and that's because let's head back here this title for instance is a text input field box right so we want to say hey we want to do something to this text input box right what do we want to do well we need to change the attributes of that box so we can call adders and set that equal to inside of here another dictionary and now we can just say what we want to do so we want to create a class inside of this text input box right and what do we want in that class we want to pass some CSS called form - control okay and then comma to separate the the next one so I'm just gonna copy this and and do this four times because we have four fields two three four and we're gonna need to tweak each of these but before we do that I want to talk about this form control thing so what is that where am I getting that well you know we've been using bootstrap for all of our stuff so if we go to get bootstrap calm and click on the documentation come down here to components and then click on forms we can see bootstrap has some forms and they look like this they're nice they glow they stretch across their size nicely and all that good stuff right so to use these we wrap our entire thing in a form group div and then for each item for instance each text input box or whatever we give it a class of see where's it at in here right here form control so each item will have to have a class of form control in order to sort of bootstrap fi them right and we can grab this div class form group and we just want to wrap this guy probably in our entire entire form so we can head back to our ad post on HTML and then just right above this form let's just put that div class in and I'll go ahead and tab that over just to make things look nice and then we can close that div right here okay so that should work okay so back to our form stop pie file we need to tweak each of these things so first off let's go change the names of these so title tag is 1 and author is the next one and finally body now the title tag is gonna stay the same because it's a text input box right if we come back to our website and look at it these two things are text input boxes this is a select drop-down box and this is a text area box right so we need to put different things for these two things different things for these two things the technical term different things right so for instance here we put text input box like I said for title tag it will stay text input box but for author that's a select drop-down box so we call select right and then this body is a big square box and that is a text area so change this to area now notice the area is lowercase like here the the input was uppercase so text input two different words both uppercase for some reason here we just call lowercase area okay and the rest of these things can stay the same we want form controls for each of them that's the class we're gonna pass the CSS class now if you're not using bootstrap and you have some other CSS that you're just writing for instance if you have a static directory if you know how to use static files with Jango which if you don't check all my other playlists the dental website with Django playlist I go over creating static files in great detail static files are CSS files JavaScript files and image files so if you have your own CSS file that you're writing you would use the static directory for that and you can still pass whatever class you wanted right in here what calling it whatever you want it but we don't have to worry about that we're using bootstrap it's very easy so we're just gonna call control for each of these so okay let's look over this again Horst post forum as the name of our forum our model is post and okay that's looking good so go ahead and save this now we also need to make some changes to our views dot PI file so let's pull that up do there we go and up here at the top we're importing our model we also now need to import that form we just created so dot or so from dot forms because the name of the file is forms PI so we can call it by calling dot forms and we want to import that form we just created so that was post form that's what we called it so we just copy this and where'd we go here it is paste that right in so okay now we need to make a change down here to our add post view as well we need to tell this you know here we're telling it use our post model but we also need to tell it use the post form so to do that we call form class class and set that equal to whatever we call this thing so I can just copy this and paste that right here now we're using our post form remember when we first created this thing we designated what fields we want to use and we designated using all of them we want to use all our fields and if we don't want to use them all we can break them apart and for instance if we just want the title in the body we can do it like this well we don't want use any of these now because we're using this post form right it takes care of everything for us so we need to take this line out I'm just going to comment it to make it go away okay so let's go ahead and save this and let's head back over to our website and it's Friday so I almost certainly forgot something and that seemed pretty easy we're sailing right along so let's hit reload to see if I screwed this up and it looks like I did yep so what did I do all right let's pull up our thing here ctrl C to break out of here and let's see named form is not defined on line 10 of what forms pie head okay so we've got a typo in our form class let's head back over to our form stop i/o right here widgets plural obviously I have more than one so this is widget so let's go ahead and save this oh okay so here forms who it is absolutely Friday here in Vegas you can tell alright so save this now let's come back that ought to do it let's run this guy hit reload boom there we go we've got a nice style for now this is big it's taking up the whole screen now with a little bit of bootstrap we can change this to anything we want you know but this is the this is the important thing this is the hard thing getting these things to be bootstrap off' ID now that they're boot stratified we can wrap this and divs to make it you know smaller we can do change the background color you do anything we want and we can just do that just in our HTML on our ad position so for instance we wanted to just wrap all of this stuff and a div with a class whatever or we could do that and then it would just you know make it smaller so I'm just gonna leave it the way it is for now cuz I like it being that big and here we see this that works so let's try this out let's say a styled blog post let's go bootstrap CSS author and men this is a post where the form was styled with bootstrap all right so let's post this boom here it is styled blog with post and it looks like it worked so we can pass not just the class for instance if we wanted to pass a placeholder text that appears inside of this box right we could do that too and so we'll just come back to our forms pie and I'll say the title tag just come up here inside of this Adar's this is a Python dictionary you can put as many items in a dictionary as you want just separating with commas so we can also go a placeholder any normal thing that you would put any input box so you can put in here so this is title placeholder okay so if we save this come back here and hit reload you see inside of here now it says this is title placeholder stuff and if we click on it and start typing that disappears because that's what placeholder text does in a form but that's just that easy so I'm gonna go ahead and take that out because we don't really want that but very cool so it's just that easy to style our forms so again we just create a form stuff pie file import R from it from Django import forms that's what all this stuff is we also want to import our model our post model and we just create a class name it anything you want it's a post form so I named it post form it inherits forms dot model form and again this is from forms right here that's this thing right here and model form there are different forms you can use we're using a database that has a model so we want to create form fields for all of our model stuff right so we use model form you can use just AI think there's forms dot form if you don't have a model you just want to create a form but doesn't really apply here so I'm not gonna talk about it inside of here we create a class meta and then just designate what our model is post we imported it right here set our fields right and then just create widgets for each of these fields and put your stuff so pretty simple and then the only other thing is in our views dot PI file remember we just import form class set it to the name of that post form and then up here at the top we have two from dot forms import that form write post form right there and that's all there is to it so pretty simple pretty straightforward and not too bad so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm which really helps the channel doesn't cost you anything and check out Cody Meachem or you can use coupon code youtube widen to get $30 off membership so pay just $49 to access all my courses over 40 courses hundreds of videos and the PDF versions of all my best-selling coding books join over 95,000 students learning to code just like you my name is John elder from Cody be calm and we'll see in the next video

Channel: Codemy.com

Views: 58,989

Rating: 4.9388981 out of 5

Keywords: django forms, django forms.py, django forms advanced, django form widgets, django form widgets example, django form widget style, django form widget css, django form widgets class, django form widgets css, Django forms bootstrap, django forms bootstrap 4, django bootstrap modal forms, django forms modelForms, django bootstrap model forms, django form bootstrap, django bootstrap forms, django tutorial, python django

Id: 6-XXvUENY_8

Length: 15min 45sec (945 seconds)

Published: Fri Apr 10 2020