1 00:00:00,630 --> 00:00:01,680 Hey, welcome back. 2 00:00:01,710 --> 00:00:06,420 In the previous video, we applied some for loops using Jinja syntax. 3 00:00:06,450 --> 00:00:12,000 Now let's learn how to apply if conditionals again inside HTML. 4 00:00:12,030 --> 00:00:15,180 Before that, I want to do some housekeeping here. 5 00:00:15,390 --> 00:00:20,940 I want to indent the inner blocks, the inner lines of this block. 6 00:00:21,030 --> 00:00:28,020 So, for example, we have the opening for line, the closing for line, and it makes sense to have 7 00:00:28,020 --> 00:00:29,070 these indented. 8 00:00:29,070 --> 00:00:32,790 So select them and press tab to indent. 9 00:00:33,930 --> 00:00:42,530 Again, I would like to indent these so the inner for loop from here to here indented again. 10 00:00:42,540 --> 00:00:46,180 So this makes the code more readable. 11 00:00:46,200 --> 00:00:47,670 Same for this. 12 00:00:48,300 --> 00:00:49,260 Like that. 13 00:00:50,040 --> 00:00:51,450 And also this last one. 14 00:00:51,900 --> 00:00:55,230 So that's the sort of hierarchy now. 15 00:00:55,470 --> 00:01:01,510 And let's start with if conditionals, why do we need to apply if conditionals here? 16 00:01:02,500 --> 00:01:12,070 Well, because we need to display only those meals which belong to their appropriate category. 17 00:01:12,100 --> 00:01:15,550 For example, a seafood pasta starter. 18 00:01:15,580 --> 00:01:17,860 Is being stew a starter? 19 00:01:17,890 --> 00:01:19,240 No, I don't think so. 20 00:01:19,750 --> 00:01:29,650 So being stew has to be displayed only when we're looping over the main dishes categories. 21 00:01:29,650 --> 00:01:30,220 So. 22 00:01:30,850 --> 00:01:37,300 When we do full meal in meals, Then down here we say also that. 23 00:01:39,510 --> 00:01:44,430 If actually this has to go under this. 24 00:01:48,590 --> 00:01:53,210 We want to check if rho dot meal type. 25 00:01:53,210 --> 00:01:57,050 So rho represents a database table. 26 00:01:57,500 --> 00:02:05,870 That means we are accessing the meal type, which could be salad starters. 27 00:02:05,870 --> 00:02:06,680 ET cetera. 28 00:02:07,820 --> 00:02:08,930 So we're here. 29 00:02:09,020 --> 00:02:19,220 If that is equal to meal dot zero, then we display the meal and the description. 30 00:02:19,220 --> 00:02:26,870 So this is checking that the current meal like pasta or bean stew. 31 00:02:26,900 --> 00:02:35,390 If that meal has a type, the current category that is being iterated in the meal types. 32 00:02:35,390 --> 00:02:35,810 Right. 33 00:02:35,840 --> 00:02:37,460 We have the meal types. 34 00:02:37,940 --> 00:02:45,770 So if the current meal is that category, then we display these. 35 00:02:45,800 --> 00:02:47,300 Now let's close that. 36 00:02:47,300 --> 00:02:53,400 If conditional block and then see on the web page what is displayed to close that. 37 00:02:53,400 --> 00:03:00,270 If conditional, We use basically the same style as the end for but we do and if. 38 00:03:02,250 --> 00:03:03,150 This time. 39 00:03:03,420 --> 00:03:07,290 So with that, you can refresh the page. 40 00:03:07,320 --> 00:03:11,200 And this time we're going to see no duplicate data. 41 00:03:11,220 --> 00:03:15,300 So, for example, seafood pasta belongs to starters. 42 00:03:16,490 --> 00:03:17,330 Salads. 43 00:03:17,330 --> 00:03:19,430 We have Greek salads, main dishes. 44 00:03:19,430 --> 00:03:25,220 We have beans to corn tortilla pizza and panna cotta under desserts. 45 00:03:25,670 --> 00:03:28,070 So that's how you use. 46 00:03:28,070 --> 00:03:35,510 And if and let me delete this line and perhaps we want to indent this under the for loop. 47 00:03:35,510 --> 00:03:45,320 So the if conditional block is nested under the inner for loop that loop out prefer to have this here 48 00:03:45,320 --> 00:03:49,820 actually in the same level with h three it makes more sense. 49 00:03:50,240 --> 00:03:53,630 So that was how to use the if conditional block. 50 00:03:53,630 --> 00:04:01,100 But now I also want to show you how to use the if else conditional block because you know on the website 51 00:04:01,130 --> 00:04:07,640 we need to apply a strikethrough font through some of these meals. 52 00:04:07,910 --> 00:04:16,769 So for meals which are not available for example Panacotta is unavailable, is set as unavailable from 53 00:04:16,769 --> 00:04:23,250 the kooks, then we want to show that with that strikethrough fonts here. 54 00:04:23,250 --> 00:04:28,620 And to do that we need if else in the code in index.html. 55 00:04:28,620 --> 00:04:33,150 So that's wrote meal and that's row dot description. 56 00:04:33,150 --> 00:04:41,220 So row that meal is for example this and row dot description is this same for pizza row that meal a 57 00:04:41,220 --> 00:04:42,510 row that description. 58 00:04:43,330 --> 00:04:48,280 And so let's try to strike through this line. 59 00:04:48,280 --> 00:04:50,350 So for that we say. 60 00:04:52,260 --> 00:04:57,570 If row dot status is equal to zero. 61 00:04:58,990 --> 00:05:01,150 Why robot status? 62 00:05:01,180 --> 00:05:10,930 Well, because in Models.py we have the status field which can have zeros or ones. 63 00:05:11,380 --> 00:05:17,560 So when the cook sets the status as unavailable in the database. 64 00:05:18,370 --> 00:05:26,710 So in the table here, status, the status column, you see it says either 0 or 1. 65 00:05:26,710 --> 00:05:30,310 So for Panacotta, which is this row here. 66 00:05:31,040 --> 00:05:34,430 That's panacotta status is equal to. 67 00:05:35,250 --> 00:05:35,790 Zero. 68 00:05:35,790 --> 00:05:38,080 So that means Panadol is unavailable. 69 00:05:38,100 --> 00:05:41,690 That's exactly what we're checking in here. 70 00:05:41,700 --> 00:05:42,480 Right. 71 00:05:42,750 --> 00:05:50,910 So if status is zero, we want to apply a strikethrough formatting, also known as the deal tag. 72 00:05:50,910 --> 00:05:58,080 So delete an opening tag and also a closing delete tag. 73 00:05:58,080 --> 00:06:05,190 So just inside the H3 tags of the row that meal variable. 74 00:06:05,700 --> 00:06:07,830 And let's check the website. 75 00:06:07,860 --> 00:06:09,240 Let's refresh. 76 00:06:09,990 --> 00:06:14,070 Oh, we forgot to close if conditional. 77 00:06:14,070 --> 00:06:15,540 So we open it here. 78 00:06:15,540 --> 00:06:18,630 We need to close it in here. 79 00:06:18,780 --> 00:06:26,370 I'll just actually double duplicate these endif and indent them here. 80 00:06:26,370 --> 00:06:28,230 Delete this empty line. 81 00:06:28,470 --> 00:06:32,790 So the new if conditional block starts here and it ends here. 82 00:06:32,820 --> 00:06:33,300 Right? 83 00:06:33,300 --> 00:06:35,620 So let's refresh again the page. 84 00:06:35,950 --> 00:06:41,400 So we do see some formatting in here for Greek salad and panacotta. 85 00:06:41,410 --> 00:06:43,390 However, something else has happened. 86 00:06:43,390 --> 00:06:45,700 Some of the meals have disappeared. 87 00:06:45,700 --> 00:06:48,250 For example, we had a starters. 88 00:06:48,250 --> 00:06:51,100 We have we had pasta, right? 89 00:06:51,100 --> 00:06:54,640 It's not here anymore because that's what we're doing here. 90 00:06:54,640 --> 00:07:00,700 We're saying that if the status is zero, then create these elements, right? 91 00:07:00,730 --> 00:07:03,970 Otherwise these will not be created. 92 00:07:04,030 --> 00:07:11,410 So if you want to create the elements, if you want to show something on the web page here for the other 93 00:07:11,410 --> 00:07:15,610 meals, then you want to apply an else conditional as well. 94 00:07:15,850 --> 00:07:20,500 And you do that before you close the end if conditional. 95 00:07:20,500 --> 00:07:24,460 Block So else is basically part of the if conditional. 96 00:07:24,460 --> 00:07:27,250 BLOCK It's an optional part. 97 00:07:27,520 --> 00:07:34,990 So you would say else and here you do you do want to display whatever you want to display. 98 00:07:34,990 --> 00:07:41,470 So in this case it would be these two but without the deal tags. 99 00:07:41,470 --> 00:07:44,500 So like that. 100 00:07:47,520 --> 00:07:48,960 Yeah, that should do it. 101 00:07:49,050 --> 00:07:50,550 Let's refresh. 102 00:07:51,410 --> 00:07:52,520 So here we go. 103 00:07:52,550 --> 00:07:53,930 We have starters. 104 00:07:53,930 --> 00:07:56,780 Seafood, pasta with its ingredients. 105 00:07:56,780 --> 00:08:02,240 So the description salads, we have Greek salad with its descriptions. 106 00:08:02,240 --> 00:08:07,700 So Greek salad has this strikethrough format, which means it is unavailable. 107 00:08:09,140 --> 00:08:13,190 So with that, we have completed this video. 108 00:08:13,190 --> 00:08:18,220 So that's how you can apply an if else, conditional block. 109 00:08:18,230 --> 00:08:19,610 Let's do some housekeeping. 110 00:08:19,610 --> 00:08:26,420 So would like to indent this in here and this also under else so the code is more readable. 111 00:08:26,810 --> 00:08:32,270 Next what we want to do is we want to turn these meals. 112 00:08:32,270 --> 00:08:35,870 So seafood, pasta, Greek salad, beans, stew. 113 00:08:35,900 --> 00:08:42,440 We want to turn these into links so that the user can click any of them, and then they will be brought 114 00:08:42,440 --> 00:08:49,700 to a web page where they can see some extra information for each of these meals. 115 00:08:49,880 --> 00:08:51,530 So let's do that in the next video. 116 00:08:51,530 --> 00:08:52,130 I'll see you there.