00:02
- So two lessons ago, we learned how we were getting to our homepage, but how can we add additional pages?
00:10
After all, a web server is not too great if you're just limited to one page. We know that our routes are defined within our routes.ts file within our start directory.
00:18
And we know that we can import a router from AdonisJS that allows us to define our routes as we saw with our homepage. So let's try to add in an additional route
00:26
by typing router. and let's see what our options are. So we see a lot of things here. If we scroll down, we'll continue to see a lot of things here,
00:34
but overall you'll see a couple of things stand out. First, there's the on that we have for our homepage. This on method is really just a shorthand that allows us to define a pattern.
00:44
So we could do something like slash movie, and it will allow us to redirect to a different URL or path for this specific path that we defined for this route.
00:52
So slash movie, we could send that off to somewhere else like imdb.com or something like that. We can render as we see with our homepage, a specific page that we provide in.
01:01
So this is rendering on a page@pages/home, which is that it works page that we see whenever we visit our web server in our browser. So we have that as an option. We have additional route information via property,
01:11
and we could set a handler for this route as well. But this on method is really just meant as a shorthand whenever there's one of those specific actions that you wanna provide for the route that you've defined.
01:21
If there's more meaningful work that you wanna do with that route, that's where we would wanna reach for something like an HTT verb to define the verb that would describe the routes actions and purpose or intent.
01:31
So for those we have get, which is meant for get requests, getting information or showing pages. We have post, which is meant for posting information
01:40
and is essentially used for creating records. Put, which is usually used for updating records. Patch, which is usually used for updating a single property on a record
01:49
or small batches of particular properties for a record. And then lastly, delete, which as you probably assume is used for deleting records. Now, whenever I say records,
01:58
I'm talking typically about a database. Databases are made up of tables. And as you might be familiar with tables, they have columns and they have rows.
02:06
Rows would make up the individual record in this particular use case. So you would add in a record or add in a row or delete a row, update a row, so on and so forth.
02:15
Those make up the different HTT verbs that we have as options for our route. The actual argument options for these are gonna be relatively the same throughout. So for our get request,
02:25
we're gonna have a pattern option and then we're gonna find a handler as the second argument. The pattern is what's used to match the route to the particular request.
02:34
For example, whenever we went to our homepage, it has a pattern of just slash, which matches the request for our homepage. But if we dive back into our browser
02:42
and we try to visit a URL at slash movies, we're gonna get an error. And that's because it cannot find a route matching the URL that we've tried to get. And it's at this point, you may be wondering why you see code blocks
02:51
over here on the right and you see specific information saying, you cannot get a specific URL. And we have this option to say, show more frames. Well, this is just a developer friendly environment
03:00
that AdonisJS provides to give us more contextual information as developers about the error that we've run into. Since we have our server running in a dev environment
03:09
and AdonisJS knows that, it's gonna serve us up some additional information to help us debug the issues that we run into. Whenever we actually deploy our application out into a production based environment
03:18
and it switches into a production environment for our server, it's gonna know not to show this and we'll be able to set different options that we could show the user instead of this particular page.
03:28
So don't worry, this is just a developer friendly page AdonisJS is showing us. It's not what the underlying user would see if this were an application running in production.
03:36
Okay, so we know that it cannot get slash movies. There's an extra slash on there, but that doesn't really matter. We could get rid of that as well. And we'd get the exact same thing.
03:43
So let's fix this by defining a route for slash movies. So let's hide our browser back away and let's set our get request to slash movies.
03:52
Now we need to define what we wanna do whenever we get a request going to slash movies. And that's where our handler comes into play. The handler can either be asynchronous or asynchronous function.
04:01
We'll go ahead and make ours async and it's provided contextual information that I'm gonna abbreviate as just CTX here about the particular request. This is also known as the HTTP context.
04:11
If we have a river, we'll get this tool tip within Visual Studio Code that says that this is a parameter for our function. We've called it CTX and its type is HTTP context.
04:20
If we type out CTX dot, you'll see a lot of things like auth, logger, params, request response, route, session, and view down here that we can use to determine
04:30
how we wanna handle this particular request. Request will contain information about the request. Things like headers, cookies, all of that fun stuff. Response will then allow us to define
04:39
how we wanna respond to the request. So whether that's sending JSON information, an image, a file, or really anything that you can think of that a server might send back.
04:47
Response is also useful for setting statuses for the HTTP response, cookies, headers, and all that fun stuff too. Session will allow us to get or set things onto the user's session
04:57
and view allows us to reach into the edge template system. But if we wanted to, we could just send back a simple string from this method that says my awesome movie,
05:06
and that would work a-okay too. So let's go ahead and give that a try. So let's give this a save. Since our server is watching our file system, it's gonna pick up that we made that change. So our server is ready to go for it.
05:15
We can jump back into our browser. We've defined our route for slash movies. So we should be good to give this page a refresh. And there we go, we get my awesome movie.
