Previously we created a new empty
app in our Django project.
Now the next step is to, so this
step is completed, create empty Django app.
The next one is to create HTML.
So as we said,
[No Audio]
what we want to have is,
we want to have a new menu item
here, which we're going to create later the item
but, first we want to create the page,
then we add that page to the menu bar.
So the page is going to be simple.
It's going to have one text box in here, and another
text box on the right, and a button somewhere below.
So the user is expected to enter some text in
English, and then when they press the button, that text
is going to be translated to, let's say German.
So we're going, to pick German as our example.
Of course you can, improve the app later on by
adding an option to choose other languages, as well.
But for now we're going to keep it simple.
So to focus on forms.
So that will be a form, that we'll be building.
Let us start by creating an html file under templates.
[No Audio]
So, right click over templates, and go to File, so New File.
Perhaps translator.html would be a good file name.
Now we want to build those
two text boxes and the button.
But instead of typing the html here, as you watch the
video, I'm just going to copy the code, that I built
already and paste it in here, and explain it to you.
Now to make it look good, I will also paste the link
to the Bootstrap
[No Audio]
source, so that the text boxes look nice.
And you can find this code, attached to this lecture.
So, I'll save it and then I'll right click here and
go to Reveal in Finder or in Windows Explorer, and then
I can double click it, and this is how it looks.
So we have these two text boxes
which can be expanded, by the user.
The user can type text in here, can
also type text in here, but this one
here will basically serve, to show the output.
But anyway, the user can also type in text, in there
and modify the output, if they want and so on.
And the Submit button is what
translates, this text to that one.
So now of course it's not working,
don't expect this button to do anything.
Because it's not connected to Django.
Let me explain you what the code does?
So, this link here is just temporarily in
this file, because normally we don't need that.
So I'm going to delete it.
We don't need it because, that
link is already in base.html.
So this one in here, and that
Bootstrap styling, will be applied to all
the templates, that are extending base.html.
Currently though, translator.html is
not extending that template.
So, let's add the tag,
[No Audio]
that extends, so extends in quotes, base.html.
And then, we also want to do the tags
again, and say block content, there and, close it in here.
endblock content, just like that.
So this file is going to get the code of
base.html, and this code will be combined with that
code, to serve the complete page, including the navigation bar.
So the menu items on the web page.
So this is what we have here.
We have this class container which is
the main div, that contains everything.
So it starts in here and it closes in here.
And inside this div contains a form.
So the form starts in here, and it ends in here.
So the form is this, including both
the text boxes and the button.
[No Audio]
So this one here, is a row.
It starts in here, it ends in here.
So basically this row here, it's a division that
contains all these two boxes and the button again.
And inside that division with class row, we have
this division also, which is the first textarea.
So this col-sm-6 defines that, this is
actually a column of that row, of that row.
So this is the first column which corresponds to
this textbox, this column here. And then, the
next column which is this one here, contains the
other text box and the button.
So textarea means this text box here. And
input with class btn, means this button here.
So textarea, the first textarea, textarea, the
second textarea, and input the button. And that's it,
so again, the form now you see, it has an action property which
has this template tag, that I have written here.
So what's going on here is that, when
the button is pressed, so this Submit button
is pressed, something is going to happen.
And what happens is that, this url will be visited.
This is not a url, it's a name of
a url pattern, that we will create later on.
You will see how that works.
And the method is a post method, which means that
the user is sending some data and they expect to
get back some data processed from the server.
And the rest we explained already.
So the divisions and the textarea with
this class, Bootstrap class a rows means, that it
has three rows of text by default.
So one, two and three rows of text.
So the height of that textarea. This name is
going to be used later, to refer to that textarea
from Django, to get the text of that textarea
and process that in Django. And so on,
we have the other textarea and
input button, with this class from Bootstrap.
The type is submits, which means that when that button
is pressed, this form, the form will be sent.
So we'll send the data, the original text of the user
in this case. And value, is the name of the button.
So Submit, Submit and that's it. Alright,
so we have the HTML, but we need
to define a URL, through which the user
will access this particular HTML web page.
So let's configure the URLs in the next video, see you.