1
00:00:00,000 --> 00:00:00,122


2
00:00:00,122 --> 00:00:02,330
BRIAN YU: Let's now take
your edit distance algorithm

3
00:00:02,330 --> 00:00:03,620
and bring it to the web.

4
00:00:03,620 --> 00:00:06,415
You'll write an index.html, a form.

5
00:00:06,415 --> 00:00:08,540
And here's what you have
to do inside of this form.

6
00:00:08,540 --> 00:00:13,280
Inside of the body block of index.html,
you want to add-- in HTML form--

7
00:00:13,280 --> 00:00:18,980
where that form will send a
post request to the route/score.

8
00:00:18,980 --> 00:00:22,880
Inside of the form, you want to
let the user type in a string--

9
00:00:22,880 --> 00:00:24,170
we'll call it string one--

10
00:00:24,170 --> 00:00:26,120
and another string-- string two--

11
00:00:26,120 --> 00:00:30,530
which they'll want to compare
using the Edit Distance algorithm.

12
00:00:30,530 --> 00:00:32,509
And finally, at the
bottom of the form, you'll

13
00:00:32,509 --> 00:00:35,630
want to have a button that
lets users submit that form.

14
00:00:35,630 --> 00:00:38,880
So what might index.html
actually look like?

15
00:00:38,880 --> 00:00:42,290
Well, index.html by default is
going to look something like this,

16
00:00:42,290 --> 00:00:44,570
where we first extend our layout.

17
00:00:44,570 --> 00:00:46,820
And then, inside of
our body block is where

18
00:00:46,820 --> 00:00:49,880
we're going to contain all
of the code for the HTML

19
00:00:49,880 --> 00:00:53,920
that you'll write that will represent
the form that users can then submit.

20
00:00:53,920 --> 00:00:55,410
What will that form look like?

21
00:00:55,410 --> 00:00:56,990
Well, it'll look something like this.

22
00:00:56,990 --> 00:01:01,520
You'll use form tags to enclose all
of the input fields that you'll need--

23
00:01:01,520 --> 00:01:04,550
where users can type an input
in order to submit the form--

24
00:01:04,550 --> 00:01:07,190
and in particular, note
the HTML attributes

25
00:01:07,190 --> 00:01:09,500
that we needed to add into this form.

26
00:01:09,500 --> 00:01:14,030
The action is /score, because that's
the route to which we want to send this

27
00:01:14,030 --> 00:01:16,506
data after the user submits their form.

28
00:01:16,506 --> 00:01:18,380
And the method for
sending this data is going

29
00:01:18,380 --> 00:01:23,870
to be post, because the user is going
to send a post request via the form.

30
00:01:23,870 --> 00:01:27,290
Now, inside of that form, you'll
need to have a number of input fields

31
00:01:27,290 --> 00:01:30,500
that will be places where the users
can type in the first string, and type

32
00:01:30,500 --> 00:01:32,390
in the second string, for example.

33
00:01:32,390 --> 00:01:34,880
You can use input tags
inside of the form

34
00:01:34,880 --> 00:01:38,330
in order to create those spaces
for users to type in input.

35
00:01:38,330 --> 00:01:42,800
Make sure each input tag has a name
attribute so that the web application

36
00:01:42,800 --> 00:01:45,260
knows which input field is which.

37
00:01:45,260 --> 00:01:49,070
In particular, those names should
be string1 for the first string,

38
00:01:49,070 --> 00:01:52,160
and string2 for the second string.

39
00:01:52,160 --> 00:01:55,940
Each input tag is also going to
need a type attribute in order

40
00:01:55,940 --> 00:01:59,684
to designate what type of information
the user is going to enter

41
00:01:59,684 --> 00:02:01,100
when they're filling out the form.

42
00:02:01,100 --> 00:02:03,650
And in particular, if they're
just typing in strings,

43
00:02:03,650 --> 00:02:06,200
that type can be text.

44
00:02:06,200 --> 00:02:09,680
Once you've done that, index.html
will display a form where

45
00:02:09,680 --> 00:02:12,500
users can type in one string,
type in another string,

46
00:02:12,500 --> 00:02:16,190
click a button to submit the form, and
then be displayed with the best way

47
00:02:16,190 --> 00:02:19,270
to turn one string into the other.

48
00:02:19,270 --> 00:02:20,456