October CMS, un sérieux concurrent de WordPress.

Bonjour à tous.

Aujourd’hui nous allons parler d’un nouveau CMS qui à le vent en poupe, j’ai nommé: OctoberCMS.

October cms, une alternative à wordpress ?

Avant de rentrer dans le vif du sujet, parlons un peu de la technologie en question.

October cms est un CMS open source, sous licence MIT utilisant à merveille le fabuleux framework Laravel. Sortie en Mai 2014 son évolution n’a cessée de croitre. Il a été élu « Best Flat File CMS en 2018« 

Nativement compatible avec des versions de PHP très récentes (php 7.3 étant supporté sans aucun soucis à l’heure où j’écrit cet article), October vous permettra de faire des applications web utilisant les meilleurs outils du web.

Laravel est 100% exploité côté backoffice: Un développeur web maitrisant ce framework ne se sentira pas perdu lors de la prise en main du CMS. Le temps d’apprentissage est très rapide.

Twig est utilisé côté front (à la place de Blade), pour une intégration des templates simple et rapide.

Enormément de plugins sont disponible gratuitement (et fonctionnent)

Pourquoi passer sur OctoberCMS ? Pour quel type de projet ?

Si on le compare à WordPress, au niveau de la popularité, ce dernier n’est pas à la hauteur, il faut l’avouer. WordPress est mondialement connu et datant de 2003 (soit 16 ans à l’heure d’aujourd’hui)

En revanche, si l’on parle technique, OctoberCMS n’a rien à envier au géant WordPress et pour cela, nous allons faire un petit comparatif rapide dans un context précis: Avoir un site qui permet d’écrire des pages de contenu, des menus, articles de blog, un e-commerce, traductions de contenu etc…

Faisons un petit comparatif:

Créer des pages:

Dans WordPress créé des pages est un jeu d’enfant, rendez-vous dans le backoffice, cliquez sur Pages et le tour est joué:

Pour October, nativement cela n’est pas présent, mais les membres de l’équipe ont développés un plugin https://octobercms.com/plugin/rainlab-pages qui va vous permettre en clique de créer des pages contenu:

Créer des articles de blog:

Encore une fois sous WordPress c’est natif, dans l’onglet Articles:

Pour OctoberCMS, le principe est le même, par défaut pas de blog, mais un simple plugins gratuit vous permettra d’en faire un: https://octobercms.com/plugin/rainlab-blog

un autre vous permettra de rajouter les commentaires:

https://octobercms.com/plugin/saurabhdhariwal-comments

Encore une fois c’est 2 CMS sont assez similaire.

Créer un e-commerce:

Dans WordPress il existe des tonnes de plugins pour faire un e-commerce, le plus connu étant Woocommerce

WooCommerce

Encore une fois, on peux voir un style similaire au pages produits ou article (post type wordpress).

Pour October, il en existe aussi, moins mais tout aussi bon.

Notre préféré est Mall: https://octobercms.com/plugin/offline-mall

Traduction de contenu:

Pour WordPress, il existe beaucoup de plugins, le plus connu étant Polylang: https://wordpress.org/plugins/polylang/

Dans October, il s’agit du plugin Translate: https://octobercms.com/plugin/rainlab-translate

Pour résumé:

En terme d’utilisation, les fonctionnalités sont présente, certainement un peu plus poussée sur WordPress, mais, October n’est pas à la traine pour autant.

WordPress à fait le choix d’adopter Gutenberg, qui est un nouvel éditeur de contenu, et, à la grande surprise de tout le monde, vous pouvez l’utiliser dans OctoberCMS: (nous l’avons testé, ça fonctionne)

https://octobercms.com/plugin/reazzon-gutenberg

Sinon, pour le contenu HTML, October utilise le Frola editor, qui est je trouve vraiment sympathique. Nous allons, la aussi revenir en détails.

Mais pourquoi l’adopter ?

Pourquoi adopter un CMS, qui est au final moins connu et qui a plus ou moins les même fonctionnalités ??

La différence est la où elle ne se voit pas, dans le coeur de la machine.

Quelles sont donc les différences fondamentales entre WordPress et OctoberCMS ?

Il faut creuser un peu plus loin pour se rendre que October, est en fait, une machine de course, son apparence simple et raffinée n’est en fait qu’un voile, que nous allons ensemble lever et voir ce qu’il s’y passe en dessous.

Nous allons tenter point par point de faire un comparatif détaillé et d’apporter notre point de vu sur nos arguments.

Création de theme sous WordPress:

