Forms and User Input

Michele Saba
A free video tutorial from Michele Saba
Developer, Instructor, Consultant
4.6 instructor rating • 4 courses • 13,233 students

Learn more from the full course

The Complete Guide to Django REST Framework and Vue JS

Build Professional REST APIs and Single Page Applications with Django and Vue JS !

13:39:16 of on-demand video • Updated June 2021

  • How to build Backend REST APIs with Python & Django
  • How to use Django REST Framework and Vue JS to create powerful Single Page Applications, similar to those used by Google, Instagram and Twitter
  • How to build professional Production-Ready REST APIs with Python, Django and Django REST Framework
  • How to secure the REST APIs you will create with both Token and Session Authentication
  • All the basics of Vue JS and Vue CLI for creating reactive Components and Single Page Applications
  • How to create Real-World Single Page Applications with Vue JS and Django
English [Auto] Hello, everyone, and welcome back. In this lesson, we are going to learn how to handle user input with our application and how to properly use forms if you need me. So we are also going to introduce a new, very important directive, which is the model. Let's get started. You're wearing your coat, and as you can probably see, the HTML file that is currently opened in the editor is very similar to the one that we've used in the class and style binding lesson. And it also really opens the file in Chrome so that this is what it looks like. Let's now start modifying our code a bit. So instead of defining the color to use here, we can define color as a prop.. What data object and here you can specify which color we want to use for our circle and of course, because of how everything works, if we now go back to Chrome and refresh our page, as you recall, is steelier in this lesson. However, as the title suggests, we're going to talk about forms and user input. Let's now see what changes we need to make in order to use the V Model Directive to get input from the user that will then allow us to change the value of color. So let's go back to the HTML file. And, you know, one of the things that I really like about the fee model directive is that it allows us to create a two way binding between the properties of a data object and the inputs in our HTML pages. And this is really awesome because as we are now going to see the data provided by the input field, it's going to be available right away. So yeah, I'm not going to copy this div like so one and two times. And so I'm going to delete these Ignatiev and I'm going to define a paragraph instead we call our data and I'm going to interpolate the color. Property like so while on the other did go into the financial input field of type to with V o binding the caller property of the object. Let's now open up our browser once again. Let's refresh the page. And as you can see, we now have a text input and a paragraph both showing the current value of the color property in the data model. And because, as I said, this is a two way binding. As soon as we change the value here, the value assigned to color changes accordingly, you see, and therefore the whole application updates to reflect the new changes. And considering that the color property is also bound, you see to the background color property of the style attribute in our DB with class circle, we can also use some extra decimal combinations, such as, for example, to Doubleday ninety nine. And you see that everything works like a charm in a very elegant way. So not to starting to understand how the model directive works. Let's make another example. So first of all, I'm going to change the properties in the data model. So this is going to be taxed and maybe we can just use an empty string like that in here. And Boolean checked. True. And so going back to the HMO file, we are in the age of file. I can delete that circle class because we don't need anymore and they can delete this def altogether. Let's clear this other one and we're going to define a paragraph. So write a message. So let's not use a text area. We don't need a name or ID. And considering that we are using bootstrap, let's use class for control. Maybe a place holder. Write something columns, something like 60 and five should be enough, so I'm going to give a bit of indentation I want to. Three. For and of course, in this specific case, the most important thing that we need to define at the moment is the model passing text. And in fact, he did find a class. Call five bootstrap class, thanks to this way and another one right here below div class, call five and er another paragraph. So message no just like that. And yeah, the paragraph with text. So going back to Chrome now let's refresh now we are we can't write whatever we want. Hello everyone. This is super cool and you see it as soon as I'm typing something more of text of course is changing accordingly. Let's also use the. They have to also view and while we can actually place this right here at the bottom, I can close the console at the moment. And so. Roots, AFC, we got a detailed ject, so digital model itself with texta. And it is of course, it is changing, as you can see, let's now see how to handle boolean values like, for example, we got to check checked properties. So, yeah, we can use a checkbox going back here inside this second, if we can define imputes type checkbox and we can add an ID check box with VEP model bound on. Check, of course, and here we can add a label or label for our checkbooks, yet we can add two white spaces and then simply. I checked property, hey, maybe we can also add value. So let's go back. The browser refresh, and we actually have these small area because of the Qamar right there. Let's refresh it once again. And of course, at the moment the value is true because that's what we set in the data model. But of course, we can just change it by selecting or selecting the checkbox. Let's not see how to handle multiple options using select drop down menu. So er first of all, I'm going to define another property city, another string like so and so here I can in fact just copy this and div like so and here inside. I can now use a select input and we need neither name or ID we need instead we model on city like so and decide, OK, now what? All the different options. So option. No value is needed. Instead, you can define the different cities so wrong and you can add. New York near Shenzhen and zanamivir London and even Mumbai and you below, we can add a span like so I can add some spaces. And this is going to be key and, of course, your city. Let's go back to Cairo. Let's refresh our page. If we got a drop down menu also from New York, London, Shenzen and Mumbai, these are all, of course, pretty simple examples. However, they are important to understand how the model directive works, especially because nowadays, basically every application that you're going to write is going to require some kind of user input. So to use everything we've learned so far to create a simple comments application, we're going to have a forum to collect user input and write below a list of comments. So first of all, let's change the data object. I'm going to delete all these properties and instead I'm going to define comment as no and comments as an array of comments. Let's change the HTML file accordingly. So I'm going to delete all of these and. You are inside this other dive instead going to define form. We do need action because we're going to manage everything from within our application. And yet I can define a different class, considering that we're using bootstrap for control and yet we can define a text area, maybe rows eight and columns. We can add 80 ideas, maybe just comment text that we can define class for control. And this is in fact going to be for group. And most importantly, we need to define the model, of course. So we model on. Comment like so can indent all the other attributes as well and these. Like so and, well, maybe in fact, these can be five, and considering that we have energy, we can also define our label for common text. So published a comment. We now need, of course, to define a button, so button and again, we got to stretch. So class button, button, button primary. Of course this is button type submitted and in air, of course. Publish. So one. And to and if you now go back to refreshing the page, it is a form, you know, might be asking yourself, well, how can we use this for to actually add comments to a list of comments right here below? Typically, when pressing the submit button, all the data of the form would be sent to the backend and specifically to the URL defined in the action attribute. However, a single page applications work differently than that once the page is loaded the first time, meaning once the whole application is being loaded, you never want your page to refresh again in order to keep the user experience at its best in a single page application, JavaScript is going to be in charge of handling all the user input, sending it to the rest API backend when needed. And so using user, yes, we can now wait for the submit event of the form itself and once the event occurs, we can then call an appropriate method to manage all the data. So let's go to the main JS file. We are going to define methods and we are on submit it until we can add let new comment equals D dot com and then these dot comments dot pucher. And we want to add, of course you comment and we can now reset this, not comment to null. And then of course, going back to the HTML file here, we can add on submitter and you also need to specify dot preventer, which allows us to prevent the default behavior of the four that he's trying to send the data to an actual endpoint. And that is what causes the page to refresh. And yet, of course, we want to call our own submit method that will then, of course, manage all the data. And yet I see that I need to change the name like. So let's also define the code to show all the comments in the array. So we are going to define. And to right here below deve, we have class, we can add container and you are going to need another deve this time we can add class card, one of bootstrap classes we v for comment in comments and yet another def def. Plus, car, body and the side, we can add the comment like so, and if we now go back to Chrome and refresh the page, we can add a comment like, Hello World. And it is our Elsworth comment. Of course, we see that we can fix this style a little bit. So let's go back to the file and yet can remove the container. I can instead just use a RO. Like so, and yet I can define Deve with class, call like call 10. Move this one right here below. And I can do the same. For the other Deve, so what? To. You can move this one right here, so let's go back to Graham once again. Let's. Enlarge the screen, refresh your comment. And well, actually, we can make that even better, because if you had a comment now you see dead now touching so I can add a bit of margin in your car as well. So you are margin top one. Fresh, you know, one. Yet another. Also, we still have work to do, however, because as you can see, I can also add empty comments and that's not OK. We need to add some kind of validation to the input also on the front and side of our application. And it is actually pretty easy to do so. Let's go back to the main dodgiest file. And first of all, I'm now going to add another property here and did detail object errors, which I initialize as no and then er in their own submit method. First of all, let's check if the user has added any input. So if this comment in that case, we want of course to add it to at least like so, but otherwise we can add a message to errors. So these errors equals something like the comment field can't be empty. Let's update the formal code accordingly. So right here on top, I'm going to add a paragraph. And in the paragraph, I'm going to set the if adverse. We've plus we can add a bit of margin and even style text Alliant Center, and here we can add the errors. So errors. Like so and so, considering that we are now showing the errors, if a user tries to submit an empty comment, we also then need to hide the error messages after the user has sent a proper comment instead. And we can do that by setting your errors back to normal. So if these errors in that case, we said these errors to know like so so let's now go back once again to the browser like. So we need to refresh the page. So first comment, publish and everything is fine. Let's not try to publish an empty comment. We get an error message. The comment field can't be empty. So let's add a second comment published. And as you see, everything works fine and the error message disappears. OK, so that was it for this election about forms and user input in future? Yes. In the next election, we're going to learn how to use yes. Components which allow us to group our code in a powerful and reusable way, getting closer and closer to the final project of the course. See you in the next lesson.