In this lecture, what we're going to do is to search movie view so we will learn how to render each
team competent and do advanced techniques.
And some of the techniques that I'm going to show you, we're already done in the Bernie app.
When we were we were creating that we're burning calories app.
OK, now let's jump straight into.
First things first.
I want to go into the views in change so radically.
Rename this view here, make it more meaningful, say search movie view.
That's it.
So is going to look like that.
Nice.
So let's open up that view here.
Search movie view.
So that search movie view will be super, super empty because we haven't done anything inside.
Now, again, views are the ones that are dealing with the UI and we need to start working on this form
here.
So we need to grab this form.
OK, let's start by exploring the function that will just simply return to format input value or in
simple words, we need to return what we have started here.
For example, search Tarzan here.
We need to return this what we have typed just here.
Now, how are we going to do this?
So in the search view, what we can do, we can export function.
So I'm going to say const get form input.
Right.
So you can get any meaningful names, so it's that dysfunction is not going to take any parameters and
we're going to just three return document that query selector and we are going to select the what.
So what we are trying to select is I'm going to spec this element here and I'm trying to get this input
typed.
Text in the class is stop search input.
So if you go back to the index JS, I strongly suggest to go through these the index HTML file because
I'm not going to do this into this lecture or any future lecture.
But what I'm going to do, I'm just going to grab pieces of here of the HTML and I'm just going to use
it in our code.
So in your free time, just go through this, you will see that we have the Navar here, you have the
search.
What else we do have after that?
We do have the slider.
But now most important thing is that we need to get this search input.
That's the class from the input field.
OK, so we're going to do it like this.
But how we select it, so the query selector and we use that, then the class name and here are we just
missing the value.
Now this, by the way, will get the value.
Whatever we put it here, it will grab it and that will be stored in this get it right now.
We also export it.
So but now is the time that we need to think where we can store all or the class needs, because what
we can do here, we don't need we don't need the class names to be like this.
So we did see something similar in the BERNEY.
So we're going to do the same thing here.
Right.
So the best way is to create a simple separate folder to create separate, separate, separate folder
here called Includes An Inside.
I will create a file called Class Selector that is inside this class selector.
We're going to have the all of the class names here.
Now we got to create an object with class names and we can export that export again, the object.
So I'm going to say export const and I will say class names.
So I'm going to export class names.
So I see class names because here we're going to have multiple classes and we can export.
And so the first thing first, I'm just going to grab this top search input and I'm going to put it
here.
So actually, we already have done the same thing.
I'm just going to copy this one.
Right.
So go back to the search, move you.
And here we going to see format.
For form input and we're going to pass document query, selector type search input.
Good.
Now make sure that you put in comma because we're going to put multiple things here.
Now, instead of getting this the whole line here, we can just change it with this class names that
form input.
But how are we going to do this?
In order to use this, we need to actually import this class selector file so we can do everything that
we are importing.
I'm going to tell you once more that we need to do it on the top.
So import and I'm going to say class names like that from and now I need to specify where it's going
to come, where it will come from this class.
So what I'm going to do here, so if I put it just dot forward slash, that will give me the current.
So look at what is giving to me.
That will be give me the current search movie views.
But I really don't want that that I really want to go inside.
This includes in a grab this class selector.
So how are we going to go outside the views folder and inside this one.
So double dots forward slash and now we're going one directory up, we're going include and now we do
have the power to access the class selector.
Right.
You don't need dodgiest.
It's right.
Now, these class names can be used here and I will say class names, not for input.
So the viscose just gave me that thing that I have it here.
Right.
But if it if for some reason it's not autocomplete for you guys, you should just remember that we are
targeting this one.
So basically what we have done, we just shorten up this one.
We create a folder.
And inside that folder we do have inside this includes folder.
We do have this class selector that goes in there.
We going to store all of the class names from the top.
That is pretty much it.
Now, also, we need to change the event listener in the index here.
We do.
We do have this event.
Listener So what I can do I could just cut this one from here.
Right.
And put it just below here.
But I'm going to name it and I'm going to see because this is for the search forum, right?
It's here actually it's for the forum and I'm going to name it search for now.
You can give any meaningful name that you want, right?
Don't worry about it.
This is not strict as it is.
You think so?
You can change this name because.
Yeah, we can access them now.
Also in the index, we do have to import this one, so I'm going to import it on top of the search,
right.
So what I'm going to see again, I'm going to say class names like that from now.
Look at this.
I'm just going to show you one more thing.
So it gives us error because we do have a couple of mistakes here.
I just get rid of that part and yeah, that's why there is there.
But the index file is not actually in any directory.
Straight to the inside the Geass folder.
Right.
It's not anywhere in views, models or includes.
So I can't access.
It just seemed like this.
Sorry.
Same as same as we did here.
Two dots.
I don't need that.
So what I can do here, I can say dark forward slash and that's it.
So I'm going to include in a class selector, don't put two dogs, don't just copy it from search movies
because it's not going to work.
OK, so the class names, I do have them, so I'm just going to copy the class names.
But what was the what was the.
Yeah.
Search for.
So sorry.
That search format event listener.
Submit or not save it.
Let's see.
Yeah we do have some problems here.
Let's click here.
Here it is.
That was the problems or the errors that we did before.
So when I click on the submit, it's still working.
Right.
Is giving me the Batman Begins because we did have the Batman from the query.
Now we're going to change a query just short.
So what we have done here in the search movies, we exported this function, get form input, but we
never use it.
Right.
So the second thing that we can do is now that we need to use that one in the index.
Right.
So how are we going to use this?
So I'm going here and we we need to import these search movies, view inside the controller.
So I'm just going to copy actually this one here, how we will import it.
So I will import as a star, because inside here I will have more multiple exports, multiple function
that I want to export.
So that's why I'm going to do Star and what else?
S Search movie view and I'm going to get rid of that from models.
It's not actually the models.
So for real views.
And then I have the movie search movie news.
Nice.
So I did have the access now to the search views.
So right now here we need to change this query.
So I'm just going to comment on this query and I'm going to say const query and that will be equal to
search movies, views, dot get form input.
Actually I'm accessing this class, but these functio here in this function, woa or shou return me
the query.
OK, so I'm going to consult the query and I'm just going to get rid of this one here and I'm going
to say Tarzan and I'm going to hit this guy.
Here it is Tarzan.
And now I expect because we change that to the query and we are just grabbing the query here and we
search, you know, I expect to have the results for Tarzan that not Batmen.
And here it is.
We do have all of the results we want.
So congratulations.
You know how to create.
Now, have you export from a view, a function, and also how we can create a separate class selector
that will hold the whole of the DOM classes and we can use it now.
It will be more clean.
We don't have to get bother because why we are doing this.
Imagine if in future I change it here in the movie search name or this one two top search input or only
for me.
But imagine you can do that.
And now what you need to do.
We go to this guy here to the class selector and change it here, because in the index we can use it
multiple times and we don't have to change it multiple times.
So that is called decoupling right now.
It's OK.
Now is the time that we need to think about how to get the results here.
Are we getting the results?
But we now need to think, how about those results?
So we are consulting like them.
But that's three of the ten elements, right?
Get get rid of the time.
Ten elements.
So we need a function back in The View to look through all of this.
So let's do that function and I'm going to call the display results and I'm going to exported that one
again.
Export const display.
Results because it's going to be more results in here, I'm going to pass in the movies.
Actually, what I'm passing here, you don't worry about it right now.
You don't have to understand where this is coming from, but this will come from this here.
So here these data actually is containing the entire array.
And I'm going to pass it here onto this display results that the entire array.
So in these movies here, it will hold the object with the then array elements.
Nice.
So the movies will hold the entire array of movies and we will pass these movies from the controller
now.
So let's loop through this one in.
The easiest way to loop is to see movies that for each right.
So we're going to look through this one.
But here, remember that in the controller we just call the function here.
We didn't create all of this inside the event listener.
So create a separate function outside and I just create a function for the search controller.
So I'm going to do the same thing.
Instead of rendering all these results here, I'm going to create a function called Display Movie and
take you to this display.
Movie function will actually will deal with only one movie.
Right.
And you needed to put it on top here and say const this yet display movie and now I don't export this
one.
Right.
So we don't need to export this one, but we need to pass that current element.
Right.
So that will be the movie and it's going to be singular because it's going to be one movie.
Right.
So this is not a function that I will export it and I will use it here.
This will be internal function that this this function is using it.
Right.
So it's using it just to get the result.
Now, this function is not going to be exported.
As I said, it's going to be used internally.
OK, so movies for each we'll call this one movies for each will call this function 10 times for each
individual movie.
So we can say here, for example, the current element and then we're going to pass this one here and
we can pass the element.
Right.
We don't.
But we don't want to do that.
Why?
Because this will automatically these six will know that.
OK, yeah, we just calling this one.
And with the current element right now, I can access that current element over here.
So what we need here, actually.
So let's create a markup here and I'm going to say let markup or const markup doesn't matter.
Markup and this markup, we will hold the wood.
So when I have the result, I want to render this result here in the in the container that Coles movie
Slider.
Right.
So I'm going to go back to this one here, go back to the index and I'm going to go through the movie
slide.
OK, this is the entire div and this is each individual movie.
So I'm going to copy this one.
And I'm going to paint it here, right?
OK, let's make it a little bit more nicer so we can have.
Yeah.
Like that.
So that's the markup I'm going to use.
But because I have access to the movie in each movie I see happening.
OK, let's reload the stars and.
And we do have this now, each movie has its title tied year IMDB and stuff like that, so we can grab
it from here because we are using the template literals how we can access this.
So here I just want to create the I just want to insert the idea of that movie.
OK, so I'm going to use a dollar sign and movie that I'm Debbie.
So actually this guy here, I'm David.
Right.
Just going to copy it because I'm going to make a mistake and that's it.
Now, here, the image will come from the poster right in.
Take your take note that this is with capital piece, not with small like.
Yeah, it's with capital, even the title.
Right.
So make sure that you do that.
Do get that one.
So here I'm going to see a movie poster in 40 out.
I'm going to just copy the same thing, but I'm not going to print out the poster, just going to print
out the title.
So this is alternative text.
If the image is not loaded in, that is pretty much it not.
What we need here is actually to create to insert this into the movie slide.
Right.
So I'm just going to copy this movie Slider.
So we are going to insert this 10 results here.
Don't worry about the buttons.
We're still not there yet.
OK, no.
So how are we going to do this document, not query selector?
And I'm going to select this one and I'm going to say, OK, insert the adjacent HTML and inside.
I was passed before end because I want each and every element before and means this after this element.
I want to go inside the movie Slider and before.
And is this element to be first element to go here?
The second element, you go down here, down here, and that's how the 10 elements will fill this here,
the space.
OK, that is, if you want to read more, just go through, insert a Jason Emdur and here you can read
more about it right here.
This before end and it's telling us this p make sure that this is our movie Slide or Dave.
Right.
And it's pretty much same the same logic.
And that's why I just want to go here before end.
So in this movie, Slider, I just want to go here, here, here again.
OK, that was easy in here.
I need to pass the mark up.
And that's pretty much it.
So that is what we need now, what we need to do is go change back to the council.
So this will be called 10 times from here in.
But here, I just want to call the search movie View, not displaying results.
What happened?
The display results in here.
I just want to pass this data, right.
That we just printed out.
So this data that suggest Muis, it will do the same thing because we counseling law and now we just
go here, put this array a loop through this array.
And that array will call this method 10 times.
And that method is actually putting back to our index.
Right.
OK, so let's clean this one here and see Tarzan and hit enter.
And here it is.
We do have actually we do have four.
But this is why.
Because I've just use it for here.
So my logic was from the 10 results to put four here and after that with arrows, I can go through left
and right.
But if I zoom it out, I would be able to see all of the dents.
Right.
One, two, three, four, five, six, seven, eight, nine, 10.
So I do have the ten, but when I'm 100 percent, I will only be able to see four.
This is why I did it like this, because I would like to show you why I do have those like that.
OK, now this is working and that's pretty much it.
So we will continue working in the next lecture.
We need to clean this after here.
So here, if I type Batmen, look what will happen.
So actually the Batman is loaded there, but you can see the results it's appended here.
So I don't want I just want to delete this then and just put this Batman, the new search, the new
results back to this place.
So we have a lot of work here to do and that will do in the next lecture.
And also I'm going to clear this from the search.
So that's pretty much it.
I will see you in the next one.