Made withOctober CMSClip

Making Websites With October CMS - Part 08 - Slugs And Pagination

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

30K viewsAug 8, 20168:18 runtime

Learn to enhance your October CMS websites by implementing user-friendly, SEO-optimized URLs with slugs and adding pagination to your data lists. This guide walks you through using the Builder plugin to add a slug column to your database, configuring your model's form fields to…

Chapters

#octobercms#clip#cmscrm

Implementing Slugs for SEO-Friendly URLs

This section covers adding a slug field to a model and using it in page URLs for better SEO and user experience.

1. Database and Model Setup

Add a slug column to your database table using the Builder plugin.
- Type: String
- Nullable: true.
Important
The column must be nullable initially to avoid SQL errors when saving the schema, as existing records won't have a value for this new column.
Add a slug field to your model's backend form (fields.yaml).
- Navigate to your model, then to the "Fields" tab.
- Add a Text field with the field name slug.

2. Auto-Generating Slugs

In the slug field's Advanced tab, configure the Preset option.
- Source Field: The field the slug should be based on (e.g., name or title).
- Preset Type: slug.
This will automatically generate a URL-friendly slug whenever the source field is typed into or updated.

Note
For existing records, you will need to manually open each one and re-save it (or just clear and re-type the title) to trigger the slug generation.

3. Updating URLs and Links

Change the Details Page URL:
- Open the page that displays a single record (e.g., movie-single).
- Update its URL from /movies/:id to /movies/:slug.
Configure the recordDetails Component:
- Identifier Value: Set to {{ :slug }} to fetch the record using the URL's slug parameter.
- Key Column: Set to slug to tell the component which database column to match against.
Update Links in the List View:
- In the component that lists the records (e.g., recordList), ensure the link to the details page is generated using the slug attribute, not the id.

Adding Pagination to a Record List

This section details how to enable and correctly configure pagination for a list of records.

1. Enabling Pagination

In the CMS, open the page containing your recordList component.
In the component's settings, find the Pagination section.
Records per page: Set the number of items you want to show on each page (e.g., 1).
Page number: Define the URL parameter for the page number (e.g., {{ :page }}).

2. Configuring an Optional URL Parameter

After enabling pagination, update your list page's URL. For example, change it from /movies to /movies/:page?.

Tip
The question mark (?) at the end of the URL parameter (:page?) makes it optional. This is crucial for preventing a "Page not found" error when a user visits the base URL (/movies) without a page number.

With an optional parameter, the following URLs will work correctly:
- /movies (defaults to the first page)
- /movies/2
- /movies/3

3. Styling Pagination Links

The recordList component automatically injects the necessary HTML for pagination links (<ul>, <li>, <a> tags).
You can apply custom CSS to this HTML to style the pagination controls to match your website's design.

Adding a Slug Field to the Database

In this quick episode, we are going to link to our details page via slug. In the previous episode, we linked our list to the details page via ID. So in this episode, we're going to be doing it by slug, and also I'm going to show you how you can set up pagination for your movie list.

Okay, so first of all, let's set up our slug. So we are going to go to the builder plugin, choose our plugin, some movies, and then I'm going to click on our database and add one more column. And that column is going to be called slug. It's going to be a string, and it's going to be nullable.

It's going to be nullable because if you try to save it right now without it being nullable, it's going to give you an error, so you have to make it nullable. We save it, save and apply, and that's it. Now we have a slug field for our movies.

Auto-Generating Slugs from Titles

Next thing we are going to do, we are going to go to models, fields, and we are going to add one more field right here. It's going to be a text field. The field name will be, of course, slug. Actually, that's the field name from our database, and the label is going to be slug also.

Okay, and now what I want to do is go to Advanced right here, and you have this preset. Let me just make this bigger. Okay, so you have preset right here. Click on it, and you choose a field that this slug is going to be connected to. So the field we want is named name, and the type of that field is going to be slug. Okay, save this.

And now if we go to our movies and click, for example, on Inception... Now we can see this slug field right here. But if we try to type something in the movie title, as you can see, it automatically fills in the slug field. So when you're developing your application or your website, you should have the slug right away. Because right now, I'm going to have to go through all of our movies, which is not a lot because we only have three, and write that title again. So I'm going to do that behind the scenes.

But for now, we have this slug for Inception. We click Save and close.

Updating Page URLs to Use Slugs

And now we go to our CMS. We go to movies... and now I'm going to... instead of this movies URL... actually, we have to go to movie-single. Instead of /movie/:id, I'm going to say /movies/... because I actually wanted to do that in the previous episode, but it turned out to be movie instead of movies. And we are not going to be calling the id parameter, but the slug parameter. And also, you have to go to the Record Details and set the Identifier value to be slug and also Key column to be slug also. Save this.

Okay, if we go to our movies right now... click this... we click the link to the details page is currently using this details column of id. We are going to change this to slug also. Okay, save this.

And now if we go to our movies, refresh the page, go to Inception... we should see down here that the URL currently is /movies/inception. For Fight Club, we have /movies/default, and for American Beauty, we have /movies/default because we didn't write the titles of those movies again. So for Inception, this should work now. As you can see, we get Inception. Okay, so now...

Verifying Slugs for All Movies

...behind the scenes, I'm going to add slugs to all other movies. Now that I entered the new slugs, Now The Fight Club works, and also American Beauty works. Okay, next...

Enabling Pagination for the Movie List

...thing we are going to be doing is creating pagination for our movie list. So how do you do that? We go to CMS, we go to movies, and now if we click this Record List right here, you have Pagination. Okay, let's click it and set the records per page to be just one. Okay, save this.

And if we go to our movies, we should get only one movie right here, like we did. And we have page one, two, and three. Okay, but this doesn't actually work just yet. If you check out down here, you can see that these URLs all point to /movies. So if I click on it, I will just get on the same page that I'm already on. So we need to do something else.

Okay, so if I click on this, we have this Page number parameter that we have to set. So I can do something like /movies/:page. Okay, save it.

Fixing the Optional Pagination URL Parameter

And now, if we go to movies, now we get 'Page not found'. So what's going on? Well, what is going on is that currently, the way we have our URL set up is that it is expecting this parameter to be present. So if we go to /movies/1, we should get Inception and then all the other movies, and the pagination works. But we don't want it to work that way because we want when someone goes to /movies to actually display the movies page and not get 'Page not found'.

So to deal with that, you just add a question mark at the end. So what this is saying to the URL is that this parameter right here is optional. So if we save this, we get /movies and we get all the movies that we need on this page. So we are displaying only one, but our pagination also works. So Fight Club... Previous works and so on.

Of course, if you go to your template, to the movies page, you can see down here, which I didn't mention in the previous episodes, that you have this HTML for pagination. So of course, you can take this and use a little bit of CSS to make this pagination look much prettier. Okay, guys,

Outro

...this is it for this episode. I hope you liked it. I hope you enjoyed this video. If you did, please like it. If you like the content I put out, please subscribe to the channel. You can, of course, also follow me on Facebook or on Twitter and ask me questions there. So that's it for this video. Thank you guys for watching once again, and I will see you in the next episode.