1 00:00:00,610 --> 00:00:01,540 Hey, welcome back. 2 00:00:01,540 --> 00:00:06,040 In this video, we will work on the index.html file. 3 00:00:06,340 --> 00:00:10,240 So currently this renders this text here. 4 00:00:10,240 --> 00:00:10,750 Hello. 5 00:00:10,750 --> 00:00:14,410 Which corresponds to that H1 tag there. 6 00:00:14,500 --> 00:00:23,500 And we want to implement the job application form, which is the same form we had with the Flask app. 7 00:00:23,500 --> 00:00:26,050 So if I open the Flask app now. 8 00:00:28,100 --> 00:00:33,280 And if I run this, you don't have to open your own flask app. 9 00:00:33,290 --> 00:00:34,460 You can just watch me. 10 00:00:38,270 --> 00:00:41,580 I just want to remind you what this app consisted of. 11 00:00:41,600 --> 00:00:44,330 So that's the job application form. 12 00:00:44,330 --> 00:00:51,770 And this form is constructed by that index.html template in the Flask app. 13 00:00:51,770 --> 00:00:53,750 So I'm in the Flask app now. 14 00:00:54,260 --> 00:01:00,500 So what I'll do is I'll just copy the index.html file which is inside the templates directory. 15 00:01:00,680 --> 00:01:09,560 So copy it and then I'll go to my Django application which we are working on and click on templates. 16 00:01:10,010 --> 00:01:11,960 Right click paste. 17 00:01:11,990 --> 00:01:12,980 Okay. 18 00:01:12,980 --> 00:01:17,520 And overwrite to overwrite our existing index.html. 19 00:01:17,540 --> 00:01:25,700 So what I just did is I just copied the index.html file from my flask app to my Django app because the 20 00:01:25,700 --> 00:01:28,370 code is 99% similar. 21 00:01:28,370 --> 00:01:31,650 We have to change only two things from this code. 22 00:01:31,670 --> 00:01:36,530 So if you don't have this code, you can find it at touched in the lecture resources in this video. 23 00:01:36,530 --> 00:01:40,500 And I'm also going to go through the code very quickly to explain it. 24 00:01:40,500 --> 00:01:46,350 If you want some more information, more detailed work through on this code, you have to go in the 25 00:01:46,350 --> 00:01:51,990 previous app app 16 where we build the flask application form. 26 00:01:52,140 --> 00:02:00,390 So let me see now what we have on the Django side so that the URL corresponds to the Django app. 27 00:02:00,600 --> 00:02:02,220 Let's reload it. 28 00:02:02,250 --> 00:02:08,460 If you still see the same output, then you want to go to the terminal control C to stop the app and 29 00:02:08,460 --> 00:02:13,020 then python manage.py runserver again, execute it. 30 00:02:13,890 --> 00:02:18,910 So visit the page and then you should see some updates. 31 00:02:18,930 --> 00:02:25,730 So that code, that index.html code is giving us this error, right? 32 00:02:25,740 --> 00:02:28,350 So the error is in line 46. 33 00:02:28,380 --> 00:02:33,900 You see it's here highlighted line 46 of index.html. 34 00:02:34,200 --> 00:02:38,900 So in line 46 index.html. 35 00:02:38,910 --> 00:02:44,580 So this line here should be removed because this was a feature of flask. 36 00:02:44,580 --> 00:02:50,520 Get flash messages with Django, we show the messages differently, so please delete that. 37 00:02:50,520 --> 00:02:57,150 And you also want to delete the end with line because that line pairs with the line we just deleted. 38 00:02:57,150 --> 00:02:58,740 So please delete that as well. 39 00:02:59,490 --> 00:03:00,420 Go here. 40 00:03:00,930 --> 00:03:02,190 Refresh. 41 00:03:02,760 --> 00:03:03,960 Send. 42 00:03:05,340 --> 00:03:10,080 So now it looks like we've got the app interface. 43 00:03:10,110 --> 00:03:12,810 It's looking exactly like the Flask app. 44 00:03:12,810 --> 00:03:15,900 Depending on what browser you open it, of course. 45 00:03:15,900 --> 00:03:17,580 So let me go to Chrome. 46 00:03:18,000 --> 00:03:19,500 Paste the URL here. 47 00:03:19,530 --> 00:03:23,720 Yeah, so that's what we've got. 48 00:03:23,730 --> 00:03:25,260 Let's fill in the data. 49 00:03:25,440 --> 00:03:29,520 Don't expect it to work, but we can try it. 50 00:03:30,550 --> 00:03:31,440 Submit. 51 00:03:31,480 --> 00:03:32,800 We've got this error. 52 00:03:32,830 --> 00:03:35,620 Csrf verification failed. 53 00:03:35,650 --> 00:03:40,320 This is a security feature we need to add in Django. 54 00:03:40,330 --> 00:03:50,920 So you want to go back to the index.html template and locate the form tag which should be around here. 55 00:03:51,190 --> 00:04:00,100 Line 11 form method is equal to post and you want to create a new line and below there you want to write 56 00:04:00,550 --> 00:04:04,390 curly brackets percentage percentage in between. 57 00:04:04,390 --> 00:04:09,510 You want to say csrf underscore token. 58 00:04:09,520 --> 00:04:12,280 This is a security feature you add to Django. 59 00:04:12,280 --> 00:04:18,550 And so let's try again, click the URL, reload it, fill in the data. 60 00:04:21,680 --> 00:04:22,670 Submit. 61 00:04:23,000 --> 00:04:25,310 This time you'll see no error. 62 00:04:25,320 --> 00:04:26,990 However, nothing will happen. 63 00:04:26,990 --> 00:04:30,410 You will not see any outputs here, no messages. 64 00:04:30,410 --> 00:04:33,590 And of course, nothing will be stored in the database. 65 00:04:33,590 --> 00:04:39,800 So if I refresh the job application form table here, of course we will not see the data there because 66 00:04:39,800 --> 00:04:42,350 we haven't implemented yet anything. 67 00:04:42,350 --> 00:04:50,390 So this code now let me quickly explain the index dot HTML code and then later on we connect this code 68 00:04:50,390 --> 00:04:55,490 to our views.py file, right? 69 00:04:55,490 --> 00:04:59,510 So Views.py is here under job application. 70 00:04:59,510 --> 00:05:01,730 So let me quickly go through this code. 71 00:05:03,030 --> 00:05:10,020 Again, if you want more detailed explanation, you have to watch the videos in the Flask app where 72 00:05:10,020 --> 00:05:12,720 I cover this index.html file. 73 00:05:13,050 --> 00:05:16,710 So we have this html doctype tag, which is standard. 74 00:05:16,740 --> 00:05:21,930 Then we open the HTML tag in here and we close that here down below. 75 00:05:22,050 --> 00:05:26,400 And then we have the head tags opening here, closing here. 76 00:05:26,400 --> 00:05:34,290 So that's the head element containing some metadata such as the link to the bootstrap CSS file, which 77 00:05:34,320 --> 00:05:37,470 applies that nice styling. 78 00:05:37,500 --> 00:05:42,750 You know, you see these nice looking buttons here and radio buttons and so on. 79 00:05:42,990 --> 00:05:45,660 That happens through bootstrap. 80 00:05:45,690 --> 00:05:47,670 Then we have the body tag. 81 00:05:47,700 --> 00:05:54,270 Body contains all the visible elements, so not metadata, but actual elements you see here, such as 82 00:05:54,270 --> 00:06:00,930 the first name label, this input box, the other label and the input box and everything that you see 83 00:06:00,930 --> 00:06:01,410 here. 84 00:06:01,410 --> 00:06:03,010 So there we go. 85 00:06:03,010 --> 00:06:05,930 That's the job application form H1 tag. 86 00:06:05,950 --> 00:06:07,120 This one here. 87 00:06:07,450 --> 00:06:11,650 Then we have the form form. 88 00:06:11,650 --> 00:06:15,730 This basically symbolizes the entire form. 89 00:06:16,030 --> 00:06:22,930 Then inside form we have the different widgets, such as the first name label with its widgets. 90 00:06:22,930 --> 00:06:26,380 So the first name label and the widget, the input widget. 91 00:06:26,740 --> 00:06:34,810 And then we have the other last name label, and then we have the email, we have the date available, 92 00:06:34,810 --> 00:06:38,980 start date, and then we have all those radio buttons. 93 00:06:38,980 --> 00:06:45,130 So that here corresponds to that part employed, unemployed, self-employed students. 94 00:06:45,160 --> 00:06:50,620 Lastly, we have the button, this one in here, and then we have this part here. 95 00:06:50,830 --> 00:06:53,110 This is a conditional. 96 00:06:53,110 --> 00:06:57,250 This will display message, a message below the button. 97 00:06:57,250 --> 00:07:03,430 When the user presses the button to submit the data successfully, then we show that message here. 98 00:07:03,430 --> 00:07:09,100 Now, the message doesn't display because we need to add something else right there. 99 00:07:09,100 --> 00:07:13,240 We close the form tag, which we open up here, right? 100 00:07:13,240 --> 00:07:15,580 So we have this hierarchy structure. 101 00:07:16,520 --> 00:07:19,190 That's the closing tag of form. 102 00:07:19,340 --> 00:07:23,130 This is also a closing tag of a division. 103 00:07:23,150 --> 00:07:24,440 That's the division. 104 00:07:24,440 --> 00:07:26,030 We close everything here. 105 00:07:26,060 --> 00:07:34,940 Then we have some links to JS files, JavaScript files, and this makes possible the displaying of that 106 00:07:34,940 --> 00:07:37,380 message which we will implement later. 107 00:07:37,400 --> 00:07:42,320 So the message will display dynamically below the submit button just here. 108 00:07:42,350 --> 00:07:43,020 Right. 109 00:07:43,040 --> 00:07:50,420 Then we close the body tag, which we open up further up and we close the HTML tag and that's the index.html 110 00:07:50,450 --> 00:07:51,200 template. 111 00:07:51,740 --> 00:07:57,370 So in the next videos, we will get the data from the user. 112 00:07:57,380 --> 00:08:04,130 So wherever the user enters here, we'll capture them in the views.py file. 113 00:08:04,130 --> 00:08:07,280 We will get them as strings and then store them in the database. 114 00:08:07,280 --> 00:08:08,570 Let's do that in the next video. 115 00:08:08,600 --> 00:08:08,930 See you.