1 00:00:00,000 --> 00:00:03,904 [MUSIC] 2 00:00:03,904 --> 00:00:05,668 [SOUND] To build our web app, 3 00:00:05,668 --> 00:00:09,744 we need a few more pieces of Flask's provided functionality. 4 00:00:09,744 --> 00:00:12,740 Also, we're gonna be using several images and some pre-built CSS. 5 00:00:12,740 --> 00:00:15,640 So make sure you start with the work space associated with this video. 6 00:00:16,640 --> 00:00:19,740 Something pretty much every web app uses are forms. 7 00:00:19,740 --> 00:00:22,370 There are a lot ways out there for handling forms in Flask, but 8 00:00:22,370 --> 00:00:24,750 we're just going to use them directly for this course. 9 00:00:24,750 --> 00:00:25,930 Let's check them out. 10 00:00:25,930 --> 00:00:27,600 We're gonna start a new project. 11 00:00:27,600 --> 00:00:34,810 So I'm gonna go ahead and create a new app.py, and you 12 00:00:34,810 --> 00:00:37,710 can see that we already have a templates directory and a static directory. 13 00:00:39,070 --> 00:00:43,310 This is thanks to you know the magic of editing and 14 00:00:43,310 --> 00:00:45,970 our awesome designers here at Treehouse. 15 00:00:45,970 --> 00:00:49,080 so don't worry about what's in there we're gonna modify some of 16 00:00:49,080 --> 00:00:51,890 what's inside templates but not what's inside static. 17 00:00:52,900 --> 00:00:54,850 And the options are something I set up for us. 18 00:00:54,850 --> 00:00:56,250 already so we don't have to build it. 19 00:00:56,250 --> 00:00:57,350 while we're building the app. 20 00:00:57,350 --> 00:00:58,150 It basically just. 21 00:00:59,340 --> 00:01:02,890 Kind of defines what our options are, hence it being called options. 22 00:01:04,010 --> 00:01:11,530 So let's go ahead and create our Flask app which means to import flask, and 23 00:01:11,530 --> 00:01:17,250 we need to make our app, and we need to run our app. 24 00:01:18,750 --> 00:01:23,160 And again we have to specify our host, and our port. 25 00:01:25,540 --> 00:01:29,524 All right, so let's go ahead and actually get this running. 26 00:01:29,524 --> 00:01:36,697 Python app.py and then I'm gonna open that up. 27 00:01:36,697 --> 00:01:40,836 [BLANK_AUDIO] 28 00:01:40,836 --> 00:01:42,260 There we go, we've got that. 29 00:01:43,720 --> 00:01:45,490 Off to the side, awesome. 30 00:01:45,490 --> 00:01:47,410 All right. So there we go. 31 00:01:47,410 --> 00:01:51,920 We get the not found, cuz there's nothing there's no routes yet. 32 00:01:51,920 --> 00:01:55,980 So we should probably add an app, add a route, right? 33 00:01:55,980 --> 00:01:57,200 So let's render a template. 34 00:01:57,200 --> 00:02:04,090 Let's, @app.route for that home page there. 35 00:02:06,040 --> 00:02:15,080 Index, return render, template index.html. 36 00:02:15,080 --> 00:02:19,080 Okay, so let see what that does. 37 00:02:21,310 --> 00:02:22,010 Render template is not defined. 38 00:02:22,010 --> 00:02:24,060 That's because I forgot to import it. 39 00:02:24,060 --> 00:02:25,246 So let's import that. 40 00:02:25,246 --> 00:02:28,049 [BLANK_AUDIO] 41 00:02:28,049 --> 00:02:28,983 All right. 42 00:02:28,983 --> 00:02:31,752 [BLANK_AUDIO] 43 00:02:31,752 --> 00:02:32,540 All right. There we go. 44 00:02:32,540 --> 00:02:37,080 So we've got this cute little bear. 45 00:02:37,080 --> 00:02:38,670 We gotta form. 46 00:02:38,670 --> 00:02:40,540 But that form is probably not going to do anything. 47 00:02:40,540 --> 00:02:41,970 Lets, lets look at our template. 48 00:02:43,700 --> 00:02:46,180 And yeah that form's not going to do anything. 49 00:02:46,180 --> 00:02:48,330 It's just going to post right back to itself. 50 00:02:49,350 --> 00:02:57,360 So what that means is that we have to tell this where to send its information to. 51 00:02:57,360 --> 00:02:59,840 What I want to do is I'm going to write. 52 00:02:59,840 --> 00:03:03,230 I'm gonna write a new method or a new function rather. 53 00:03:03,230 --> 00:03:10,220 Let's go over here, and let's make a new one that's called save. 54 00:03:11,380 --> 00:03:19,310 And I want this to only be accessible, if you post to it. 55 00:03:20,890 --> 00:03:22,150 'Kay. 56 00:03:22,150 --> 00:03:24,270 So since I only want you to post to it. 57 00:03:24,270 --> 00:03:28,560 What I want to do is you know right now we're gonna call this save. 58 00:03:28,560 --> 00:03:34,127 Let's just have it return Saved. 59 00:03:34,127 --> 00:03:37,010 All right. 60 00:03:37,010 --> 00:03:41,090 And over here we're gonna add a new item. 61 00:03:41,090 --> 00:03:42,760 We need to tell it. 62 00:03:42,760 --> 00:03:51,590 To print out the URL for a method or for a function rather, which is called save. 63 00:03:51,590 --> 00:03:52,960 So it goes and looks at save. 64 00:03:54,470 --> 00:03:57,330 Figures out what the route it and goes, oh, it's save. 65 00:03:57,330 --> 00:03:58,180 Okay. Cool. 66 00:03:58,180 --> 00:04:00,825 So, that's where we're going to send it. 67 00:04:00,825 --> 00:04:02,761 All right. 68 00:04:04,120 --> 00:04:05,152 Refresh this and 69 00:04:05,152 --> 00:04:09,800 we're gonna name the bear, I'm gonna name I'm gonna name the bear Mike. 70 00:04:09,800 --> 00:04:12,200 Let's build it. 71 00:04:12,200 --> 00:04:13,170 Yea! I hit Save. 72 00:04:15,200 --> 00:04:17,370 So, that's fairly straight forward. 73 00:04:19,210 --> 00:04:25,130 Let's actually make it to were we, we don't do this we just get redirected back 74 00:04:25,130 --> 00:04:30,480 we need to import a new thing so from flask import redirect 75 00:04:32,470 --> 00:04:37,030 and from flask import url_for. 76 00:04:37,030 --> 00:04:38,830 We can actually do all these together, so 77 00:04:38,830 --> 00:04:45,190 let's just do render_template, redirect, url_for. 78 00:04:45,190 --> 00:04:47,660 That way we can have them all down there. 79 00:04:48,740 --> 00:04:51,870 And what we want to return is a redirect. 80 00:04:53,090 --> 00:04:57,704 We want it to redirect to the url_for index. 81 00:04:57,704 --> 00:05:01,350 All right? 82 00:05:01,350 --> 00:05:02,190 So, let's go back. 83 00:05:03,570 --> 00:05:04,640 There's Mike. 84 00:05:04,640 --> 00:05:05,680 Build it. 85 00:05:05,680 --> 00:05:07,410 Brings us right back. 86 00:05:07,410 --> 00:05:08,210 All right. 87 00:05:08,210 --> 00:05:09,360 So that's pretty cool. 88 00:05:09,360 --> 00:05:12,060 We handled it, it redirected back to us. 89 00:05:12,060 --> 00:05:16,140 You know, let's actually let's see what's happening, 90 00:05:16,140 --> 00:05:21,260 when we do the redirect, like let's see what comes in from this form. 91 00:05:21,260 --> 00:05:25,940 The easiest way to do that, is to go in 92 00:05:25,940 --> 00:05:31,100 here and bring our own old friend pdb. 93 00:05:31,100 --> 00:05:34,720 So, we're gonna set a trace right there. 94 00:05:36,190 --> 00:05:37,390 Make this a little bigger. 95 00:05:37,390 --> 00:05:38,950 That should give you a hint of what's going to happen. 96 00:05:40,190 --> 00:05:40,690 All right. 97 00:05:41,720 --> 00:05:45,070 And you know what, just to make sure that we have the information let's 98 00:05:45,070 --> 00:05:46,510 import request up there. 99 00:05:47,730 --> 00:05:48,470 Okay. 100 00:05:48,470 --> 00:05:49,760 So we do this. 101 00:05:49,760 --> 00:05:54,090 We have Mike the bear and here, well let's see what we have. 102 00:05:55,990 --> 00:05:56,740 We just have PDB. 103 00:05:59,230 --> 00:06:00,960 Do we have request? 104 00:06:00,960 --> 00:06:05,290 We do, there is a request, there's a whole lot of stuff here, so 105 00:06:05,290 --> 00:06:08,430 luckily I know what it is that we need to look for. 106 00:06:08,430 --> 00:06:11,820 What we want to look for is inside request, 107 00:06:11,820 --> 00:06:17,478 there's a thing called form which is this immutable multidict. 108 00:06:17,478 --> 00:06:19,654 I'm really not sure what it means by multidict, but 109 00:06:19,654 --> 00:06:21,530 immutable means that we can't change it. 110 00:06:21,530 --> 00:06:29,120 And so what this tells us is that we have name as a key and Mike is a value. 111 00:06:29,120 --> 00:06:30,370 So that's pretty cool. 112 00:06:30,370 --> 00:06:33,160 I'm gonna go ahead and let the view continue. 113 00:06:33,160 --> 00:06:36,180 And then I'm gonna take PDB out of my view, 114 00:06:36,180 --> 00:06:37,995 cuz I don't wanna have that just hanging around. 115 00:06:37,995 --> 00:06:42,133 [SOUND] Great, we have a form and 116 00:06:42,133 --> 00:06:47,074 we've seen how to read data from it. 117 00:06:47,074 --> 00:06:50,670 In our next video, we're going to look at using cookies to store and retrieve data.