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.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

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.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.