An introduction to OctoberCMS - a Laravel Based CMS

1. Intro to OctoberCMS – based on
Laravel framework
By: Kenton Spence
@tekjava
12/10/2015

2. Installing OctoberCMS
Steps to installing OctoberCMS:
1. You can clone their repo on GitHub, or download the installer.
2. Extract the files into your local directory, and configure your local server to match the local path.
3. Set up a new database, and take note of the database name.
4. Navigate to the directory/install.php and walk through the prompts for installation.
5. Delete the install files after successful installation.

3. How Themes & Templates work
End-output is coming from the <theme> directory. All the files and directories that make
OctoberCMS work are all located in this directory. By default, the demo theme is the
active theme. You can always create your own theme by creating new directory, a theme
configuration file called <theme.yaml> in the root of this directory adding a pages
directory with a page file in it. You can also create a new blank theme from the settings
menu in the backoffice area of OctoberCMS.

4. File structure for an OctoberCMS theme
Every theme consists of sub-directories for pages, partials, layouts, content files, and assets. Each of
these directories may contain sub-directories, allowing for simplification of larger scale projects.
Here’s what the demo directory structure looks like.

5. Twig markup
Twig markup is a PHP templating engine, enhancing and speeding up
templating, and reducing common verbose tasks to simple code
snippets. There are three parts to any of the page, layout, and partial
template files:
1. Configuration
2. PHP code
3. Twig markup

6. The configuration section is structured like a php.ini file, and is marked as finished by “==“, making
way for the PHP section also finished with “==“. The PHP section is optional for all template file. Twig
markup contains the actual contents of the template file.
Example of a template file:

7. Pages
Page configuration is defined in the Configuration Section of the page template file. The page
configuration defines the page parameters, required for the routing and rendering the page and page
Components.
1. url – page url is required
2. Title – page title is required
3. Layout- page layout can point to a layout file this is optional
4. Description – description for the page in the back-end is optional
The page url can take on parameters, depending on the page in question. 404 and error pages can
also be specified.

8. Example of a page layout:
Find out more on pages here.

9. Partials
Partials refer to files that contain partial amounts of code. Partial files are can be called and reused in
pages, layouts, or other partials. You can use the {% partial %} tag to call a partial from inside another
file. Partials only support one configuration parameter:
1. Description – the partial description for the back-end is optional
Here’s a basic example of a partial (right sidebar) calling another partial (recent posts):

10. Layouts
Layout files specify the layout of a page. They act as the major building blocks for any October CMS
project. They take on two configuration options, both of which are used in the back-end interface:
1.name – the name of the layout file for the back-end (optional)
2.description – the layout file description for the back-end (optional)
A layout page might look something like this:

11. Content Blocks
Content files contain content sections, and can be called from inside layout, page, or partial files.
Content files support three extensions:
1..htm (for HTML markup)
2..txt (for plain text)
3..md (for markdown) <- awesome
You can call a content file using twig markup by running the {% content %} tag.
Here’s an example of a page rendering a couple of content blocks:

12. AJAX Module
October CMS has a very robust AJAX framework built in, allowing you to make AJAX requests and interact
with a number of data attributes easily. Add the AJAX framework by placing the {% framework %} tag
anywhere inside the page or layout. It requires jQuery which is loaded before the framework.
Example:
AJAX requests work by invoking an event handler on the server. This event handler can then update page
elements using partials. There are two API’s for performing AJAX tasks…

13. Data Attributes API
The Data Attribute API allows you to issue AJAX requests without any JavaScript (less verbose than the
JavaScript API). Here’s an example from their website using the Data Attributes API. It redirects a user to
another page after a successful request:
JavaScript API
The JavaScript API allows us to use any options and methods compatible with the jQuery AJAX
function. We can use the “request()” method with any element inside a form, or on the form itself. The
“request()” method has a single required parameter – the handler name. Here’s an example:

14. Simple Extensibility
October CMS is extendable via plugins and components.
The documentation states:

15. Plugins
Plugins allow us to extend October CMS beyond the out of the box functionality it has. They can define
components, add back-end pages, interact and edit the functionality of other plugins, and more. They
are easily described and set up. They are placed in the /plugins directory.
Visit the plugin docs to get started creating your own!
Components
Components provide us with configurable building blocks, and they can be attached to any page,
partial, or layout. They extend the behavior of front-end pages by:
1.Providing basic markup using partials
2.Handling AJAX events triggered by the page
3.Injecting variables by participating in the page execution cycle
Check out the official components documentation here.

16. Start Crushing It with OctoberCMS!
The two creators of OctoberCMS are Alexey Bobkov and Samuel
Georges. Their philosophy is making web development and deployment
simple!
Cheers!
Feel free to reach out on twitter @tekjava
Email: kspence@tekjava.com