CMS

Week 1 - Theorie

October CMS

Slides

slides.com/pietermathys

Facebook

CMS

https://www.facebook.com/groups/155765831682612/

Anyone can invite/approve members

Summary

Recap
What is October CMS
How to use
- Installation
- Dashboard
- Settings
- CMS
- Media
- Blog

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

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 - Customize

CMS - Maintenance

System

Settings

Updates & Plugins

Install plugins

Install themes

Example: ContactUs

Manage

Administrators

Groups

Customize back-end

Editor settings

Mail

Settings

Mail

Mail templates

Logs

Settings

Logs - Events

Logs - Access

Logs - Settings

CMS

October CMS

CMS

CMS - Pages

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!