Linking Between Routes
In this lesson, we'll learn how we can link between the routes we have defined in our application. We'll also learn about the importance of HTTP Method verbs and resources to standardize our route definitions.
- Author
- Tom Gobich
- Published
- Jan 24
- Duration
- 7m 51s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Linking Between Routes
-
(upbeat music)
-
- 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.
-
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.
-
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
-
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.
-
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
-
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
-
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.
-
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
-
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
-
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.
-
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.
-
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
-
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.
-
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.
-
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,
-
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.
-
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.
-
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
-
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.
-
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
-
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.
-
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,
-
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
-
so that we can post data to our slash movies route.
-
And since post is different from get,
-
the AdonisJS routing system will use
-
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.
-
In terms of our posts name,
-
this would be called movies.store
-
because we're storing a movie
-
into the underlying movies resource.
-
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.
-
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.
-
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.
-
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
-
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.
-
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.
-
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.
-
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
-
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.
-
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
-
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.
-
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
-
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
-
is to show a particular movie's details.
-
It's our movies.showRoute.
-
So we know that we need some form of unique identifier
-
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,
-
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.
-
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.
-
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.
-
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
-
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.
-
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.
-
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
-
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
-
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.
-
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.
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!