On l’attendait tous et il est enfin arrivé, le premier CMS ambitieux basé sur Laravel 4. Il s’appelle October, il est en version beta, et nous apporte un peu de fraîcheur automnale alors que l’été approche. Je me suis un peu penché dessus et je vous livre le résultat de mon exploration.

Installation d’October

Ça c’est tout simple, il suffit en premier d’aller sur le site :

La mise en page du site cède à la mode Bootstrap mais elle est claire, lisible et agréable. On a le choix pour aller chercher le code :

J’ai opté pour l’installer. J’ai copié le paquet dans un dossier october sur mon site local. On a des fichiers d’installation :

Il faut lancer install.php, on aboutit sur cette page :

L’installation vérifie que toutes les fonctionnalités sont satisfaisantes pour October. Dans mon cas il n’y a pas de souci alors je poursuis en acceptant les conditions de la licence (MIT).

L’étape suivant consiste à configurer la base de données qui doit déjà exister (et oui l’installateur ne va pas jusqu’à la créer ) :

Après je me suis fait un peu engueuler parce que je n’avais pas précisé de mot de passe pour l’administrateur, mais on me l’avait pas demandé . Bon j’ai complété :

Ensuite on me demande si je veux ajouter des plugins :

Pour le moment je n’en ajoute pas pour voir un October de base. Je passe donc cette étape et je clique sur le joli bouton « Install ! ». Puis je laisse faire :

Il suffit de quelques minutes pour que tout soit terminé. J’arrive sur cette page :

Apparemment tout s’est bien déroulé. On me demande de supprimer les fichiers qui ont servi à l’installation (bon ils auraient pu aussi automatiser cette tâche ). Mon dossier est un peu plus garni maintenant :

L’architecture de base de Laravel a été un peu chamboulée. On se rend compte que tout devient accessible, mais c’est sans doute le prix à payer pour l’automatisation. Il faut faire confiance au htaccess en place. On dispose encore d’Artisan mais quand on le lance on trouve aussi quelques changements :

Laravel Framework version 4.1.29

Usage:
  [options] command [arguments]

Options:
  --help           -h Display this help message.
  --quiet          -q Do not output any message.
  --verbose        -v|vv|vvv Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
  --version        -V Display this application version.
  --ansi              Force ANSI output.
  --no-ansi           Disable ANSI output.
  --no-interaction -n Do not ask any interactive question.
  --env               The environment the command should run under.

Available commands:
  changes              Display the framework change list
  clear-compiled       Remove the compiled class file
  down                 Put the application into maintenance mode
  dump-autoload        Regenerate framework autoload files
  env                  Display the current framework environment
  help                 Displays help for a command
  list                 Lists commands
  migrate              Run the database migrations
  optimize             Optimize the framework for better performance
  routes               List all registered routes
  serve                Serve the application on the PHP development server
  tail                 Tail a log file on a remote server
  tinker               Interact with your application
  up                   Bring the application out of maintenance mode
asset
  asset:publish        Publish a package's assets to the public directory
cache
  cache:clear          Flush the application cache
command
  command:make         Create a new Artisan command
config
  config:publish       Publish a package's configuration to the application
controller
  controller:make      Create a new resourceful controller
create
  create:component     Creates a new plugin component.
  create:controller    Creates a new controller.
  create:model         Creates a new model.
  create:plugin        Creates a new plugin.
db
  db:seed              Seed the database with records
key
  key:generate         Set the application key
migrate
  migrate:install      Create the migration repository
  migrate:make         Create a new migration file
  migrate:publish      Publish a package's migrations to the application
  migrate:refresh      Reset and re-run all migrations
  migrate:reset        Rollback all database migrations
  migrate:rollback     Rollback the last database migration
october
  october:down         Destroys all database tables for October and all plugins.
  october:up           Builds database tables for October and all plugins.
  october:update       Updates October CMS and all plugins, database and files.
plugin
  plugin:install       Adds a new plugin.
  plugin:refresh       Removes and re-adds an existing plugin.
  plugin:remove        Removes an existing plugin.
queue
  queue:failed         List all of the failed queue jobs
  queue:failed-table   Create a migration for the failed queue jobs database table
  queue:flush          Flush all of the failed queue jobs
  queue:forget         Delete a failed queue job
  queue:listen         Listen to a given queue
  queue:retry          Retry a failed queue job
  queue:subscribe      Subscribe a URL to an Iron.io push queue
  queue:work           Process the next job on a queue
session
  session:table        Create a migration for the session database table
view
  view:publish         Publish a package's views to the application

Le framework est organisé en modules :

On en trouve 3 dans l’installation de base. On voit aussi la possibilité d’ajouter des plugins, on en a un de démonstration :

On trouve également un dossier pour les thèmes avec un thème de démonstration :

Un autre dossier est prêt pour les uploads :

Le frontend

L’url de base amène sur une page de démonstration :

Là on nous explique dans un anglais impeccable comment est organisé le frontend.

Le layout

Un layout est une trame de base pour les pages. Dans la démo on en a qu’un :

On peut explorer le code :

