1
00:00:00,200 --> 00:00:02,240
All right onto the search route.

2
00:00:02,250 --> 00:00:10,050
So again we want to be able to have around slash search or let's just make it the home page slash and

3
00:00:10,260 --> 00:00:16,990
we'll have a form we fill the form out it submit to this route which will then make a request to be

4
00:00:17,010 --> 00:00:25,040
API except that request will have a variable here coming from the form and then everything else will

5
00:00:25,050 --> 00:00:27,780
work the same we'll be able to leave this route alone.

6
00:00:28,230 --> 00:00:30,300
So let's add that in apt get

7
00:00:32,940 --> 00:00:33,630
slash

8
00:00:37,860 --> 00:00:44,160
just like that and we'll just start by rendering a form which we'll call search.

9
00:00:45,270 --> 00:00:52,890
So next up let's make that touch views slash search.

10
00:00:52,910 --> 00:00:53,200
E.J..

11
00:00:53,220 --> 00:00:53,610
Yes

12
00:00:56,990 --> 00:01:00,930
and I had a typo Tudge views slash search.

13
00:01:00,950 --> 00:01:01,230
E.J..

14
00:01:01,290 --> 00:01:03,280
Yes.

15
00:01:03,390 --> 00:01:07,850
Take a look at it at an H1.

16
00:01:08,010 --> 00:01:09,940
Search for a movie.

17
00:01:09,960 --> 00:01:12,910
And like I mentioned we're keeping it very very barebones here.

18
00:01:12,930 --> 00:01:14,310
No styling.

19
00:01:14,310 --> 00:01:19,150
Let's just make sure we see this when we run the server.

20
00:01:19,200 --> 00:01:23,400
I go to the route route I see search for a movie.

21
00:01:23,400 --> 00:01:24,070
Excellent.

22
00:01:24,300 --> 00:01:25,350
So let's build a form

23
00:01:29,070 --> 00:01:47,160
form and let's add in just a single input type equals text placeholder equals search term and we'll

24
00:01:47,160 --> 00:01:54,320
add in another input type equals submit like that.

25
00:01:54,330 --> 00:01:55,960
So where will this form go.

26
00:01:56,220 --> 00:02:03,780
Well we want it to submit to our results wrap and results throughout will then take care of handling

27
00:02:03,780 --> 00:02:06,370
the API call and then rendering a template.

28
00:02:07,110 --> 00:02:19,770
So that's just going to be action slash results and method is just gets so that almost all of it if

29
00:02:19,770 --> 00:02:29,100
we take a look refresh the page we have a really hideous form I can add something in here but nothing

30
00:02:29,100 --> 00:02:30,320
is being done with this.

31
00:02:30,330 --> 00:02:38,700
So even if I search for Harry Potter and hit submit I saw get Iowa but it is submitting the form correctly

32
00:02:38,700 --> 00:02:39,030
.

33
00:02:39,030 --> 00:02:46,270
It's hitting this route slash results and that's getting in Iowa movies and rendering the results template

34
00:02:46,300 --> 00:02:46,680
.

35
00:02:47,280 --> 00:02:53,870
So we now need to take the data from this form and plug it into the API call.

36
00:02:53,880 --> 00:03:00,470
So the first thing we need to do is add in our name attribute so we can call this whatever we want.

37
00:03:00,480 --> 00:03:03,180
Let's just call it queery.

38
00:03:03,630 --> 00:03:05,670
No actually that's a little confusing.

39
00:03:05,670 --> 00:03:08,020
So let's instead just name it search.

40
00:03:08,400 --> 00:03:14,580
So remember when this request is made when we submit the form it's going to look just like this.

41
00:03:14,580 --> 00:03:16,880
I'll show you in just a second.

42
00:03:17,130 --> 00:03:18,850
Restart the server.

43
00:03:19,110 --> 00:03:22,760
So our data whatever we put here is going to be stored and search.

44
00:03:23,100 --> 00:03:31,050
So if we go back refresh and try something like What's another state we can do.

45
00:03:31,410 --> 00:03:32,890
Let's do Wyoming.

46
00:03:33,420 --> 00:03:38,420
Submit can see up here we have search equals Wyoming.

47
00:03:38,730 --> 00:03:41,220
Our key value pair in the query string.

48
00:03:41,310 --> 00:03:44,130
So that's all we need to do for the form.

49
00:03:44,160 --> 00:03:53,460
Then inside of our app in this route we need to access the data from that query string and insert it

50
00:03:53,460 --> 00:03:54,810
right here.

51
00:03:55,740 --> 00:03:57,630
So let's start simple.

52
00:03:57,630 --> 00:03:59,360
How do we get data from the query string.

53
00:03:59,490 --> 00:04:09,630
Well it's a request dot query dot the name of the or the key of that piece of information which is search

54
00:04:11,430 --> 00:04:14,210
which is what we named it save it to a variable.

55
00:04:14,430 --> 00:04:16,780
Let's just print it out to start.

56
00:04:17,490 --> 00:04:20,550
I always like to start nice and simple.

57
00:04:20,550 --> 00:04:22,030
So I go back here.

58
00:04:22,230 --> 00:04:28,530
Let's do it Montana now and you can see we get Montana printed there.

