#100DaysOfCode in Python Transcripts
Chapter: Days 85-87: Fullstack web apps made easy
Lecture: Processing add new document
0:00 We have our ad new document form here, and it's working pretty well in terms of UI, but it has no responsiveness, nothing happens right?
0:09 So let's go to the code side and add that. First thing that we want to do is we want to populate this combo box here. Now you can go type in the items,
0:18 if this was like a set of things you knew, like what color of items you want? we only have three colors, type it in here. Or what month of the year?
0:26 that doesn't change just type it here. But, when we're working with things that are going to change, like categories out of our database,
0:34 we want to do that in code. So, let's write some categories. Now, for just until we get to the database part, I'm going to just type them out here.
0:45 Let's suppose we have four categories that we're ultimately going to store in the database that can change and grow.
0:51 Then we'd able to do things like go to the database and say show me all the documents that have science,
0:56 that are tagged with science or something to that effect. So we'll go over here, and we'll go to self.dropdown.items I want to set that to two things.
1:06 What we need to do is give it a tuple, for everything in the categories, we want to give it a thing to show, and then the actual value.
1:13 So I actually want to have two things, I want it to start out selected with just nothing. So let's say something like this.
1:25 So, this is what's going to appear, the words select the category with the value of None, so we can test that they're selected nothing.
1:31 And in here, we're going to create a c, c maybe we'd use ID or something, for now we're just going to use this. For c categories, I'll test that.
1:43 Select a category, oh yeah that's sweet. Okay, so this is good. Now the next interesting thing really has to do when we click on this button.
1:53 I'm going to click on button six, so if I just double click right here, it's going to add that code. Let's tighten that up a little.
1:59 It's going to call this function. So we either want to save the thing and maybe navigate away, or if there's missing data,
2:08 like they haven't given it a name, they can't save it right? So let's do a little validation bit here. Now let me just type this out
2:16 and then I'll talk you through it. Alright, so we're going to do a quick validation. And the way we get the values, out of say the text box,
2:23 is just the dot text properties. And we're also going to strip that down, make sure they didn't just put white space.
2:29 For the drop down, it's selected value right, that's the second element right here. Either the text of the category or nothing.
2:37 And if they haven't typed anything into this textarea, a multiline text box, then we're going to say you can't create empty documents.
2:44 So let's go over here, we don't have to pass anything along, because these are all part of this object here. Now if there are errors, more than one,
2:54 we want to show them all. So we'll say if errors, and then what do we do here? Let's add a label where we can put an error, maybe give it a nice color.
3:06 We can use a little divider here like this. Here we go, made it a little bold, put it in the center, give it a nice red color, say this is an error.
3:20 Now when it runs, before there's errors, we don't want that to show up right? We don't see this is an error. So let's go and have that removed.
3:27 Also, I put a divider, but for the sake of size, let's do this. So at the beginning, we're going to come over here and just say clear this out.
3:38 But if for some reason there is an error, we want to set this. And let's actually do a cool little trick here. We'll say join on the error.
3:50 So when they get a list of errors, and then we're going to separate them with new lines, which preserve themselves from when this ges to the web.
3:55 So let's try this, try our validation. So if I just hit go, we should get three errors. Bam, look at that. Document name is required,
4:03 document category is required, and cannot create empty documents. Let's pick science. Now just the name is required.
4:10 The name, now some details have to be provided. Now that almost worked, didn't it? Actually, there's no more errors,
4:21 we just need to call this at the beginning every time. So let's go over here, and zero that out every time we validate,
4:29 or we could maybe do it here, take your pick. Or do it else, whatever. I'll leave it like this. Now once I fill this out, boom, it's gone.
4:42 That would've created the document if we had implemented.