1 00:00:01,040 --> 00:00:01,980 Hey, welcome back. 2 00:00:02,000 --> 00:00:09,770 In this video, we will add a navigation menu here on top and then apply bootstrap to our website so 3 00:00:09,770 --> 00:00:11,630 it looks visually appealing. 4 00:00:11,810 --> 00:00:14,370 Let's start with the navigation menu. 5 00:00:14,450 --> 00:00:22,850 As you know from the previous Django apps, to add a navigation menu, you need to create a base template. 6 00:00:23,570 --> 00:00:31,490 Instead of creating that from scratch, I'm just going to give you the finished version of the template. 7 00:00:31,490 --> 00:00:34,670 You can download it from the lecture resources. 8 00:00:34,670 --> 00:00:36,980 It's called base dot HTML. 9 00:00:37,670 --> 00:00:42,370 So please copy that file and paste it inside templates. 10 00:00:42,380 --> 00:00:46,370 So I copied base.html and I'll paste it in here. 11 00:00:47,060 --> 00:00:48,590 Base dot html. 12 00:00:49,100 --> 00:00:50,810 So that's the file. 13 00:00:59,620 --> 00:01:08,320 This file contains a navigation menu which starts in the nav tags and it ends in here. 14 00:01:08,320 --> 00:01:15,340 So that's the navigation menu and you'll see how it looks like on the front end in just a bit. 15 00:01:15,550 --> 00:01:17,860 But basically it has two links. 16 00:01:17,860 --> 00:01:23,530 So this one here, the home and the about links. 17 00:01:24,640 --> 00:01:32,430 Now these two lines here, as I've explained before in the previous Django apps, these lines here are 18 00:01:32,430 --> 00:01:42,820 are going to be replaced dynamically by Django with the current page being rendered which could be index.html 19 00:01:42,850 --> 00:01:45,850 or menu item detail dot HTML. 20 00:01:45,940 --> 00:01:59,620 So in order to to link that base.html with index.html you need to go to index.html and delete that part. 21 00:01:59,620 --> 00:02:05,450 So delete the body tags and everything above that URL. 22 00:02:05,590 --> 00:02:10,330 So these closing body and HTML tags delete them as well. 23 00:02:10,330 --> 00:02:22,870 And here on top you want to use jinja syntax with that symbol and say extends single quotes base dot 24 00:02:23,200 --> 00:02:24,100 HTML. 25 00:02:24,100 --> 00:02:33,400 And then after that you want to say the same syntax basically and you say block content. 26 00:02:33,700 --> 00:02:43,690 And at the end here again the same syntax and you say end block one word content. 27 00:02:44,590 --> 00:02:48,010 So you see block content and block content. 28 00:02:48,010 --> 00:02:55,180 All these here, they will be inserted into here, into this area here. 29 00:02:55,180 --> 00:02:59,960 So we remove the head tags because we have them in the base dot HTML. 30 00:02:59,960 --> 00:03:08,300 So base dot HTML is being merged with index.html and we'll do the same with menu item detail dot html. 31 00:03:08,300 --> 00:03:11,120 So copy those two lines. 32 00:03:11,120 --> 00:03:19,730 The jinja two code go to menu item html, delete the body tags and everything above it. 33 00:03:19,850 --> 00:03:24,830 Paste those two lines, delete the closing body and HTML tags as well. 34 00:03:24,830 --> 00:03:34,070 And you want to paste there this line and block content and that's it. 35 00:03:34,490 --> 00:03:38,810 Now if you go to refresh the home page, this one here. 36 00:03:40,180 --> 00:03:46,030 We're going to see home and about now both home and the about links. 37 00:03:46,060 --> 00:03:50,080 They link to you can see that in base.html. 38 00:03:50,110 --> 00:03:53,560 They both link to the home URL. 39 00:03:53,560 --> 00:03:58,930 So home is the name of the URL in urls.py. 40 00:03:59,860 --> 00:04:02,040 So that's the URL. 41 00:04:02,050 --> 00:04:12,840 So when the user clicks home or about then this view will be triggered and that view will render index.html. 42 00:04:12,850 --> 00:04:16,779 So both these items, they take you to the home page. 43 00:04:16,779 --> 00:04:18,700 So if you want to change any of that. 44 00:04:18,700 --> 00:04:26,460 So if you want to change the about link to something else, you'll need to work on the base dot HTML. 45 00:04:26,470 --> 00:04:28,660 So you want to change that. 46 00:04:29,260 --> 00:04:30,820 So that's the about link. 47 00:04:30,850 --> 00:04:38,530 You want to change home to another name and then you want to add a URL in here in this list in the URL 48 00:04:38,530 --> 00:04:44,930 patterns, add URL giving a name which corresponds to that name, right? 49 00:04:44,930 --> 00:04:52,790 And of course for that new URL, you want to link it to a view which can be another view you want you 50 00:04:52,790 --> 00:04:56,120 may want to create here for the about page. 51 00:04:56,270 --> 00:05:00,110 That view could look something like this, perhaps like this here. 52 00:05:00,560 --> 00:05:05,090 And then you want to create an HTML template here as well. 53 00:05:05,090 --> 00:05:07,310 Similar to menu item detail. 54 00:05:07,310 --> 00:05:10,610 Perhaps you want to just write some text. 55 00:05:10,640 --> 00:05:18,020 You don't need to add variables or so, but that's the idea if you want to add more pages. 56 00:05:18,410 --> 00:05:20,990 So that's where we are right now. 57 00:05:22,070 --> 00:05:27,230 Next is we want to add some styling to these elements as well. 58 00:05:27,590 --> 00:05:32,000 So let's do that in index.html. 59 00:05:32,000 --> 00:05:33,470 So that's the home page. 60 00:05:34,230 --> 00:05:39,570 The first thing I want to do is I want to apply div tags. 61 00:05:40,990 --> 00:05:54,400 So all that up to here will go inside div tags and that will contain class container. 62 00:05:55,390 --> 00:06:02,920 So that's a bootstrap class because now we have bootstrap, we have applied bootstrap here and we did 63 00:06:02,920 --> 00:06:04,690 that in Base.html. 64 00:06:04,690 --> 00:06:11,980 So if you see inside the head tags, we have a link to bootstrap this one in here. 65 00:06:12,370 --> 00:06:22,000 So this links take you to a file, a CSS file being stored somewhere remotely, and that file contains 66 00:06:22,030 --> 00:06:22,990 CSS code. 67 00:06:22,990 --> 00:06:27,070 So now we're using the CSS classes. 68 00:06:27,070 --> 00:06:28,990 Such as. 69 00:06:31,590 --> 00:06:37,680 The container class here, which will apply like some styling to all the elements. 70 00:06:37,680 --> 00:06:39,990 You can see it already if we refresh. 71 00:06:39,990 --> 00:06:46,920 So it applies some margin here between the border and the items, right? 72 00:06:46,920 --> 00:06:48,930 So it's looking better already. 73 00:06:49,080 --> 00:06:57,720 And then for the items here, I think a UL tag would be appropriate here followed by l i tags. 74 00:06:57,720 --> 00:06:59,310 So list tags. 75 00:06:59,310 --> 00:07:13,650 So you would put the UL tags in here and close it just before the closing div like that and then indent 76 00:07:13,650 --> 00:07:14,850 everything. 77 00:07:15,330 --> 00:07:23,610 And this will have a class as list minus group list, group flush. 78 00:07:23,610 --> 00:07:27,840 You can google these classes if you're curious what exactly they do. 79 00:07:27,840 --> 00:07:30,630 So these are all bootstrap classes. 80 00:07:30,630 --> 00:07:41,340 I'll apply a class of p t minus five for this that defines the padding on top of the meals, the meal 81 00:07:41,340 --> 00:07:42,030 names. 82 00:07:42,030 --> 00:07:47,970 So that's meal dot one and then output each of these meals. 83 00:07:49,030 --> 00:07:51,370 Inside l i tags. 84 00:07:52,240 --> 00:08:01,390 So I open it here and you want to close it above the description. 85 00:08:02,760 --> 00:08:11,040 Here unindented with shift tab and I'll do the same for the description in here. 86 00:08:11,280 --> 00:08:13,750 So I'll do l. 87 00:08:13,800 --> 00:08:19,810 I open it and close it here on indent. 88 00:08:19,830 --> 00:08:24,180 So the meal name and the description are inside l one tags. 89 00:08:24,630 --> 00:08:31,320 And now each of these L one tags is going to have a particular class, a bootstrap class such as list 90 00:08:31,350 --> 00:08:45,420 group item D minus flex justify content between the items, between the list items align minus items 91 00:08:46,290 --> 00:08:47,250 center. 92 00:08:49,590 --> 00:08:50,880 Without a border. 93 00:08:50,880 --> 00:08:55,380 So border zero and padding bottom zero as well. 94 00:08:58,840 --> 00:09:04,810 And for the descriptions this will be less styling. 95 00:09:04,810 --> 00:09:11,580 So that would be list minus group minus item zero. 96 00:09:11,920 --> 00:09:17,540 And then we have to do the same for the items under LS. 97 00:09:17,560 --> 00:09:21,190 So put that here L one. 98 00:09:23,720 --> 00:09:24,890 Somewhere here. 99 00:09:26,450 --> 00:09:31,370 And you want to close it in here, right? 100 00:09:31,730 --> 00:09:36,530 You want to copy the other one for the description in here? 101 00:09:37,340 --> 00:09:38,420 Unindented. 102 00:09:38,420 --> 00:09:39,470 Somewhere here. 103 00:09:39,560 --> 00:09:41,150 And close it. 104 00:09:42,650 --> 00:09:43,520 In here. 105 00:09:44,870 --> 00:09:47,440 So it's the same as this. 106 00:09:47,450 --> 00:09:50,600 That's the same as this one here. 107 00:09:50,840 --> 00:09:54,980 You're going to find this attached as well in the lecture resources. 108 00:09:55,430 --> 00:09:57,520 Let's see how it looks for now. 109 00:09:57,530 --> 00:09:59,270 So it's looking better. 110 00:10:01,970 --> 00:10:05,210 There's one last thing we need to add, and that's the price. 111 00:10:05,330 --> 00:10:09,080 Let's add it somewhere in here to add the price. 112 00:10:09,080 --> 00:10:17,240 You can add after the eight tags, you can add the span tags open and close them. 113 00:10:17,600 --> 00:10:19,490 Give a class of. 114 00:10:21,360 --> 00:10:24,160 Badge, you'll see what badge looks like. 115 00:10:24,180 --> 00:10:25,440 BG Primary. 116 00:10:25,440 --> 00:10:33,390 That's the color that defines the color of the badge and rounded pill. 117 00:10:33,390 --> 00:10:34,960 That's like the style. 118 00:10:34,980 --> 00:10:37,530 So inside these pen tags. 119 00:10:37,530 --> 00:10:42,630 So between that and between this in here, you want to say 120 00:10:45,150 --> 00:10:48,820 M row, dot price. 121 00:10:48,840 --> 00:10:55,450 So we extract the price from the row variable and let's refresh. 122 00:10:55,470 --> 00:11:01,350 So there it goes, the price for the items with a strikethrough format. 123 00:11:01,380 --> 00:11:02,460 And let's do the same. 124 00:11:02,460 --> 00:11:07,230 Let's copy that span and paste it under the a tag in here. 125 00:11:08,490 --> 00:11:09,900 An indent with shift. 126 00:11:11,350 --> 00:11:15,550 Tab refresh and we see all the prices now. 127 00:11:17,080 --> 00:11:21,610 Lastly, if you click on seafood pasta, you will not see any styling. 128 00:11:21,610 --> 00:11:25,510 So let's apply some styling on the individual pages as well. 129 00:11:25,510 --> 00:11:27,880 Inside Menu Item Detail. 130 00:11:29,410 --> 00:11:34,300 You can do whatever you like here, but I'll just show you the way. 131 00:11:34,300 --> 00:11:40,480 So basically all you have to do is include the div tags there and here. 132 00:11:40,480 --> 00:11:48,520 So open and close them, indent these there, put the class container and then you can add more classes 133 00:11:48,520 --> 00:11:53,170 here as you like, like five for example. 134 00:11:53,170 --> 00:11:57,510 So if you refresh now this page, this is going to look a bit different. 135 00:11:57,520 --> 00:11:59,440 So that's about it. 136 00:12:01,540 --> 00:12:04,420 I think that's our completed app. 137 00:12:04,660 --> 00:12:08,020 You go to home page and yeah, that's the menu. 138 00:12:08,680 --> 00:12:14,080 So there was a lot of elements about Django that you were able to learn in this. 139 00:12:14,500 --> 00:12:16,780 So I hope this is useful for you. 140 00:12:16,780 --> 00:12:23,350 I know that this app contains a lot of elements, a lot of skills that you really needed to know about 141 00:12:23,350 --> 00:12:24,400 Django apps. 142 00:12:24,400 --> 00:12:31,330 So you're going to be reusing these elements with most of your Django apps, most of the Django apps 143 00:12:31,330 --> 00:12:34,180 that you build in your work in your career. 144 00:12:34,180 --> 00:12:36,430 So thanks a lot for following this. 145 00:12:36,430 --> 00:12:38,230 And yeah, let's do some more apps. 146 00:12:38,260 --> 00:12:39,220 See you in the next ones.