1
00:00:00,000 --> 00:00:03,620
BRIAN YU: Finally, let's take the
functions that you wrote in helpers.py

2
00:00:03,620 --> 00:00:05,480
and bring them to a web application.

3
00:00:05,480 --> 00:00:08,720
You'll implement a file called
index.html by doing the following

4
00:00:08,720 --> 00:00:09,710
things.

5
00:00:09,710 --> 00:00:13,050
Inside of index.html,
you'll find a body block,

6
00:00:13,050 --> 00:00:15,020
which will contain the
body of a web page,

7
00:00:15,020 --> 00:00:17,480
inside of which you'll
want to add a form.

8
00:00:17,480 --> 00:00:21,710
Inside that form, you'll want to
eventually send the data from that form

9
00:00:21,710 --> 00:00:27,590
in a POST request to the route
/compare of our web application.

10
00:00:27,590 --> 00:00:30,320
Inside of the form, you'll
want to let the user choose

11
00:00:30,320 --> 00:00:35,060
two files, file1 and file2, which
they'll upload to your web application,

12
00:00:35,060 --> 00:00:38,870
in addition to choosing an algorithm for
how they want to compare those files,

13
00:00:38,870 --> 00:00:41,660
either comparing by lines
or comparing by sentences

14
00:00:41,660 --> 00:00:43,370
or comparing by substrings.

15
00:00:43,370 --> 00:00:47,120
And if the user chose to compare
two files based on substrings,

16
00:00:47,120 --> 00:00:52,430
you'll also want to let the user specify
a length, n, for what size substring

17
00:00:52,430 --> 00:00:55,720
to compare when looking
at the two files.

18
00:00:55,720 --> 00:00:57,470
Finally, at the bottom
of the form, you'll

19
00:00:57,470 --> 00:01:00,740
want to add a button that lets the
user submit the form to your web

20
00:01:00,740 --> 00:01:02,240
application.

21
00:01:02,240 --> 00:01:04,430
So what will that actually look like.

22
00:01:04,430 --> 00:01:07,400
Index.html is going to
look something like this.

23
00:01:07,400 --> 00:01:10,690
You'll see that we've extended
the layout.html template

24
00:01:10,690 --> 00:01:13,370
and also given you the
block body, which will

25
00:01:13,370 --> 00:01:16,190
define the body of the index.html page.

26
00:01:16,190 --> 00:01:21,590
Your code for your form in HTML is going
to be located between the block body

27
00:01:21,590 --> 00:01:25,930
line and the end block line, so
that when index.html is rendered,

28
00:01:25,930 --> 00:01:29,540
whatever is in between there goes
into the body of the web page that

29
00:01:29,540 --> 00:01:31,320
gets displayed to the user.

30
00:01:31,320 --> 00:01:34,040
So what actually goes inside of the box?

31
00:01:34,040 --> 00:01:36,110
Well, you'll want to
insert a form, which

32
00:01:36,110 --> 00:01:40,460
you can create by using angle bracket
form to create a form tab, which

33
00:01:40,460 --> 00:01:43,250
will define a form that
the user can use in order

34
00:01:43,250 --> 00:01:45,710
to specify what files
they want to upload

35
00:01:45,710 --> 00:01:49,460
and what algorithm they want to use
in order to compare those files.

36
00:01:49,460 --> 00:01:51,830
But just saying form isn't enough.

37
00:01:51,830 --> 00:01:55,070
Recall that in HTML,
we're able to specify HTML

38
00:01:55,070 --> 00:01:57,490
attributes where tags
can have attributes

39
00:01:57,490 --> 00:02:00,350
that look something like
this, where after the tag name

40
00:02:00,350 --> 00:02:04,460
you specify an attribute name, equals
sign, and then the value of that

41
00:02:04,460 --> 00:02:09,320
attribute in order to configure the
tag to behave in a particular way.

42
00:02:09,320 --> 00:02:12,410
In the case of our form, we're going
to need a couple of these attributes

43
00:02:12,410 --> 00:02:15,290
in order to make sure the
form behaves as expected.

44
00:02:15,290 --> 00:02:19,100
In particular, the form's action
attribute is going to need to be

45
00:02:19,100 --> 00:02:22,910
/compare, because that's where we
want the data from the form to be sent

46
00:02:22,910 --> 00:02:24,830
to, the /compare route.

47
00:02:24,830 --> 00:02:28,670
We'll also need to specify
an enctype, or encoding type,

48
00:02:28,670 --> 00:02:30,720
for how we want to encode the data.

