CMS Laravel : October
October est le plus ancien CMS fondé sur Laravel. J’avais écrit un article sur lui il y a déjà plus de 2 ans. Depuis il a bien évolué. On va voir dans cet article où il en est et ce qu’il a à nous offrir.
Installation d’October
Ça c’est tout simple, il suffit en premier d’aller sur le site :
La page est belle et lisible.Je vous conseille de visionner la vidéo qui donne une bonne idée du CMS avec la création de pages, layouts, partials et aussi d’une approche simplifiée d’Ajax. Elle se termine par l’intégration de puissants plugins.
Pour l’installation on a le choix :
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 (l’installateur ne va pas jusqu’à la créer…) :
Il faut ensuite définir l’administrateur :
Il y a une page de réglages avancés :
On peut changer l’adresse du backend, ce qui est judicieux pour limiter les attaques. De la même manière entrer une nouvelle clé de cryptage est une bonne idée.
Ensuite on me demande si je veux partir d’un site vierge, d’un thème ou d’une référence de projet :
Je vais partir d’un truc vide. Ca se termine avec cette page :
Je suis le conseil de suppression des fichiers d’installation. J’ai alors accès à l’administration :
Côté frontend j’ai une page de démonstration et plein d’explications :
Quand on regarde les fichiers on voit que Laravel a été quelque peu violenté :
Même si Laravel sert de socle au CMS il n’en a été conservé que l’essentiel. D’ailleur Twig a été préféré à Blade pour les templates.
On va maintenant faire le tour de ce que nous avons à disposition…
Les pages
On peut créer des pages comme dans tout bon CMS. Il suffit dans l’administration de choisir CMS et Pages :
On voit qu’on a déjà 5 pages présentes. Pour en ajouter une il faut utiliser le bouton +Add :
On doit renseigner :
- le titre de la page (l’url est générée automatiquement mais on peut la modifier)
- le nom du fichier
- le template
- une description éventuelle
- on peut la rendre cachée aux utilisateurs
- le code de la page (on ne dispose pas d’un éditeur wysiwyg mais directement un éditeur HTML)
Le fait de devoir entrer le marquage HTML est une approche originale mais au moins elle laisse toute liberté pour la constitution de la page.
On a aussi un onglet Code dont on va voir l’utilité plus loin.
Quand on enregistre on peut ensuite prévisualiser la page :
Comme j’ai pris le template par défaut je me retrouve avec… le menu par défaut…
On trouve le fichier de la page bien rangé avec les autres :
On trouve en tête du fichier les informations nécessaires à October :
title = "Installation" url = "/installation" layout = "default" is_hidden = 0 ==
Il est possible de paramétrer l’éditeur de code dans les réglages de l’administration :
On peut modifier les classes utilisées et les balises autorisées ou interdites.
Les templates (layouts)
Maintenant voyons un peu les layouts :
Par défaut on n’en a qu’un (sauf si à l’installation on choisit une version plus riche).
On trouve les templates dans un dossier :
Comme October utilise Twig on trouve naturellement son marquage :
<!-- Content --> <section id="layout-content"> {% page %} </section>
Ici c’est l’emplacement pour une page. On peut également utiliser des partials comme on le verra plus loin.
On trouve aussi des emplacements pour qu’une page génère du code, par exemple du CSS :
{% styles %}
Ou un header :
<header id="layout-header"> {% partial 'site/header' %} </header>
On a donc quelque chose de très souple.
Vues partielles (partials)
Les partials sont des vues partielles qui se répètent sur plusieurs pages, par exemple un menu ou un bas de page. On les gère aussi totalement à partir de l’administration :
Ici on a le header du template par défaut. Il est ainsi intégré :
<header id="layout-header"> {% partial 'site/header' %} </header>
On n’a donc pas dans October un système automatisé de menus comme on l’a vu par exemple dans le précédent article sur AsgardCms. On a ainsi un peu plus de codage à réaliser mais on maitrise totalement la situation.
Allez hop je reprends l’exemple des 3 pages de documentations de Laravel en créant un nouveau template :
Un nouveau partial pour le menu :
Et les pages dans lesquelles je précise bien le nouveau template :
Et le résultat est parfait :
On peut passer des vairiables à un partial :
{% partial "mon-partial" valeur=valeur %}
On peut aussi initialiser une variable.
Les blocs de contenu (block content)
Les blocs de contenu ressemblent aux vues partielles mais offrent moins de possibilités. On les utilise pour du contenu statique. Par exemple on a placeholder/page.txt dans l’installation de base :
Juste un peu de code pour faire une référence à du CSS et du JavaScript. On trouve ce bloc inséré dans les pages ainsi :
{% content "placeholder/page.txt" %}
Il est possible de passer des variables aux blocs.
Les blocs sont rangés dans ce dossier :
Les thèmes
Un aspect intéressant d’October est la disponibilités de thèmes pour le frontend. Avec l’installation de base on dispose d’un thème de démonstration (demo) :
Un thème comporte du CSS, du JavaScript, des polices… tout ce qui constitue l’apparence :
On peut créer un thème en partant de rien mais on peut aussi utiliser un thème parmi les 9 à disposition :
Il suffit de cliquer et d’attendre la fin de l’installation :
Il apparaît alors dans les thèmes installés :
Et apparaît son dossier :
Les pages créés avec un thème ne sont pas copiée dans les autres thèmes. Il y a des pages présentes qui correspondent à une installation spécifique. Moralité : il vaut mieux bien choisir à l’installation le thème qu’on voudra utiliser, à moins de créer son propre thème.
Pour que thème soit actif il faut… l’activer :
On dispose alors de layouts et de pages de démonstrations du thème :
Les composants
Les composants sont des éléments qui peuvent être attachés à une page et qui offrent une fonctionnalité qui peut être très évoluée comme un blog. Avec l’installation de base on a juste un composant de démonstration. Par contre avec l’installation du thème ci-dessus on se retrouve avec d’autres composants :
Mais on en trouve tout plein sur le site dont pas mal de gratuits :
Pour installer un composant spécifique il faut aller dans les Settings :
Alors je me lance pour avoir un éditeur Wysiwyg:
Je le retrouve dans les composants installé au bout d’un moment :
Je trouve les réglages du composant :
J’ai le choix de l’éditeur et de ses réglages. Je garde TinyMCE et je prévois de l’utiliser pour les pages :
Je sauvegarde tout ça et je vais voir dans les pages :
Je me retrouve bien avec mon éditeur wysiwyg pour éditer la page !
Je commence à me dire que cet October est bien conçu avec des prestations minimales au départ et de nombreux plugins pour améliorer la situation selon les besoins.
Par exemple le composant de blog qui a été ajouté avec le thème comporte un page de gestion dans l’administration :
On va voir si ça fonctionne. Je crée une nouvelle page et pour ajouter le composant il faut adopter cette syntaxe :
title = "Blog" url = "/blog/:page?" layout = "octaskin" is_hidden = 0 [blogPosts] postsPerPage = "5" == {% component 'blogPosts' %}
Le nom du composant est entre crochets et on peut ensuite ajouter des paramètres. Voilà ma page :
J’ai des petits soucis avec le thème qu’il faudrait régler mais j’ai mon blog directement fonctionnel !
On trouve de très nombreux plugins disponible, allez y faire un tour !
Gestion des médias
On dispose d’une page pour la gestion des médias :
On trouve les fonctionnalités de base : téléchargement, création de dossiers, affichage avec différents modes.
Par défaut on agit en local :
Mais on peut aussi utiliser S3 avec une simple configuration.
Il y a un plugin disponible pour créer facilement des thumbnails.
Ajax
October permet aussi de mettre en place Ajax presque sans écrire une ligne de Javascript (avec des attributs data). Une référence à la librairie doit exister sur la page ou le layout, ce qui est déjà le cas avec l’installation par défaut.
Il y a un petit exemple d’application dans la documentation. On crée une simple page avec ce code :
<h1>Test de Ajax</h1> <!-- AJAX enabled form --> <form data-request="onTest" data-request-update="mypartial: '#myDiv'"> <!-- Input two values --> <input name="value1"> + <input name="value2"> <!-- Action button --> <button type="submit">Calculate</button> </form> <!-- Result container --> <div id="myDiv"></div>
On ajoute ce code dans la partie « Code » de l’éditeur :
On crée cette vue partielle (myPartial) :
The result is {{ result }}
Et ça fonctionne :
En gros on a ce processus :
- le formulaire est soumis
- comme on a un attribut data-request on appelle la fonction onTest
- dans la fonction on fait le calcul et on mémorise le résultat dans la variable result
- comme on a un attribut data-request-update on génère la vue partielle mypartial dans l’emplacement myDiv
- on affiche le résultat avec la vue partielle
C’est simple et efficace et on ne se complique pas la vie !
La documentation comporte de nombreuses explications pour tous les cas de figure.
Conclusion
October comporte de nombreuses autres possibilités que je n’ai pas évoquées parce qu’elles sont vraiment nombreuses. Dans la documentation vous trouvez une explication complète pour la création de plugins, la gestion de l’administration et de la base, les nombreux services (comme la pagination, les formulaires…).
On a donc avec October un CMS très riche, surtout par la présence de très nombreux plugins et thèmes. Il est plutôt agréable à utiliser et bénéficie désormais d’une solide expérience. On est quand même un peu dépaysé par rapport à Laravel que l’on ne retrouve qu’en grattant un peu les fonctionnalités.