Django Forms - Save Form Data to Database with Model Forms

hey everyone welcome my name is caleb and this is your introduction to django forms so this is a tool that django has that'll allow you to easily make html forms to take data and store that in a database now there's not really a prerequisite for this video however it is probably a good idea to have some basic django knowledge because we're not going to start from a completely blank project if you do want to start from a blank project and get up to this point then you want to check out my previous video which i'll link down in the pinned comment and that's going to be all about uploading images to django and for that we'll create a django project talk about uploading images and then this video we're actually going to create an html form where you can attach images and upload them to the server so even if you're not uploading an image these same principles are going to apply for example if you just want to get a username and password it's going to be a very similar process so let's jump into the code and take a look at what we have and what we are going to try and accomplish right now we have three main paths a path to the admin page which we'll use to check our database objects a movie's detail page where you can pass in the id of a movie and get all the information about it including an image and then the home page what these are going to look like while the homepage literally just responds with ok instead you could list out all the movies but this will do for now because all we're going to need is this movie detail page which will return the movie with that primary key or raise a 404 so we've built the functionality to upload a file to a movie object i mean you can see that all in the admin panel but now i want to create an html form where you can actually do the same thing but not through the admin panel as well as take the name of the movie as well as any other information you might want about it so to do this we're going to start by creating a url path to upload a file so we'll put that here and the path we'll just say is movies slash upload and the view this is going to hit will be views dot upload which we will create put a comma there now let's go into our views and create that view so we'll say def and i'm going to hide these files for now we're going to open that up in a minute when we need to create a template but for now we'll just create upload and this will take the request we're not going to need a movie id or anything like that because it will be generated when we insert it into the database so we don't have that information yet to start off we'll just render a basic template so this will use the render function and we're going to return that call so return render and that's going to take the request the template which we'll call movies slash upload.html and then the payload the data we want to pass and we'll talk about that in a moment but this is where we're going to pass in the form that we create in django so we'll create it on the python side and then just pass it to the html to be rendered so let's start with that and we'll go over and create that template so inside of templates movies and inside of here we will create upload.html and for now let's just render a paragraph saying upload alright so let's test that out on our webpage we will go to forward slash movies forward slash upload and you can see we get upload so everything's wired together right now all we need to do is we actually need to create the form and have it render on this page here and that's where the fun happens so we're going to create it's not that much fun but we'll try to enjoy it so new file forms dot p y and inside of here we're going to create a form and we can just call it upload form and similar to how our models will inherit from model stop model we're going to inherit from model form which we're going to import so we will say from django.forms import model form now there are other types of forms so not all of them are associated with a model the one we're going to be using for this video is going to be a model form and basically what that'll do is it'll directly tie the information you put here with the model you've created so we're basically going to have a name field and an image field i think this is the most likely use case you're going to have for forms however you can look into just a general form as well so inside of here we're going to put our attributes and the format's going to be pretty similar to how we defined our model where we just put the attribute and then what it's equal to and this is going to come from forms dot text input which is also going to need imported so we'll say from django import forms and we're also going to end up needing our model so we'll say from models import movie alright so we got name and then what's the other attribute we're looking for image so we'll say image and that's equal to forms image field now we're going to have another class in here which might look a little strange so it's a nested class and this is going to be called meta and this is where we're going to put all the metadata about our form where we define what the model is which is coming from this movie model in our models file and then what fields we actually want to show on the html page which you can just put inside of list so say name comma image so those are the two attributes we're looking for and those match exactly with these here name image so everything matches and is working i had the problem at one point where i accidentally named this something else and it wasn't saving that data to the model so that is how you create the form now inside of the view we're going to create an instance of this form so we'll do that inside of upload here we'll say form is equal to upload form which we can import this is going to take two arguments the first is request.post and request.files which will include that image we've included and we'll also just print this for now just so we can see it so we'll say request.files and then for the payload we can pass as an attribute form and we're going to pass in the form that we created right here so when we save this now inside of upload.html instead of rendering upload we could say form that's going to display the form so when you do a refresh on the page you'll get something like this where it asks for the name and then the image the formatting is kind of whack but you get the point now inside of the views we're going to do a little bit more because what happens if we actually submit that form so we put an image now this just gives you the bare basics where you have those inputs but there's no button and the form doesn't do anything so what we actually need to do is we need to wrap the contents of this in an html form so to look like this form and we'll surround it there we go and at the bottom of the form we can create a button which will submit the form so now you can put information in here hello choose a file and hit submit and you can see it has some automatic validation which is pretty cool so we'll go in here and choose some file hit submit and you can see that it did a refresh and the information went away so we can define where that information goes inside the html form with some attributes so we'll say form method is post and then action can be used to define a url so inside of here what we could do is use the url in django and this will be the view that we want to hit so we'll put upload here in single quotes and for this we want to make sure in our urls.py we give this a name so we'll say name is equal to upload fabulous the last thing we'll need to do is after the action we will say ink type so the encoding type and this is important if we want this to work we'll say multi-part slash form data so those are the three things you need for the form the method the action and the ink type so let's try it now we'll do a refresh give it some name like spider-man choose a file hit open submit the csrf verification failed we just need to include one more thing in our form and that's going to look like this where inside of curly braces and percent signs we just say csrf underscore token all right let's try this one more time we'll go back make sure the page is saved and we'll actually want to go back and then refresh spider-man open submit and now taking a look back at our server running you can see the image was received and we've been printing that out inside the view or say print request.files so now the only thing we have to do is with that request save the model to the database so for this what we're going to do is we're actually going to check if request.post then we're going to get an instance of that form print it out and we'll check if form dot is valid if that evaluates to true then we'll say form dot save after we do all that we can just redirect to the home page and that will be returned now for this variable down here which is defined only if that's true well that's not going to exist so we'll just actually just use the class instead which should work the same way so we'll say upload form and that'll actually fix the formatting as well so let's go ahead and do a refresh and try again we'll say spiderman choose file spiderman.jpg hit submit we go back to the home page and basically what happened is it takes that form data checks if it's valid it should be so it saves the data and then returns back to the home page regardless of whether the form is valid or not and we should be able to go to the admin page and see that data so we'll see admin movies movie object and you can see that image right there this has the id of eight so based on the code we built we should be able to go to movies eight and we'll see that information right there that's the bare basics with working with a model form inside of django which makes it very easy to take html form data and save it to the database there's obviously a lot more you could do with this we just did the bare basics but this should get you started thank you for watching and i'll see you in the next episode [Music] [Music] you

Channel: Caleb Curry

Views: 33,746

Keywords: python, tutorial series, tutorial, programming, code, coding, caleb, curry, intermediate python, intermediate, how to, django, django tutorial, django file upload, file upload, django image upload, file upload in django, download files in django, django files, how to upload files with django, django image upload and display, django imagefield, how to upload image in django, save data in django

Id: 6aQoW0TRXBk

Length: 10min 57sec (657 seconds)

Published: Mon Mar 21 2022