1 00:00:00,260 --> 00:00:01,340 Hey, welcome back. 2 00:00:01,370 --> 00:00:07,900 In the previous video, we coded the index.html file and also the app.py file. 3 00:00:07,910 --> 00:00:13,490 So these two files are producing this web page. 4 00:00:13,700 --> 00:00:19,960 The visible part though is the responsibility of the index dot html file. 5 00:00:19,970 --> 00:00:23,780 So let's work some more on the front end. 6 00:00:23,780 --> 00:00:27,230 So the front end is the HTML code. 7 00:00:27,260 --> 00:00:29,960 The back end is the python code. 8 00:00:30,710 --> 00:00:31,220 Right? 9 00:00:31,220 --> 00:00:32,750 So this is what we have so far. 10 00:00:32,750 --> 00:00:35,600 Just a heading here, this text. 11 00:00:35,600 --> 00:00:43,310 And let's add some input fields I first name and a second name field. 12 00:00:43,760 --> 00:00:45,080 How do we do that? 13 00:00:46,490 --> 00:00:52,490 Well, as I mentioned before, everything that is visible goes inside the body tags. 14 00:00:53,170 --> 00:00:56,330 So we have this H1 tag already. 15 00:00:56,350 --> 00:00:58,840 We want to add another one. 16 00:00:59,230 --> 00:01:00,610 Let's indent here. 17 00:01:01,270 --> 00:01:03,070 This will be a form, right? 18 00:01:03,070 --> 00:01:04,959 So we use the form tags. 19 00:01:05,920 --> 00:01:12,640 Inside the form tags we will have labels and input fields. 20 00:01:12,670 --> 00:01:16,990 So label, for example, first name. 21 00:01:20,840 --> 00:01:25,940 And just under that goes an input tag. 22 00:01:26,030 --> 00:01:32,870 Now you can notice that some tags have their corresponding closing tags, but other ones, such as the 23 00:01:32,870 --> 00:01:36,180 input tag, does not have a closing tag. 24 00:01:36,200 --> 00:01:42,550 So with inputs, you write here the parameters of that tag. 25 00:01:42,560 --> 00:01:52,370 So the type will be text for this input, the ID will be first name and the name will be first name 26 00:01:52,370 --> 00:01:53,030 as well. 27 00:01:53,030 --> 00:02:01,400 So these will be needed later on because we refer to that from the Python file. 28 00:02:02,630 --> 00:02:06,710 And so name is important for that part. 29 00:02:07,010 --> 00:02:11,460 And we want to make this a required field. 30 00:02:11,480 --> 00:02:12,680 So that's it. 31 00:02:13,190 --> 00:02:14,990 Oh, you need to remove the comma here. 32 00:02:14,990 --> 00:02:19,980 So you usually get these kind of highlighting when you have some issues there. 33 00:02:20,000 --> 00:02:24,980 So, for example, you can hover your mouse here and it says attributes, comma is not allowed, so 34 00:02:24,980 --> 00:02:26,510 you may want to delete that. 35 00:02:26,540 --> 00:02:32,690 Also, we have some highlighting here in labels, unknown HTML tag labels. 36 00:02:32,870 --> 00:02:35,240 So this is actually label, not a labels. 37 00:02:35,240 --> 00:02:47,480 And you also want to add here four is equal to first name and this refers to the ID, So if you change 38 00:02:47,480 --> 00:02:52,370 the ID to something else, for example, that this will be highlighted in red. 39 00:02:52,370 --> 00:02:55,430 So it says invalid ID reference. 40 00:02:55,430 --> 00:02:57,590 So you need to mention an ID here. 41 00:02:57,590 --> 00:03:05,220 So basically you are tying these two together and now if we go to the web page, so make sure that your 42 00:03:05,220 --> 00:03:06,030 app is running. 43 00:03:06,030 --> 00:03:08,910 My app is running so I don't need to rerun it again. 44 00:03:08,910 --> 00:03:16,560 I can just go here, refresh with Ctrl or Command R and you'll see the label and the field. 45 00:03:16,980 --> 00:03:20,190 So the field is this the label? 46 00:03:20,580 --> 00:03:22,260 Is this. 47 00:03:22,560 --> 00:03:31,530 Now there is also one more thing we may need to add here, and that is the div tags div like this and 48 00:03:31,530 --> 00:03:35,220 you want to cut that and place it just below here. 49 00:03:35,700 --> 00:03:39,840 So notice what I'm doing here, the hierarchy. 50 00:03:39,870 --> 00:03:45,210 So we have the form, it opens here and it closes here, right? 51 00:03:45,450 --> 00:03:49,710 And then parts of the form are these children. 52 00:03:49,710 --> 00:03:54,360 So div is the child of the form, so to say. 53 00:03:54,870 --> 00:04:03,870 And then Div now, which opens here and closes in here, has these children a label and an input tag 54 00:04:03,870 --> 00:04:04,920 or elements. 55 00:04:04,920 --> 00:04:07,680 In other words, why did I put div here? 56 00:04:07,680 --> 00:04:11,070 Well, because for now this will not change anything. 57 00:04:11,070 --> 00:04:12,990 So you can refresh the page. 58 00:04:13,080 --> 00:04:19,740 It doesn't change anything, but this allows us to actually keep these two organized and then we apply 59 00:04:19,740 --> 00:04:27,150 some styling to this div later on we'll add some class is equal to some bootstrap classes, but let's 60 00:04:27,150 --> 00:04:28,230 do that later. 61 00:04:29,160 --> 00:04:34,230 For now we'll leave it like that and then I'll select these four lines. 62 00:04:34,230 --> 00:04:43,470 So the div together with its two children and I'll press Ctrl or command D and that will duplicate that 63 00:04:43,470 --> 00:04:44,430 div. 64 00:04:44,730 --> 00:04:49,290 You see, we had these, now we have these also. 65 00:04:49,470 --> 00:04:54,120 And I did this because now I want the last name as well. 66 00:04:54,120 --> 00:04:55,320 So I want to write here. 67 00:04:55,320 --> 00:04:56,190 Last name. 68 00:04:56,220 --> 00:04:58,980 Last name type is text. 69 00:04:59,070 --> 00:05:01,320 The ID is last name. 70 00:05:01,320 --> 00:05:03,720 The name is also last name. 71 00:05:03,720 --> 00:05:07,410 Last underscore name, and it's a required field as well. 72 00:05:07,410 --> 00:05:09,150 So go to the Web page refresh. 73 00:05:09,150 --> 00:05:12,570 And we've got these two fields and two labels. 74 00:05:12,600 --> 00:05:15,630 Don't worry about the Luke for now. 75 00:05:15,630 --> 00:05:22,380 I know that these are very close to each other, but we'll fix that with CSS and bootstrap later on. 76 00:05:22,380 --> 00:05:27,180 So for now, let's just make sure the structure of the front end is accurate. 77 00:05:27,180 --> 00:05:28,650 So we have first name. 78 00:05:28,650 --> 00:05:29,760 We have a last name. 79 00:05:31,650 --> 00:05:37,980 Then we have the email input, so duplicate those with Ctrl or command D. 80 00:05:38,190 --> 00:05:41,850 So that is just say email here. 81 00:05:43,700 --> 00:05:46,130 Email for the label text. 82 00:05:46,820 --> 00:05:48,900 Then this will be email. 83 00:05:48,920 --> 00:05:50,330 The type is email. 84 00:05:50,330 --> 00:05:52,820 So this is one of the input types. 85 00:05:52,820 --> 00:05:53,750 We have text. 86 00:05:53,750 --> 00:05:55,160 We have email. 87 00:05:55,370 --> 00:05:59,420 It's good to have email here even though you can also use text. 88 00:05:59,570 --> 00:06:05,270 But having email means HTML will validate the user input there. 89 00:06:05,270 --> 00:06:11,840 So if the user is typing in something which doesn't contain the email at symbol, then the app will 90 00:06:11,840 --> 00:06:14,660 reject will not submit those entries. 91 00:06:14,660 --> 00:06:18,410 So it's very important to have email as the type here. 92 00:06:18,920 --> 00:06:22,310 Let's use email for the ID and the name as well. 93 00:06:23,000 --> 00:06:26,150 So that will reflect to this. 94 00:06:26,300 --> 00:06:27,770 So we have three entries. 95 00:06:27,770 --> 00:06:29,060 Let's add some more. 96 00:06:29,930 --> 00:06:38,960 The date the the applicant will select the date that they are available for the new job. 97 00:06:38,960 --> 00:06:42,930 So this will be the label for the date. 98 00:06:45,080 --> 00:06:49,040 Let's say available start date Type. 99 00:06:49,370 --> 00:06:51,170 Date ID. 100 00:06:51,170 --> 00:06:51,980 Date. 101 00:06:52,160 --> 00:06:52,820 Name. 102 00:06:52,820 --> 00:06:53,510 Date. 103 00:06:54,700 --> 00:06:55,050 Right. 104 00:06:55,060 --> 00:06:57,400 Let's see what this brings up. 105 00:06:57,640 --> 00:06:58,630 So there we go. 106 00:06:58,630 --> 00:07:01,570 By setting date as the type. 107 00:07:02,410 --> 00:07:09,640 Here that will give us the correct widget, the correct field for the date. 108 00:07:09,640 --> 00:07:12,880 So depending on your browser, though, this may look different. 109 00:07:12,880 --> 00:07:18,460 So on Chrome it will look something like this on different browsers can be. 110 00:07:19,430 --> 00:07:20,870 In different styles. 111 00:07:21,020 --> 00:07:23,170 So I hope that's clear. 112 00:07:23,180 --> 00:07:29,540 And the last element we want to add is a series of radio buttons. 113 00:07:29,750 --> 00:07:33,800 So we want to ask the user what is their current occupation? 114 00:07:33,800 --> 00:07:43,130 And we want to do that by showing them some options which they can select and let's duplicate the date 115 00:07:43,130 --> 00:07:43,670 widget. 116 00:07:43,670 --> 00:07:52,160 So this one here, let's duplicate it with Ctrl or command D, So that's the duplicated code and this 117 00:07:52,160 --> 00:07:58,100 is going to be the first option employed and remove that column. 118 00:07:58,880 --> 00:08:00,470 So for. 119 00:08:03,160 --> 00:08:04,450 Employed. 120 00:08:05,050 --> 00:08:09,400 So that will be the ID of the input type. 121 00:08:09,580 --> 00:08:14,860 So input type, this will be a radio type, right? 122 00:08:14,860 --> 00:08:19,690 So that's a label of this radio widget. 123 00:08:19,720 --> 00:08:30,850 The ID is going to be employed, the name also employed, and this will look like this on the website. 124 00:08:30,850 --> 00:08:33,210 So employed and the option there. 125 00:08:33,220 --> 00:08:37,960 Now this is on the left because the label is before. 126 00:08:37,960 --> 00:08:40,900 So if you want to change that, you want to cut this. 127 00:08:40,900 --> 00:08:49,000 So put your cursor anywhere in this line and press Ctrl or Command X and then go to the next line and 128 00:08:49,000 --> 00:08:51,700 yeah, put that in its place. 129 00:08:51,700 --> 00:08:56,650 So the input widget first and then the label and that will look like this. 130 00:08:56,650 --> 00:08:58,420 So now it looks better. 131 00:08:58,870 --> 00:09:01,330 Let's add another one. 132 00:09:01,450 --> 00:09:06,440 And before we do that we also need a label for the group of buttons. 133 00:09:06,440 --> 00:09:18,350 So label, label and let's say current occupation rates and this will look like this. 134 00:09:18,350 --> 00:09:22,550 So current occupation, we need a break line To create a break line. 135 00:09:22,670 --> 00:09:32,420 We need the BR tag so the current occupation label a break line, the widget and the label of the widget. 136 00:09:32,420 --> 00:09:34,280 So this will look like this now. 137 00:09:34,280 --> 00:09:36,200 Current occupation employed. 138 00:09:36,230 --> 00:09:41,570 And let's add another one so everything stays inside this div tags. 139 00:09:41,570 --> 00:09:42,170 Right? 140 00:09:42,170 --> 00:09:46,370 So now I select input and label and I duplicate it. 141 00:09:46,370 --> 00:09:49,340 So again, this will be type radio. 142 00:09:49,370 --> 00:09:52,130 The ID, let's add the other option. 143 00:09:52,160 --> 00:09:53,720 The first option was employed. 144 00:09:53,720 --> 00:09:55,760 The second option is unemployed. 145 00:09:56,240 --> 00:09:58,220 The current occupation of. 146 00:10:01,150 --> 00:10:05,110 The applicant for unemployed. 147 00:10:08,860 --> 00:10:18,100 And the label, the actual text that the user will see on the website will be unemployed as well with 148 00:10:18,100 --> 00:10:19,960 an uppercase letter. 149 00:10:19,960 --> 00:10:21,910 So these are invisible, right? 150 00:10:21,940 --> 00:10:26,350 All these are metadata, but this is what the user sees. 151 00:10:26,350 --> 00:10:30,070 So we refresh and we see this. 152 00:10:30,100 --> 00:10:31,600 It's not ideal. 153 00:10:31,600 --> 00:10:32,770 We will improve it. 154 00:10:32,800 --> 00:10:34,300 We will make it vertical later on. 155 00:10:34,300 --> 00:10:39,360 But let's keep it as it is for now so the user can select a one of them. 156 00:10:39,370 --> 00:10:43,180 However, currently that's not possible. 157 00:10:43,180 --> 00:10:48,040 So the user might select more than one option, which is not what we want. 158 00:10:48,760 --> 00:10:49,510 We'll fix that. 159 00:10:49,510 --> 00:10:52,180 But before that, let's add the other options as well. 160 00:10:52,180 --> 00:10:56,620 So let's duplicate that and we have three. 161 00:10:56,620 --> 00:11:03,610 Now I'll make some break lines between each group so it's more readable. 162 00:11:03,610 --> 00:11:06,160 And so this will be self. 163 00:11:07,950 --> 00:11:15,030 Employees copy that to the name and here in the label as well. 164 00:11:15,030 --> 00:11:19,380 So this is self employed. 165 00:11:19,650 --> 00:11:20,370 Right. 166 00:11:20,700 --> 00:11:24,390 One more time for the student status. 167 00:11:25,970 --> 00:11:26,510 So. 168 00:11:26,510 --> 00:11:28,700 Student name. 169 00:11:29,030 --> 00:11:33,020 Student for student. 170 00:11:33,900 --> 00:11:34,650 Texts. 171 00:11:34,680 --> 00:11:35,760 Student. 172 00:11:36,270 --> 00:11:37,740 Let's refresh. 173 00:11:38,530 --> 00:11:39,720 So there we go. 174 00:11:39,730 --> 00:11:42,430 Employed, unemployed, self employed student. 175 00:11:42,430 --> 00:11:47,860 And let's fix this issue now so that we force the user to select only one option. 176 00:11:50,600 --> 00:11:57,410 To do that, we should place all these four radio buttons inside a div. 177 00:11:57,500 --> 00:11:59,930 So let's do that. 178 00:11:59,930 --> 00:12:06,020 Let's go here with tab, create a div tag. 179 00:12:06,350 --> 00:12:09,080 So you want to cut that out? 180 00:12:09,230 --> 00:12:10,640 We want to go here. 181 00:12:12,340 --> 00:12:16,540 Pays that fix the indentation rates. 182 00:12:16,540 --> 00:12:22,120 And then we want to select all that block and press tab to indent it. 183 00:12:23,050 --> 00:12:25,930 And so notice we have two divs, right? 184 00:12:25,960 --> 00:12:31,240 We have this, that div, it opens here and it closes in here. 185 00:12:31,390 --> 00:12:40,300 And that div element encapsulates all the radio buttons plus this label here, current occupation, 186 00:12:40,300 --> 00:12:42,280 plus the break line. 187 00:12:42,460 --> 00:12:47,500 And then we have this other div element which opens here and it closes here. 188 00:12:47,680 --> 00:12:50,680 This encapsulates only the radio buttons. 189 00:12:50,680 --> 00:12:59,980 And now we can go inside this div tag here and add an ID which will be equal to occupation. 190 00:13:00,700 --> 00:13:09,130 Now this ID here occupation should reflect the name of these radio buttons. 191 00:13:09,610 --> 00:13:11,920 If we want to group them together. 192 00:13:11,920 --> 00:13:20,170 So instead of having a different name for each radio button, we should have occupation for all of them. 193 00:13:20,170 --> 00:13:27,220 Because currently if we go here, we refresh again, we can select all of them. 194 00:13:27,370 --> 00:13:32,980 But see now if I change this to occupation, so I'll copy that name to. 195 00:13:33,960 --> 00:13:35,040 Every button. 196 00:13:35,970 --> 00:13:39,750 So I'm working on the name attributes, right? 197 00:13:39,780 --> 00:13:41,820 Not on the ID attributes. 198 00:13:43,050 --> 00:13:51,810 So we've got occupation as the ID of the div occupation, as the names of the input elements. 199 00:13:51,810 --> 00:14:00,390 And now we go here, refresh, and the user can now select only one of the options. 200 00:14:02,420 --> 00:14:06,530 Because the options now are grouped together using that trick. 201 00:14:06,650 --> 00:14:12,530 And lastly, there's one more element we need to add to the form, and that is the button. 202 00:14:12,560 --> 00:14:14,030 The submit button. 203 00:14:15,080 --> 00:14:17,330 So we'll add that button somewhere here. 204 00:14:17,330 --> 00:14:25,430 And when the user presses that button, the user entries such as the first name, the last name they'll 205 00:14:25,430 --> 00:14:33,590 put here, the email address, the date and the selection here, all these data will be sent to Python 206 00:14:33,590 --> 00:14:36,640 right in the Python script. 207 00:14:36,650 --> 00:14:45,560 We'll get them as strings and then we'll send those strings as text by email to the user email address. 208 00:14:45,560 --> 00:14:51,950 So the user will enter an email address here and we will send an email to the user telling them, Oh, 209 00:14:51,950 --> 00:14:58,310 you sent us this data, this is your application, just so that they have that as a confirmation. 210 00:14:58,610 --> 00:15:02,570 And then we also store this data in an SQL database. 211 00:15:02,570 --> 00:15:04,340 So let's add that button. 212 00:15:05,240 --> 00:15:08,030 Let's go to index.html again. 213 00:15:08,540 --> 00:15:12,620 So we are here. 214 00:15:12,860 --> 00:15:14,570 No, the divs. 215 00:15:14,750 --> 00:15:20,540 So that's the div for the available starts widget. 216 00:15:20,780 --> 00:15:25,340 That's the div for the radio button group. 217 00:15:25,880 --> 00:15:28,310 So from here. 218 00:15:29,950 --> 00:15:31,120 Up to here. 219 00:15:31,120 --> 00:15:33,280 So we have two div elements. 220 00:15:34,220 --> 00:15:34,580 Right. 221 00:15:34,580 --> 00:15:42,410 And after the second div, which is between the form closing tag and the closing div here, just here 222 00:15:42,410 --> 00:15:48,800 we want to add a button element with a submit label. 223 00:15:48,800 --> 00:15:55,100 So that's the label of the button and also the type will be button with that. 224 00:15:55,100 --> 00:16:03,650 If we go to the website, we refresh, we should see this button here so it doesn't do anything for 225 00:16:03,650 --> 00:16:07,070 now, but we'll fix that in the next videos. 226 00:16:07,580 --> 00:16:11,000 So that's what I wanted to show you in this video. 227 00:16:11,000 --> 00:16:13,280 We built the structure of the front end. 228 00:16:13,280 --> 00:16:15,440 We have everything now here. 229 00:16:15,860 --> 00:16:20,060 These don't look very visually appealing for now. 230 00:16:20,060 --> 00:16:27,410 So in the next video, I want to focus on adding some style to this page using Bootstrap. 231 00:16:27,410 --> 00:16:30,290 So let's implement that in the next video. 232 00:16:30,290 --> 00:16:31,010 I'll see you there.