All right onto the search route.
So again we want to be able to have around slash search or let's just make it the home page slash and
we'll have a form we fill the form out it submit to this route which will then make a request to be
API except that request will have a variable here coming from the form and then everything else will
work the same we'll be able to leave this route alone.
So let's add that in apt get
slash
just like that and we'll just start by rendering a form which we'll call search.
So next up let's make that touch views slash search.
E.J..
Yes
and I had a typo Tudge views slash search.
E.J..
Yes.
Take a look at it at an H1.
Search for a movie.
And like I mentioned we're keeping it very very barebones here.
No styling.
Let's just make sure we see this when we run the server.
I go to the route route I see search for a movie.
Excellent.
So let's build a form
form and let's add in just a single input type equals text placeholder equals search term and we'll
add in another input type equals submit like that.
So where will this form go.
Well we want it to submit to our results wrap and results throughout will then take care of handling
the API call and then rendering a template.
So that's just going to be action slash results and method is just gets so that almost all of it if
we take a look refresh the page we have a really hideous form I can add something in here but nothing
is being done with this.
So even if I search for Harry Potter and hit submit I saw get Iowa but it is submitting the form correctly
.
It's hitting this route slash results and that's getting in Iowa movies and rendering the results template
.
So we now need to take the data from this form and plug it into the API call.
So the first thing we need to do is add in our name attribute so we can call this whatever we want.
Let's just call it queery.
No actually that's a little confusing.
So let's instead just name it search.
So remember when this request is made when we submit the form it's going to look just like this.
I'll show you in just a second.
Restart the server.
So our data whatever we put here is going to be stored and search.
So if we go back refresh and try something like What's another state we can do.
Let's do Wyoming.
Submit can see up here we have search equals Wyoming.
Our key value pair in the query string.
So that's all we need to do for the form.
Then inside of our app in this route we need to access the data from that query string and insert it
right here.
So let's start simple.
How do we get data from the query string.
Well it's a request dot query dot the name of the or the key of that piece of information which is search
which is what we named it save it to a variable.
Let's just print it out to start.
I always like to start nice and simple.
So I go back here.
Let's do it Montana now and you can see we get Montana printed there.
So now it's just a matter of saving that to a variable.
So we'll call it we'll just call it queery equals wreck that queried search.
Then what we could do is just do plus queries right there and that will just add our search query there
an easier way or a cleaner way in my opinion at least is to make a u r l variable and concatenate them
like this so that we have a shorter request that we make here we just request you are out.
So we're getting the query rector queried about search so whatever the user typed into the form or grabbing
that Montana in this case saving that to this variable then reconstructing you know you are all that's
going to look like HTP colon slash slash OAM deviate here.
Dot com slash question mark s equals whatever the user typed into that form.
And then we're using that you are.
And that's it.
So let's give it a shot go to our form and search for Florida and what you know we get 10 Florida results
.
Try it again this time let's do another state.
Alabama.
Awesome.
So next thing that we could do is just added a few minor improvements.
Anything is an improvement I guess but the main thing I'm thinking about not the UI but I'm thinking
about just showing you using more data.
So we're not using year we don't need type let's just use the year.
So let's just do the movie title Dasch the year that should be simple enough and we'll just like Look
look like movie year just like that will save us as you can see here we get the year.
And let's also add in let's bold the movie title or italicize the year either one.
Let's make this a little cleaner here.
I think that technically we should add in UL
and all that.
OK.
And we're doing the title and we'll make the title
let's too strong
and we can also indent this to make it a little easier to see what's happening.
All right.
So let's just take a look.
There we go.
We get our bolded Sweet Home Alabama crazy now and then the year that's not bold.
All right.
So one last thing really minor.
But let's just add a back button.
So an a tag which you want ref to be equal to slash just do search again.
I like that.
And now we can search again.
OK.
One more.
What's said as another state we could use.
Oh let's try New York.
So we have a space and when we submit it noticed that automatically has a plus sign added their new
plus.
York and that's what is being made of the.
Or that's what the request is being made with.
So that's it for now.
So just to reiterate the key takeaways just a regular route.
We're just sticking the request inside of it.
When that request is done then we're rendering a template.
The other thing that's important is on underparts because when you turn that string into a javascript
object that we can use and then the last thing was we're creating a dynamic.
So it's not always California or Iowa or whatever.
We're now adding in the queries from the user coming from the query string from the form.
Our