Recap

WordPress

WordPress +

• Easy to use
• Quick setup
  • Build a site in no time
• Intuitive UI
  • Everyone can use it
• Fully customisable
• Thousands of
  • Themes
  • Plugins

WordPress -

• Development can get messy
• The right combination of plugins might not exist

October CMS

What is it?

Features

For designers

• Full control over page structure
  • HTML/CSS
• Same process as in an IDE
  • You write the same code in the CMS
• Simple template engine
  • Twig

For developers

• Built on Laravel
  • "The best PHP framework"
• Page components
  • AKA Building blocks
• Extend with plugins
• Easy UI
• Simple AJAX framework
• Quick scaffolding with Builder
• File-based templates
• Built-in asset combiner (JS/CSS)

For agencies

• Works like any other CMS
  • Can be managed with Version control
  • Edit with favorite IDE
  • Build any sort of site
• Marketplace
• Safe core updates
• Reuse and share

For clients

• Manage the site without technical know-how
  • WYSIWYG editor
  • Manage media (images, video, ...)
  • Manage structure (menus)
• CDN support
• Page snippets
• Multilingual
  • Website
  • Admin interface
• Easy to learn

October CMS

How to use

Summary

• Installation
• Dashboard
• Settings
• CMS
• Media
• Blog

Installation

October CMS

Guide

https://octobercms.com/docs/setup/installation​

Download

https://octobercms.com/

Add server directory

Default installation:

• Create a folder in /htdocs
  • F.e.: "octobercms"
• Paste contents of zip in folder

MAMP+XAMP

Custom installation:

• Check settings for webfolder root
• Create a folder in /htdocs
  • F.e.: "octobercms"
• Paste contents of zip in folder

Add server directory

MAMP+XAMP

Install

• Visit installation page
  • If directory name is "octobercms"
  • If MAMP/XAMP uses default ports
    • localhost/octobercms/install.php
  • If MAMP/XAMP uses different ports
    • localhost:8888/octobercms/install.php
    • Or check Port settings

System check

License agreement

Create database

octobercms

Config database

Config admin user

Config backend

Get started

Get started - theme

Get started - theme

Installation completed

Cleanup!

For security reasons you should delete the installation files, the install.php script and the install_files directory.

Dashboard

October CMS

Dashboard

Backend login:

http://octobercms.dev:8888/backend

Dashboard

Widgets

Contextual links

Admin bar

Settings

October CMS

Summary

• CMS
  • Front-end theme
  • Maintenance mode
• System
  • Updates & Plugins
  • Administrators
  • Customize back-end
  • Editor settings

• Mail
  • Configuration
  • Templates
• Logs
  • Event, Access
  • Settings

CMS

Settings

CMS - Theme

Theme - Manage

Theme - Manage

Theme - Customize

CMS - Maintenance

System

Settings

Updates & Plugins

Install plugins

Install themes

Example: ContactUs

Example: ContactUs

Manage

Manage

Administrators

Administrators

Administrators

Groups

Customize back-end

Customize back-end

Customize back-end

Customize back-end

Editor settings

Editor settings

Editor settings

Mail

Settings

Mail

Mail templates

Mail templates

Mail templates

Mail templates

Mail templates

Logs

Settings

Logs - Events

Logs - Access

Logs - Settings

CMS

October CMS

CMS

CMS - Pages

CMS - Pages

CMS - Partials

CMS - Partials

CMS - Layouts

CMS - Content

CMS - Assets

CMS - Components

Example: About us

1) Add a page through the UI

Example: About us

Where is our layout?!

Example: About us

2) Add in code:

• themes/responsiv-clean/pages/about-us.htm
• layout = "default" (or own layout name)

title = "About us"
url = "/about-us"
layout = "default" // <-- This bit
is_hidden = 0
==
<div class="about-us">
    {% content 'about-us.htm' %}
</div>

Example: About us

Example: Contact us

1) Add a new page through the UI

Example: Contact us

2) Add in code:

• themes/responsiv-clean/pages/contact-us.htm
• layout = "default" (or own layout name)

title = "Contact us"
url = "/contact-us"
layout = "default" // <-- This bit
is_hidden = 0
==

Example: Contact us

3) Add the component through the UI

Example: Contact us

4) Add the form markup

Example: Contact us

5) Results!

Media

October CMS

Media

Blog

October CMS

Blog

Blog

Blog

Blog

Blog - Categories

Blog - Categories