La création de thème sous WordPress est assez simple, le code est écrit en PHP, les fonctions sont rentrés dans un fichier functions.php. C’est au niveau de la flexibilité que nous sommes assez bloqué sur WordPress et voici pourquoi: La structure est imposé (nom de fichier header.php, footer.php etc…) pas de systeme de layout. Le code procedurale est simple mais un peu dépassé. Pas de système de namespace, si une personne écrit une fonction qui à le même nom qu’une fonction que vous avez créé, cela va générer une erreur au niveau de php. La gestion des menu est enfer (si il faut modifier des sous-sous menu etc…) Faire une pagination un peu plus poussée et assez compliqué également. Bref, au final, on y passe beaucoup de temps sur des petits détails.

Création de theme sous OctoberCMS

Comme je l’ai mentionné plus tôt dans l’article, October utilise le moteur de template Twig qui est le moteur de template le plus populaire. La structure du theme n’est pas imposer, vous pouvez créer plusieurs layouts, puis choisir quel layout sera utilisé pour quelle page.

Le grand avantage de cette architecture, c’est que rien n’est imposé. Vous pouvez créer un nombre de layout infini (qui viendront remplacer les templates de pages WordPress), puis sur vos pages de contenu choisir un layout différent.

Encore une fonctionnalité que je trouve vraiment bien pensé dans October:

Dans le plugin de « Pages Static » vous pouvez proposer à l’utilisateur final de créer des pages lui même et via un éditeur wysiwyg ce dernier pourra mettre le contenu qu’il souhaite. L’éditeur en question qui est utilisé est Froala editor, non seulement d’être bien fait ce dernier à une option particulièrement intéressante.

Dans vos layouts, vous avez la possibilité de faire des block avec Twig.

Il ne s’agit pas vraiment des {% block %} dans Twig mais des {% placeholder %}

Ces placeholders ont la même fonctionnalité qu’un block, sauf que l’éditeur de texte va pouvoir les reconnaitre.

L’utilisateur peut donc placer le contenu qu’il veux, où il veut depuis un éditeur wysiwyg.

Shortcodes VS Composant et Snippets:

Les utilisateurs de WordPress sont très familiers avec les shortcodes (appelés aussi « codes courts »), les shortcodes permettent d’executer une fonctionnalité facilement en plaçant un code [monshortcode][/monshortcode] dans l’éditeur de texte et le tout est joué.

October ont également un sytème redoutable, il s’agit des Composants et des Snippets.

Le + de ces composants, c’est qu’ils sont listés dans les pages, depuis l’interface October.

Cette même interface vous permet de coder votre template directement dans depuis le CMS. C’est bien, mais pas pour développer un thème de A-Z, juste pour quelques modifications, ça fait bien l’affaire.

Exemple donné par October par défaut, la TodoList.

Pour afficher le plugin de todo list sur le front office, par défaut, dans le theme de demo la team October explique simplement comment faire

De faire un glisser / déposer du composant là où vous souhaitez voir afficher la todo liste dans le code, et le tour est joué:

Chaque composant peut avoir des paramètres différents pour avoir un rendu différent comme par exemple le nombre d’items affiché, ou le nombre de produits à afficher etc…

Un composant peut être créé depuis un plugin ou depuis un thème

Vous l’aurez bien compris, les composants c’est vraiment, mais un peu compliqué pour un utilisateur lambda. Effectivement, donné l’accès au code à certains clients, peut vraiment rendre les choses difficile.

Et c’est là que rentre en jeux les Snippets.

Encore une fois, tout a été pensé dans October CMS. Un Composant peut également se transformer en Snippet.

Un Snippet aura la même fonctionnalité qu’un composant, sauf qu’il sera utilisé dans l’éditeur wysiwyg.

Par exemple, si vous souhaitez que l’utilisateur finale place la todoList sur une page dédiée à cela qu’il aura créé lui même via les Pages Static, pas de problèmes ! Créez donc un partial (morceau de code à inclure dans une page) puis donnez lui un nom de snippet:

Puis dans une Page Static:

Création de plugins

Là ou va encore plus loin Octobercms est dans le développement de plugins.

Souvenez vous, October possède sous son capot, le framework PHP le plus populaire au monde, j’ai nommé Laravel !

Grâce à Laravel, October vous offre toutes ses fonctionnalités, qui vont vous permettre de gagner un temps plus que considérable.

Une surcouche à été apporté afin d’adapter les controllers backoffice et models.

Un quelques lignes de commande, votre plugin va pouvoir se générer.

exemple pour créer un plugins:

php artisan create:plugin Acme.Blog

Pour créer un model dans le plugin:

php artisan create:model Acme.Blog Post

Etc…

Plus de détails sur les commandes ici: https://octobercms.com/docs/console/scaffolding

Vous me direz, idem pour WordPress avec les outils mis à dispositions:

wp scaffold plugin

