BRIAN YU: Finally, let's take the functions that you wrote in helpers.py
and bring them to a web application.
You'll implement a file called index.html by doing the following
things.
Inside of index.html, you'll find a body block,
which will contain the body of a web page,
inside of which you'll want to add a form.
Inside that form, you'll want to eventually send the data from that form
in a POST request to the route /compare of our web application.
Inside of the form, you'll want to let the user choose
two files, file1 and file2, which they'll upload to your web application,
in addition to choosing an algorithm for how they want to compare those files,
either comparing by lines or comparing by sentences
or comparing by substrings.
And if the user chose to compare two files based on substrings,
you'll also want to let the user specify a length, n, for what size substring
to compare when looking at the two files.
Finally, at the bottom of the form, you'll
want to add a button that lets the user submit the form to your web
application.
So what will that actually look like.
Index.html is going to look something like this.
You'll see that we've extended the layout.html template
and also given you the block body, which will
define the body of the index.html page.
Your code for your form in HTML is going to be located between the block body
line and the end block line, so that when index.html is rendered,
whatever is in between there goes into the body of the web page that
gets displayed to the user.
So what actually goes inside of the box?
Well, you'll want to insert a form, which
you can create by using angle bracket form to create a form tab, which
will define a form that the user can use in order
to specify what files they want to upload
and what algorithm they want to use in order to compare those files.
But just saying form isn't enough.
Recall that in HTML, we're able to specify HTML
attributes where tags can have attributes
that look something like this, where after the tag name
you specify an attribute name, equals sign, and then the value of that
attribute in order to configure the tag to behave in a particular way.
In the case of our form, we're going to need a couple of these attributes
in order to make sure the form behaves as expected.
In particular, the form's action attribute is going to need to be
/compare, because that's where we want the data from the form to be sent
to, the /compare route.
We'll also need to specify an enctype, or encoding type,
for how we want to encode the data.
And in this case, we'll need to use multipart/form-data,
because that's the necessary encoding type we'll need in order to submit
files to our web application.
And finally we'll need a method attribute, in this case post,
because we want to use the POST request method in order to send
our data to the web application.
Then, in between the form tags will be all of the input
fields, the places where users can input the information that they
want to send when they submit the form.
So how are you going to create those input fields?
Well, every input field can be created by using an input
tag in square brackets in HTML.
Each one of those input tags is going to need a name attribute so that our web
application is able to look at those input fields based on their name
and extract what their values are.
In particular, those names should be file1 for the first file, file2
for the second file, algorithm for choosing which algorithm
to use to compare those files, and then length
if it's in the case of substrings, trying
to define how long the substrings should be that eventually
should be compared by your algorithm.
In addition to a name attribute, you'll also
want to give each input field a type attribute in order
to determine what type of information the user is submitting
when they're submitting the form.
Possible types are file, if the user is submitting
a file, radio if the user is checking a radio button where the user can select
one of a number of possible options, or a number if the user is submitting
number input in the input field of the form.
So you'll need to figure out, for each of the input tags you use,
what type it should have.
And then finally, in the case of the algorithm,
each input field is also going to need a value attribute in order
to determine which algorithm specifically
that input field is referring to.
And in this case, the algorithm attribute
might be lines, in the case of comparing based on lines in common,
could be sentences, or it could be substrings.
So make sure that your input fields have all of the required attributes
that they'll need in order to be processed correctly by the web server.
Finally, at the bottom of your form, you'll need a Submit button.
And that could look something like this, a button
tag whose type is submit, to submit the form, inside of which
is whatever text you want displayed on the button--
in this case, compare, or it could be something else of your choosing.
After that, you'll have a finished form whereby users can compare two files,
pick an algorithm, and upload them to a web application, which will then
display how closely related or how similar those two files actually are.