Content Types and the Builder Plugin
In WordPress, you have something called content types or custom post types and custom fields. So what you do with that is, let's say you create a content type called 'movies' and you add fields to it. Those fields could be something like name of the movie, director, actor and so on. Uh, you have the same thing in Drupal via types and fields plugin if I remember correctly. Uh, in October, it's a little bit different in that you have to create a plugin for your content type.
So something like we did in a few episodes back when we installed the blog plugin, which added the content type of blog and post and categories to our site. As you will see, this is actually pretty easy to do in October CMS using the Builder plugin. So the Builder plugin allows you to create your own plugins or scaffold them and then create models, views, and controllers for them. And in that way, you create your own content types.
So in this episode, we are going to make a quick overview of the Builder plugin and create our first plugin, which is of course going to be movies. And we will be able to add movies to our site and also display them. As you will see, it is not complicated at all.
Installing the Builder Plugin
So, in our back end, first we are going to go to settings and then to updates and plugins and we will install the Builder plugin. Uh, you click install plugins and then you can either search for it right here, but it's a recommended plugin right here, so I'm just going to click that and install the Builder plugin.
Okay, so now that this is finished, you will be able to see this icon right here. So the Builder, and if we click on it, we currently get nothing because no plugin is selected right now.
Creating the "Movies" Plugin
So we have to create our own plugin first. So you just click right here, you click create plugin, and now you have to give a plugin a name. So I'm going to call mine 'movies,' okay? And then the author is going to be 'watch learn' and it's automatically going to fill in the author namespace for 'watch and learn'.
Also, you can select a plugin icon. I'm going to select video, so I'm going to create this icon and click okay. And now you have this movies plugin right here. So you click on it, click right here, and now what you can do, you can add the database, actually not a database, but a database table for your plugin. So for me at least, this is much better solution than what you get with WordPress where all of your content types are actually saved in the post meta table. Uh, in this way you actually create a dedicated table for your Plugin or your content type, whatever you are doing, right?
Defining the Database Table Schema
So we just click Add right here and then we have to create our table, and it's not that hard at all. So the first uh, field in our table is going to be ID. So we need the ID for our movie. The type of that is going to be integer and it's going to be auto-incrementing. So whenever we add a movie, the ID is going to be plus one. So if the first movie is one, the second movie will be two and so on, so that you can target those movies in your database and call them. And also it's going to be a primary key for our table, so you just select this.
So let's add some more columns. So let's add a column called 'name'. So this is going to be the name of our movie. It's going to be a string. Uh, we are not going to make it to be nullable. So whenever you set something to be nullable that means that the user doesn't have to fill it out, but we want the user to fill out at least the name of the movie.
The next thing we are going to do is add a description. So the description field, and that field is going to be text. Uh, we are going to make the text nullable. And let's add just one more field, and we're going to call that 'year'. Okay, the year is going to be integer and it's also going to be nullable.
And that's it. You save this. And as you will see, uh, what October does right here is actually, it's creating a database migration for you. So if you are familiar with Laravel framework, you will automatically know what this is. So this is a database migration for your uh plugin. Click save and apply and it's automatically going to create that table for us in, uh, our database.
Exploring the Generated Plugin Files
Okay, so now that we did that, you can also do everything we did right here in code if you really wanted to. So if we go to our code editor right now and check out plugins, you would see this namespace 'watch learn'. So you have RainLab, which is the creators of October CMS. You have this demo plugin right here. And we have this watch learn, we have movies plugin, and then you have these classes right here, languages, and you have updates for the plugin. You have this plugin.php and so on. There are going to be much more files in here once we start creating models, forms, fields and so on. So let's get back to our back end.
And then we go to models and now we have to create a model for our plugin. So we click add and the convention here is that you name your models singular of what your plugin is called. So for this it would be movie, not movies. So, movie. Okay, create it. And now you have this forms and lists. So the forms are going to be the forms in the backend that the user can enter the data in—so the name of the movie, the description, the year. The lists are going to be the list of of your movies in the back end, so that user can filter through them, see the movies and so on, click on the movie to go to editing, create a new movie and so on. You will see. So let's create a new form.
And right here, you see that it's going to create a file name called fields.yaml. So let's add a control right here, and I'm going to put it on the right side and this is going to be a just a single line text box. We are going to set the span to be full, so it's going to be the full width. The field name, so we are creating the name of the movie. So the field name is going to be name. As you will see, it will auto-complete when you start typing. So N A, and it says name. So it's reading our table in the database. The label for that is going to be Movie Title, okay? And that's about it. We are not going to do anything else to it.
Then we add a new control. So this one is going to be, uh, description. So the description is, we are going to be using this widget right here: Rich Editor. Okay, we are also going to make it full width and the field name for that is going to be, we just start typing D and it knows that it's description. And the label is going to be description. Okay?
Then we create another control and that one is going to be year. So I'm just going to create another just a text field, and the field name is year, and the label is going to be year. And I'm not going to make it full width. I'm going to leave it as it is. So now we just save this.
Creating the Backend List View
Okay, now we have to create our list. So we go to lists and create the list. So it's going to be a list in our back end. So the list is going to consist of name, so it autocompletes. The type is of course text. It's searchable and it's sortable. So you can create that. You can add one more column. And the other column is going to be year. Year. It's going to be a number. It's also going to, we are not actually going to make it searchable, but we are going to make it sortable. We save that.
Okay, the label. I forgot to add the labels. So name and here. Okay, now that we did that, we can save it.
Setting Up the Backend Menu and Controller
Now let's go to backend menu. So we want a menu to show up here so that we can easily add movies to it. So we are just going to go to backend menu, create the main menu item, click on it. The code can stay this. We will call this Movies, so the label of the menu, and I will change the icon to be video. Video. Okay, and save this. We are not going to set up URL just yet. We just save this.
We go to our controllers right now. So these are the pages, you can look at them as pages for your movies plugin. And we add a new controller. So the controller is going to be called 'movies' and it's going to, the base model class is going to be 'movie' and the active menu item is going to be 'movies'. Uh, we can set this list controller behavior, form controller behavior, and reorder controller behavior, and then click okay. Now you have this list controller and form controller. So if we click on them, you can set up some options right here, but those options are already configured with model class, list configuration file. It knows automatically what you need to do. If you need to change it, you can change it right here. The same thing goes for this form controller. Okay, now we just save this.
And now we can go to our backend menu. And right here in the URL, we just start typing... m... o... okay, it doesn't work for some reason. Okay, let me just try to refresh the page. Backend menu isn't saved. Okay, save it. Let's just refresh the page and go to backend menu once again and let's see if it's going to... okay, now we get the auto-completion. So you just start writing 'movies' and it's going to add a URL that you need to access your movies. So you get watchlearn/movies/movies. Okay, click that and we save this. And as you can see, we already got this menu item called Movies right here. So, movies.
Adding and Managing Movie Data
Okay, now it needed to refresh one more time and as you can see we are on the movies list page. So we have the name, we have the year. As you can see, the name and the year are all sortable, but of course we don't have any movies. So we are going to add them now. So we just click create, and the first movie is going to be Inception. We can add the description right here. Okay, and the year is, I don't know, 2011, whatever. Okay, create that movie. Now we can go to movies once again. We can create another movie. Let's call this Fight Club.
Add a description right here. As you can see, you have a rich text editor here. You can add images, drop images in, and so on. You can play with that. Uh, also we add some description right here and we add a year, I think it's 1999. Create it. And let's add just one more for good measure: American Beauty, and the year is going to be 2001. Created.
Okay, if we go to movies and check out our movie list, you can see that we can sort those years. So if we click year -- so now '99 is first, 2001, 2011. Uh, if we check it right like this, then it's going to be 2011, 2001, 1999. You can sort them by name. You can search for the movie. You start writing I N, so we made the name searchable, so it's autocompleting that. Okay, so now we created movies and we created some movies in it. So we created a movies plugin and added some movies to it.
Displaying Movies on the Frontend
Now I'm going to show you how you can display those movies on your front end.
To display our movies, we do the same thing like we did for the blog plugin. So we go to CMS right here, you can create a page for the movies. So we just do add and uh, we add a new page title, it's going to be movies. Okay. And now, uh, what we need to do, we need to go to components and then you have this Builder menu item right here, and then you do either record, record details, so that would be a single movie, or record list. So we just drag record list right here, click on it, and we have to select uh, which model do we want to show on that record list. So we are going to show watchlearn.movies.movie, okay? And now you have to set the display column. So what's the first column that is going to be displayed for this movie? So you do 'name', so we want a name of the movie, and that should be it, I think. Okay, save this.
And now the URL for our movies is 'movies'. So if we go to our, uh, page, actually to front end, we just do 'movies' and we get the list of those movies. Of course you can go right here, click component, click fork and get the whole code for displaying those movies. In the further episodes I'm going to show you how you can control this. For right now, we are going to leave it as it is. Uh, this is just an overview video and as I said before, we are going to be dealing with Builder plugin a lot in this video series.
Now before I go, I just want to show you just one little thing, so you don't forget. Of course you don't have to edit this code right here. You can just go to your code editor, uh you go to pages, so Olympus team, pages, movies, and if you click this... what is happening? Let me just save this one more time. If we go right here you can see the whole code that will be used for displaying movies, and then you can manipulate that code and make it look however you like.
Conclusion and Resources
Okay, so this is it for this video, guys. Please, uh, don't forget that everything we did here will be available for you on GitHub and the link will be in the description below. So as I said, the Builder plugin creates everything in code, so if you download the code from GitHub and put it in your project, it's going to automatically create all of this for you.
Thank you guys for watching. I hope you liked this video. If you did like it, if you liked the channel, please subscribe to it. You can also follow me on Facebook or on Twitter and that's it. Thank you for watching once again and I will see you in the next episode.
