1 00:00:05,440 --> 00:00:07,710 Welcome back everyone in this lecture. 2 00:00:07,720 --> 00:00:10,630 We're going to begin with our basic setup. 3 00:00:10,650 --> 00:00:14,700 Let's begin by setting up our file and directory structure for the project. 4 00:00:14,820 --> 00:00:18,670 We won't need to fill in every single template file or that PI file. 5 00:00:18,750 --> 00:00:24,090 Instead we just want to construct a basic project layout before we begin on that though. 6 00:00:24,170 --> 00:00:25,910 Please keep in mind two things. 7 00:00:25,940 --> 00:00:29,720 It's going to be very easy to make small typos or errors as you follow along. 8 00:00:29,840 --> 00:00:32,100 That could potentially break the entire website. 9 00:00:32,480 --> 00:00:37,300 So please make sure you run our provided code first before posting to the Q&A forums. 10 00:00:37,310 --> 00:00:42,380 One of the most common errors during this part of the Course is a small typo that will break a view 11 00:00:42,380 --> 00:00:46,070 which in turn breaks a template and suddenly your whole Web site's not working. 12 00:00:46,070 --> 00:00:50,980 Remember we have all the provided code for you to reference so you can easily fix those typos. 13 00:00:51,020 --> 00:00:54,500 So please check on the provided code first before posting. 14 00:00:54,530 --> 00:00:59,090 In case the Web site's not working when you're following along. 15 00:00:59,140 --> 00:01:02,360 Now let's talk about our general project organization. 16 00:01:02,380 --> 00:01:07,070 We're going to think of this entire web application as having three main components. 17 00:01:07,120 --> 00:01:11,890 We're going to have our core components the components related to the users who are actually logging 18 00:01:11,890 --> 00:01:15,390 in and then the components related to the blog posts themselves. 19 00:01:16,680 --> 00:01:21,600 And if we think about the project views that we're going to have we basically attach them to one of 20 00:01:21,600 --> 00:01:22,630 these components. 21 00:01:22,800 --> 00:01:27,380 So we're going to have two views attached to the core components that's going to be our index view or 22 00:01:27,420 --> 00:01:33,480 basically the homepage and that in full view the about the company page and you could keep on adding 23 00:01:33,480 --> 00:01:37,330 core views that don't really have anything to do with users or blog posts. 24 00:01:37,350 --> 00:01:42,600 We can think of those views as just things have to do with an overall company scale because remember 25 00:01:42,900 --> 00:01:45,740 we're kind of treating this as a company blog post web site. 26 00:01:45,840 --> 00:01:49,770 So we have these core aspects which just have to do with company themselves. 27 00:01:50,010 --> 00:01:55,410 Then we'll move on to the second component which is the user component and users those are going to 28 00:01:55,410 --> 00:02:01,640 have views related to registering a user and then logging in and logging out as a user. 29 00:02:01,740 --> 00:02:06,330 Then we'll add the ability to have an account page for the user that if you're viewing it as you're 30 00:02:06,330 --> 00:02:09,520 logged in you'll be able to update your information. 31 00:02:09,540 --> 00:02:15,300 Then we'll also have a page for users to view all their user posts that way if you click on someone's 32 00:02:15,300 --> 00:02:20,190 page and you're not logged in and it's someone else's page then you can see all the posts particular 33 00:02:20,190 --> 00:02:22,410 user has created. 34 00:02:22,510 --> 00:02:25,970 Then the third component is the blog post component here. 35 00:02:25,990 --> 00:02:27,160 We're going to keep it simple. 36 00:02:27,160 --> 00:02:32,170 We're just going to be able to create update and delete blog posts as well as just having a view for 37 00:02:32,170 --> 00:02:35,690 the blog post itself. 38 00:02:35,700 --> 00:02:40,350 This brings us to models and as far as models are concerned it's actually pretty straightforward and 39 00:02:40,350 --> 00:02:41,270 quite simple. 40 00:02:41,400 --> 00:02:46,620 We really just need two models one to represent the users and one to represent the blog posts. 41 00:02:46,620 --> 00:02:49,110 The users are going to have a primary ID. 42 00:02:49,140 --> 00:02:54,510 That way we can uniquely identify each user and our system will also have the ability for a user to 43 00:02:54,510 --> 00:03:00,030 have a profile image and we'll talk about uploading images and actually handling image files a flask 44 00:03:00,030 --> 00:03:06,630 later on then we'll also be able to attach an e-mail to the user a username and then a password. 45 00:03:06,630 --> 00:03:11,310 And remember we're going to be hash in that password as we discussed earlier and then we'll also have 46 00:03:11,430 --> 00:03:12,040 posts. 47 00:03:12,120 --> 00:03:15,070 So each user can have a multitude of posts. 48 00:03:15,330 --> 00:03:20,560 And because of that we're also going to be a model for blog posts blog posts are going to have an ID. 49 00:03:20,610 --> 00:03:22,820 So a unique identifier per blog post. 50 00:03:22,950 --> 00:03:25,980 Then they're also going to have a user ID which connects them to the user. 51 00:03:26,190 --> 00:03:29,960 Then they'll have a day a title and then the actual text of the blog post. 52 00:03:31,440 --> 00:03:36,660 So keep in mind these models are actually going to be connected because the blog post has a user ID 53 00:03:36,690 --> 00:03:39,080 which links it to a particular user. 54 00:03:39,090 --> 00:03:43,020 That way we can click on a user and see all the blog posts that they've created. 55 00:03:45,290 --> 00:03:49,670 So after that we're going to need to create some templates and forms so we'll need to create the basic 56 00:03:49,670 --> 00:03:54,540 crud or create read update and delete forms for both users and blog posts. 57 00:03:54,540 --> 00:03:59,630 We want to have the ability for creating a new user and updating a new user as well as creating blog 58 00:03:59,660 --> 00:04:02,940 posts Update blog posts or deleting blog posts. 59 00:04:02,960 --> 00:04:07,280 So once we have that we'll later on create the templates that correspond to views and we're going to 60 00:04:07,280 --> 00:04:09,250 be building these slowly as we go along. 61 00:04:09,290 --> 00:04:14,940 So let's get started by hopping over to our text editor and setting up the basic directory structure. 62 00:04:14,990 --> 00:04:17,700 All right here we are at the Adam text editor. 63 00:04:17,810 --> 00:04:22,580 Right now I have an empty directory called flask underscore examples the same directory I've been using 64 00:04:22,790 --> 00:04:24,080 just on my desktop. 65 00:04:24,080 --> 00:04:29,750 And what I'm going to do is create a new file so go file new file and this one is going to be called 66 00:04:29,840 --> 00:04:32,040 app dot pi. 67 00:04:32,060 --> 00:04:37,280 So that's our main application and we can zoom in if we want here basically what this is going to do 68 00:04:37,340 --> 00:04:42,980 is it's just going to have the main components of our application and we'll be using a blueprint structure 69 00:04:43,010 --> 00:04:46,110 that way not everything goes into this app that py file. 70 00:04:46,340 --> 00:04:50,370 So for now I'm going to say print's Hello world. 71 00:04:50,510 --> 00:04:53,410 Save that and let me make sure that everything's running. 72 00:04:53,540 --> 00:04:59,790 So underneath flask examples I'm going to say python app thought pie hit enter and you should see now. 73 00:04:59,870 --> 00:05:00,590 Hello world. 74 00:05:00,640 --> 00:05:01,340 Have you done that. 75 00:05:01,340 --> 00:05:02,470 Everything's good. 76 00:05:02,600 --> 00:05:06,080 Now we're going to do is set up the rest of everything. 77 00:05:06,290 --> 00:05:10,500 So I'm going to create a new folder at the same level of this app top pie. 78 00:05:10,640 --> 00:05:13,160 And technically you can call this whatever we want. 79 00:05:13,160 --> 00:05:17,540 So I'm just going to call it puppy company blog. 80 00:05:18,110 --> 00:05:23,040 Enter And again this is the main folder that's going to hold everything. 81 00:05:23,120 --> 00:05:25,990 And here we're going to set up our directories. 82 00:05:26,000 --> 00:05:30,190 So remember we have three main components to our overall project. 83 00:05:30,230 --> 00:05:35,720 We have the blog posts the core components that is things like the index page and the about me or info 84 00:05:35,720 --> 00:05:36,280 page. 85 00:05:36,380 --> 00:05:37,600 And then we have the users. 86 00:05:37,700 --> 00:05:42,230 So let's create a folder directory underneath Papy company block for each of those. 87 00:05:42,260 --> 00:05:45,690 So create a folder I'll call it users. 88 00:05:45,740 --> 00:05:49,490 And now I can expand that a users I'll create in other folder. 89 00:05:49,490 --> 00:05:51,810 This one's going to be called blog posts. 90 00:05:51,950 --> 00:05:57,350 So it's going to hold everything regarding blog posts and then we'll create one more folder here and 91 00:05:57,350 --> 00:05:59,130 then this is going to be called core. 92 00:05:59,420 --> 00:06:05,210 So I have blog posts core end users and these are all going to connect eventually of blueprints to our 93 00:06:05,270 --> 00:06:12,150 app that PI file which runs a flask application for each of these blog posts core and users. 94 00:06:12,230 --> 00:06:16,660 We're going to need to do is set up the forms and views. 95 00:06:16,700 --> 00:06:20,640 And since we're going to actually be importing these into our app that pie. 96 00:06:20,780 --> 00:06:23,960 We also need to set up an in at that pie file for each of these. 97 00:06:24,170 --> 00:06:30,020 So for each of these one I'm going to do is say new file and make sure you write this carefully it's 98 00:06:30,110 --> 00:06:36,030 underscore underscore I and I-T underscore underscore dot pie. 99 00:06:36,380 --> 00:06:41,510 So we're going to create these underscore underscore in an underscore underscore that PI files in order 100 00:06:41,510 --> 00:06:45,980 to make sure that we can successfully import all of these components. 101 00:06:46,100 --> 00:06:51,620 So we're going to this for all of these and again if you ever get stuck or get confused you can always 102 00:06:51,620 --> 00:06:53,480 reference our files. 103 00:06:53,480 --> 00:06:56,000 So one more here underneath users. 104 00:06:56,300 --> 00:07:03,510 And this is just so we can make sure that we can import these into other components or app that py file. 105 00:07:03,530 --> 00:07:08,180 So Python needs this in order to understand that this is a module that it can import. 106 00:07:08,210 --> 00:07:11,810 Once you've done that we can begin to set up more specific structures. 107 00:07:11,810 --> 00:07:17,620 So we'll start off with core so core itself we can just add in a viewed up-I file. 108 00:07:17,630 --> 00:07:20,370 So say core views up. 109 00:07:20,750 --> 00:07:22,400 And this is going to have two views in it. 110 00:07:22,430 --> 00:07:24,020 The home view and the info view. 111 00:07:24,030 --> 00:07:25,490 So that's all that's going to have. 112 00:07:25,670 --> 00:07:29,900 And then underneath block posts we're going to do is also set up a similar thing. 113 00:07:30,050 --> 00:07:38,590 We're going to say block post new file views that pie hit enter and for the blog posts themselves we're 114 00:07:38,590 --> 00:07:44,930 also going to create a form stop PI file because we want to be able to create a form a blog. 115 00:07:45,250 --> 00:07:49,410 So say new file and call this forms. 116 00:07:49,440 --> 00:07:50,980 PI. 117 00:07:51,000 --> 00:07:53,160 OK so blocked posts is actually done. 118 00:07:53,160 --> 00:07:55,300 These are the three files that are going to be here in it. 119 00:07:55,320 --> 00:07:57,080 Up-I is essentially going to be empty. 120 00:07:57,180 --> 00:08:03,060 Just lets Python know that we can import this as a module and then we have forms and views core core 121 00:08:03,060 --> 00:08:04,830 is just the main page. 122 00:08:04,830 --> 00:08:09,780 So it doesn't really need any specialized forms that go with it since you're not filling anything out 123 00:08:10,020 --> 00:08:12,050 on that home page users. 124 00:08:12,180 --> 00:08:19,710 That definitely needs its own views so say new file views that pie hit enter and what users is also 125 00:08:19,710 --> 00:08:23,440 going to have is a special form stopped by a file. 126 00:08:23,480 --> 00:08:30,650 So I'll say forms that pie and that's going to allow us to create users or up that users through the 127 00:08:30,650 --> 00:08:37,250 use of forms later on or to add another file called Picture handler to this user's folder. 128 00:08:37,280 --> 00:08:43,700 And that's going to allow us to handle the profile picture aspect of the actual user power. 129 00:08:43,700 --> 00:08:48,290 Now we can just forget about that and leave it blank or just not include it because we want to build 130 00:08:48,290 --> 00:08:49,800 this up step by step. 131 00:08:49,910 --> 00:08:56,120 So we have if we take a look blog posts core end users ready to go. 132 00:08:56,130 --> 00:08:58,570 All right so we have three main components that up the block. 133 00:08:58,570 --> 00:09:04,020 First the core and the users we're going to add in still a couple of more directories just for organizational 134 00:09:04,020 --> 00:09:06,700 structure underneath puppy company blog. 135 00:09:06,780 --> 00:09:13,080 I'm going to create a new folder called error underscore pages and that's going to be at the rectory 136 00:09:13,140 --> 00:09:18,120 that's going to have a specialized PI file which is going to show views for things like four or four 137 00:09:18,120 --> 00:09:21,270 pages and we'll talk about later on how to set that up. 138 00:09:21,270 --> 00:09:26,970 Right now I just wanted directory there organization then I'm also going to set up a directory to hold 139 00:09:27,000 --> 00:09:28,840 our actual template files. 140 00:09:29,080 --> 00:09:34,830 So we're going to say templates and we're just going to put every template into this templates folder 141 00:09:34,830 --> 00:09:35,440 right here. 142 00:09:35,550 --> 00:09:38,600 So as we go along we'll be adding more h to him all files there. 143 00:09:38,880 --> 00:09:43,250 And then finally most larger projects have the use of static files. 144 00:09:43,320 --> 00:09:47,610 So there's going to be a holding place for your CSSA files or javascript files. 145 00:09:47,640 --> 00:09:51,170 And for our case we're also going to have our profile images stored there. 146 00:09:51,360 --> 00:09:53,310 So we're going to say one more folder. 147 00:09:53,640 --> 00:09:57,830 We'll call it static and we'll have that all underneath Papy company blog. 148 00:09:57,870 --> 00:09:59,430 So we have that all ready to go. 149 00:09:59,430 --> 00:10:04,660 The final thing we're going to do is add in a file called models not pi. 150 00:10:05,190 --> 00:10:07,300 And that's again underneath puppie company blog. 151 00:10:07,300 --> 00:10:13,500 So notice how this is formatted here models that pie here is going to hold our user model and our blog 152 00:10:13,500 --> 00:10:14,630 post model. 153 00:10:14,630 --> 00:10:15,150 All right. 154 00:10:15,150 --> 00:10:20,280 Now the last thing we're going to do is actually make sure that we can run a very simple web application 155 00:10:20,720 --> 00:10:24,770 so to do that what we're going to do is set up kind of a hello world situation. 156 00:10:25,140 --> 00:10:31,530 And in order to make sure we keep our project organized underneath puppy company blog I'm going to create 157 00:10:31,590 --> 00:10:38,100 one more file will say new file and this is going to be underscore underscore in its underscore underscore 158 00:10:38,280 --> 00:10:44,740 that pi and this init pile init file Scuse me right here underneath Papy company blog. 159 00:10:44,790 --> 00:10:50,040 That's going to hold a lot of our organizational logic connecting the blueprints connecting the logging 160 00:10:50,040 --> 00:10:55,920 manager and connecting everything together that's going to help us organize things so that when we actually 161 00:10:55,920 --> 00:11:02,060 run our app that pie the app thought py files actually just has like one line it'll say from puppy company 162 00:11:02,070 --> 00:11:05,370 blog import the app and then run the app. 163 00:11:05,370 --> 00:11:07,580 So let's see how this is actually going to work. 164 00:11:07,590 --> 00:11:11,860 I'm going to close all these other tabs I have here and atom. 165 00:11:12,030 --> 00:11:16,320 So right now this in it up PI this is underneath the puppy company blog. 166 00:11:16,560 --> 00:11:19,020 So just to kind of write that out for you. 167 00:11:19,050 --> 00:11:21,350 Let me zoom in a little more. 168 00:11:21,360 --> 00:11:31,530 This is underneath puppy company blog forward slash in the pie that's the current file I'm in. 169 00:11:31,780 --> 00:11:40,720 And in this file all I'm going to do is the following I will say from flask import flask and then I 170 00:11:40,720 --> 00:11:51,270 will say app is equal to flask underscore name underscore underscore and we set up our application that's 171 00:11:51,270 --> 00:11:53,040 actually all we're going to do here. 172 00:11:53,040 --> 00:11:54,920 So I'm going to save that. 173 00:11:55,020 --> 00:12:00,120 And then underneath app that pie I'm just going to run that application. 174 00:12:00,300 --> 00:12:07,210 So I will say from puppy company blog import app. 175 00:12:07,260 --> 00:12:09,030 So what is this line actually doing. 176 00:12:09,060 --> 00:12:11,190 It's saying underneath Papy company blog. 177 00:12:11,190 --> 00:12:18,240 So you say from puppy company blog it's saying from this in it py file import this application this 178 00:12:18,300 --> 00:12:19,200 app right here. 179 00:12:19,440 --> 00:12:22,440 So this in a file that's going to have a bunch of stuff later on. 180 00:12:22,440 --> 00:12:25,960 Like setting up our database setting up or form setting up the blueprints. 181 00:12:26,060 --> 00:12:28,670 But right now it's just creating the application. 182 00:12:28,740 --> 00:12:36,260 So I'll come now to a public company blog import app and we'll see if name is equal to main. 183 00:12:36,410 --> 00:12:40,940 Take that app and run it and we'll say debug is equal to true. 184 00:12:40,940 --> 00:12:45,180 Now keep in mind right now the application doesn't really do anything but we should see kind of a non 185 00:12:45,230 --> 00:12:46,300 empty web page. 186 00:12:46,310 --> 00:12:48,980 It'll just be kind of a blank screen running at us. 187 00:12:49,040 --> 00:12:51,880 So we have classic examples oniony are in it. 188 00:12:51,920 --> 00:12:56,240 We've set up our flask application which currently has essentially no views or no templates. 189 00:12:56,390 --> 00:13:00,090 And then we ran our application from this app that py file. 190 00:13:00,320 --> 00:13:02,380 So kind of keep that in mind. 191 00:13:02,390 --> 00:13:05,390 How are separating the components here. 192 00:13:05,570 --> 00:13:09,620 So I'm going to say python app that pie run this. 193 00:13:09,680 --> 00:13:12,350 And after you run this you should see that it's running. 194 00:13:12,350 --> 00:13:16,000 So let's go to our browser and check out what we see. 195 00:13:16,010 --> 00:13:22,250 So let me bring in my browser and if you ran everything correctly you should essentially see something 196 00:13:22,250 --> 00:13:23,550 that looks like this. 197 00:13:23,720 --> 00:13:25,740 Some not found your l. 198 00:13:25,820 --> 00:13:30,400 So this is exactly what you want to see because this means that your application is running. 199 00:13:30,470 --> 00:13:35,420 There was just no actual template for the home page view which makes sense we haven't set it up in the 200 00:13:35,420 --> 00:13:36,170 court yet. 201 00:13:36,410 --> 00:13:42,560 So if you are able to get this four or four page running not just some Server not found then you are 202 00:13:42,560 --> 00:13:43,620 ready to go. 203 00:13:43,640 --> 00:13:48,170 You've set up all directories correctly and you were able to run that application which currently has 204 00:13:48,170 --> 00:13:52,430 no views and no templates which is why we get this default for 0 for error. 205 00:13:52,720 --> 00:13:53,330 OK. 206 00:13:53,480 --> 00:13:57,770 So as a review for what we did in this lecture we set up all the rectories were going to be filling 207 00:13:57,770 --> 00:14:01,290 in a ton of more files later on as we go throughout this section of the course. 208 00:14:01,370 --> 00:14:07,010 But more importantly we've separated this in PI file underneath puppie company blog which is going to 209 00:14:07,010 --> 00:14:10,250 hold a lot of our flask application logic and the blueprint logic. 210 00:14:10,460 --> 00:14:16,790 And then this app that file which just runs that application from that in it for pi file and this app 211 00:14:16,790 --> 00:14:17,390 up pi. 212 00:14:17,440 --> 00:14:19,660 This is actually not going to change for the rest of the project. 213 00:14:19,670 --> 00:14:23,930 This is going to be all it's doing is just going to say import the app and then run it and it's a really 214 00:14:23,930 --> 00:14:28,480 common way to structure much larger projects which is why we're seeing it here. 215 00:14:28,550 --> 00:14:28,820 All right. 216 00:14:28,820 --> 00:14:33,890 If you have any questions feel free to post the Q&A forums but definitely take a look at the organizational 217 00:14:33,890 --> 00:14:36,200 structure we have in the provided notes. 218 00:14:36,200 --> 00:14:37,730 Thanks and we'll see you at the next lecture.