WEBVTT 1 00:00:00.120 --> 00:00:01.600 Hi, and welcome back. 2 00:00:01.600 --> 00:00:04.270 Something that really bugs me about our application 3 00:00:04.270 --> 00:00:07.000 is that once you're in a post, 4 00:00:07.000 --> 00:00:08.660 you can't go back to the homepage 5 00:00:08.660 --> 00:00:10.900 unless you press the back button. 6 00:00:10.900 --> 00:00:14.780 Similarly, you can't really easily create a new post 7 00:00:14.780 --> 00:00:16.980 unless you type the URL yourself, 8 00:00:16.980 --> 00:00:19.700 you know, slash post slash create, 9 00:00:19.700 --> 00:00:20.533 and even when you're here, 10 00:00:20.533 --> 00:00:22.950 you can't go back to the homepage either. 11 00:00:22.950 --> 00:00:25.930 So it's always a good idea to add some proper navigation 12 00:00:25.930 --> 00:00:28.470 to your pages just so your users and yourself 13 00:00:28.470 --> 00:00:30.700 can go through them a bit easier. 14 00:00:30.700 --> 00:00:33.533 Let's go over to PyCharm and do this just now. 15 00:00:34.710 --> 00:00:37.840 I'm gonna stop the app first of all and minimise that, 16 00:00:37.840 --> 00:00:39.690 and in order to add the links, 17 00:00:39.690 --> 00:00:42.070 all I have to do is think 18 00:00:42.070 --> 00:00:43.570 about where we wanna put them. 19 00:00:44.730 --> 00:00:48.030 Personally, I think that every page should have a link 20 00:00:48.030 --> 00:00:49.260 to the homepage. 21 00:00:49.260 --> 00:00:50.930 So I'm gonna add the link to the homepage 22 00:00:50.930 --> 00:00:52.613 inside based on HTML. 23 00:00:53.760 --> 00:00:56.410 This block content will be replaced 24 00:00:56.410 --> 00:00:59.410 by the child's content every page. 25 00:00:59.410 --> 00:01:01.050 So if you put something in here, 26 00:01:01.050 --> 00:01:03.720 it won't be present in any of the pages 27 00:01:03.720 --> 00:01:06.900 just because when you have home.jinja2, for example, 28 00:01:06.900 --> 00:01:08.753 this is going to replace this. 29 00:01:08.753 --> 00:01:11.060 It's not going to add to it. 30 00:01:11.060 --> 00:01:12.980 So if you wanna put something in every page, 31 00:01:12.980 --> 00:01:14.930 put it outside of the block of content. 32 00:01:15.860 --> 00:01:20.000 What we're gonna do here is add a URL to the homepage. 33 00:01:20.000 --> 00:01:21.530 And I think you can do this. 34 00:01:21.530 --> 00:01:24.930 Add a new anchor tag, add the HREF 35 00:01:24.930 --> 00:01:28.940 and make it point to the URL for of the homepage. 36 00:01:28.940 --> 00:01:29.773 Try that out. 37 00:01:29.773 --> 00:01:31.283 Pause the video and give it a go. 38 00:01:32.450 --> 00:01:33.710 I'm sure you managed. 39 00:01:33.710 --> 00:01:35.720 All that you do is create a new A sign, 40 00:01:35.720 --> 00:01:40.720 give it a new HREF of URL for and the homepage in here. 41 00:01:43.800 --> 00:01:47.733 Then close the tag and type in home, for example. 42 00:01:48.970 --> 00:01:52.440 Notice how the HREF needs these quotation marks around it 43 00:01:52.440 --> 00:01:54.900 because the HREF contents have to be 44 00:01:54.900 --> 00:01:56.743 inside quotation marks for HTML. 45 00:01:57.690 --> 00:02:02.030 This here will be replaced by the URL or the endpoint 46 00:02:02.030 --> 00:02:04.883 of your home function, this one. 47 00:02:05.980 --> 00:02:09.010 If we run the app now and we go back to Chrome 48 00:02:09.010 --> 00:02:11.880 and we refresh, we can see that we've lost the blog post, 49 00:02:11.880 --> 00:02:14.750 first of all, but we have this Home there. 50 00:02:14.750 --> 00:02:17.883 If we go into a specific post, that Home is still there. 51 00:02:19.170 --> 00:02:20.670 Something that isn't there, though, 52 00:02:20.670 --> 00:02:23.820 is the ability to create a new post. 53 00:02:23.820 --> 00:02:26.070 I think that creating a new post should only be 54 00:02:26.070 --> 00:02:27.110 in the homepage. 55 00:02:27.110 --> 00:02:29.040 So let's stop our app, minimise that 56 00:02:29.040 --> 00:02:30.840 and go over to the homepage, 57 00:02:30.840 --> 00:02:33.940 and down below, add another link. 58 00:02:33.940 --> 00:02:36.463 Once again, I think you can do this. 59 00:02:37.940 --> 00:02:39.120 Hopefully, you got that. 60 00:02:39.120 --> 00:02:40.380 In order to create a new post, 61 00:02:40.380 --> 00:02:42.910 all we have to do is again the same. 62 00:02:42.910 --> 00:02:45.610 So create an A tag, which an anchor tag. 63 00:02:45.610 --> 00:02:47.533 In the HREF, type URL for, 64 00:02:48.480 --> 00:02:51.000 and then here, the name of the function 65 00:02:51.000 --> 00:02:56.000 that will give you your create.jinja2. 66 00:02:56.430 --> 00:02:58.730 That's the create function, so let's go there. 67 00:02:59.910 --> 00:03:01.260 It doesn't need any arguments. 68 00:03:01.260 --> 00:03:03.560 Any arguments could go here after a comma, 69 00:03:03.560 --> 00:03:05.660 but it doesn't need any because it doesn't 70 00:03:06.900 --> 00:03:08.673 take any parameters. 71 00:03:09.930 --> 00:03:11.500 That's it. 72 00:03:11.500 --> 00:03:12.670 Pressed something too many times there, 73 00:03:12.670 --> 00:03:15.090 and then type create post, 74 00:03:15.090 --> 00:03:17.890 create new post, for example, close the A tag, 75 00:03:17.890 --> 00:03:19.630 and that's it. 76 00:03:19.630 --> 00:03:21.500 Again, we can run our app. 77 00:03:21.500 --> 00:03:23.880 Go over here, refresh, 78 00:03:23.880 --> 00:03:26.900 and now we can see this Create new post thing there. 79 00:03:26.900 --> 00:03:29.400 So now we've got a bit of a nicer navigation there 80 00:03:29.400 --> 00:03:30.270 that we can navigate our page 81 00:03:30.270 --> 00:03:33.223 without having to type out the URLs ourselves. 82 00:03:35.280 --> 00:03:38.590 I want you to realise these are just building blocks. 83 00:03:38.590 --> 00:03:40.160 You know, you've got your links, 84 00:03:40.160 --> 00:03:42.490 you've got your P tags, your lists 85 00:03:42.490 --> 00:03:46.150 and a few things in Flask like URL for, 86 00:03:46.150 --> 00:03:48.100 redirect, render templates, 87 00:03:48.100 --> 00:03:50.490 the ability to show information, 88 00:03:50.490 --> 00:03:52.730 and there are countless things you can do 89 00:03:52.730 --> 00:03:54.620 with this knowledge already. 90 00:03:54.620 --> 00:03:57.680 Granted, the website could look a bit nicer. 91 00:03:57.680 --> 00:04:00.100 You wanna look at CSS for that. 92 00:04:00.100 --> 00:04:01.530 This is not the course for that 93 00:04:01.530 --> 00:04:03.680 because this is not a web course, 94 00:04:03.680 --> 00:04:06.650 but if you want to look at CSS for styling the page, 95 00:04:06.650 --> 00:04:09.160 make it look a bit nicer, add some colour, 96 00:04:09.160 --> 00:04:12.530 different font sizes, maybe not put everything just 97 00:04:12.530 --> 00:04:13.610 on the left of the page, 98 00:04:13.610 --> 00:04:15.110 maybe put things centred in the middle 99 00:04:15.110 --> 00:04:16.490 or something like that. 100 00:04:16.490 --> 00:04:17.410 You can learn about that, 101 00:04:17.410 --> 00:04:19.910 and it's actually fairly straightforward 102 00:04:19.910 --> 00:04:23.650 to do some simple but nice looking website. 103 00:04:23.650 --> 00:04:27.040 And now with Python, you can do a lotta stuff. 104 00:04:27.040 --> 00:04:29.670 You know Python pretty well by now. 105 00:04:29.670 --> 00:04:31.860 You can store things in a database 106 00:04:31.860 --> 00:04:33.920 and do countless other things 107 00:04:33.920 --> 00:04:36.140 in terms of giving the use and information 108 00:04:36.140 --> 00:04:38.250 and calculating things. 109 00:04:38.250 --> 00:04:41.109 Hopefully, this opens new doors for you 110 00:04:41.109 --> 00:04:43.870 in terms of communicating with your users. 111 00:04:43.870 --> 00:04:45.540 I hope you've enjoyed this section, 112 00:04:45.540 --> 00:04:48.730 and I've been glad to guide you through Flask development, 113 00:04:48.730 --> 00:04:50.480 and I'll see you in the next video.