49
00:02:30,720 --> 00:02:34,010
And in this case, we'll need
to use multipart/form-data,

50
00:02:34,010 --> 00:02:37,220
because that's the necessary encoding
type we'll need in order to submit

51
00:02:37,220 --> 00:02:39,140
files to our web application.

52
00:02:39,140 --> 00:02:42,680
And finally we'll need a method
attribute, in this case post,

53
00:02:42,680 --> 00:02:46,160
because we want to use the POST
request method in order to send

54
00:02:46,160 --> 00:02:48,620
our data to the web application.

55
00:02:48,620 --> 00:02:51,500
Then, in between the form
tags will be all of the input

56
00:02:51,500 --> 00:02:55,430
fields, the places where users can
input the information that they

57
00:02:55,430 --> 00:02:58,320
want to send when they submit the form.

58
00:02:58,320 --> 00:03:00,710
So how are you going to
create those input fields?

59
00:03:00,710 --> 00:03:03,260
Well, every input field can
be created by using an input

60
00:03:03,260 --> 00:03:06,320
tag in square brackets in HTML.

61
00:03:06,320 --> 00:03:10,340
Each one of those input tags is going
to need a name attribute so that our web

62
00:03:10,340 --> 00:03:13,610
application is able to look at those
input fields based on their name

63
00:03:13,610 --> 00:03:15,530
and extract what their values are.

64
00:03:15,530 --> 00:03:20,150
In particular, those names should
be file1 for the first file, file2

65
00:03:20,150 --> 00:03:23,660
for the second file, algorithm
for choosing which algorithm

66
00:03:23,660 --> 00:03:26,810
to use to compare those
files, and then length

67
00:03:26,810 --> 00:03:28,640
if it's in the case
of substrings, trying

68
00:03:28,640 --> 00:03:32,000
to define how long the substrings
should be that eventually

69
00:03:32,000 --> 00:03:34,580
should be compared by your algorithm.

70
00:03:34,580 --> 00:03:36,920
In addition to a name
attribute, you'll also

71
00:03:36,920 --> 00:03:40,250
want to give each input field
a type attribute in order

72
00:03:40,250 --> 00:03:43,760
to determine what type of
information the user is submitting

73
00:03:43,760 --> 00:03:45,320
when they're submitting the form.

74
00:03:45,320 --> 00:03:47,720
Possible types are file,
if the user is submitting

75
00:03:47,720 --> 00:03:52,100
a file, radio if the user is checking a
radio button where the user can select

76
00:03:52,100 --> 00:03:56,300
one of a number of possible options,
or a number if the user is submitting

77
00:03:56,300 --> 00:03:59,600
number input in the
input field of the form.

78
00:03:59,600 --> 00:04:02,420
So you'll need to figure out, for
each of the input tags you use,

79
00:04:02,420 --> 00:04:04,580
what type it should have.

80
00:04:04,580 --> 00:04:07,610
And then finally, in the
case of the algorithm,

81
00:04:07,610 --> 00:04:11,240
each input field is also going to
need a value attribute in order

82
00:04:11,240 --> 00:04:13,970
to determine which
algorithm specifically

83
00:04:13,970 --> 00:04:16,250
that input field is referring to.

84
00:04:16,250 --> 00:04:18,470
And in this case, the
algorithm attribute

85
00:04:18,470 --> 00:04:22,490
might be lines, in the case of
comparing based on lines in common,

86
00:04:22,490 --> 00:04:25,550
could be sentences, or
it could be substrings.

87
00:04:25,550 --> 00:04:29,450
So make sure that your input fields
have all of the required attributes

88
00:04:29,450 --> 00:04:34,392
that they'll need in order to be
processed correctly by the web server.

89
00:04:34,392 --> 00:04:37,100
Finally, at the bottom of your
form, you'll need a Submit button.

90
00:04:37,100 --> 00:04:39,141
And that could look
something like this, a button

91
00:04:39,141 --> 00:04:42,560
tag whose type is submit, to
submit the form, inside of which

92
00:04:42,560 --> 00:04:45,000
is whatever text you want
displayed on the button--

93
00:04:45,000 --> 00:04:48,080
in this case, compare, or it could
be something else of your choosing.

94
00:04:48,080 --> 00:04:52,340
After that, you'll have a finished form
whereby users can compare two files,

95
00:04:52,340 --> 00:04:55,610
pick an algorithm, and upload them
to a web application, which will then

96
00:04:55,610 --> 00:05:01,060
display how closely related or how
similar those two files actually are.

97
00:05:01,060 --> 00:05:02,206