Jusqu’ici tout va bien, là où October va se démarquer va être au niveau de l’admin, la génération de listing et formulaire. Dans WordPress tout est « post“ la base de données est un peu vrac. October offre sur ce point beaucoup de plus de flexibilité, premièrement car vous allez, via vos models et migration créer votre propre structure en base de données.

Vous allez également pouvoir faire des jointures facilement (via HasOne, HasMany etc…)

Générer un CRUD va être un vrai jeu d’enfant.

Il faut dans un premier temps créer un controller puis un model

php artisan create:controller Acme.Blog Posts

php artisan create:model Acme.Blog Post

Si vous créez un controller, mettez le au pluriel (Posts), le model lui au singulier (Post), vous gagnerez du temps à configurer, sinon, bien entendu, ça peut être modifier 😉

Regardons l’architecture de notre plugin:

Comme vous vous en doutez le dossier controllers, contient les controllers du plugin, le dossier models, les models, le dossier updates lui, contient les migrations. Pour les executer à l’installation du plugin, il faut modifier le fichier version.yaml, se dernier vous servira tout au long de la vie de votre plugin, si vous faites un mise à jour, vous rajouter un champs dans un model, ou un nouveau model etc… tout se passe dans se dernier.

Voici un exemple du version.yaml du module officiel de blog

1.0.1:
    - Initialize plugin.
    - create_posts_table.php
    - create_categories_table.php
    - seed_all_tables.php
1.0.2: Added the processed HTML content column to the posts table.
1.0.3: Category component has been merged with Posts component.
1.0.4: Improvements to the Posts list management UI.
1.0.5: Removes the Author column from blog post list.
1.0.6: Featured images now appear in the Post component.
1.0.7: Added support for the Static Pages menus.
1.0.8: Added total posts to category list.
1.0.9: Added support for the Sitemap plugin.
1.0.10: Added permission to prevent users from seeing posts they did not create.
1.0.11: Deprecate "idParam" component property in favour of "slug" property.
1.0.12: Fixes issue where images cannot be uploaded caused by latest Markdown library.
1.0.13: Fixes problem with providing pages to Sitemap and Pages plugins.
1.0.14: Add support for CSRF protection feature added to core.
1.1.0: Replaced the Post editor with the new core Markdown editor.
1.1.1: Posts can now be imported and exported.
1.1.2: Posts are no longer visible if the published date has not passed.
1.1.3: Added a New Post shortcut button to the blog menu.
1.2.0:
    - Categories now support nesting.
    - categories_add_nested_fields.php
1.2.1: Post slugs now must be unique.
1.2.2: Fixes issue on new installs.
1.2.3: Minor user interface update.
1.2.4:
    - Database maintenance. Updated all timestamp columns to be nullable.
    - update_timestamp_nullable.php
1.2.5: Added translation support for blog posts.
1.2.6: The published field can now supply a time with the date.
1.2.7: Introduced a new RSS feed component.
1.2.8: Fixes issue with translated `content_html` attribute on blog posts.
1.2.9: Added translation support for blog categories.
1.2.10: Added translation support for post slugs.
1.2.11: Fixes bug where excerpt is not translated.
1.2.12: Description field added to category form.
1.2.13: Improved support for Static Pages menus, added a blog post and all blog posts.
1.2.14: Added post exception property to the post list component, useful for showing related posts.
1.2.15: Back-end navigation sort order updated.
1.2.16: Added `nextPost` and `previousPost` to the blog post component.
1.2.17: Improved the next and previous logic to sort by the published date.
1.2.18: Minor change to internals.
1.2.19: Improved support for Build 420+
1.3.0:
    - Added metadata column for plugins to store data in
    - posts_add_metadata.php
1.3.1: Fixed metadata column not being jsonable
1.3.2: Allow custom slug name for components, add 404 handling for missing blog posts, allow exporting of blog images.
1.3.3: Fixed 'excluded categories' filter from being run when value is empty.

Ce fichier sert également de logs lors des mises à jour, quand on mets le nom d’un fichier php, cela permet d’executer les migrations du plugin.

En qui concerne les listings, October vous permet de gagner un temps fou.

Tout se passe dans des fichiers yaml, prenons l’exemple du module que nous avons créé.

On peux voir que 2 fichiers sont automatiquement créer lors de la génération du model.

le columns.yaml vous permettra d’éditer vos listes

le fields.yaml, les champs de formulaire de votre model

Exemple et rendu du controller de posts de module de blog:

columns.yaml:

# ===================================
#  Column Definitions
# ===================================

columns:

    title:
        label: rainlab.blog::lang.post.title
        searchable: true

    # author:
    #   label: Author
    #   relation: user
    #   select: login
    #   searchable: true

    categories:
        label: rainlab.blog::lang.post.categories
        relation: categories
        select: name
        searchable: true
        sortable: false

    created_at:
        label: rainlab.blog::lang.post.created
        type: date
        invisible: true

    updated_at:
        label: rainlab.blog::lang.post.updated
        type: date
        invisible: true

    published_at:
        label: rainlab.blog::lang.post.published
        type: date

