00:05
So currently we're building out our movies in two different ways. Within our index method, it's all one object, and then within our show method, it's two different objects. So here in our index method, we're pushing into a movie's array,
00:15
one single object that represents an individual movie, and then down here within our show method, we have the MD which contains one set of data for a particular movie,
00:22
and then we have the movie HTML that represents the actual content. Ideally here for a movie resource, we would have one concise structure that we would adhere to
00:31
throughout our application on what a movie is and contains. That's where models come into play. Whenever we created our project, a user model was created for us.
00:40
There's a lot that's going on here, but primarily all that you need to worry about right now is that it's a form of a class and it declares particular properties that we expect the underlying class to have.
00:50
So here we have a user model, and we're defining that the user has an ID, a full name, email, password, a created at, and updated at property within it.
00:59
The extra decorators that you see on here like column and column.dateTime are used by Lucid which is AdonisJS's ORM to determine whether or not the property within the model
01:08
is an actual column representation from the database. So primarily long-term speaking, models are a way for us to describe
01:16
our tables that we have in our database within our code. Today though, we can go ahead and get started with models by using it as a way to
01:23
define one concise structure for what a movie should be and the different types of data that it should hold. So let's go ahead and dive into our terminal. Let's stop our server, clear it out,
01:32
and let's run node, ace, list. Within our make commands, we see a command specifically for making a model. So let's go ahead and use that to create a movie model.
01:40
So we'll do node, ace, make, model, movie. Go ahead and run that, and there we go. Now we have an app models movie file that we can reference within our code base.
01:48
So let's go and open our code back up and take a look at our new model. So currently we have our movie class and it's extending a base model. This base model is going to bring in Lucid. We're not quite there yet,
01:58
so let's go ahead and get rid of that for right now. We'll also go ahead and get rid of the column decorators, as we're not quite ready for that yet either. We can get rid of the import,
02:05
and we can actually get rid of all of the properties that we have within here so far. Cool. So we're really just down to a class at this point. If we take a look at one of the movies that we have defined,
02:13
we have a title and a summary within our front matter data, and then we have this lipsome text that serves as an abstract about the movie.
02:20
So we can add declarations to our movie model for these properties, so that we have one concise definition on what a movie is.
02:28
So let's go ahead and declare that the movie is going to have a title of type string. We will declare that it will have a summary of type string,
02:36
and we'll declare that it has an abstract of type string. Now, we're missing one declaration and that's our slug,
02:42
which is what we use to uniquely identify what a movie is in a human readable format, i.e. our file name for the actual movie. So underneath our title,
02:50
let's declare slug and that too is of type string. Cool. So now we have all of the different properties that we're going to need to specify what exactly a movie is at the present point in time. Let's go ahead and make use of it.
03:00
So let's jump into our movies controller and let's start with our index method. So instead of pushing just any old object into our movies array, that's of type record any,
03:08
let's switch this to be of type movie, and we'll import our new movie model, still leaving the array at the end so that it's now an array of movie models.
03:16
Now, although the object that we're passing into our movies array matches pretty closely to our movie model, it's not a one-for-one match with what we have defined in the model itself,
03:25
because currently we have the abstract as required. If we wanted to, we could say that this is optional, give that a save, and now jump back into our movies controller, and this would turn into a happy object.
03:34
But let's take this one step further and actually make this object an instance of our movie. So let's do const movie equals new movie. On the movie itself,
03:42
we'll set the title and we'll set that to empty front manner title, just as we have it in our object. And let's do the same for our summary and slug.
03:49
So movie.summary equals empty front manner summary. Movie.slug equals, and then this we have accessible just via slug.
03:58
Now, instead of pushing just this object, we can push our movie into our movies array. So this already matches what we had previously, we're just now making it a specific instance of our movie.
04:07
So everything on our homepage should still work A-OK. So let's go ahead and open it up, give it a refresh. Oh, we need to restart our server. So let's jump back into our terminal here, npm run dev to boot that up.
04:17
Cool. Now, let's give the page a refresh again. And yep, everything's still working A-OK. We can hide our browser back away and let's move on to the show page.
04:25
We have a little bit of work here to do for our show page because we're using two different properties to show two different things within the page itself. Underneath our MD, let's go ahead and create a new instance of our movie.
04:33
So we'll do movie equals new movie. Instead of setting the HTML contents directly onto a variable called movie,
04:40
we can instead set this directly on movie.abstract. In addition to that, we can do movie.title equals MD front matter.title.
04:49
And let's actually just scroll up and copy what we have from our index page here. Paste this down here. And then our slug can come from params.slug.
04:56
Now, we no longer need to pass MD into our page because we have all of the information that we need directly on our movie instance. So let's go and get rid of that, give this a save.
05:05
Now, we need to jump into our page, scroll down a little bit. And here, we're referencing our front matter title. Let's just switch this to movie.title.
05:13
And here, we're referencing just movie, where we previously had our HTML stored. Instead, this is now movie.abstract. So now we should be able to give this a save, jump back into our browser,
05:22
try viewing one of our movies. And cool, still works the same as before. We can hide our browser back away. But now our controller is kind of back to how we were before,
05:29
where we now have the same code defined in two different places inside of our show and index pages. We could move this out to a service. But whenever we get to the point where we actually attach our movie model
05:38
to the database, we're going to have some abilities within the model itself to query information from our database via some methods.
05:45
So instead of moving the reusable code out of our controllers and into a service, let's mimic those methods within our movie model.
05:51
So in our movie model, we'll have a static async method called find. And this will accept in an ID. Now, currently, we don't have an ID.
06:00
But we do have a slug. And our slug kind of serves the same purpose as an ID would whenever we get to databases. Our slug's unique.
06:07
And it represents one particular movie within the movies that we have. So for now, let's use our slug for our find method.
06:14
So first, we're going to want to try and fetch a movie for the slug. And we can do that using our movie service. So we'll do const md equals await movie service.
06:23
Hit Tab to auto-import that. Read. And we can pass the slug in. Next, let's go ahead and create a new instance of our movie by doing const movie equals new movie.
06:32
And let's populate the properties that we have. I could retype all this. Or we could jump back into our movies controller, go on down to our show method, where we have all of this already taking place. We'll give this a copy.
06:42
Jump back into our movie model, paste it in. It's no longer param slug, but just slug. And we need to import to HTML. So let's jump back into our movies controller, scroll up to the top,
06:51
copy this import, and let's paste it into our movie model, just like so. Scroll back down, and we're good to go there. Lastly, we just want to return back the new movie that we've created. So movie.
06:59
So we can give this a save, jump back into our movies controller, go back down to our show method. And look at that. We've just replicated this whole portion right here.
07:06
So now we can do const movie equals movie.find params.slug to provide it in the slug. And now we're down to just two lines for our show method
07:16
inside of our controller. Let's give this a save. And now let's do the same thing for what we have going on within our index method. Jump back into our movie model, scroll up just slightly,
07:25
and let's put this above our find method. We'll add in another static async method here. And let's call this all. This method's going to be in charge of returning back all of the movies that we have.
07:34
So first things first, we're going to want these slugs that we created. We can get from our movie service. So we'll await movie service. And let's get slugs.
07:42
Then let's do const movies equals an empty array. If you want to, you can specify that this is going to be a movie array. And then we'll loop over them.
07:49
So let's do for const slug of slugs const movie equals await. And within our movies controller here, this is where we're recreating the movie
07:59
and then pushing it into our movies array. However, we now have a find method on the model itself kind of doing this exact same thing.
08:06
So instead of redoing that code, we can instead call this.find, pass in the slug, and now we have access to our movie thanks
08:14
to the find method actually finding it from the directory, pushing it out, and populating the data. Meaning all that we have to do within our all method
08:21
now is push this into our array. So movies.push movie. Lastly, we just need to return back the movies. So return movies. Let's give this a save.
08:30
Oh, got a typo up here. This should be slugs, not slug. There we go. And now we can jump back into our movies controller. Everything that we have here can now be removed.
08:38
And instead, we can do const movies equals await movie.all. And now we're down to just two lines for this method as well. That really trimmed up our movies controller quite a bit.
08:48
Let's give that a save, and let's test everything out. So we'll jump back into our browser. Let's give this page a refresh for sanity's sake. Well, uh-oh. Now we have undefined undefined. Let's see if things are working on our home page.
08:58
Yep, still looks good there. So we need to figure out what's going on here. So since our home page is working, we know that data is populating OK, because at the end of the day,
09:07
this is still calling the find method within our model. So let's go ahead and retrace the steps on what might be going wrong here. So let's hide our browser back away. And look at that. So we have our await here,
09:16
but we forgot to await the find call. So let's make sure that we await that there, give that a save, and hopefully that's all that we got wrong. Let's open our browser back up here,
09:24
give the page a refresh, and there we go. So now we see our movies details. Go back to our home page. Let's try another one, and let's try the third. Awesome. So that's all working A-OK,
09:33
And we've simplified our code base quite a bit in the process.
