1 00:00:05,350 --> 00:00:06,800 Welcome back everyone. 2 00:00:06,820 --> 00:00:10,500 Over the last few lectures we did a lot of work for the users. 3 00:00:10,570 --> 00:00:16,420 So that was setting things up like the views for the users and the templates as well as special views 4 00:00:16,420 --> 00:00:20,130 and templates like viewing all the users blog posts. 5 00:00:20,140 --> 00:00:25,060 Now we want to do is actually make sure that we've set up enough so we can test run the site. 6 00:00:25,060 --> 00:00:29,680 We still won't be able to create blog posts or view blog posts in particular because we haven't created 7 00:00:29,680 --> 00:00:30,800 anything for that. 8 00:00:30,910 --> 00:00:35,170 But we can still test from the site to at least make sure that we're able to register and log in as 9 00:00:35,170 --> 00:00:37,510 users and ordered to do that. 10 00:00:37,510 --> 00:00:39,340 We can do a couple more things. 11 00:00:39,340 --> 00:00:41,710 First remember that we created a lot of forms. 12 00:00:41,800 --> 00:00:47,260 So we're going to want to set a secret key in our in it thought Paey file for the forms to work. 13 00:00:47,260 --> 00:00:52,300 Then we're also going to fix the navigation bar in our baseline h T.M. right now regardless of what 14 00:00:52,390 --> 00:00:54,190 users logged in or logged out. 15 00:00:54,280 --> 00:00:59,910 They still get to see every single possible link or log out register log in all at once. 16 00:00:59,950 --> 00:01:03,080 So we want to fix that with some quick if statement checks there. 17 00:01:03,250 --> 00:01:09,310 Then we also haven't actually used flask D-B commands to initiate and migrate our models to the database. 18 00:01:09,340 --> 00:01:10,700 So we'll be doing that as well. 19 00:01:10,930 --> 00:01:15,670 Once we do these three main things we should be able to get enough that we can actually debug and make 20 00:01:15,670 --> 00:01:17,570 sure our site is working so far. 21 00:01:17,590 --> 00:01:21,940 Keep in mind anything that's really related to a blog post is still not going to work correctly because 22 00:01:21,940 --> 00:01:25,040 there are no views or templates for blog posts right now. 23 00:01:25,310 --> 00:01:26,980 OK let's get started. 24 00:01:27,350 --> 00:01:27,610 OK. 25 00:01:27,610 --> 00:01:29,250 Here we are back of the project. 26 00:01:29,320 --> 00:01:35,170 Let's begin by making sure we set a secret key that we all the forms we created work so we'll come back 27 00:01:35,170 --> 00:01:37,000 to our PI file. 28 00:01:37,030 --> 00:01:40,060 Remember this is the one underneath the puppy company blog. 29 00:01:40,150 --> 00:01:43,580 So that and at that pie we've created our application here. 30 00:01:43,710 --> 00:01:50,250 All we need to do is say app config and set the secret key as we've done many times before. 31 00:01:50,290 --> 00:01:59,070 So say secret key equal to my secret and then later on when we actually cover real deployments We'll 32 00:01:59,160 --> 00:02:03,950 talk about how to actually set this as an environment variable so you don't have in your actual code. 33 00:02:04,020 --> 00:02:07,460 But right now since we're just kind of practicing locally we'll set it right here. 34 00:02:07,620 --> 00:02:07,860 OK. 35 00:02:07,860 --> 00:02:13,220 Once you've saved that let's go back to our base each time I'll file and Interbase the H to him file 36 00:02:13,230 --> 00:02:15,500 remember this has the links to the C Ss and J. 37 00:02:15,500 --> 00:02:22,140 Crew files for bootstrap as well as our navigation bar under based thudded T.M. And if like collapse 38 00:02:22,140 --> 00:02:23,270 the left hand tab. 39 00:02:23,490 --> 00:02:28,170 Remember that right now we're showing everything once a user is on the Web site we're showing them both 40 00:02:28,170 --> 00:02:33,750 log out accounts log in and register all at once which doesn't really make sense now that we have capabilities 41 00:02:33,750 --> 00:02:35,600 for users to be authenticated. 42 00:02:35,610 --> 00:02:41,430 So instead let's add add in a little bit of logic here to make sure that it's going to work as we expect 43 00:02:41,480 --> 00:02:43,030 once the users log in. 44 00:02:43,080 --> 00:02:48,290 Then they can log out check their account or create a post or they can log in and register. 45 00:02:48,300 --> 00:02:49,970 So let's fix that now. 46 00:02:50,070 --> 00:02:54,960 We're going to come first up here and we can do this which is really a simple IF statement and then 47 00:02:55,050 --> 00:02:57,450 adding in some links. 48 00:02:57,500 --> 00:02:59,710 So right here I'm going to say the following. 49 00:03:00,820 --> 00:03:11,320 I'll say if the current user is underscore authenticated remember we get to use that because we're using 50 00:03:11,320 --> 00:03:17,460 Flast loggin kind of all of this is handled for us in the bacchanals McCrary spell that right is authenticate. 51 00:03:17,560 --> 00:03:18,240 There we go. 52 00:03:18,490 --> 00:03:22,930 So if the current users authenticated that means they're already logged then we'll give them the option 53 00:03:22,930 --> 00:03:26,850 to log out check their account or create a post. 54 00:03:27,190 --> 00:03:32,710 So else we're going to do reps will say else 55 00:03:35,470 --> 00:03:36,970 else that means they're not logged in. 56 00:03:36,970 --> 00:03:39,510 We'll tell them to either log in or register. 57 00:03:39,670 --> 00:03:43,120 And remember with Jinja templating we have to end this statement. 58 00:03:43,150 --> 00:03:46,560 So after that we'll just say right here. 59 00:03:47,120 --> 00:03:50,320 And if and then save those changes. 60 00:03:50,330 --> 00:03:50,790 OK. 61 00:03:51,020 --> 00:03:57,800 So we have the current users authenticated else and then and if so log out account create post log in 62 00:03:57,800 --> 00:03:58,720 register. 63 00:03:58,730 --> 00:04:00,480 Now it's actually add in some links here. 64 00:04:00,530 --> 00:04:07,380 These refs will take us somewhere so I'll start with the log out one so we'll say your all. 65 00:04:07,580 --> 00:04:11,250 And in this case it's users log out. 66 00:04:11,390 --> 00:04:15,350 And I'm actually going to copy this because the rest of them are actually quite similar. 67 00:04:15,380 --> 00:04:17,330 So for accounts it's the same thing. 68 00:04:17,560 --> 00:04:22,770 Instead sort of the log out you were going to have them view the account view and then for create post. 69 00:04:22,790 --> 00:04:27,200 We actually don't have that view yet so I'll leave that as just an empty hash tag log in. 70 00:04:27,200 --> 00:04:30,710 We do have that in our users view that's not logged out. 71 00:04:30,740 --> 00:04:33,200 That's going to be log in and then register. 72 00:04:33,200 --> 00:04:36,790 Same thing here except it's going to be users that register. 73 00:04:36,800 --> 00:04:39,750 So that way our navigation bar actually takes us places. 74 00:04:39,950 --> 00:04:42,000 So we're going to save those changes there. 75 00:04:42,020 --> 00:04:42,640 OK. 76 00:04:42,770 --> 00:04:47,870 Now that it's all set up for an aggregation bar let's actually commit the changes for the models that 77 00:04:47,870 --> 00:04:53,150 apply follow we created earlier since technically we haven't actually pushed any changes using Flast 78 00:04:53,180 --> 00:04:54,950 the being Flast migrations. 79 00:04:55,160 --> 00:04:59,870 So remember in our in at the PI file you should already have everything set up for your database as 80 00:04:59,870 --> 00:05:02,250 well as a sequel alchemy and migrate. 81 00:05:02,330 --> 00:05:06,930 Now what we need to do is actually run those flasks D-B commands. 82 00:05:07,010 --> 00:05:14,850 So right here a flask examples on the say flask D-B in it hit run or hit enter really to run all that. 83 00:05:15,080 --> 00:05:16,350 So you should see something like that. 84 00:05:16,400 --> 00:05:25,610 And then we're going to say flask D.B migraine and let's give ourselves a little message like first 85 00:05:25,610 --> 00:05:27,310 migration. 86 00:05:27,450 --> 00:05:31,460 Enter let that migrate should see a bunch of lines and then it says done. 87 00:05:31,590 --> 00:05:32,870 And then finally we'll do the following. 88 00:05:32,870 --> 00:05:39,050 We'll say flask D-B upgrades actually push those migration changes. 89 00:05:39,170 --> 00:05:43,720 So run all that and you hopefully don't get any errors there if you do get an error. 90 00:05:43,730 --> 00:05:48,650 That means there's probably something wrong either with your PI file setup or your models that PI file 91 00:05:49,040 --> 00:05:53,730 and I would recommend that you use our provided notes if you are getting some errors at the step because 92 00:05:53,730 --> 00:05:59,420 that's usually the kind of parts of the bug like very minor typos somewhere in it that PI file or your 93 00:05:59,480 --> 00:06:00,590 models that PI file. 94 00:06:00,620 --> 00:06:04,220 So make sure copy and paste from our notes and Kiska any errors there. 95 00:06:04,240 --> 00:06:04,720 All right. 96 00:06:04,730 --> 00:06:07,850 Now that that's been run we should be able to register new users. 97 00:06:07,880 --> 00:06:11,600 So let's actually run our application and see if all the changes worked. 98 00:06:11,600 --> 00:06:15,640 So we're going to say Python app that PI enter and it looks like it's running. 99 00:06:15,640 --> 00:06:17,180 So that's always good news. 100 00:06:17,180 --> 00:06:22,220 Let me bring in my browser here and we'll play around with the site and see if we can register a new 101 00:06:22,220 --> 00:06:25,750 user sort to come over and right off the bat. 102 00:06:25,760 --> 00:06:28,340 You should see the navigation bar working. 103 00:06:28,340 --> 00:06:33,910 You should not only see log in and register as options because we're no longer logged in as a user. 104 00:06:33,920 --> 00:06:39,320 So if a click the about I get info about the company for come back home I could see the home page. 105 00:06:39,320 --> 00:06:40,310 So that's all working. 106 00:06:40,430 --> 00:06:43,850 Let's now register a new user using our form here. 107 00:06:43,880 --> 00:06:49,580 So what we'll do is just use a very simple e-mail olic to use something simple like one at one dot com 108 00:06:49,670 --> 00:06:53,870 for the first user have the user name one have the password would be one. 109 00:06:53,980 --> 00:06:58,730 Just so it's easy to keep track and then for the actual use to it Today.com and so on. 110 00:06:58,820 --> 00:07:04,270 Remember that this form actually looks really ugly because there was no bootstrap classes on this form. 111 00:07:04,430 --> 00:07:08,570 But recall that we did show you how to do that specifically for the update view. 112 00:07:08,780 --> 00:07:10,090 So we'll see that in just a second. 113 00:07:10,280 --> 00:07:13,160 OK let's try registering this user and see if that works. 114 00:07:13,160 --> 00:07:14,310 So it did register. 115 00:07:14,330 --> 00:07:15,260 That's good. 116 00:07:15,260 --> 00:07:19,850 Keep in mind there was like a microsecond flash there because we did have that flash command but since 117 00:07:19,850 --> 00:07:22,560 it's just reroutes us to log in we actually don't see that. 118 00:07:22,850 --> 00:07:24,620 So now that we can log in. 119 00:07:24,650 --> 00:07:25,710 Let's try it out. 120 00:07:26,000 --> 00:07:30,630 So we're going to say one at one dot com. 121 00:07:30,800 --> 00:07:32,100 The password is one. 122 00:07:32,130 --> 00:07:33,810 See this log in works. 123 00:07:33,860 --> 00:07:35,190 So the logging did work. 124 00:07:35,240 --> 00:07:37,270 It took us back to the home page and now check. 125 00:07:37,280 --> 00:07:38,880 Take a look at our navigation bar. 126 00:07:38,960 --> 00:07:40,210 I can log out. 127 00:07:40,400 --> 00:07:43,700 Check my account or create a post for click Create a post right now. 128 00:07:43,700 --> 00:07:46,220 Nothing's going to happen because we haven't set up any of those used yet. 129 00:07:46,490 --> 00:07:49,070 So let's check if our account page is working. 130 00:07:49,070 --> 00:07:53,150 So I click on account and it says Welcome to the page for one. 131 00:07:53,180 --> 00:07:59,060 Right now there's an empty picture there because we haven't set the actual default PLG we've said it 132 00:07:59,240 --> 00:08:03,410 on the views and the templates so there is a link to some string. 133 00:08:03,470 --> 00:08:05,760 What I haven't done there is actually put the picture. 134 00:08:05,930 --> 00:08:07,700 So we're going to do that in just a second. 135 00:08:07,700 --> 00:08:10,460 But let's actually try uploading our own picture. 136 00:08:10,460 --> 00:08:11,390 So we have the user name. 137 00:08:11,390 --> 00:08:19,040 It's one let's call this one edit and we'll also edit our email will say one edit at one dot com and 138 00:08:19,040 --> 00:08:21,580 then I'm going to choose a file to upload as my picture. 139 00:08:21,740 --> 00:08:24,570 So what I'm going to do is just select this python logo. 140 00:08:24,640 --> 00:08:29,600 All open here and then lets it update and see if my pictures updated. 141 00:08:29,600 --> 00:08:32,010 So it looks like welcome to the page for one edit. 142 00:08:32,060 --> 00:08:32,970 So that worked. 143 00:08:32,990 --> 00:08:36,570 But what's not working is our ability to update profile pics. 144 00:08:36,620 --> 00:08:42,170 So let's fix that and make sure that our routes are correctly working for updating the pictures because 145 00:08:42,170 --> 00:08:47,780 it looks like right now I'm not seeing that picture update but my username and email it's looks like 146 00:08:47,780 --> 00:08:49,420 they are updated correctly. 147 00:08:49,490 --> 00:08:56,730 So let's go back to our files and make sure that the profile picture and that actual directory exist. 148 00:08:56,810 --> 00:09:00,000 So we're going to go back to Adam here. 149 00:09:00,020 --> 00:09:05,690 We're going to open up the left hand tab here and you'll notice we have static profile picks and right 150 00:09:05,690 --> 00:09:08,120 now nothing got saved under profile pics. 151 00:09:09,390 --> 00:09:15,420 Let's try to first debug the default picture not showing up and then we'll debug the updating not showing 152 00:09:15,420 --> 00:09:15,960 up. 153 00:09:16,160 --> 00:09:21,180 Now the default not showing up that one is actually quite simple to fix because there was no default 154 00:09:21,720 --> 00:09:23,180 underneath profile pics. 155 00:09:23,190 --> 00:09:29,100 So if I take a look at a user model under models that pie remember that the profile image has a default 156 00:09:29,100 --> 00:09:34,710 value of default and then default underscore profile that DNG. 157 00:09:34,740 --> 00:09:37,510 So I should probably stick that PFG file there. 158 00:09:37,560 --> 00:09:42,760 That way I can actually have a profile picture show up on my computer underneath a folder. 159 00:09:42,930 --> 00:09:48,450 I have this cute little picture of a dog and I've labeled it default underscore profiled up hangi. 160 00:09:48,660 --> 00:09:55,230 So I'm actually going to grab this guy and then move it to profile pics. 161 00:09:55,260 --> 00:09:58,410 So now I have a default profile dot PMG there. 162 00:09:58,440 --> 00:09:59,970 Keep in mind it's really up to you. 163 00:09:59,970 --> 00:10:03,810 Whatever profile you want to use you just got to make sure that the name matches up. 164 00:10:03,810 --> 00:10:09,550 So right now have default underscore profiles that PFG and that name is matching up with my default. 165 00:10:09,720 --> 00:10:11,160 So I'm going to save those changes. 166 00:10:11,190 --> 00:10:16,330 And let's see if I register a new user if I actually pick up on that PMG file. 167 00:10:16,410 --> 00:10:20,340 That means we'll bring back our browser and I'm going to log out. 168 00:10:20,370 --> 00:10:24,510 This one user and create another user in upon you registration. 169 00:10:24,510 --> 00:10:27,140 Let's see if we see that puppy profile pic. 170 00:10:27,150 --> 00:10:31,740 If not going to show you a really nice way to help debug these sort of missing images. 171 00:10:31,800 --> 00:10:34,060 So let's log out and let's see if that works. 172 00:10:34,110 --> 00:10:36,490 So lock that work I'm going to register. 173 00:10:36,660 --> 00:10:38,540 And now let's register a new user. 174 00:10:38,580 --> 00:10:46,410 We're going to call this user to Today.com to passwords also to and then confirm password. 175 00:10:46,450 --> 00:10:50,550 Remember you can always add in additional validators to make sure that the password is a certain length 176 00:10:50,610 --> 00:10:52,650 like the length required validator. 177 00:10:52,650 --> 00:10:53,910 Right now we're just keeping things simple. 178 00:10:53,950 --> 00:10:56,950 Let's register this to user and that worked. 179 00:10:56,950 --> 00:11:00,220 So now let's actually log in with them. 180 00:11:00,240 --> 00:11:06,790 So we'll say to it to pass into We'll log in and if we get a count now. 181 00:11:07,070 --> 00:11:13,040 Now my actual pathway is working for that default profile pic which makes sense because we just set 182 00:11:13,040 --> 00:11:14,860 it up so that's good news. 183 00:11:14,870 --> 00:11:18,640 However let's see if now if I can actually update my profile pic. 184 00:11:18,770 --> 00:11:23,360 I know the username and e-mail updates were working because when I refresh the page I saw my updated 185 00:11:23,360 --> 00:11:29,920 username and e-mails but let's actually choose and you file are going to choose choose this one on here 186 00:11:29,920 --> 00:11:31,390 have their safe pictures. 187 00:11:31,390 --> 00:11:33,510 So I'll open that one update. 188 00:11:33,970 --> 00:11:35,740 And right now it's still not working. 189 00:11:35,860 --> 00:11:42,040 So it looks like I have some sort of issue with my account view or account template where upon hitting 190 00:11:42,070 --> 00:11:45,220 update I'm not actually updating that profile picture. 191 00:11:45,490 --> 00:11:52,270 And a hint that I want to show you is if you right click on this and select View page source you can 192 00:11:52,270 --> 00:11:57,130 since you understood the actual construction as web site you can begin to see where the source is coming 193 00:11:57,130 --> 00:11:57,820 from. 194 00:11:57,820 --> 00:12:03,370 So looks like the source is still coming from a static profile pics default underscore a profile PMG 195 00:12:03,820 --> 00:12:09,730 so that hints to us that the actual submission of that form for the use case of updating our profile 196 00:12:09,730 --> 00:12:11,360 picture isn't working yet. 197 00:12:11,560 --> 00:12:16,420 So I want to come back to this account view and see if I need anything for actually updating the profile 198 00:12:16,420 --> 00:12:18,910 picture and hopefully it's a simple fix. 199 00:12:18,910 --> 00:12:19,230 All right. 200 00:12:19,270 --> 00:12:22,240 Luckily for us it actually is a simple fix. 201 00:12:22,300 --> 00:12:28,660 And the reason that our update wasn't working is if we come back to our template page for the account 202 00:12:28,930 --> 00:12:30,870 that is account the H Tim L. 203 00:12:31,030 --> 00:12:36,760 You'll notice that right now in our form at the very top we only specified method is equal to post. 204 00:12:36,760 --> 00:12:42,790 And if you do a little research on this basically the way that these HVM all forms work is when you 205 00:12:42,790 --> 00:12:48,880 make a post request like we're doing here you have to encode the data that forms the body of the request 206 00:12:48,970 --> 00:12:52,140 in some way and you can actually Google search this. 207 00:12:52,150 --> 00:12:55,630 But basically what we have to add here are two things. 208 00:12:55,690 --> 00:12:58,590 One is we have to actually specify an action. 209 00:12:58,750 --> 00:13:01,190 And in this case we can specify this be a blank string. 210 00:13:01,270 --> 00:13:03,330 But we do want this action to be there. 211 00:13:03,520 --> 00:13:08,130 And more importantly what we want is e n c t type. 212 00:13:08,170 --> 00:13:15,910 So this attribute where you could do is you're going to set it to multipart slash form data and then 213 00:13:15,910 --> 00:13:18,460 you're going to want to save those changes. 214 00:13:18,610 --> 00:13:24,280 And again you can check out just by Google searching what this actually phrase means but it has to do 215 00:13:24,280 --> 00:13:26,860 with the way you can upload files. 216 00:13:26,860 --> 00:13:32,380 So if you're just uploading simple text then you don't actually need specify the sort of type the default 217 00:13:32,500 --> 00:13:34,100 of your L and works. 218 00:13:34,120 --> 00:13:40,360 But if we're actually uploading files like a CISC file an excel file or a PNB file we need to add in 219 00:13:40,510 --> 00:13:43,630 these two attributes to our form tag. 220 00:13:43,630 --> 00:13:48,220 So again you can Google search and you'll get lots of really nice answers as far as what this actually 221 00:13:48,220 --> 00:13:48,950 means. 222 00:13:49,090 --> 00:13:54,160 And it basically just explains that each team of forms in general has three methods of encoding and 223 00:13:54,160 --> 00:14:00,220 if we're actually encoding some more complex file types that aren't just text being passed into the 224 00:14:00,220 --> 00:14:05,100 form they need to actually specify multipart slash form dash data. 225 00:14:05,230 --> 00:14:09,730 So if that being then let's go ahead and restart this and close this window here. 226 00:14:10,000 --> 00:14:13,920 And we've added in the action and this attribute. 227 00:14:14,040 --> 00:14:19,250 So let's run our application again and see if we can successfully actually update the photo. 228 00:14:19,260 --> 00:14:21,420 So let's bring in our site again. 229 00:14:21,570 --> 00:14:23,200 I'm going to register a new user. 230 00:14:23,250 --> 00:14:30,060 So let's go ahead and have this register just be called for for the comm username for password before 231 00:14:30,240 --> 00:14:35,670 and confirm password before will register that user and let's log them in. 232 00:14:35,670 --> 00:14:41,040 So for for fore we'll log in and out and hit my account page. 233 00:14:41,040 --> 00:14:43,950 I see that that default is working for me. 234 00:14:43,980 --> 00:14:47,070 So let's try to update this and then choose some new file. 235 00:14:47,130 --> 00:14:48,800 So I'll just choose this python logo. 236 00:14:48,840 --> 00:14:49,690 I'll update. 237 00:14:49,830 --> 00:14:51,410 And now it's actually working. 238 00:14:51,420 --> 00:14:57,870 So the only changes we had actually make was to set up our team L4 to not just accept the default text 239 00:14:57,870 --> 00:15:02,280 types but instead be actually able to accept more complex form data. 240 00:15:02,280 --> 00:15:05,190 And the way you do that is by adding in those two lines right here. 241 00:15:05,460 --> 00:15:06,010 OK. 242 00:15:06,180 --> 00:15:11,890 So now we're able to successfully register users log in users and edit their accounts. 243 00:15:11,910 --> 00:15:14,290 So we're essentially done with the users. 244 00:15:14,290 --> 00:15:19,920 What we have to do now is begin to fill up the blog post applications that is creating a post updating 245 00:15:19,920 --> 00:15:25,320 a post deleting a post and then at the end will update the home view actually show all the blog posts 246 00:15:25,320 --> 00:15:27,180 for this particular company. 247 00:15:27,180 --> 00:15:31,380 All right that's it for this lecture if you have any questions feel free to post to the Q&A forums. 248 00:15:31,380 --> 00:15:32,280 We'll see if the next lecture.