Rendu:

fields.yaml:

# ===================================
#  Field Definitions
# ===================================

fields:

    title:
        label: rainlab.blog::lang.post.title
        span: left
        placeholder: rainlab.blog::lang.post.title_placeholder

    slug:
        label: rainlab.blog::lang.post.slug
        span: right
        placeholder: rainlab.blog::lang.post.slug_placeholder
        preset:
            field: title
            type: slug

    toolbar:
        type: partial
        path: post_toolbar
        cssClass: collapse-visible

secondaryTabs:
    stretch: true
    fields:
        content:
            tab: rainlab.blog::lang.post.tab_edit
            type: RainLab\Blog\FormWidgets\BlogMarkdown
            cssClass: field-slim blog-post-preview
            stretch: true
            mode: split

        categories:
            tab: rainlab.blog::lang.post.tab_categories
            type: relation
            commentAbove: rainlab.blog::lang.post.categories_comment
            placeholder: rainlab.blog::lang.post.categories_placeholder

        published:
            tab: rainlab.blog::lang.post.tab_manage
            label: rainlab.blog::lang.post.published
            span: left
            type: checkbox

        user:
            tab: rainlab.blog::lang.post.tab_manage
            label: rainlab.blog::lang.post.published_by
            span: right
            type: relation
            nameFrom: login

        published_at:
            tab: rainlab.blog::lang.post.tab_manage
            label: rainlab.blog::lang.post.published_on
            span: left
            cssClass: checkbox-align
            type: datepicker
            mode: datetime
            trigger:
                action: enable
                field: published
                condition: checked

        excerpt:
            tab: rainlab.blog::lang.post.tab_manage
            label: rainlab.blog::lang.post.excerpt
            type: textarea
            size: small

        featured_images:
            tab: rainlab.blog::lang.post.tab_manage
            label: rainlab.blog::lang.post.featured_images
            type: fileupload
            mode: image
            imageWidth: 200
            imageHeight: 200

Rendu:

Tout ça, en quelques ligne de Yaml.

Idem pour les catégories ou le style est plus simple mais également géré depuis le yaml:

Nous n’allons pas nous étaler, car il y a beaucoup, vraiment beaucoup de chose à dire sur la partie développement.

Pour résumé, voici une liste de point fort que nous avons retenu sur OctoberCMS:

• Backoffice simple flexible.
• Mise à jour en un clique
• Embarque Laravel
• Le temps de développement très rapide
• Large choix de plugin gratuit, les payants à prix très attractif (souvent à 5$)
• Facilité de développement des themes,
• Override des composant rapide
• System de composant / snippet génial
• Documentation officielle grandement fournie
• Gestion des templates d’emails natifs
• Gestion des profils administrateur souple
• Ajax Handler

Les points faibles:

• Communauté Française encore faible
• Un peu trop orienté développeur.

Vous l’aurez compris, nous adorons OctoberCMS, nous avons créé quelques projet dessus, et beaucoup de problématique peuvent être résolu très rapidement car les développeurs du projet ont pensé à tout, import / export de données, faire de l’ajax depuis du PHP, Laravel venant sublimer le tout.

Pour quel type de projet utiliser October CMS ?

Voici la question que nous devons tous nous poser avant de nous lancer sur un projet, quel est mon projet et ses problématiques ?

Si vous devez monter un blog, assez poussé, le mieux est WordPress, car il est prévu pour cela, si vous devez monter un site qui va intégrer une application custom (ex: location de voitures), vous trouverez votre bonheur sous wordpress c’est certain, cela dit, est-ce que dans le temps cela va durer ? Que v-a-t-il se passer pour faire les mises à jour du theme ? des plugins ? des versions de PHP ?

Nous conseillerons dans ce cas présent, de partir avec October CMS, avec un plugin de location (à developper si cela n’existe pas) afin d’avoir outil possible pour votre activité.

WordPress est une super solution, cela dit, quand nous souhaitons faire des choses un peu plus spécifiques, il faut trouver un theme qui va définir le projet, celui ci embarquera ses plugins, shortcodes etc.. et si un jour vous souhaitez, changez le thème, autant tout refaire.

October peu, dans le cas présent, résoudre ce genre de problèmes, thèmes et plugins étant bien séparés, le thème peu être changé à volonté, seul les nouvelles pages devront réimplantés les composants.

Et vous qu’en pensez vous ? Avez vous testé ? comparé ?

N’hésitez pas à laisser un commentaire. Enjoy 😉