00:02
- Cool, so we're on our way. We have two different pages, both of which are using HTML to render out some form of content.
00:10
However, having to manually update the URL ourselves to get between these two pages is a little bit cumbersome and we can't really expect our users to go through that flow.
00:19
So how can we provide links to these different pages on the pages themselves? Let's go ahead and hide our browser back away. And we left our browser on the homepage. So we'll start there. The first thing that we can try
00:28
is just to use raw HTML. So we can have a navigation with some form of a link with an href that points to our slash movies route.
00:37
And then we could say movies right there. We can also add a link back to the homepage so that we can just copy and paste this onto our various pages. So now we have both a link for the homepage
00:46
and for our movies page. Let's copy the navigation as a whole and let's jump over to our movies page where we can paste this navigation in. So now we have a navigation element
00:54
on both our movies and our homepages. If we dive back into our browser, we'll see that immediately reflected. We're on our homepage at the moment. So let's try clicking into our movies page and it worked.
01:04
And we can go back to our homepage and it works too. So this is great and it definitely works. It's perfectly valid HTML. However, there's a better way that we can do it that's a little bit more future safe
01:13
should our URLs change at any point in time throughout our applications life. So let's go ahead and hide our browser back away and take a look at that approach. We'll dive back into our routes
01:22
and let's get each of our routes an identifier. For our homepage, in order to do this, we just need to chain off of the route definition itself, the method as.
01:30
And then we provide this as method, a name for our route. For our homepage, we can just call it home. And for our movies page, it's as. And we'll keep to resourceful name.
01:39
So we'll do movies and this will serve as our show route. I'll go ahead and save this so that our formatter runs and I'll scroll down just briefly. So now if you recall back to when we were talking about the various HTTP methods
01:48
that we can use to define our routes with, there's the get requests, post, put, patch and delete. These not only make up different actions, which what they represent, but they can also represent resources.
01:58
With the route that we have so far, we're on our way to making a movies resource. If the word resource here is tripping you up, you might think of it as an entity or maybe even an object within the real world.
02:08
You might physically have a movie and you might have a collection of movies. So similarly to how we have a linter within our code base to help keep our code itself standardized,
02:16
resources kind of do the same thing for our route definitions. They're gonna help keep them standardized throughout the various different resources that our application may have.
02:25
Now to help showcase what a resource in its entirety might look like, we're gonna get rid of our movies route here temporarily and we're gonna stub some routes that would make up an entire resource.
02:34
We're gonna end up undoing this portion right here. This is strictly just for demonstration purposes. So we're gonna have our router, we're gonna have a get request for slash movies
02:44
and I'm just gonna stub a handler. In this particular route within our resource, we could name movies.index. Within a resource, this route would serve as our listicle route.
02:53
So it's the route that would be in charge of listing all of the movies that we have. It's our library or our collection of movies. I'm gonna give this a copy and we'll paste it again
03:02
because if you have a collection of movies, you're gonna need a way to also show an individual movie. That's where you do movies slash and then some identifier for that particular movie.
03:11
This might be something like my awesome movie. It's just a URL safe string or identifier that we can relate back to a single movie. In terms of naming this route,
03:20
this would be the movies.show route. Now we just went out and bought a new movie so we need a way to add a movie to our collection. That's where we would use a post HTTP method
03:28
so that we can post data to our slash movies route. And since post is different from get, the AdonisJS routing system will use
03:36
the requests HTTP method to match it up to the routes HTTP method to determine which of these two routes should be used whenever we make a request to slash movies.
03:46
In terms of our posts name, this would be called movies.store because we're storing a movie into the underlying movies resource.
03:54
Well, now the movies release date just got pushed back so now we have to update it within our movies collection to reflect that change. So we can use put to designate that we want to now update our movie.
04:04
We then need to identify which particular movie we want to update. And just like with our show route, we would need some form of unique identifier to identify what movie it is that we wanna update.
04:14
And that identifier would also need to be URL safe so we can copy what we have for our show and paste it into our put. And the name for this route would be movies.update.
04:23
But now we need both an update and a creation form so that we can actually input the different data we'll need to both create the movie and update the movie. So for creating, this could be something like
04:32
a get request to movies/create. And the name for this would then be movies.create. Now for our update form, this would be relatively similar except it would be movies.
04:42
We would need to uniquely identify what movie it is that we want to update. And then instead of creating it, we could edit it. And the name for this route would be movies.edit.
04:51
Well, that movie just got canned. So now we don't need it within our resource at all. So let's go ahead and define a way to delete it. So that's where we would use the delete HTTP method. We don't wanna delete all of our movies.
05:01
So again, we need to uniquely identify what movie it is that we want to delete. So we'll paste that in there. And the name for this route would then be movies.destroy. Now you might be wondering why destroy
05:10
instead of delete here. There's a couple of reasons, but the easiest of which to understand is that within JavaScript, delete is a reserved word.
05:18
Highlighted by the red annotation here within my theme and destroy just kind of helps us circumvent using a reserved word while still having the underlying same meaning
05:27
of deleting out some form of a record. So these are the different routes that make up a resource. And there's a different route per action that we could perform for that particular resource as well.
05:36
And again, the different HTTP methods that we're using to define the routes allow us to reuse routes over and over again, but with different purpose and meaning. So let's go ahead and get rid
05:46
of all of these different routes and get back to just our movies route with our handler. Okay, so we're back. So following along with the convention that we just defined for our resource, this particular route's purpose
05:56
is to show a particular movie's details. It's our movies.showRoute. So we know that we need some form of unique identifier
06:04
to specify what movie exactly we want to show. So let's do my awesome movie within our URL here. So now that we've updated our URL to keep with resourceful naming,
06:14
if we were to jump back into our browser at this point in time, and we try to go to our movies route, well, uh-oh, we no longer have just a slash movies. So our link is out of date.
06:22
Let's go back to our homepage and hide our browser away. And that's one reason why it's good to stay away from hard URLs that are linking to other pages inside of your application.
06:31
And that's where those names that we've given our different routes come into play. They uniquely identify the individual routes that we'll have within our application so we can dive back into our homepage and we can make use of them.
06:40
So just like with our movies page, we're using double curly braces to plop the actual movie's name onto our H1. We can use those same double curly braces
06:49
to access a method that's on edges state called route. And this route can accept a route identifier and it will automatically build out the URL to serve that individual route.
06:59
So for our homepage, we called that route home so we can provide the identifier just home there. And that route's gonna match the hard-coded URL that we had previously of just being a slash.
07:08
For our movies, however, if we do double curly braces here, route, we called this route movies.show. And the route that it's going to generate for this one
07:17
will not match the hard-coded URL. Previously, we just had slash route and now this route's gonna change from that hard-coded just slash movies
07:24
to now it's gonna be slash movies slash my awesome movie to keep in line with the underlying URL that we have on the route definition for our movies.show route.
07:34
So let's copy our updated navigation from our movies page and let's paste it on our homepage, just like so. Give this a save. And now we can jump back into our browser.
07:42
Let's give our movies page one more try. And there we go. So now not only do we see my awesome movie, but we're also now at the URL slash movies slash my awesome movie.
