1
00:00:00,000 --> 00:00:00,430

2
00:00:00,430 --> 00:00:03,260
>> SPEAKER 1: Let's implement a search
engine or, at least, the frontend user

3
00:00:03,260 --> 00:00:06,590
interface for a search engine that
allows the user to type in some terms

4
00:00:06,590 --> 00:00:09,370
and then search the worldwide
web for those terms.

5
00:00:09,370 --> 00:00:13,690
To achieve this, we'll use HTML's "form"
tag, as well as a few others.

6
00:00:13,690 --> 00:00:17,140
Here in Search.html, I've already
gotten us started by opening and

7
00:00:17,140 --> 00:00:18,500
closing a few tags.

8
00:00:18,500 --> 00:00:22,570
So now here, inside of this body, let's
first define a heading of CS50

9
00:00:22,570 --> 00:00:26,460
Search to serve as a title of sorts
in the body of the page.

10
00:00:26,460 --> 00:00:30,660
>> Let's then open up a "form" tag and,
preemptively, let's close it, so don't

11
00:00:30,660 --> 00:00:31,930
forget to later.

12
00:00:31,930 --> 00:00:37,450
Let's then define an input tag, whose
name shall be "q" for query, and whose

13
00:00:37,450 --> 00:00:40,810
type shall be "text," so that the
browser renders this as a text field

14
00:00:40,810 --> 00:00:41,840
on the page.

15
00:00:41,840 --> 00:00:43,720
Let's then close this tag.

16
00:00:43,720 --> 00:00:46,480
Let's then insert a line break below.

17
00:00:46,480 --> 00:00:50,870
And let's now define one more input this
time, whose type will be submit,

18
00:00:50,870 --> 00:00:56,640
so that's a Submit button, and whose
value or label is CS50 Search.

19
00:00:56,640 --> 00:00:59,930
>> Now we've defined this form, but we
haven't specified to where the form

20
00:00:59,930 --> 00:01:01,120
should be submitted.

21
00:01:01,120 --> 00:01:04,480
Let's add two more attributes
to be more precise here.

22
00:01:04,480 --> 00:01:09,410
First, let's specify in the "form" tag
itself that the method by which this

23
00:01:09,410 --> 00:01:12,620
form should be submitted is HTTP get.

24
00:01:12,620 --> 00:01:16,150
And let's specify that the action or
destination of this form shall be

25
00:01:16,150 --> 00:01:22,540
https://www.google.com/search.

26
00:01:22,540 --> 00:01:25,690
>> Now, I know that URL exists because
I've seen it for some time in my

27
00:01:25,690 --> 00:01:27,080
browser's address bar.

28
00:01:27,080 --> 00:01:32,020
So I'm simply going to refer the user to
that URL for their search results.

29
00:01:32,020 --> 00:01:35,380
Let's now save, change the permissions
on, and open this stage.

30
00:01:35,380 --> 00:01:41,090
"Chmod a plus r search.html."
Let's now open up Chrome.

31
00:01:41,090 --> 00:01:46,770
http://localhost/search.html.

32
00:01:46,770 --> 00:01:49,345
Not the sexiest of search engines,
but let's see if it works.

33
00:01:49,345 --> 00:01:51,920

34
00:01:51,920 --> 00:01:53,240
And there are some cats.

35
00:01:53,240 --> 00:01:57,140
>> Notice though, than in the address bar
is exactly the URL that I expected,

36
00:01:57,140 --> 00:01:58,910
but with a little something
more at the end.

37
00:01:58,910 --> 00:02:04,260
If I zoom in here, notice that the URL
is exactly as we expected, but with a

38
00:02:04,260 --> 00:02:07,260
question mark q equals
cats at the top.

39
00:02:07,260 --> 00:02:08,729
Where did that come from?

40
00:02:08,729 --> 00:02:12,880
>> Well, because I submitted a form that
had an input whose name was q, our

41
00:02:12,880 --> 00:02:16,300
browser took it upon itself to add that
question mark and then put that

42
00:02:16,300 --> 00:02:17,820
parameter's name-- q--

43
00:02:17,820 --> 00:02:21,130
followed by an equal sign, followed
by cats, which is the value that I

44
00:02:21,130 --> 00:02:22,550
myself typed in.

45
00:02:22,550 --> 00:02:26,130
If there were more such parameters
inside of the URL, the browser would

46
00:02:26,130 --> 00:02:28,500
have simply separated
them by ampersand.

47
00:02:28,500 --> 00:02:30,790
But in this case, we have
just one such pair.

48
00:02:30,790 --> 00:02:35,040
And that is provided as input to
Google much like a parameter is

49
00:02:35,040 --> 00:02:37,000
provided to a function is input.

50
00:02:37,000 --> 00:02:40,600
And Google then uses that input to
search its database somehow and

51
00:02:40,600 --> 00:02:42,180
display a page of results.

52
00:02:42,180 --> 00:02:43,755