1 00:00:05,240 --> 00:00:07,690 Welcome back everyone in this section of the course. 2 00:00:07,700 --> 00:00:12,260 We're finally going to embark on a larger project that incorporates a lot of what you already learn 3 00:00:12,320 --> 00:00:14,350 in the previous sections of the course. 4 00:00:15,230 --> 00:00:18,180 So we're combining all the skills into a singular project. 5 00:00:18,260 --> 00:00:23,810 We're going to be creating is a company blog page where multiple users can each log in with their own 6 00:00:23,810 --> 00:00:24,950 user credentials. 7 00:00:24,950 --> 00:00:30,800 They can create their own blog posts up they or delete their existing blog posts as well. 8 00:00:30,830 --> 00:00:35,570 Plus we're also introducing some new concepts such as how to handle image files so every user is going 9 00:00:35,570 --> 00:00:37,140 to have their own profile image. 10 00:00:37,220 --> 00:00:39,060 Also show you how to add pages. 11 00:00:39,200 --> 00:00:44,800 So for example if you ever go to a Web site where you can cycle through pages of many blog posts. 12 00:00:44,810 --> 00:00:48,950 So in this case if we have more than five blog posts we'll go ahead and just shift those over to another 13 00:00:48,950 --> 00:00:49,500 page. 14 00:00:49,580 --> 00:00:50,780 We'll show you how to do that. 15 00:00:50,960 --> 00:00:55,130 And we're also going to show you how to use modals which is basically a way that bootstrap allows you 16 00:00:55,130 --> 00:00:56,420 to create pop ups. 17 00:00:56,420 --> 00:01:01,280 So know step by step in this code along project so all of this code along that we can follow through 18 00:01:01,280 --> 00:01:05,860 with us and see how to structure a larger project that will have multiple users on it. 19 00:01:07,160 --> 00:01:10,180 So let's take a look at what the finished product is actually going to look like. 20 00:01:10,220 --> 00:01:14,100 That way we can understand or building it head over to the browser now. 21 00:01:14,450 --> 00:01:14,720 All right. 22 00:01:14,720 --> 00:01:17,780 So this is the final product that we're actually going to be creating. 23 00:01:17,780 --> 00:01:20,930 Looks wise we're not going to focus too much on the actual styling. 24 00:01:20,940 --> 00:01:23,350 So overall it's not the most attractive web site. 25 00:01:23,510 --> 00:01:28,190 Really what we want to focus on is the functionality so we can think of this as some sort of company 26 00:01:28,190 --> 00:01:33,400 blog where multiple employees of the company are going to be able to create their own blog posts. 27 00:01:33,410 --> 00:01:38,560 So notice here we have a home and about us page some log in page and a registration page. 28 00:01:38,600 --> 00:01:42,920 So where you're going to be able to do once you complete this Web site it's going to be able to click 29 00:01:42,920 --> 00:01:43,600 on register. 30 00:01:43,610 --> 00:01:45,240 Here we have a registration form. 31 00:01:45,320 --> 00:01:49,670 Again not the most beautiful looking registration form but here are just really focused on being able 32 00:01:49,670 --> 00:01:52,570 to add the functionality with flask. 33 00:01:52,580 --> 00:01:59,570 So let's go ahead and register and your user will say brand new at new dot com the username will also 34 00:01:59,570 --> 00:02:06,570 have that be brand new password are you going to keep it simple keep it as brand new. 35 00:02:06,570 --> 00:02:07,180 Same here. 36 00:02:07,200 --> 00:02:11,990 So brand new We'll go ahead and click register then that takes us directly to the logon page. 37 00:02:11,990 --> 00:02:13,570 We have an email and password. 38 00:02:13,620 --> 00:02:15,870 Again very simple aesthetics wise. 39 00:02:16,050 --> 00:02:25,590 So the email was brand new and you dot com and the password was brand new We'll click log in and now 40 00:02:25,590 --> 00:02:31,380 we're logged then we still see the same home page but notice here now I can create a post so if I click 41 00:02:31,380 --> 00:02:37,240 on Create a post I get a title for my post such as brand new title. 42 00:02:37,470 --> 00:02:43,750 And then I have text so brand new text and I can just you know fill in whatever text I want here. 43 00:02:43,920 --> 00:02:47,020 And then when I click on blog post essentially posting this. 44 00:02:47,160 --> 00:02:51,430 Now I can see on the main company blog page as well as these other blog posts. 45 00:02:51,450 --> 00:02:56,490 I have this brand new title written by brand new published on this etc.. 46 00:02:56,520 --> 00:03:01,800 Now if I read a blog post since this is my own blog post since I'm right now logged in as a brand new 47 00:03:01,800 --> 00:03:06,990 user I can click update and then add some new stuff to it. 48 00:03:06,990 --> 00:03:08,250 Maybe change the title. 49 00:03:08,340 --> 00:03:09,170 Post this again. 50 00:03:09,240 --> 00:03:12,230 Or I can also delete it and so happens when I click on delete. 51 00:03:12,300 --> 00:03:16,770 I get this nice little pop up so I'll be showing you how to use bootstrap to create these pop ups as 52 00:03:16,770 --> 00:03:17,260 well. 53 00:03:17,370 --> 00:03:23,610 Cancel that deleting and if I go back to my home page right now if I take a look at other blog posts 54 00:03:23,940 --> 00:03:28,560 written by someone else that I don't have the update and delete functionality. 55 00:03:28,560 --> 00:03:33,550 So we're going to be able to smartly say OK only if you're viewing a blog that you created. 56 00:03:33,570 --> 00:03:34,890 You can update it or delete it. 57 00:03:34,890 --> 00:03:38,270 You can edit other peoples blogs as you would expect. 58 00:03:38,280 --> 00:03:42,220 Now we can also check out the About Us page which is just info about the company. 59 00:03:42,270 --> 00:03:44,180 And notice also how my own account page. 60 00:03:44,190 --> 00:03:47,980 So if I click on my account I say welcome to the page for brand new. 61 00:03:48,090 --> 00:03:51,870 I see this little profile image and I can update my username. 62 00:03:51,900 --> 00:03:57,330 Update my email and I can also update my profile picture so I'll be showing you how to choose files 63 00:03:57,660 --> 00:04:00,150 by uploading things and then updating it. 64 00:04:00,150 --> 00:04:05,220 We have the default image but if you take a look at other users if we come back to home take a look 65 00:04:05,220 --> 00:04:06,520 at written by 6. 66 00:04:06,540 --> 00:04:09,850 This is the page for 6 against same profile image. 67 00:04:09,970 --> 00:04:14,280 Since that's the default image but if we take a look at some other ones we've uploaded some other profile 68 00:04:14,280 --> 00:04:14,940 images. 69 00:04:15,120 --> 00:04:19,370 So if I take account pages I can then read other blog posts by the author. 70 00:04:19,380 --> 00:04:21,390 So this offer just happens to be named 3. 71 00:04:21,500 --> 00:04:23,690 We click on this and then we see the blog post. 72 00:04:23,860 --> 00:04:28,390 OK and then we can always log out and come back to the company blog page. 73 00:04:28,410 --> 00:04:28,790 All right. 74 00:04:28,800 --> 00:04:30,730 I'm really excited to get started with this project. 75 00:04:30,750 --> 00:04:33,660 It combines pretty much all the skills we've covered so far. 76 00:04:33,750 --> 00:04:39,120 Whether it's authorization different views templates and a lot more we're also going to cover things 77 00:04:39,420 --> 00:04:43,770 like those bootstrap methods that we haven't seen before and we're having to cover things like how to 78 00:04:43,770 --> 00:04:45,930 make your own 404 pages. 79 00:04:45,990 --> 00:04:51,600 So if you try to go to a page that doesn't exist we'll see how to customize our own for 4 pages to show 80 00:04:51,600 --> 00:04:53,030 whatever we want to show. 81 00:04:53,330 --> 00:04:55,620 OK let's go ahead and get started. 82 00:04:55,620 --> 00:04:57,760 The first thing to do is just get an overview. 83 00:04:57,780 --> 00:05:00,420 However setting up art projects will see you at the next lecture.