description = "Default layout"
==
<!DOCTYPE html>
<html>
    <head>
        <title>October CMS - {{ this.page.title }}</title>
        <meta name="author" content="October CMS">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}" />
        {% styles %}
        <link href="{{ [
            'assets/css/theme.css'
        ]|theme }}" rel="stylesheet">
    </head>
    <body>

        <!-- Header -->
        <header id="layout-header">

            <!-- Nav -->
            <nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="{{ 'home'|page }}">October Demo</a>
                    </div>
                    <div class="collapse navbar-collapse navbar-main-collapse">
                        <ul class="nav navbar-nav">
                            <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Basic concepts</a></li>
                            <li class="{% if this.page.id == 'ajax' %}active{% endif %}"><a href="{{ 'ajax'|page }}">AJAX framework</a></li>
                            <li class="{% if this.page.id == 'plugins' %}active{% endif %}"><a href="{{ 'plugins'|page }}">Plugin components</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

        </header>

        <!-- Content -->
        <section id="layout-content">
            {% page %}
        </section>

        <!-- Footer -->
        <footer id="layout-footer">
            {% partial "footer" %}
        </footer>

        <!-- Scripts -->
        <script src="{{ [
            'assets/javascript/jquery.js',
            'assets/javascript/app.js'
        ]|theme }}"></script>
        {% framework extras %}
        {% scripts %}

    </body>
</html>

October utilise et étend Twig. La variable this contient un objet qui permet par exemple de récupérer l’objet page et ainsi de connaître le titre de cette page :

<title>October CMS - {{ this.page.title }}</title>

L’accès aux assets s’effectue ainsi :

<link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}" />

Les assets sont dans le dossier assets du thème, par exemple ici cette image :

Le filtre |theme permet de générer correctement l’adresse en référant le thème en cours, par exemple dans mon cas j’obtiens :

<link rel="icon" type="image/png" href="/october/themes/demo/assets/images/october.png" />

On trouve la même chose pour le code CSS  :

<link href="{{ ['assets/css/theme.css']|theme }}" rel="stylesheet">

Voilà ce que j’obtiens dans ma page :

<link href="/october/combine/03ccf956ac57d4075b7d6ef3e803b95d-1400759953" rel="stylesheet">

On trouve le fichier original ici :

Avec cet avertissement :

/*
 *
 * !! WARNING !! THIS CSS FILE HAS BEEN AUTOMATICALLY GENERATED !!
 *
 * Any modifications made to this file will be lost next time it is generated.
 * Consider modifying the 'theme.less' file found in the 'less' folder instead
 * or create a new custom CSS file to override the rules in this one.
 *
 * !! YOU HAVE BEEN WARNED !! MODIFY THIS FILE AT YOUR OWN RISK !!
 *
 */

Le fichier a été généré à partir de fichiers LESS, on les trouve dans le dossier less :

En creusant un peu on trouve Bootstrap et font-awesome dans le dossier vendor du thème de démo :

On est évidemment pas obligé de suivre cette organisation pour nos pages et se contenter de mettre notre CSS dans le dossier.

Les pages

Un site web est fait de pages. On retrouve ce concept dans October avec les pages. Il y a un dossier dans le thème prévu pour elles :

Pour insérer le contenu d’une page dans le layout il est prévu cette syntaxe :

{% page %}

C’est donc ici que la page va s’insérer dans le layout.

De quoi est constituée une page ? De code HTML évidemment mais aussi d’éléments de configuration. Si on regarde la page home.htm on trouve ceci :

title = "Demonstration"
url = "/"
layout = "default"
==

Le titre de la page, son url (ici l’url de base du site), et le nom du layout. Il est assez inattendu de trouver la spécification de l’url d’une vue dans son code mais pourquoi pas ?

Si on regarde le menu dans le layout voici la syntaxe pour générer les liens des pages :

<li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">

On utilise le filtre |page et on met le nom de la page, ici home. Dans mon cas ce code est généré :

<li class="active"><a href="http://localhost/october">Basic concepts</a></li>

Les partials

Les partials sont des morceaux de HTML qu’on peut insérer dans des pages. On les trouve dans le dossier partials :

Un bon exemple est le footer :

<div id="footer">
    <div class="container">
        <p class="muted credit">© 2013 Alexey Bobkov &amp; Samuel Georges.</p>
    </div>
</div>

On l’insère dans le layout avec cette syntaxe :

<!-- Footer -->
<footer id="layout-footer">
    {% partial "footer" %}
</footer>

Les contents blocks

Les contents blocks c’est un peu comme les partials puisque c’est un morceau de page qui peut être inséré n’importe où mais c’est leur nature qui est différente. Un partial c’est juste du HTML alors qu’un content block peut-être aussi du texte ou du code Markdown qui peut être modifié de façon indépendante des pages et des layouts. On les trouve dans le dossier content :

Pour insérer un bloc dans une page c’est facile, voilà par exemple le bloc welcome.htl inséré dans la page home.htm :

{% content "welcome.htm" %}

Ajax

October inclut un framework pour Ajax qu’on peut utiliser dans les layouts et les pages. Ce framework peut modifier une page avec des partials. Pour l’utiliser il faut le déclarer, par exemple dans le layout :

