Project Introduction
And we're gonna use the October CMS which was built on Laravel. Alright, so we're going to set up a website, we're gonna navigate the backend, create some pages, create some blog posts, we're also going to create a custom theme, and then we're also going to create a custom component, okay, which is a type of plugin for October CMS. So let's go ahead and get started.
Downloading the Installer & Setting Up the Environment
This is the website. I'm gonna go to download the Installer, okay, and it's just gonna download this zip file called install-master.zip. So let's go ahead and open that up and you'll have this folder called install-master. So you're gonna want to upload these files to your web host. Okay, we're using XAMPP, so what I'll do is just, let's say, we'll open up XAMPP, or go into the htdocs and let's create a new folder here and we're gonna call this, let's just call this Acme, and we'll bring all these files over. Alright, and then we want to run this install.php file through the browser, but first thing we want to do before that is create a database. Alright, so let's create a database. So we'll just call it Acme, call it acme_ocht. Click create. Alright, so now we have the database created.
Running the October CMS Installer
So now let's navigate to localhost/acme and actually want to go to the install.php file, and it's just going to run a couple checks on your system to make sure that everything is okay. If you're using XAMPP, everything should be checked off and we should be good to go. So let's click agree and then we need to put in the parameters for the database. So the database name is acme_ocht, and then for the login, you want to put your database username. I'm using the root login and then the password.
And then we want to click this administrator button and this is what you want to put for the admin data for your back-end. So, first name, last name, and then email, I'm just gonna use [email protected], and then for the admin login you can change it if you want, but I'm just going to use admin and put in my password. Alright, so now let's click on advanced, and you can provide a different back-end URL if you want, the default is /backend. And then there's this encryption code you want to leave that, and then we're gonna leave the permissions at 777. Okay, so we should be all set.
Choosing a Theme & Finalizing Installation
Let's click continue and it's going to ask us how we want to set up our site. So there's basically three options: we have start from scratch, which will install October without any plugins or themes; we have start from a theme, which we'll pick, we can pick from a pre-built site that fits a general purpose, or we could use a specific project ID. What I'm gonna do here is start from a theme just so we have something to work with and something to look at. Alright, so let's go ahead and click that, and there's all different themes you can choose from. I'm just gonna grab the first one here, this clean blog, and we're gonna click install, okay, then we'll click confirm. And that's gonna go ahead and set that stuff up for us. And you can attach custom plugins and components and stuff to a theme as well, and we'll get into that later on. If you want to set up a virtual host you can, but I'm just gonna use localhost/acme okay, we can use that as our URL. Alright so that's all set.
First Look at the Frontend and Backend
Now it shows us the web address which is localhost/acme. So let's go ahead and open that in a new tab, and you should see something like this. Okay, so it looks pretty nice. This is that theme that we chose. And then if we want to look, go to the backend, we can click on this link here which just goes to /backend and we can go ahead and log in with the account that we chose.
Alright, and it's a pretty nice backend. So we're gonna stop here and in the next video, we'll take a little tour of the backend before we get into some programming.
Backend Tour: Dashboard & CMS Structure
So this is the backend, this is the dashboard area. It's kind of a welcome page, and you see it gives you some status for your system, gives you a little preview of the front end, and if your theme permits it, you have some options here as well as far as the columns.
Now, if we go to CMS, this is where we can create pages for the website, for the front-end, and notice that each page is associated with a URL, it's associated with a route. Alright, and then we can also have folders in here such as this blog folder with more pages. Alright, so what I'm gonna do is open up the installation folder in Atom. Okay, so let's go add project folder, and we want Acme, and then these are the files. Okay, and then the structure is somewhat familiar because it's built on Laravel. If we look in the config for instance, the app.php file, it has the provider down here and all that stuff, aliases, just like any standard Laravel website. Same thing with most of these config options. There's also a storage folder, that's where all the assets get uploaded to, and then themes is where the October themes go, and we're gonna create a custom theme.
Creating and Viewing a New Page
But before we do that, let's go and go to the backend here and let's go ahead and create a new page. So I'm gonna just click on add and let's see, we'll call this, this is the file name, and if you look over here, I'll see where is it? We want to go into this is the current theme, responsive-clean, and this is actually where the pages get put. You can see in here there's a home page, there's a blog folder that we can see from the backend. So when we create a page, it's going to go into there. So let's say contact.
And then for the layout, we're gonna choose the default layout. Okay, your themes can have multiple layouts. If we look over here, you'll see that default layout. And then for the description we'll just say, 'contact us'. And then you can put all your markup in here. So what I'll do is just put h1 and you can actually use the tab, so if I just do h1 and then tab, it'll actually turn into a tag. Alright, so this is a pretty handy little editor. So we'll say contact us, and let's just put... you know what, I'm just gonna paste in a form here. Alright, so this is just your standard bootstrap form. We're gonna go ahead and save this. Actually, we gotta put the page title up here. It'll say 'contact', it'll automatically create the URL /contact, but you can edit this if you want but I'm just going to keep that. You can also put your meta description in here, meta title, we'll just leave that blank though. And then let's click save. Alright, so it says template saved and if we look up here, now we have a contact page. So if we go to our front-end, let's go to /contact, and there's our page.
And if we wanted to add this to a menu, we could go over to our theme and let's say we want to go to partials, site, and then there's a header.html file, or htm. And this is where the... let's see, actually you know what, this isn't where I want to go. I want the sidebar, which is this file right here. And then you'll see that there's these sidebar segments. So we have the recent posts, and then follow me. Recent posts is actually a component. You can see it's looping through the posts here. It's the blog posts component.
But what I'll do is copy this, let's paste that in here, and we'll just call this main menu. And then we'll get rid of that loop. And let's put an li tag here and then an a tag. Now for the links, you'll see the format right here. You need to put the name of the page and then identify it as a page. So this is a link to the home. So I'm just going to put that in there and we'll say Home, okay. We'll go ahead and paste this in and let's say Contact, and then we'll change this to contact. Alright, we'll save that reload and now we have a menu: home page, contact.
Now we don't have to do it in our editor, we can actually go to Partials and you'll see Site, and then Sidebar. Okay, so this is what we just did, we just created. So you can use either the CMS, which is probably a better idea, but you can also just update the theme files. All right, I'm not going to get into the entire structure of the theme yet, we're gonna do that next, but I just wanted to show you kind of how that works.
Exploring Components, Partials, Layouts, and Assets
Now there's also something called components. All right, so if we click on components, you'll see there's two in here. There's this to-do list and then there's a blog component. Okay, so this to-do list is actually associated with the demo template that comes by default. All right, you can associate components with themes. The blog right here is more of a standalone component and you can choose things like the category listing, the post listing, an individual post, and an RSS feed. So you'll see on the sidebar it's actually using this post list. That's where this is coming from. Okay, so this is, this is a component.
What we're going to do is we're gonna later on create our own component, which will be a list of links, okay, something very, very simple. Now we also have, let's see, we looked at partials, so you can edit your header, you can edit your your meta tags, all that stuff. And let's see, we have layouts. So we only have one layout, which is the default.htm, but you can create multiple layouts if you want. If we go to content, there's no content files. We could basically create text files here and you can save them as multiple types with different extensions. Assets will just show us like our CSS files and all that, we can edit all that stuff from here. So for a front-end user, there's really no reason to go into the files, into the theme files. This is a really nice CMS that you could use similar to WordPress or Joomla, something like that. It's just much more lightweight. Alright, and you'll see there's a tabbed interface as well. And we'll just close this stuff up. All right, and then for media, we can manage images, videos, audio clips, whatever we want, we can upload that stuff.
Managing Blog Posts
Blog, okay, so this is where we can create blog posts. If we go to our front end, you'll see we have this first blog post. If I click on that, it'll take us to the individual page for that post. Alright and if we want to create a new post we can do that. Let's just say 'blog post two' and it has a slug and you can rename this if you want. And then let's just say, 'this is my blog post'. And it actually shows you what it'll look like over here. I believe we can put tags in here, let's see if we wanted to do like an h3. Yeah, you'll see it'll actually show you what it will look like over here. So that's pretty cool. Let's just change that to a paragraph. Alright, and then you can choose categories, we only have one, which is 'uncategorized'. And then for Manage, this is where you can check it, you can make it published, you can choose a certain date for it to be published, you can put in an excerpt, say 'this is my post'. You could also upload an image, a featured image. So let's go ahead and click save, and then on the front end if we reload, you'll see we have blog post two. And that shows over here as well. We click on that, it'll take us to that individual page.
System Settings and Conclusion
All right, so let's see what else we have. We have settings. Okay, if we go to settings, we can choose the theme. So you'll see there's a demo by default. It also has the clean theme, which is what we're seeing now on the frontend. And what's really nice is you can actually say create a new blank theme, and then from there go ahead and add all your files, and you can do it from the frontend here. Well, I shouldn't say frontend, it's the front end of the back end, or you can do it from, you know, from your code. Alright, you can also set maintenance mode, which will, I believe, just disable the front end. And then you have, you can manage updates and plugins, administrators, you can add other users and set them to certain groups and certain privileges, mail functions, event logs, access logs. There's a lot of stuff. This is a really nice little system and it's all built on top of Laravel.
You know, the reason why I put this in this course is so that you could see a production-based application that's built in Laravel, because although we're doing, you know, 10 different projects here, we're not, we can't do anything like this. We can't do a production type or a production-level application in a 10-project course. It would just, you know, it would take a year to develop. Alright, so with that said, I also did want to do some coding, not just front-end stuff here. So in the next video, we're going to start to create our custom theme.
