OctoberCMS For Rapid Website Creation

[Music] hey what's going on guys so recently I was asked by one of my patrons about a suggestion for a content management system CMS aside from WordPress or Drupal something that was was much lighter and one thing that came to mind was October CMS which is actually built on the laravel PHP framework so the reason that I suggested this is because it's very friendly to developers and clients so if you log into the admin area you have four each for your pages you can create pages you can create partials and you can use the text editor in the backend which even includes Emmet it also uses the twig template engine which can be accessed from the admin area so you don't really have to go back and forth from your code to your admin area like you do in something like WordPress and I think that's really valuable and then at the same time your clients also have access to their content where if they want to edit their about page or something like that they can do that it also has its own set of plugins I mean it's definitely not as extensive as WordPress and their plug-in repository not even close it's a much smaller CMS a much smaller ecosystem but I want to take a look at that today and just put together a simple site that uses bootstrap on the front end we'll create a couple pages I'm going to show you how to set up a blogging plugin as well and also a contact form plug-in now I'm using my localhost I'm using xampp so I'm not gonna set up the mail server and stuff like that so the contact form won't actually send an email but I will show you how to set that up alright so that's what we'll be doing in this video guys let's go ahead and get started hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info all right so before we get started one want to address is developers that mostly developers that are straight out of boot camp or are straight out of you know getting their degree haven't really worked in the real world yet saying why don't you just build it from the ground up you know why use October why use open source software just build your own and and use that well I can tell you from dealing with real-world clients that a lot of them are very very cheap they're also very impatient they want things done fast and that's where tools like October CMS and WordPress come in and that's why they're used so much that's why WordPress is you know it takes up like I don't know thirty percent of the websites on the internet or something like that because it's very practical and I'm not talking from a standpoint of you know working with a team for a big company where other big companies are paying you a lot of money to build custom applications I'm talking about you know having a small web dev company with with you know a couple people and you have clients from down the street paying you to build them small apps or websites or whatever that's where these tools are very very valuable and we all know those those developers that are straight out of boot camp that would say I would never use this I'm not gonna use open source software I'm gonna build it from the ground up they're not thinking of practicality and they're not thinking of dealing with clients in the real world so enough with the rant let's go ahead and get started now October CMS is built on laravel which is a PHP framework so obviously you need PHP to run it so what I would suggest doing is installing xampp or zamp however you want to pronounce it and it has an Apache server MySQL and PHP we're also gonna be using MySQL it's cross-platform so you can install it for Windows Linux or Mac I'm not going to go through the installation it's very easy to setup if you need help the second video of my PHP front-to-back series will show you how to install it alright so once you do install it you can either go into your SQL shell or you can do a much easier solution to create your database and that is go to local host PHP myadmin okay and all we have to do is click on databases and create our database I'm gonna call it traversing media and click create and that's all we have to do we don't have to create any tables or anything it does all that for us during the installation it has an installation process that's very very similar to WordPress so now we're gonna download the Installer so I'm just gonna click download installer and you have to hold it quite a few times because I've done this video quite a few times so we're gonna go ahead and open this zip file up and see what we got so we have a folder called install master and inside there we have an install dot PHP file that's the installation script and then we have all the other files in this folder so we need to upload this to our server which I'm using xampp so that's gonna be in my C Drive I'm on Windows so C Drive xampp htdocs and we're gonna just go ahead and create a new folder here I'm gonna call it traversing media and we're gonna bring over the install script and the folder we don't need to get ignore or the readme alright so now that we've done that we can go back to our browser and we can go to localhost / and then whatever you called the folder I called mine traversing media and actually we want to go to slash install dot PHP alright so what it's gonna do now is go through a system check I'm just gonna make sure you have PHP version seven or greater I probably should have mentioned that before also some extensions you need the curl PHP extension PDO open SSL it's gonna just make sure all that is enabled if you have any red marks here then look it for instance if you don't have the PDO extension enabled go into your PHP dot ini file and make sure you have that enabled alright only I'm gonna go ahead and click agree and continue and now we're going to set up our database so it actually uses multiple database types if you want to use postgrads SQL Lite or SQL Server but we're gonna stick to MySQL localhost is is good this port is good database name I called it traversing media and you want to put your database password I'm using my root user and I'm gonna put my root users password and then we'll click administrator and you can change your admin name here if you want write your first and last name and then the admin login by default is admin you can change it if you want and then the password you want to use okay and then we'll click continue and it's gonna ask us here if we want to start from scratch without any plugins or themes if we want to start from a theme or if we want to use a project ID okay there's actually project full projects you can clone on the October CMS website but we're going to go ahead and start from a theme and you're gonna get some choices here some pretty nice-looking themes what I'm going to do is use the blank bootstrap for theme alright so I'm gonna click install and confirm and it's going to go through this process where it downloads all the theme files and gets them all set up for you alright guys so that took about a minute or so everything went okay so now it shows us the website address and the admin address which is slash back-end ok and this is gonna be localhost / Travis e-media in my case now one thing you want to do is make sure you install he will delete the install dot PHP file so let's go ahead and go to our project folder and just make sure we delete that file ok now we're going to visit the front-end of the website which looks like this okay it's a bootstrap template has a navbar it has a Jumbotron and has this video that plays automatically and and some excuse me then some features down here some text and it also has an author page okay which also has an autoplay video so it just has two pages by default now we're gonna go to the back end which is gonna be just whatever your URL is slash back end and you get this really nice login form so let's use the password that we chose and this is the back end so it's very simple this is just the dashboard not much to do here it tells you if it's up-to-date or not and stuff like that your last sign-in but if we click on CMS this is where most of your work will be done we have your pages so author and features we saw those two pages on the front end if we click on one of these you'll see we have a title we have the URL which we can easily choose we have the file name okay which is an actual file that's in your in your project folder and then down here we have the markup okay and this editor is really really nice it actually uses Emmet so you can do things like h1 tab if you wanted to do like a div with an ID of tests you could just do hash test tab and that'll give you an ID you can do like lorem 30 tab that'll give you 30 words of lorem ipsum dummy text so it's really really nice and then this stuff here is part of the twig template engine okay if you know twig this probably looks familiar but it's similar to you know blade which is the default laravel template engine which i'm not sure why they didn't use since this is built on laravel but it's similar to that it's similar to handlebars you know all those template engines so these are the pages we also have partials now partials are kind of like components I shouldn't call them components because there are actual components as you can see but they're like pieces of your site so the jumbotron the navbar those are partials and you can see the markup for those here layouts so we have a default layout and that wraps around everything else whatever page we're viewing is output right here and then we also have our nav bar and our jumbotron partial all right so what I want to do is create a new page here so I'm gonna go to pages and click add and we're gonna call this home now the URL I actually want it to be the index so I'm just gonna change that to slash even though features already uses that URL I'm going to delete the features page okay - layout we can also create multiple layouts if we want we're going to use the default which is the only one there and I'm just going to put down here an h1 and we'll say welcome and then we'll just put we'll put a paragraph and we'll say lorem 30 tab and we'll just put some sample text all right so let's go ahead and save that you can also create metadata so meta title and description if you want to do that but now what we're gonna do is just delete the features and author pages so we're gonna just check those and click delete and now we just have our home page all right now I'm going to create another page called a vote we'll have that go to slash about we'll choose the default template or layout and then we'll put an h1 and say about us and we'll just put some more sample text will say LARM 50 tab and we'll go ahead and put another paragraph as well okay and we'll save that so now we have two pages now if we go to the front end and we can do that by clicking this this button right here I've been open in a new tab you'll see that the home page now has our welcome on it ok whatever we put for the home page now these links up here are still here features an author to change these we need to go into the partials and go into the nav bar alright so in the nav bar what I'm gonna do is I'm going to change the branding which is just as bootstrap for I'm going to change that to traversing media and then these two list items are the two pages the features in the author page and it even uses a little logic here to have the active class if we're on that page so that the link lights up alright so if we run features you can see it's light if we go to author welt like idiot I just deleted those pages but anyways that would work so let's change this to home and we'll change this right here to home and this here to home alright and then we want the about page for this one so we'll change that to a bow we'll change this to about and change this okay so let's go ahead and save this and now we'll go to our front-end and reload and now we have home if I click on about that takes us Thea to the about page now notice the booed the jumbotron is on both pages now we can use the twig template engine to do conditionals so let's make it so that the boot the with the hell is this the jumbotron shows up on only the home page so we'll go to our layout and not layout yeah layout default and we're gonna wrap this right here see the partial Jumbotron we're gonna wrap this in a conditional using the twig template engine so we're gonna say if sorry about the banging guys so we'll say if this dot page dot file name is equal to home dot HTM okay uses an HTM extension I don't think HTML will work and then we just want to do an end if actually going to do an else first so we'll say else then I just want a couple line breaks just to push everything down and then we'll do our end if okay we'll just go ahead and tab that over all right so let's save that see if that works so home page has the jumbotron the about doesn't have it alright so any internet page we create now won't have the update jumbotron now we can also create our own partials so let's say we wanted to have a sidebar over here so what we'll do is we'll go to partials we'll say add we'll call it sidebar and let's just put an h3 will just say sigh yeah we'll just say sidebar and then we'll put a paragraph and I'll say lorem xxx tab alright so it doesn't really matter you can put whatever you want here and then we'll save and then if we want to insert that we can go to our layout our default layout and I want to put that down here on the side of the page now I'm going to use the bootstrap grid system so we're going to put a road class here and then we're going to have to columns so call m.d. 8 will have an 8 column div and then underneath that will say call m.d. 4 for a four column div and then we're going to take this page okay so this is where the page the actual page is displayed put that in the 8th column and then in the 4 column we're gonna put our sidebar so to do that we can say partial and then the name which is sidebar so let's go ahead and save that and let's go to our front-end and reload and now we have a sidebar so it's as easy as that to put partials around your site now this will be on every page if you wanted it on a specific page again you could do that conditional that we just did for the Jumbotron all right now I'm just going to change the text in the Jumbotron real quick so I'm just gonna go to the partial and I'm gonna change this h1 right here to traversée media and save that alright and we'll reload and it's as easy as that to change content so you could actually have your clients come in and change up their content now it is a little I would say less user-friendly than WordPress because you do have actual code here but you just have to be very specific to tell them to just change the text do not touch any of the tags or anything like that all right I don't know if there's a way that you can make it to not have the code here that probably is but I'm just not sure about how to do that now if you want to include images inline images you could go to media not just images video audio and you can manage all of your media for your website here alright you also have your settings you have quite a bit of settings you want to configure your mail server if you're gonna make your contact form work but what we're gonna do is install the contact form plug-in just so you can see how that works so if we go to system and then updates and plugins and we click install plugins and we search for a contact we'll get a couple options I'm going to choose this second one here this free simple complete modular contact and that's going to download it and install it once that's done you can go to contact us settings right here under marketing and you can add in your whatever your info your recipient name subject will just say hello and then confirmation will just say thank you so you can do that you can also enable the CAPTCHA but you'll need to get a site key and a secret key from Google we're not going to do that and we're just gonna save and close all right now we can go to our CMS and we can create a new page called contact and then the way that we implement let's choose a default the way that we implement plugins or components is click on components and now you'll see contact us so if we click on that it brings it in to this page okay so this page is now associated with this plug-in now to actually embed it you need to look at whatever is right here you see contact form and we just want to go down here and put in our percent syntax and then say component and then whatever that shortcode is which is a contact form like that alright and we can put other markup here as well if we want to put a heading and put an h1 we'll say contact us and that should be good let's save and now we'll go to our partials and go to navbar and just add that as a link I'll just copy this will change about to contact here as well and here and let's save and now we'll go to our front end and reload and now we have a contact link if I click that we now have a form okay it has validation and everything now it's not gonna work if I send it because I don't have an email server setup or anything yeah see we get this error here Swift mail are not found but you can look at that you can set that up on your real web server and you can look at the documentation on how to do that I just wanted to show you how to install the plugin now I also want to install a blog plug-in and show you how to do that so let me just close these up so let's go back to settings and then go to updates and plugins install plugins we're going to search for blog and we're gonna choose the first one here it's by rain lab let that install and then we'll go back to CMS and we're gonna create two pages here one is going to be for the single post so I'm just going to call this post and choose the default layout now we need to go back over here to components and click on blog and you'll see there's four options so we have the category list the the post which is what we're doing here the single post the list of posts and then an RSS feed if you want we're not going to use the RSS feed or the category list we're going to use the post list and the single post so make us make sure we choose a single post and again just like we did before we want to include this little shortcode down here so let's do let's say what are we doing here do our percent signs and then component and it's gonna be blog post like that alright and then we'll go ahead click on this box here and you see how it says post slug which is : slug we need to add that to the URL so we need to say / : slug so it knows which opposed to actually go to so let's go ahead and save this alright so now that we did that we want to go back to pages and create our main blog page so let's say add we'll call it blog choose the default layout and then components and we want to choose post list this time add our shortcode by the way I don't know if it's called shortcode I don't know what it is but it's this little identifier here and this is blog posts plural actually we need to do component blog posts alright so if we click this box we need to go to links and see how it says post page about that's not correct we need to change it to the post page that we just created alright so we'll go ahead and do that and save now we want to add blog to our menu so we'll go to partials nav bar and let's copy this list item here and let's go ahead and change this to blog blog and this right here also blog and save let's go to our front-end and reload now we have a blog link if I click that we get first blog post now we haven't created a blog post but this one is here by default and if we click that it takes us to the actual post now to create a post in our backend you probably noticed that we have this blog link so we can click that and there's our first blog post but we can create another one let's call this second post we'll say this is the second post and you have a little editor here where you can format things with headings code you can make things bold you can create lists items stuff like that then you have a little preview over here so let's go ahead and save this post and let's go to our front-end and reload and there's our second post so pretty easy now you can edit this stuff like how this looks inside of your files so if I were to go to let's see I want to go to plugins rain lab blog and components and this is the the posts so this folder here and then this this HT HTM file if I were to open that and take a look you'll see that we have all the mark-up with the dynamic content so for instance if you wanted to not use a UL here you could change this to a div you could make these your post showing like bootstrap cards or something like that if you wanted to change up the look but I'm not going to get into that into actually editing the design I just wanted to show you how to kind of set up a simple website using the CMS now is this as attractive as creating your own platform your own CMS of course not but look we did this in what a little over 20 minutes so this is very practical you could easily edit the design here edit the template add a nice background image and change the colors up make it a you know your own your company's brand or whatever company you're building the site for so it's something that's very practical and I think it is worth is worth making a video on so hopefully you guys enjoyed this and maybe you'll use it maybe you won't my job my goal for this channel is to just give you options and show you how to use those options and then you make the decision if you want to actually use it in in your career or your whatever your life and by the way I do want to mention that this is really easy to deploy you should be able to upload this on to a shared host no problem as long as you have long as it has PHP 7 and you have a database either MySQL or one of the other ones that you saw that it it uses all right so thanks guys thanks for watching if you like this video please leave it a like please leave a comment talk about a little bit about what you think about content management systems and and using pre-made ones or building them from scratch and and whatever you feel like you feel like sharing so thanks guys and I will see you next time hey guys I've just created a new discord server that's open to the public the goal is to have a place where people can go to help each other out for programming issues as well as just a place to discuss new ideas and get feedback I also check in daily there's a channel to request videos on YouTube and much more so if you want to check it out just go to discord GG slash traversée media

Channel: Traversy Media

Views: 116,843

Keywords: octobercms, cms, october cms, laravel, laravel cms

Id: ERiwIGsaZN8

Length: 26min 51sec (1611 seconds)

Published: Sat Dec 02 2017