7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.4 Create a Feed Form

We can now list the loaded feeds in a formatted HTML template. But how do we add new feeds? With a form, that's how! In this lesson, I'll cover the process of creating form models, and I'll show you how to create a mechanism for users to add new feeds.

3.4 Create a Feed Form

Okay, now we can finally get to a point where we want to be able to link off to another page that we've already created, and use that as a form to input a new feed into our application. So let's go back into our text editor, and the first thing that we want to do is come back to our feeds list, and we want to add a button in here because in some of the modifications that we were making, we lost that functionality. So let's come in here. We're gonna create an anchor tag again, and this is going to link off to url, in this case it's going to be 'new_feed' like that. Save that, and once again, we've already created that, as you can see here. We actually named it feed_new. Good thing that I looked. Feed_new, and we're just gonna say that this is gonna say New Feed, and we want this to use a class called btn. And there's several different btns here. We'll just use btn-primary, maybe, and we'll save that and we'll come over here, and we'll refresh our page. Now we can say New Feed and then maybe we wanna add in a little bit of formatting. I guess we could add in here a horizontal rule like that, save, come back. Just to kinda give it a little bit of space. Okay, something like that I think should be fine. So now when we click this button, we're gonna come over to our New Feed URL, but there's nothing there yet. So that's what we need to take care of now. Well, we've already started to put some of this information together. If we come into our view, we now have this new_feed view, but we're not doing anything here yet. But there is a step we have to get to before that. So typically what's gonna happen within Django when you start to work with forms, is like so many other things, we're actually going to create a new python file. So we're gonna come into news into our application here and we're going to specify new file, and we want this to be forms.pui. So this is gonna be a separate area where we're going to be able to define any sort of forms that we can use within our application. So the first thing we need to do is we need to bring in a little bit of help. So we're gonna say from django, we want to import forms. And like so many other things, there's a lot of built in features that we wanna take advantage of, and this is definitely gonna be one of them. Now, the next thing I wanna do is, I want to bring in the particular model, in this case, that I want to use as the base for this form, and that's going to be feed. So I'm going to say from.models. I want to import Feed because that's gonna contain all of the information, all of the properties, and pre-defined attributes that I want to be able to bring into this form. So now I'm going to create a specific form that's going to be for that feed. So I'm gonna make this a class. I'm gonna call this FeedForm. And just like when we created a feed before and we came in and specified it as being a model, we're gonna do something similar here. We're gonna specify this as being a ModelForm. So this is gonna help to generate a lot of the boilerplate that we're gonna need to happen so that we don't have to do it all by hand. Now, within this class, we're gonna specify a subclass which is an interesting feature of Python. So I can create classes within classes. And this class is gonna be called Meta. So, this is gonna be the meta data about the FeedForm, and we're gonna specify this as having a model. And the model is gonna be equal to Feed, so it's gonna be our model class. And then we can specify which fields we want to deal with. So this is actually going to be a list, so I can come and take a look at my models and I could use any of these that I want. I think right now all I'm really gonna care about is URL because the title is gonna get filled in automatically and the is_active is gonna be more of an administrative thing. So I don't think the end user should be able to do this. So they're just gonna pass in the URL. So let's just come back into forms, and we're gonna say that we want to use the url field. So let's just go ahead and save that. So now we've created this new feed form that we can now use, but now, how do we go about using that? Well, we need to go back into our views, and now within this new feed, this is where I want to be able to use this. So I'm gonna come into the top of my file and I'm gonna say from .forms, cuz I wanna go and import my new feed form, so I wanna be able to use that. So I'm gonna come into this view and I wanna say that form = FeedForm. So this is gonna create a new instance of a FeedForm. And then I wanna pass that information to my template just like this. So, I'm gonna save it. So, that's why I kind of left that stuff blank for the time being, so that I could create this form and then pass it to the templates. So, I've saved that. Now let's go back over to Chrome, and let's refresh this page, and we're gonna get an error. It says here that Meta.fields cannot be a string, did I mean to type this? So this is another little gotcha when you're doing it this way. So because we have only specified a single field in here, we have to put in a comma so that it know internally that this is actually going to be a list. So now I can refresh this, and now we're getting things to work again. So now I have to actually take that information that we're passing via the form and present it in our new view. So let's come into, we're in our new template. So let's go into new_feed, and, in order to save time, I'm going to copy and paste some of this. So I still want to extend my base, I still want everything to kinda work as it was before. And I'm gonna specify my content here. And then I'm gonna say that this is going to be a New Feed within my jumbotron. And you can get rid of this thing, you don't have to keep it. I just think it's kinda cool. Now we'll come in here, and within our container, I want to start to put some information in here. I want to take some of that information that's being passed via my form and put it in here. But the first thing that I need to do is I want specify that we want to create a form, that's ultimately what we're doing here. And I want this form to be in the form of a method that's going to ultimately post this data back to the server, and then within here I need to do something with some data. Now the way that we do this within Django is we're going to use our open and close curly brackets, and then I'm gonna refer to form cuz that's the data that I passed in. And I can use a function as_p, which is going to take care of some cool formatting for me and you'll see that in just a second. And then we need to create a submit button here, so let's create a button. And the type is going to be submit, and I really don't need to worry too much about the name for now. And I'm just going to have this take on a couple different classes, we'll just say that this is gonna be a button, and we'll say that this is gonna be a btn-primary again and we're gonna call this Save. So let's go ahead and save this. So now I've simply created a simple form with a method post. I'm using a special function on that form as_p. And then I've created a submit button here so that I can actually send that data back. So let's save all of that, come back here, and now let's refresh our page and now we see that we get a Url here. So I have a little button here or a little text box here which I can input some information into, and then hit the Save button. So if I were to say something like www.google.com, now I know this is not a news feed, but if I were to hit Save at this point, what would you expect to happen? Well, if I hit Save, well, we're gonna see here that it's not really happy. It says you want to enter a URL. And one of the things about using the URL as a type is that we're gonna get a little bit of complaining there. So I had to put in the http. Now we get a forbidden. Now this is a nice little feature that's coming to you through Django by default, is that there's no verification here of a CSRF or a Cross Site Request Forgery. So Django is kind of cool in that it is going to have a little bit of security built in for you. So what I can do is I can come in here, and what I'm actually going to have to do is within my form, I can do it pretty much anywhere in here, I need to run a little bit of code. And all I have to do in here is I have to come in here and say csrf_token, and then I'm actually going to maybe do a horizontal rule in here again, just to give a little space. So, let's come back in here. Let's refresh our page. Let's put in here google.com again, and actually I'm gonna have to do http.www, and I can hit Save. Well, I didn't get that error anymore, but everything just kind of disappeared. So what the heck is going on here? Where is my information? What am I gonna do next? Well, that has to do with processing the information coming back to your application, your Django application, on that post request. And in the next lesson I'm gonna show you how to handle just that.

Back to the top