Laravel 5,  Les CMS

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 :

img14

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 :

img15

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 :

img16

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

img17

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

img18

Il faut ensuite définir l’administrateur :

img19

Il y a une page de réglages avancés :

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

img21

Je vais partir d’un truc vide. Ca se termine avec cette page :

img23

Je suis le conseil de suppression des fichiers d’installation. J’ai alors accès à l’administration :

img25

Côté frontend j’ai une page de démonstration et plein d’explications :

img26

Quand on regarde les fichiers on voit que Laravel a été quelque peu violenté :

img27

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 :

img28

On voit qu’on a déjà 5 pages présentes. Pour en ajouter une il faut utiliser le bouton +Add :

img29

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 :

img30

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 :

img31

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 :

img39

On peut modifier les classes utilisées et les balises autorisées ou interdites.

Les templates (layouts)

Maintenant voyons un peu les layouts :

img32

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 :

img33

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 :

4

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 :

img34

Un nouveau partial pour le menu :

img35

Et les pages dans lesquelles je précise bien le nouveau template :

img36

Et le résultat est parfait :

img37

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 :

img38

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 :

img40

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

img41

Un thème comporte du CSS, du JavaScript, des polices… tout ce qui constitue l’apparence :

img42

On peut créer un thème en partant de rien mais on peut aussi utiliser un thème parmi les 9 à disposition :

img43

Il suffit de cliquer et d’attendre la fin de l’installation :

img44

Il apparaît alors dans les thèmes installés :

img45

Et apparaît son dossier :

img46

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 :

img47

On dispose alors de layouts et de pages de démonstrations du thème :

img48

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 :

img49

Mais on en trouve tout plein sur le site dont pas mal de gratuits :

img50

Pour installer un composant spécifique il faut aller dans les Settings :

img51

Alors je me lance pour avoir un éditeur Wysiwyg:

img52

Je le retrouve dans les composants installé au bout d’un moment :

img53

Je trouve les réglages du composant :

img54

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 :

img55

Je sauvegarde tout ça et je vais voir dans les pages :

img56

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 :

img57

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 :

img58

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 :

img59

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 :

img60

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 :

img61

On crée cette vue partielle (myPartial) :

The result is {{ result }}

Et ça fonctionne :

img62

En gros on a ce processus :

  1. le formulaire est soumis
  2. comme on a un attribut data-request on appelle la fonction onTest
  3. dans la fonction on fait le calcul et on mémorise le résultat dans la variable result
  4. comme on a un attribut data-request-update on génère la vue partielle mypartial dans l’emplacement myDiv
  5. 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.

 

 

Print Friendly, PDF & Email

Laisser un commentaire