1 00:00:05,410 --> 00:00:10,690 Welcome back in this lecture we're going to show you an example of connecting an age female form to 2 00:00:10,690 --> 00:00:12,020 your flask application. 3 00:00:13,320 --> 00:00:18,000 In the H.M.S. of course we already learn how we can create in each team a forum for users to supply 4 00:00:18,000 --> 00:00:22,280 information and then reroute them to other page after they submit the form. 5 00:00:22,290 --> 00:00:27,570 Let's explore how we connect our flask application to these forms in one of the most basic manners. 6 00:00:27,570 --> 00:00:32,010 Later on in the next section of the course called forms we're going to cover forms in a lot more detail 7 00:00:32,070 --> 00:00:35,930 and show you much better ways of doing this before we head over to the text editor. 8 00:00:35,970 --> 00:00:39,000 Let me show an example of what our actual Web site is going to look like. 9 00:00:39,000 --> 00:00:39,240 All right. 10 00:00:39,240 --> 00:00:42,750 This Twitter page is going to look like we have a navigation bar home page. 11 00:00:42,750 --> 00:00:45,440 And when you click on this home page it'll take you back to the home page. 12 00:00:45,540 --> 00:00:46,770 It says Welcome to puppy rock. 13 00:00:46,770 --> 00:00:49,420 We're going to sign up for auditions to join this puppy band. 14 00:00:49,630 --> 00:00:51,090 We'll click sign up for auditions. 15 00:00:51,090 --> 00:00:52,980 OK welcome to the Sign-Up page. 16 00:00:52,980 --> 00:00:55,940 And you can provide a name like Jose Portsea. 17 00:00:56,040 --> 00:00:59,390 You submit the form and then say thanks for signing up. 18 00:00:59,400 --> 00:01:02,280 I notice that it's actually going to grab that session information. 19 00:01:02,320 --> 00:01:06,870 What I just provided my first and last name and report it back on the thank you page. 20 00:01:06,870 --> 00:01:09,700 Keep in mind we still haven't learned how to save this to a database. 21 00:01:09,720 --> 00:01:13,920 We're going to cover that in the future section of the course but we just have very basic functionality. 22 00:01:13,920 --> 00:01:17,700 We also have this navigation bar again if I click home page will take me back to the home page. 23 00:01:17,850 --> 00:01:21,870 Something else that we're going to add as far as functionality of the site is if someone goes the wrong 24 00:01:21,870 --> 00:01:22,570 your. 25 00:01:22,890 --> 00:01:27,360 For instance I just type in a bunch of jibberish Deryn it doesn't exist and enter we're going to show 26 00:01:27,360 --> 00:01:29,340 them a custom four or four pages. 27 00:01:29,340 --> 00:01:34,560 So this is our own custom four or four page we'll show you how to do that through app air handlers as 28 00:01:34,560 --> 00:01:35,090 well. 29 00:01:35,290 --> 00:01:35,790 OK. 30 00:01:35,900 --> 00:01:40,410 We got a lot to cover so let's head over to text editor and get started. 31 00:01:40,540 --> 00:01:42,220 Here I am at my text editor. 32 00:01:42,420 --> 00:01:47,800 I have a very basic application skeleton set up in port flask Brender template and the Lessin going 33 00:01:47,800 --> 00:01:51,610 to do is also import request from flask. 34 00:01:51,610 --> 00:01:56,410 So it's going to be using that to actually grab information from the HMO form. 35 00:01:56,410 --> 00:02:02,870 Now what I want to do is underneath my templates folder create a new file and I'm going to create a 36 00:02:02,870 --> 00:02:07,800 base team l file and I'm going to create a couple of more HTML files. 37 00:02:07,820 --> 00:02:12,780 So basically to tell us what we're going to extend from will say new here. 38 00:02:12,800 --> 00:02:14,810 Let's create an index page for us. 39 00:02:16,590 --> 00:02:19,840 Then it's basically going to be a sign up and think Page. 40 00:02:19,860 --> 00:02:22,230 So we create two more files. 41 00:02:22,230 --> 00:02:30,600 One is called Sign-Up h T.M. and then the last file is going to say new file will go ahead and say I 42 00:02:30,600 --> 00:02:36,770 think you T.M. so after the user signs up we go ahead and say thank you. 43 00:02:36,790 --> 00:02:41,020 OK so we have our basic thought PI what we're going to do is set up the views here and then connect 44 00:02:41,020 --> 00:02:43,130 them to some templates. 45 00:02:43,450 --> 00:02:45,960 Let's actually start off by editing the templates themselves. 46 00:02:46,000 --> 00:02:48,100 Since there's more work to be done there. 47 00:02:48,160 --> 00:02:54,220 First off we'll start with our base h T.M. first start off by just typing HTL and having that auto fill 48 00:02:54,220 --> 00:02:54,850 in. 49 00:02:54,850 --> 00:03:00,950 I'm going to copy and paste the links to the actual bootstrap code that we're going to be using. 50 00:03:01,030 --> 00:03:05,950 We delete this title here and then I recommend that you're going to copy and paste a lot from our files 51 00:03:05,950 --> 00:03:09,680 that we don't actually spend too much time worrying about getting everything correct. 52 00:03:09,700 --> 00:03:13,790 But essentially I just linked a title called Puppy rock style sheet. 53 00:03:13,840 --> 00:03:18,210 And the script from Bootstrap let me go ahead and it's close that so we get a little more room. 54 00:03:18,580 --> 00:03:23,600 And in the body what I'm going to do is set up a navigation bar will say Nav.. 55 00:03:23,770 --> 00:03:29,870 And then let's give this Nev. a class that matches up with our bootstrap essentially. 56 00:03:29,970 --> 00:03:34,860 It's very similar code to what we had before going to copy and paste that code right there. 57 00:03:35,070 --> 00:03:41,540 Well let's put an anchor tag intern avocation bar will have the class of the sink or tag be equal to 58 00:03:42,170 --> 00:03:47,180 nav bar Dasch brand and then Tref here. 59 00:03:47,580 --> 00:03:53,760 We're going to be using that Yoro for function that we just talked about and we're going to link that 60 00:03:53,760 --> 00:03:55,260 to an index page. 61 00:03:55,380 --> 00:03:56,880 So this should just take you home. 62 00:03:56,940 --> 00:04:01,680 So we'll have the actual XP Home Page So our navigation bar is going to have a little button. 63 00:04:01,680 --> 00:04:06,900 Home page looks like a brand meaning it's a little larger when you click on it it takes it to your index 64 00:04:07,200 --> 00:04:09,640 which you actually haven't defined yet and or that PI file. 65 00:04:09,660 --> 00:04:13,330 We will do so at the end so we have a base H.A.. 66 00:04:13,420 --> 00:04:17,830 I'm going to save this in in order to extend it to the other HTL files. 67 00:04:17,820 --> 00:04:24,420 What I need to do is create my block so I'll see block and then call this block content. 68 00:04:24,420 --> 00:04:25,500 Let me save that. 69 00:04:25,610 --> 00:04:27,970 Now we're going to move on to our index page. 70 00:04:28,080 --> 00:04:29,560 So let's do that now. 71 00:04:29,890 --> 00:04:34,000 So over here at our index page the essentially going to be the home page. 72 00:04:34,080 --> 00:04:38,080 First I need to say extends and we're going to extend from baseline. 73 00:04:38,110 --> 00:04:40,550 Each team will. 74 00:04:40,680 --> 00:04:46,500 And then I will set the block the block was called content and then what I want to insert here I'll 75 00:04:46,500 --> 00:04:50,220 say class is Jumbotron just so has a little bit of style to it. 76 00:04:50,310 --> 00:04:58,570 And let's say welcome to puppie Iraq and let's imagine users want to sign up for this band. 77 00:04:58,590 --> 00:04:59,990 It's a band full of puppies. 78 00:05:00,820 --> 00:05:10,220 So we want to sign up for our puppy band and then we're going to say here is just create a little link 79 00:05:10,280 --> 00:05:14,420 with an anchor tag and the anchor said will be your l4. 80 00:05:14,720 --> 00:05:21,290 And this is where they will go to the sign up form so I'll make another view called sign up form that 81 00:05:21,290 --> 00:05:24,050 directly links them to that Sign-Up page. 82 00:05:24,050 --> 00:05:28,040 And technically you can call these you or whatever you want as long as the function that you later import 83 00:05:28,040 --> 00:05:30,440 to your flask application matches that name. 84 00:05:30,650 --> 00:05:34,750 So just keep an eye on these names and make sure that they match the functions you're going to be creating. 85 00:05:34,790 --> 00:05:39,620 Since we have an anchor tag let's give it some text saying Sign up for auditions here. 86 00:05:39,620 --> 00:05:43,720 So you're going to audition for a band and that's pretty much the end of it. 87 00:05:43,750 --> 00:05:47,430 Simply the home page is just going to link to the sign up form page. 88 00:05:47,440 --> 00:05:51,850 Now go to sign up each table and see what the puppies who want to join our band are going to have to 89 00:05:51,850 --> 00:05:53,030 do so. 90 00:05:53,050 --> 00:05:54,220 We're going to have a forum here. 91 00:05:54,310 --> 00:06:02,220 But we first want to extend from that base team M-file will set up our block and this is going to be 92 00:06:02,220 --> 00:06:09,930 content and let's have this whole thing be in a jumbotron and you can always copy and paste here in 93 00:06:09,960 --> 00:06:13,960 case you're if I'm going a little too fast for you but hopefully you can keep up. 94 00:06:14,220 --> 00:06:20,670 We're saying Welcome to the Sign-Up page and we're going to do is just say 95 00:06:23,380 --> 00:06:26,260 fill out the form. 96 00:06:26,260 --> 00:06:29,890 Notice we don't save any info. 97 00:06:29,950 --> 00:06:31,330 That's something I want to make clear right now. 98 00:06:31,330 --> 00:06:36,130 We haven't really learned how to connect a form to a database that's coming in a future section so don't 99 00:06:36,130 --> 00:06:37,290 worry about that right now. 100 00:06:37,300 --> 00:06:39,680 Essentially it's going to happen with someone who visit this web page. 101 00:06:39,820 --> 00:06:40,890 They fill out the form. 102 00:06:40,990 --> 00:06:42,730 We hit submit or they hit submit. 103 00:06:42,730 --> 00:06:46,360 Then we take them to a thank you page but we're not actually going to store any of that information 104 00:06:46,360 --> 00:06:47,730 permanently. 105 00:06:47,740 --> 00:06:53,820 Now we're going to create our form in the sign up the H HTML page will save form and we won't go ahead. 106 00:06:54,650 --> 00:06:56,070 We'll remove that class. 107 00:06:56,070 --> 00:07:00,690 We also don't specify a method here because we're keeping things very simple and for the action. 108 00:07:00,690 --> 00:07:08,430 That's basically what page should it go to after we actually call this I'm going to say your L for. 109 00:07:08,600 --> 00:07:15,840 And we're going to take it to the think Page say think underscore you then we'll have a first and last 110 00:07:15,840 --> 00:07:23,860 name and put all say label and this will say the label for first or last the person or puppy for their 111 00:07:23,860 --> 00:07:28,700 first name and then we'll go ahead and connect it to an input. 112 00:07:28,770 --> 00:07:31,420 Will be text and we'll just give it the name first. 113 00:07:31,450 --> 00:07:32,430 No need to give it a value. 114 00:07:32,430 --> 00:07:38,390 In this case and then we're going to copy and paste this for the last name of the user. 115 00:07:39,530 --> 00:07:48,370 Well say last name and then call it last so that matches up with the sky right here last. 116 00:07:48,420 --> 00:07:56,760 And then finally we need a way to submit we'll type out input type is submit and it doesn't need a name 117 00:07:57,480 --> 00:08:01,730 we'll just give it a value like submit form. 118 00:08:01,730 --> 00:08:04,120 All right so there's our sign up H team out page. 119 00:08:04,430 --> 00:08:05,620 So now we're at the thank you page. 120 00:08:05,660 --> 00:08:06,930 Let's go ahead and fill this out. 121 00:08:06,980 --> 00:08:10,650 It's going to be pretty straightforward just something that says thank you to the user. 122 00:08:10,670 --> 00:08:20,620 So we just want to say extends and then we'll say basically each team will will say block content and 123 00:08:20,620 --> 00:08:25,230 we'll just have this be a Jumbotron that essentially says thank you so tough one. 124 00:08:25,300 --> 00:08:28,210 Thanks for signing up. 125 00:08:28,290 --> 00:08:33,570 Now what would be nice is if I was able to grab the first name and last name provided and then actually 126 00:08:33,720 --> 00:08:35,600 send it to the page. 127 00:08:35,610 --> 00:08:39,730 So what I'm going to do right now is just templating. 128 00:08:39,840 --> 00:08:44,390 I will say first and last. 129 00:08:44,490 --> 00:08:49,980 So now let's go back to our flask application and do kind of the heavy lifting here of connecting these 130 00:08:49,980 --> 00:08:53,960 three views to some functions or just three templates of functions. 131 00:08:54,030 --> 00:08:55,860 We'll start off with the first one which is the easiest. 132 00:08:55,880 --> 00:08:57,340 It's just the home page. 133 00:08:57,630 --> 00:09:01,420 So the home page is going to be essentially what we always do index. 134 00:09:01,470 --> 00:09:07,470 And then we're going to return render a template for indexed H. 135 00:09:08,100 --> 00:09:10,690 Then after that we want to set up the link for the Sign-Up form. 136 00:09:10,710 --> 00:09:18,440 So the app thought route and we'll go ahead and have this your Elby sign up form and then we want to 137 00:09:18,440 --> 00:09:21,790 call this function the same your all four though we chose earlier. 138 00:09:21,920 --> 00:09:25,290 So recall from the index page we have a sign up form here. 139 00:09:25,370 --> 00:09:29,710 So I want to copy this and make sure that my function name matches up that same way. 140 00:09:29,750 --> 00:09:37,970 So I'll say sign up form and here we're going to render the template which is going to say make sure 141 00:09:38,090 --> 00:09:42,470 I need to return this return rather template. 142 00:09:42,660 --> 00:09:45,240 And here I'm just going to say Sign thought Timo 143 00:09:48,300 --> 00:09:50,010 and then we'll say app thought route. 144 00:09:50,010 --> 00:09:52,810 So after they sign up we want to take them to the thank you page. 145 00:09:53,040 --> 00:09:54,340 So save forward slash. 146 00:09:54,360 --> 00:09:55,410 Thank you. 147 00:09:55,620 --> 00:09:57,180 And it can be thank you underscore. 148 00:09:57,180 --> 00:09:57,580 Thank you. 149 00:09:57,580 --> 00:09:58,480 Whatever you want. 150 00:09:58,640 --> 00:10:01,600 Well you cannot change is whatever you had yourself for. 151 00:10:01,650 --> 00:10:06,990 So on our sign the page we can see here that we're saying go to are L for think underscore you so we'll 152 00:10:06,990 --> 00:10:12,640 go ahead and copy that and then we'll bring it back to our actual flask application. 153 00:10:12,720 --> 00:10:18,270 So we'll come back to this and say the E-F think underscore you and it's quite common to make sure that 154 00:10:18,450 --> 00:10:21,590 this function name matches up with your name. 155 00:10:21,600 --> 00:10:25,980 It's not necessary but it's nice that we can directly relate the oral to the function. 156 00:10:25,980 --> 00:10:29,280 So go ahead and match it up here we'll say thank you. 157 00:10:29,550 --> 00:10:33,980 And then this is where we're actually using this request that we just imported. 158 00:10:34,140 --> 00:10:39,960 We're going to say is once the user actually fills out that Sign-Up form we technically have a live 159 00:10:39,960 --> 00:10:46,590 session with that user or we can grab information and the way we do this with an HMO form is the following. 160 00:10:46,590 --> 00:10:55,680 We say request Dot's args so the arguments of the request get and then we're going to grab first because 161 00:10:55,680 --> 00:11:01,830 the name if we take a look back at our Sign-Up HTL page notice we set the name for first in the name 162 00:11:01,830 --> 00:11:02,710 here for last. 163 00:11:02,730 --> 00:11:08,160 So that means we can actually grab those as the names of those requests objects that the user submits 164 00:11:08,250 --> 00:11:10,110 when they actually submit the form. 165 00:11:10,140 --> 00:11:15,240 We're going to grab that value for first that was provided in the HMO form will say first is equal to 166 00:11:15,240 --> 00:11:23,470 that request and we'll do the same thing for last and this is how we can grab that request session information. 167 00:11:23,470 --> 00:11:28,680 Now we're not going actually save this to a database that comes later in our studies. 168 00:11:28,690 --> 00:11:33,460 But right now we're essentially just grabbing that first and last name provided and then we're going 169 00:11:33,460 --> 00:11:41,530 to return render a template and say render a template for that thank you that HMO. 170 00:11:41,870 --> 00:11:50,770 And we're going to pasan first equal to first and last equal to lips last because remember on our page 171 00:11:50,820 --> 00:11:52,210 we take a look at it again. 172 00:11:52,390 --> 00:11:55,700 We have this first and last there. 173 00:11:55,740 --> 00:11:59,990 OK so there's our basic HTL Let's go out and make sure that we didn't make any mistakes. 174 00:11:59,990 --> 00:12:03,810 So I'm going to run this python basic pie to enter. 175 00:12:03,960 --> 00:12:05,460 Looks like I have no typos there. 176 00:12:05,550 --> 00:12:08,990 If you are getting a typo at this stage go ahead and copy and paste the code. 177 00:12:09,150 --> 00:12:10,850 Or just run our files directly. 178 00:12:11,040 --> 00:12:11,940 We did a lot of code here. 179 00:12:11,940 --> 00:12:14,010 It's really easy to make a typo so keep that in mind. 180 00:12:14,130 --> 00:12:17,630 It's always best just to use our notes directly so we don't waste time. 181 00:12:17,630 --> 00:12:21,240 But I'm going to come over here if my browser zoom in just a little bit. 182 00:12:21,240 --> 00:12:22,670 Our home page is looking good. 183 00:12:22,890 --> 00:12:23,910 Let's click on the home page. 184 00:12:23,910 --> 00:12:28,190 Notice it keeps reloading the home page that looks right reading click sign up for additions here. 185 00:12:28,320 --> 00:12:31,080 Click on that before we submit a first name or last name. 186 00:12:31,110 --> 00:12:32,430 Let's double check that nav bar. 187 00:12:32,520 --> 00:12:36,980 If I click on home page it should take me back to the home page so that nav bar is working out the URL 188 00:12:37,010 --> 00:12:37,680 for. 189 00:12:37,680 --> 00:12:38,810 That's good to know. 190 00:12:38,820 --> 00:12:40,020 Sign up for auditions. 191 00:12:40,170 --> 00:12:40,980 Let's sign up. 192 00:12:41,280 --> 00:12:45,900 Will say Jose Portsea and then it says fill out the form. 193 00:12:45,900 --> 00:12:50,210 Notice we don't save any info so that means we're not saving anything to our actual database. 194 00:12:50,340 --> 00:12:52,970 And here we can see it says thanks for signing up Jose. 195 00:12:52,970 --> 00:12:53,990 Portsea. 196 00:12:54,120 --> 00:12:59,080 Now we want to do is add in our own custom for forthought h tim L.. 197 00:12:59,190 --> 00:13:04,800 So we need to do is create an html template file to actually hold our 4 or 4 error code. 198 00:13:04,800 --> 00:13:12,040 So let's go ahead and add that in going to come back here under templates say new file and create one 199 00:13:12,040 --> 00:13:15,900 called for 0 4 h T.M. and let's that up. 200 00:13:15,910 --> 00:13:18,280 We need to do here are 4 or 4. 201 00:13:18,280 --> 00:13:22,630 It's going to extend just like all the other files from the base HTL. 202 00:13:22,690 --> 00:13:25,740 That way you can have the nav bar ticking them back to the home page. 203 00:13:26,020 --> 00:13:33,880 So I'll say block content and then essentially just add whatever message you want to occur when a user 204 00:13:33,880 --> 00:13:34,780 goes to the wrong page. 205 00:13:34,780 --> 00:13:45,720 I'll just have a little Jumbotron here that says Sorry could not find the page will save that. 206 00:13:45,820 --> 00:13:51,310 Now that we have our 4 or 4 h HTML file ready to go we need to connect it to a view so we'll come back 207 00:13:51,310 --> 00:13:54,580 to basic that pie and this view is going to be a little special. 208 00:13:54,640 --> 00:13:56,350 It's not going to be a normal app route. 209 00:13:56,350 --> 00:14:04,460 It's going to be app dot error handler careful not to make a typo here and you're going to pass in the 210 00:14:04,460 --> 00:14:12,560 4 0 4 error code and then we're going to do is save page underscore not underscore found and you get 211 00:14:12,560 --> 00:14:13,100 a. 212 00:14:13,130 --> 00:14:13,710 E. 213 00:14:13,970 --> 00:14:21,170 Technically you can be anything but by convention it's E for air and then we're going to return render 214 00:14:21,280 --> 00:14:27,630 underscored template and then whatever the name of your HTML file you want to show for a 4 0 for error. 215 00:14:27,920 --> 00:14:30,240 In this case we'll call it 4 for that HTL. 216 00:14:30,410 --> 00:14:34,450 Then you say comma for 0 4. 217 00:14:34,450 --> 00:14:40,920 Let's save that and run our file so running our flask application looks like it's running just fine. 218 00:14:40,920 --> 00:14:43,170 We're going to go back to the home page here. 219 00:14:43,440 --> 00:14:45,060 So have my home page and my browser. 220 00:14:45,060 --> 00:14:46,110 Sign up for auditions. 221 00:14:46,110 --> 00:14:47,330 That's still all working. 222 00:14:47,400 --> 00:14:50,420 But let's imagine that we spell a page wrong and we hit enter. 223 00:14:50,430 --> 00:14:51,710 Now we get the connection. 224 00:14:51,780 --> 00:14:56,700 Hey sorry page not found and we now have our navigation bar so they can go back to the home page instead 225 00:14:56,700 --> 00:14:58,700 of just saying that the fault Yoro. 226 00:14:59,160 --> 00:15:03,950 OK so that's the basics of connecting h HTML form to your flask application. 227 00:15:04,080 --> 00:15:08,770 Notice here we're a bit limited because we don't know how to save all this information to a database. 228 00:15:08,790 --> 00:15:13,770 It is there we're just grabbing the raw arguments from the request that the user gave. 229 00:15:13,770 --> 00:15:19,110 Later on we're going to see a much better way of creating a sign up form using a flask form library 230 00:15:19,110 --> 00:15:24,600 called WITF forms and that we can let Flast do most of the heavy lifting on the Python side instead 231 00:15:24,600 --> 00:15:27,210 of having to manually type out A-stan out forms. 232 00:15:27,330 --> 00:15:31,570 A lot of information is coming in the next section and then the session after that called databases. 233 00:15:31,620 --> 00:15:34,310 We're going to show you how you can actually permanently save this information. 234 00:15:34,470 --> 00:15:38,040 So step by step we're building more and more functionality interweb sites. 235 00:15:38,130 --> 00:15:40,230 Though we have to make sure that we walk before we run. 236 00:15:40,380 --> 00:15:44,780 So this is just the very basics of connecting a raw each time form to flask. 237 00:15:44,790 --> 00:15:48,720 Later on we're going to cover a lot more capabilities and a lot more detail. 238 00:15:48,840 --> 00:15:50,340 Thanks and we'll see at the next lecture.