Adding a CMS to Your Flask Web App Transcripts
Chapter: The redirects (our bit.ly)
Lecture: Add redirect HTML form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
well, we have our view methods for the get the post and eventually down here The redirect pattern to add in your redirect and the kind of looks like,
0:12
Well, maybe that's good. Does say, needs work. But let's see how it's doing over here. Try to add a new re drinks.
0:18
Oh yeah, that's right. We need to actually have the HTML that corresponds to it. So that's what we're gonna do in this video and remember it it an
0:27
ad are the same thing besides one very, very minor detail, right? It's like add is ah,
0:34
simplified case of editing. So we're going to just use the same HTML template for both. Now let's just go on copy.
0:42
This one remembers almost always easier to copy, cause you got all that like this template inherits from that template.
0:48
Business doesn t edit redirect over here. And let's just do a quick move around,
0:55
but sent here to be edit redirect are actually are working on ads was to add
1:00
then remember over here he would have the ability to like a rollback a step here and say, We want to go back to that me.
1:07
And this time we want to go back to redirects, so wherever you are going to go a step back redirects Okay,
1:15
this is looking good. We don't need that bit. We want to change this to a form that's nice and easy. And there's two things we have to set first.
1:25
The action I said it to It looks like nothing. But what it really means is don't modify the URL.
1:31
Just leave it where it is and send it back to the same place. And the method is to be post. Okay, well, that's good.
1:40
Now we're gonna need ways to put data in Tory semaphore. So let's have an input and have the type equals. Text is good. The class from boots drop,
1:51
it's gonna be form control. Now, let's set a few other things we're gonna need to set the I. D. In the name. Technically,
2:00
I think ideas optional, but let's just set him a case. We want to do any CSS against them. This is gonna be the name.
2:07
Remember, Our redirects have three pieces of information. The name that describes them, the short euro like slash bites and the destination rule
2:15
like https by them bites out of him. So this is the name and that makes sense that here. But this is a little weird.
2:21
Name equals name. What is that about? Well, this name attribute tells you the key that you're gonna receive the value of
2:31
the name of the variable you receive on the server side. And then the value in this text box is gonna be the value so later will
2:38
have, like short your own. That name equals four year old. That's normal, but name equals name is weird, but in the last 30 is one of a placeholder.
2:46
So if there's no tax, this will tell people what to type. And then if there's text there,
2:52
the placeholders gone so we wouldn't be able to hover over that and, like, have a title pop up or maybe of a screen reader or something.
2:59
Show it, then. Finally, we want to have this required so that people enter it. All right, well, that's it for this one.
3:07
The short your ah, longer all they're all gonna be the same. Great. There we have the three pieces of data.
3:15
Now, what's not obvious is we're also gonna need to pass around something that doesn't change this more matters in the edit mode,
3:21
but more were working out. Let's go ahead and do it now we're gonna pass around an I D bypass around the i.
3:27
D. This will let us change all three of these pieces of information at once and still get the same thing back in and save its one of a input type
3:36
equals hidden name equals I d. Then this is the weird one. This time I d equals I d.
3:44
Okay, and I finally just submit it will need a button type not a but Tom Thumb, but a button and the type will be submit.
3:54
Let's give it some cool look with some classes. BTM, VT. And Dash Danger for a nice red button. This will be add. Redirect later,
4:03
edited again like the title above will fix this. It's pretty close to being done. Let's do one more thing. While we're just typing away over here,
4:11
there might be some kind of error like they tried to create. I redirect with a short girl and then already existed,
4:18
So we're gonna have to tell them you can't great that already exist if you want to edit it. You're gonna have conditional here.
4:27
So it's gonna be an error that we may wanna show. If we do, we'll have a div with class error message. And in it we just put air.
4:41
Okay, I think that this might do it. Let's go try to refresh. We're here. Yes, sort of. I would prefer that to not be stuck there.
4:50
Let's go fix that. And I'm gonna fix it by just putting it on top The very, very top if we go back. Perfect. Now we can add Excellent.
5:01
And we put stuff, you know, Let's go and make a quick change here. And let's just print, got data into this one. We have the view model,
5:16
which has a request dictionary, which it gets all the data from the headers from the cookies from the forms from the Urals.
5:24
All that stuff so we can just see kind of a unified view of all the stuff that's getting submitted back. Let's put some stuff in here.
5:31
So we're gonna go to talk. Python could be talk and talk with them like that. See what happens. Okay. What just happened? The data one away, actually,
5:42
When it did is a request back to the server. It processed it and then it just stayed here. That's fine. We'll deal with that in a minute.
5:49
But let's see what the output waas. So down here, we got our requests. Come in. And then look at this right there.
6:00
All this date is coming in with a way to the right. This is the data that we actually care about.
6:06
We've got the name is talk with on the short girls talk, the destination urinals. This and the idea is empty cause it's a new one.
6:12
Not one being edited. That already has an i. D. Awesome. It looks like our HTML form is working.