1 00:00:00,410 --> 00:00:02,842 Previously we created a new empty 2 00:00:02,843 --> 00:00:04,676 app in our Django project. 3 00:00:04,677 --> 00:00:08,724 Now the next step is to, so this 4 00:00:08,725 --> 00:00:11,540 step is completed, create empty Django app. 5 00:00:11,541 --> 00:00:14,270 The next one is to create HTML. 6 00:00:14,930 --> 00:00:16,700 So as we said, 7 00:00:16,701 --> 00:00:18,900 [No Audio] 8 00:00:18,901 --> 00:00:20,233 what we want to have is, 9 00:00:20,234 --> 00:00:23,306 we want to have a new menu item 10 00:00:23,307 --> 00:00:25,618 here, which we're going to create later the item 11 00:00:25,619 --> 00:00:27,468 but, first we want to create the page, 12 00:00:27,469 --> 00:00:30,252 then we add that page to the menu bar. 13 00:00:30,253 --> 00:00:33,180 So the page is going to be simple. 14 00:00:33,181 --> 00:00:36,940 It's going to have one text box in here, and another 15 00:00:36,941 --> 00:00:41,600 text box on the right, and a button somewhere below. 16 00:00:41,950 --> 00:00:45,232 So the user is expected to enter some text in 17 00:00:45,233 --> 00:00:48,896 English, and then when they press the button, that text 18 00:00:48,897 --> 00:00:51,782 is going to be translated to, let's say German. 19 00:00:51,783 --> 00:00:54,420 So we're going, to pick German as our example. 20 00:00:54,421 --> 00:00:57,332 Of course you can, improve the app later on by 21 00:00:57,333 --> 00:01:01,812 adding an option to choose other languages, as well. 22 00:01:01,813 --> 00:01:03,784 But for now we're going to keep it simple. 23 00:01:03,785 --> 00:01:06,158 So to focus on forms. 24 00:01:06,159 --> 00:01:10,470 So that will be a form, that we'll be building. 25 00:01:10,471 --> 00:01:15,490 Let us start by creating an html file under templates. 26 00:01:15,500 --> 00:01:18,570 [No Audio] 27 00:01:18,571 --> 00:01:24,333 So, right click over templates, and go to File, so New File. 28 00:01:26,066 --> 00:01:29,980 Perhaps translator.html would be a good file name. 29 00:01:31,390 --> 00:01:33,072 Now we want to build those 30 00:01:33,073 --> 00:01:35,184 two text boxes and the button. 31 00:01:35,185 --> 00:01:38,208 But instead of typing the html here, as you watch the 32 00:01:38,209 --> 00:01:42,116 video, I'm just going to copy the code, that I built 33 00:01:42,117 --> 00:01:45,600 already and paste it in here, and explain it to you. 34 00:01:46,370 --> 00:01:52,212 Now to make it look good, I will also paste the link 35 00:01:52,213 --> 00:01:53,366 to the Bootstrap 36 00:01:53,367 --> 00:01:55,466 [No Audio] 37 00:01:55,467 --> 00:01:59,224 source, so that the text boxes look nice. 38 00:01:59,225 --> 00:02:03,533 And you can find this code, attached to this lecture. 39 00:02:03,934 --> 00:02:08,316 So, I'll save it and then I'll right click here and 40 00:02:08,317 --> 00:02:13,628 go to Reveal in Finder or in Windows Explorer, and then 41 00:02:13,629 --> 00:02:16,988 I can double click it, and this is how it looks. 42 00:02:16,989 --> 00:02:18,786 So we have these two text boxes 43 00:02:18,787 --> 00:02:22,646 which can be expanded, by the user. 44 00:02:22,647 --> 00:02:24,752 The user can type text in here, can 45 00:02:24,753 --> 00:02:26,672 also type text in here, but this one 46 00:02:26,673 --> 00:02:29,958 here will basically serve, to show the output. 47 00:02:29,959 --> 00:02:33,488 But anyway, the user can also type in text, in there 48 00:02:33,489 --> 00:02:36,644 and modify the output, if they want and so on. 49 00:02:36,645 --> 00:02:38,356 And the Submit button is what 50 00:02:38,357 --> 00:02:40,868 translates, this text to that one. 51 00:02:40,869 --> 00:02:42,756 So now of course it's not working, 52 00:02:42,757 --> 00:02:44,900 don't expect this button to do anything. 53 00:02:45,128 --> 00:02:47,534 Because it's not connected to Django. 54 00:02:47,535 --> 00:02:50,100 Let me explain you what the code does? 55 00:02:50,630 --> 00:02:54,872 So, this link here is just temporarily in 56 00:02:54,873 --> 00:02:58,490 this file, because normally we don't need that. 57 00:02:58,491 --> 00:03:00,060 So I'm going to delete it. 58 00:03:00,061 --> 00:03:02,876 We don't need it because, that 59 00:03:02,877 --> 00:03:06,550 link is already in base.html. 60 00:03:08,430 --> 00:03:11,280 So this one in here, and that 61 00:03:11,281 --> 00:03:13,936 Bootstrap styling, will be applied to all 62 00:03:13,937 --> 00:03:18,038 the templates, that are extending base.html. 63 00:03:18,039 --> 00:03:20,772 Currently though, translator.html is 64 00:03:20,773 --> 00:03:22,762 not extending that template. 65 00:03:22,763 --> 00:03:25,866 So, let's add the tag, 66 00:03:25,867 --> 00:03:29,000 [No Audio] 67 00:03:29,001 --> 00:03:36,210 that extends, so extends in quotes, base.html. 68 00:03:37,190 --> 00:03:41,198 And then, we also want to do the tags 69 00:03:41,199 --> 00:03:52,533 again, and say block content, there and, close it in here. 70 00:03:53,600 --> 00:03:59,632 endblock content, just like that. 71 00:03:59,633 --> 00:04:01,968 So this file is going to get the code of 72 00:04:01,969 --> 00:04:05,920 base.html, and this code will be combined with that 73 00:04:05,921 --> 00:04:11,152 code, to serve the complete page, including the navigation bar. 74 00:04:11,153 --> 00:04:13,588 So the menu items on the web page. 75 00:04:13,589 --> 00:04:15,092 So this is what we have here. 76 00:04:15,093 --> 00:04:17,636 We have this class container which is 77 00:04:17,637 --> 00:04:20,212 the main div, that contains everything. 78 00:04:20,213 --> 00:04:23,576 So it starts in here and it closes in here. 79 00:04:23,577 --> 00:04:27,110 And inside this div contains a form. 80 00:04:27,111 --> 00:04:30,728 So the form starts in here, and it ends in here. 81 00:04:30,729 --> 00:04:35,228 So the form is this, including both 82 00:04:35,229 --> 00:04:37,240 the text boxes and the button. 83 00:04:37,240 --> 00:04:39,930 [No Audio] 84 00:04:39,931 --> 00:04:44,466 So this one here, is a row. 85 00:04:44,467 --> 00:04:46,840 It starts in here, it ends in here. 86 00:04:47,710 --> 00:04:53,072 So basically this row here, it's a division that 87 00:04:53,073 --> 00:04:56,768 contains all these two boxes and the button again. 88 00:04:56,769 --> 00:05:01,140 And inside that division with class row, we have 89 00:05:01,141 --> 00:05:04,960 this division also, which is the first textarea. 90 00:05:05,890 --> 00:05:09,716 So this col-sm-6 defines that, this is 91 00:05:09,717 --> 00:05:13,838 actually a column of that row, of that row. 92 00:05:13,839 --> 00:05:16,968 So this is the first column which corresponds to 93 00:05:16,969 --> 00:05:22,312 this textbox, this column here. And then, the 94 00:05:22,313 --> 00:05:25,964 next column which is this one here, contains the 95 00:05:25,965 --> 00:05:29,116 other text box and the button. 96 00:05:29,117 --> 00:05:33,788 So textarea means this text box here. And 97 00:05:33,789 --> 00:05:38,750 input with class btn, means this button here. 98 00:05:38,751 --> 00:05:45,312 So textarea, the first textarea, textarea, the 99 00:05:45,313 --> 00:05:51,092 second textarea, and input the button. And that's it, 100 00:05:51,093 --> 00:05:56,932 so again, the form now you see, it has an action property which 101 00:05:56,933 --> 00:06:00,612 has this template tag, that I have written here. 102 00:06:00,613 --> 00:06:03,608 So what's going on here is that, when 103 00:06:03,609 --> 00:06:07,816 the button is pressed, so this Submit button 104 00:06:07,817 --> 00:06:10,648 is pressed, something is going to happen. 105 00:06:10,649 --> 00:06:14,958 And what happens is that, this url will be visited. 106 00:06:14,959 --> 00:06:17,212 This is not a url, it's a name of 107 00:06:17,213 --> 00:06:21,450 a url pattern, that we will create later on. 108 00:06:21,451 --> 00:06:23,388 You will see how that works. 109 00:06:23,389 --> 00:06:27,484 And the method is a post method, which means that 110 00:06:27,485 --> 00:06:31,648 the user is sending some data and they expect to 111 00:06:31,649 --> 00:06:34,902 get back some data processed from the server. 112 00:06:34,903 --> 00:06:36,800 And the rest we explained already. 113 00:06:36,801 --> 00:06:39,232 So the divisions and the textarea with 114 00:06:39,233 --> 00:06:45,348 this class, Bootstrap class a rows means, that it 115 00:06:45,349 --> 00:06:47,962 has three rows of text by default. 116 00:06:47,963 --> 00:06:51,300 So one, two and three rows of text. 117 00:06:51,301 --> 00:06:55,108 So the height of that textarea. This name is 118 00:06:55,109 --> 00:06:57,976 going to be used later, to refer to that textarea 119 00:06:57,977 --> 00:07:00,800 from Django, to get the text of that textarea 120 00:07:00,801 --> 00:07:03,496 and process that in Django. And so on, 121 00:07:03,497 --> 00:07:05,112 we have the other textarea and 122 00:07:05,113 --> 00:07:09,298 input button, with this class from Bootstrap. 123 00:07:09,299 --> 00:07:13,436 The type is submits, which means that when that button 124 00:07:13,437 --> 00:07:17,964 is pressed, this form, the form will be sent. 125 00:07:17,965 --> 00:07:21,762 So we'll send the data, the original text of the user 126 00:07:21,763 --> 00:07:25,708 in this case. And value, is the name of the button. 127 00:07:25,709 --> 00:07:31,492 So Submit, Submit and that's it. Alright, 128 00:07:31,493 --> 00:07:35,268 so we have the HTML, but we need 129 00:07:35,269 --> 00:07:39,322 to define a URL, through which the user 130 00:07:39,323 --> 00:07:42,836 will access this particular HTML web page. 131 00:07:42,837 --> 00:07:45,833 So let's configure the URLs in the next video, see you.