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 :

img19

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 :

img20

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 :

img21

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

img22

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 ) :

img23

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é :

img24

Ensuite on me demande si je veux ajouter des plugins :

img25

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 :

img26

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

img27

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 :

img28

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 :

img29

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 :

img30

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

img31

Un autre dossier est prêt pour les uploads :

img32

Le frontend

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

img33

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 :

img34

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 :

img35

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 :

img36

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 :

img37

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

img38

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 :

img39

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 :

img40

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 :

img41

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 :

img42

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 :

img43

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

img44

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

img45

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

img46

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

img47

Et je passe à la version 90 :

img48

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

On trouve aussi la gestion des administrateurs :

img49

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 :

img50

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

img51

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 :

img52

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

img66

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

img67

Et on peut l’expérimenter en frontend :

img54

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 :

img55

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 :

img56

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

img57

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 :

img58

Et j’ajoute le plugin User à ce projet :

img59

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

img60

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

img61

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

img62

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

img63

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 :

img64

Et voilà la page résultante :

img65

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.

Laravel 4 : chapitre 37 : Le CMS October

Vous pourrez aussi aimer

6 commentaires sur “Laravel 4 : chapitre 37 : Le CMS October

  1. Hi!
    Après avoir testé le CMS, je dis whaou… Le coeur du truc, l’architecture de la plateforme en elle-même, l’utilisabilité, sont quand même impressionnants, et le tout semble déjà très stable. Les seuls problèmes que j’ai eu concernent parfois des pertes aléatoires (malgré des actualisations forcées du navigateur) de style; ça reste temporaire, sans trop savori pourquoi. Mais ceci en cours de modifs soutenues de pages, menus, etc. Cela n’arrive peut-être pas après déploiement.
    Quelques réponses à tes interrogations :
    le CMS est en évolution constante et active. Pas exemple, la localisation du backend existe maintenant (CMS -> mes réglages -> préférences de l’admin)
    engouement / enrichissement plugins : ça se précise, depuis ton post, 24 plugins supplémentaires, ce qui porte le nombre à environ 70 (dont une petite poignée – 5 – sont payantes). Le CMS commence également à être utilisé en production (http://octobercms.com/gallery
    spécialiste / néophite Réussir un CMS utilisable par le grand public et finement personnalisable par des développeurs semblait tenir de la quadrature du cercle… Il est vrai que pour les pages statiques, ce n’est pas très compliqué mais il faut quand même une connaissance minimale de ce qu’est une page web, des markups html, de bootstrap… Mais la volonté est clairement affichée, et ça prend forme; par exemple pour les pages la première béta (alpha, disons…) du plugin « Pages » a été publié. A suivre donc…

  2. > La seule question que je me pose concerne le public visé par ce CMS
    En voyant les explications du site et leur démo, je me suis fait la même réflexion… October semble génial pour quelqu’un qui voudrait « un peu plus qu’un CMS » i.e. un CMS classique complété par des pages/blocs basés sur des données/tables persos.
    Par contre, pour quelqu’un qui ne veut absolument pas voir une seule ligne de code, est-il utilisable ? Est-ce qu’il est possible de faire un site simple (tel que réalisable avec un CMS classique) sans devoir modifier un seul fichier ? Ca ne semble pas certain à la lecture de la doc

Laisser un commentaire