Creating A Movie List Page
In this lesson, we'll create a page to list all of our movies. Since we have a lot of movies, in this module, we'll focus on adding filters and pagination to this list.
- Author
- Tom Gobich
- Published
- Apr 27
- Duration
- 3m 43s
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
Creating A Movie List Page
-
[MUSIC]
-
So one thing our application is missing is the ability to actually list all of
-
our movies.
-
Currently we have a coming soon section and a recently released.
-
We can view them by director or writer, but
-
we don't have a page just listing out all of the movies.
-
So let's get that edited in next.
-
So let's hide our browser back away, get it back into our text editor and
-
jump into our movies controller.
-
We have an index page and a show page handler.
-
Currently our index page is what's rendering out our homepage.
-
This has served us well so far, but
-
this would actually make more sense to be our actual movie listing route.
-
So let's move this index method into its own home controller and
-
instead put our movies listicle here.
-
So let's open up our terminal, stop our server, clear that out, node, ace,
-
make, controller, home.
-
We'll put an index method within there and we'll make it singular.
-
Okay, we can boot our server back up, npm run dev, hide that back away.
-
And let's just give this index method here a copy in its entirety,
-
just like so.
-
Jump into our new home controller and
-
just overwrite the index method that we stopped with in there with it.
-
We'll have to fix our imports.
-
So we can put our cursor on our movie, hit Command + . to bring up quick fix
-
options, and we can click on Add Import from #movies/model,
-
which will add our import method for us.
-
With that in place, it looks like we just don't have formatting, so
-
let's go ahead and give it a save, and there we go.
-
To Command + P and jump into our routes file,
-
let's scroll up to where our home route is defined, right here.
-
And we just wanna switch this from using our movies controller to now
-
our home controller.
-
Everything else there should remain the same.
-
Give it a save, then underneath this for our movie section,
-
let's add a router.get/movies.
-
And this will use our movies controller index page, as movies.index.
-
Okay, now let's give that a save.
-
Jump into our movies controller.
-
Instead of rendering a page at pages/home,
-
we'll now want to render a page at pages/movies.
-
And let's see, I think we have that within a subfolder.
-
Yes, we do, right here.
-
So we'll create an index.edge file within there.
-
So we'll point this to /movies/index.
-
Let's go ahead and clear this state out, and
-
we'll add something else in its place here momentarily.
-
Okay, we'll just go ahead and reuse our currently released query.
-
So let's go ahead and jump up and remove our coming soon query.
-
We can rename this to just movies.
-
And we no longer want just released, we'll query every single movie that we have.
-
Because we have a lot of movies, let's switch our limit to 15.
-
We'll keep it in increments of three so
-
that we can keep with our same three movie per row grid that we have going on.
-
And then we'll dump this into the state of our page.
-
Give that a save, and now let's go create that page.
-
So let's right click on movies, new file, index.edge.
-
We're gonna be pretty close to what we have for our home page, so
-
let's just give that entirety a copy and paste it into our movies.
-
Just like we did for our controller, let's get rid of our coming soon section.
-
The meta description, we'll switch to browse and search our awesome movie list.
-
We can update our h2 from recently released to just movies, or
-
if you'd like, all movies to be a little bit more verbose.
-
And then where we're looping over our recently released,
-
we'll just want to switch that to looping over our movies,
-
as that's what we're providing into our state, okay?
-
And then let's go ahead and
-
just get rid of this bottom div here where we have that flush cache for.
-
One more thing before we test this out within our movies controller,
-
let's go ahead and switch this default order by from release that to instead
-
order by the movies title, and we'll have that in a sending fashion.
-
And since that's the default, we can just leave that out altogether.
-
All right, and then lastly, our partials, nav, scroll up a little bit.
-
After our home page, let's add an additional a href to our new route,
-
movies, index, age, and call that link movie.
-
All right, with all that set, let's go ahead and dive into our browser.
-
We should now see our movies link right here.
-
We can click on it, and it will load up our movies.
-
Currently, it's not all of our movies.
-
It's just gonna be the first 15 in alphabetical order.
-
Because we have so many movies,
-
we don't wanna go through listing each and every one of them out.
-
So within this module, we're going to add the ability to filter these movies down,
-
as well as paginate through them.
-
So we'll be able to switch to the second page of 15.
-
So we'll go from whatever's after a star is born onward to the next 15, so on and
-
so forth for however many pages we have.
-
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
-
7.0The Flow of Middleware7m 49s
-
7.1Authenticating A Newly Registered User4m 14s
-
7.2Checking For and Populating an Authenticated User2m 10s
-
7.3Logging Out An Authenticated User2m 24s
-
7.4Logging In An Existing User6m 54s
-
7.5Remembering A User's Authenticated Session6m 55s
-
7.6Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
-
8.0Creating A Movie List Page3m 43s
-
8.1Filtering A Query By Pattern Likeness7m 9s
-
Filtering Our List by Movie Status5m 47s
-
How To Apply A Dynamic Sort Filter To Your Query7m 12s
-
Joining SQL Tables To Order By A Related Column4m 49s
-
Validating Query String Filter Values7m 23s
-
How To Paginate Filtered Query Results9m 15s
-
Pagination First, Last, Next, and Previous Buttons4m 2s
-
-
User Watchlist
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!