59
00:04:28,530 --> 00:04:35,700
So now it's just a matter of saving that to a variable.

60
00:04:35,700 --> 00:04:44,350
So we'll call it we'll just call it queery equals wreck that queried search.

61
00:04:44,820 --> 00:04:53,550
Then what we could do is just do plus queries right there and that will just add our search query there

62
00:04:53,640 --> 00:05:02,760
an easier way or a cleaner way in my opinion at least is to make a u r l variable and concatenate them

63
00:05:02,760 --> 00:05:10,530
like this so that we have a shorter request that we make here we just request you are out.

64
00:05:10,620 --> 00:05:17,790
So we're getting the query rector queried about search so whatever the user typed into the form or grabbing

65
00:05:17,790 --> 00:05:23,850
that Montana in this case saving that to this variable then reconstructing you know you are all that's

66
00:05:23,880 --> 00:05:27,230
going to look like HTP colon slash slash OAM deviate here.

67
00:05:27,270 --> 00:05:33,670
Dot com slash question mark s equals whatever the user typed into that form.

68
00:05:34,440 --> 00:05:36,190
And then we're using that you are.

69
00:05:36,600 --> 00:05:37,590
And that's it.

70
00:05:37,590 --> 00:05:52,350
So let's give it a shot go to our form and search for Florida and what you know we get 10 Florida results

71
00:05:52,340 --> 00:05:52,990
.

72
00:05:53,270 --> 00:05:58,440
Try it again this time let's do another state.

73
00:05:58,530 --> 00:06:03,110
Alabama.

74
00:06:03,120 --> 00:06:04,010
Awesome.

75
00:06:04,530 --> 00:06:09,960
So next thing that we could do is just added a few minor improvements.

76
00:06:09,970 --> 00:06:17,160
Anything is an improvement I guess but the main thing I'm thinking about not the UI but I'm thinking

77
00:06:17,160 --> 00:06:19,920
about just showing you using more data.

78
00:06:19,980 --> 00:06:26,030
So we're not using year we don't need type let's just use the year.

79
00:06:26,190 --> 00:06:34,420
So let's just do the movie title Dasch the year that should be simple enough and we'll just like Look

80
00:06:34,610 --> 00:06:45,030
look like movie year just like that will save us as you can see here we get the year.

81
00:06:45,570 --> 00:06:54,150
And let's also add in let's bold the movie title or italicize the year either one.

82
00:06:55,050 --> 00:06:57,670
Let's make this a little cleaner here.

83
00:06:58,220 --> 00:07:03,270
I think that technically we should add in UL

84
00:07:07,530 --> 00:07:09,420
and all that.

85
00:07:09,960 --> 00:07:11,050
OK.

86
00:07:11,430 --> 00:07:15,240
And we're doing the title and we'll make the title

87
00:07:18,020 --> 00:07:21,020
let's too strong

88
00:07:26,970 --> 00:07:33,040
and we can also indent this to make it a little easier to see what's happening.

89
00:07:34,320 --> 00:07:36,280
All right.

90
00:07:36,810 --> 00:07:40,540
So let's just take a look.

91
00:07:40,590 --> 00:07:41,040
There we go.

92
00:07:41,040 --> 00:07:46,630
We get our bolded Sweet Home Alabama crazy now and then the year that's not bold.

93
00:07:47,070 --> 00:07:47,800
All right.

94
00:07:47,880 --> 00:07:50,610
So one last thing really minor.

95
00:07:50,610 --> 00:07:53,410
But let's just add a back button.

96
00:07:53,700 --> 00:08:03,690
So an a tag which you want ref to be equal to slash just do search again.

97
00:08:04,230 --> 00:08:05,870
I like that.

98
00:08:06,420 --> 00:08:08,140
And now we can search again.

99
00:08:08,640 --> 00:08:08,930
OK.

100
00:08:08,940 --> 00:08:10,230
One more.

101
00:08:10,260 --> 00:08:12,150
What's said as another state we could use.

102
00:08:12,180 --> 00:08:14,080
Oh let's try New York.

103
00:08:14,100 --> 00:08:23,730
So we have a space and when we submit it noticed that automatically has a plus sign added their new

104
00:08:23,730 --> 00:08:24,100
plus.

105
00:08:24,100 --> 00:08:26,910
York and that's what is being made of the.

106
00:08:26,920 --> 00:08:29,610
Or that's what the request is being made with.

107
00:08:29,700 --> 00:08:31,220
So that's it for now.

108
00:08:31,590 --> 00:08:35,850
So just to reiterate the key takeaways just a regular route.

109
00:08:36,060 --> 00:08:38,070
We're just sticking the request inside of it.

110
00:08:38,070 --> 00:08:42,310
When that request is done then we're rendering a template.

111
00:08:42,870 --> 00:08:48,330
The other thing that's important is on underparts because when you turn that string into a javascript

112
00:08:48,330 --> 00:08:53,060
object that we can use and then the last thing was we're creating a dynamic.

113
00:08:53,130 --> 00:08:56,250
So it's not always California or Iowa or whatever.

114
00:08:56,250 --> 00:09:01,610
We're now adding in the queries from the user coming from the query string from the form.

115
00:09:01,680 --> 00:09:02,030
Our