<script src="{{ [
    'assets/javascript/jquery.js',
    'assets/javascript/app.js'
]|theme }}"></script>
{% framework extras %}

Le framework utilise jQuery, il est donc appelé juste avant.

Il y a une page de démonstration pour ce framework :

C’est une calculette simplifiée. Voilà la déclaration du formulaire :

<form class="form-inline" data-request="onTest" data-request-update="calcresult: '#result'">

Le traitement est assuré par la fonction PHP onTest qui a été prévue dans le même fichier. Au retour on envoie le partial calcresult dans l’id #result.

Le framework a l’air d’être assez sophistiqué, en tout cas la documentation est fournie.

Le backend

Voyons maintenant le backend qu’on atteint avec l’url backend. On tombe évidemment sur une page d’authentification :

Et là oh surprise on me propose déjà une mise à jour :

Une bonne occasion de voir comment ça se passe… Il faut aller dans le système et les updates :

Quand je clique le bouton j’obtiens une fenêtre :

Et la mise à jour se télécharge :

Et je passe à la version 90 :

Bon, je ne sais pas du tout ce qui a été modifié par contre .

On trouve aussi la gestion des administrateurs :

On peut créer d’autres groupes d’administrateurs et spécifier leurs autorisations. Par contre il ne semble pas y avoir de système d’autorisation pour les utilisateurs.

On peut aussi configurer les paramètres pour l’envoi d’emails :

Dans la partie CMS on a accès aux différents constituants et on peut les modifier ou en supprimer ou en ajouter :

On peut créer des pages, y insérer des partials, des composants, changer l’url ou la description…

L’éditeur de code est évidemment très sommaire mais convient parfaitement pour des petites modifications. Il y a deux onglets : Markup et Code. Quand du PHP est inséré dans une page on y accède avec le deuxième onglet.

Les plugins

Les plugins permettent d’ajouter des fonctionnalités à October. Ils sont donc indispensables pour créer une application. Ils résident dans le dossier plugins :

On voit qu’il y a un plugin de démonstration nommé Todo List. On peut y accéder par le backend :

Un clic sur le composant ouvre l’inspecteur qui permet de modifier les paramètres :

Et on peut l’expérimenter en frontend :

Il se contente de créer une liste de tâches qu’on entre au clavier. L’insertion dans la page est toute simple :

{% component 'demoTodo' %}

Tout le code se trouve dans le dossier des plugins. La documentation explique en détails comment créer un composant. Mais on peut aussi ajouter un plugin existant en allant voir dans le market :

Bon alors je me lance, comme j’ai déploré le fait de ne pas disposer d’autorisation en frontend je sélectionne un plugin qui propose ça :

Mais je dois commencer par me créer un compte sur le site :

A ce stade on me demande aussi de créer un projet pour simplifier l’installation et la mise à jour des plugins. J’en crée donc un :

Et j’ajoute le plugin User à ce projet :

Il faut ensuite aller récupérer l’id du projet dans le compte et attacher ce projet à l’installation :

Ensuite il faut attendre que le plugin se charge et s’installe. Je me retrouve alors avec une nouvelle fonctionnalité dans le backend :

Je peux créer des utilisateurs, le plugin s’est correctement installé ! Je le trouve dans le dossier des plugins :

Le plugin a d’ailleurs l’air d’être plutôt bien fait. Il y a un composant account :

On va voir si ça fonctionne, je crée une page themes/demo/pages/account.htm :

title = "Account"
url = "/account/:code?"
layout = "default"

[account]
redirect = "home"
paramCode = "code"
==
<div class="container">
	{% component 'account' %}
</div>

Notez qu’on peut créer cette page directement à partir du backend.

J’ajoute aussi un bouton dans mon layout :

<div class="collapse navbar-collapse navbar-main-collapse">
    <ul class="nav navbar-nav">
        ...
        <li class="{% if this.page.id == 'plugins' %}active{% endif %}"><a href="{{ 'account'|page }}">Compte</a></li>
    </ul>
</div>

Comme ça j’ai un accès dans le menu :

Et voilà la page résultante :

Il y a aussi une page prévue pour l’oubli du mot de passe et dans le backend on peut régler pas mal de choses. Par contre il n’a pas été prévu la localisation, donc pour passer en Français c’est pas évident . Mais je voulais juste voir comment on installe et utilise un plugin.

Conclusion

Il y aurait encore beaucoup à dire sur ce CMS, par exemple concernant les bases de données ou les outils pour créer des pages en backend. Tout a été bien pensé et élégamment créé. La seule question que je me pose concerne le public visé par ce CMS. Il me semble se trouver un peu à la frontière entre le spécialiste de Laravel qui pourrait préférer utiliser directement le framework sans prendre la peine de devoir passer par un apprentissage supplémentaire même si le CMS semble assez accessible, et le néophyte qui risque d’être un peu perdu lorsqu’il devra nécessairement mettre les doigts dans le cambouis.

Ce CMS mérite d’être connu et expérimenté. On va voir dans les mois à venir si la bibliothèque de plugins s’enrichit et s’il rencontre un engouement du côté des utilisateurs.