C’est quoi ?

Sulu est un CMS (Content Managing System) Open Source basé entièrement sur Symfony. Ce CMS est considéré comme plutôt orienté développeur (nécessite une configuration lors de la mise en place du projet), si on le compare à WordPress ou les autres CMS.


Pourquoi utiliser Sulu ?

Sulu, comme pleins d’autres CMS, se base sur le framework Symfony. Un framework PHP 100% open source qui a fait ses preuves pendant les dernières années. Comparé aux autres CMS standards (Wordpress, joomla..), Sulu présente plusieurs avantages :

  • Vis à vis des CMS standards
    • Un CMS Headless : moteur de gestion de contenu ou de données pour toute application, qui propose une API permettant d’afficher le contenu sur tous types de supports (web, mobile, IoT, etc.) ..
    • Une sécurité bien élaborée, offerte par le framework Symfony (mesures de sécurité contre les failles et attaques types XSS, CSRF et injection SQL.)
    • Utilise des composants prêts à l'emploi tel que CMF, PHPCR
    • Comprend de nombreux outils pour rationaliser les tâches de développement.
  • Vis à vis des CMS qui se basent sur Symfony:
    • Une architecture plus claire.
    • Prise en main plus rapide.
    • Interfaces intuitives et une excellente expérience utilisateur.
    • Une communauté de plus en plus importante ce qui permet d’encourager l’échange d’expériences et la résolution des erreurs.

Quand choisir SULU :

Voici quelques questions dont les réponses vous aideront à choisir SULU pour votre réalisation :

  • Vous voulez travailler avec le stack Symfony ?
  • Vous travaillez sur une application Symfony et vous voulez rajouter une couche de gestion de contenu ?
  • Vous avez besoin d’un environnement de développement clair et robuste ?
  • Vous voulez créer un site web moderne qui se base sur une technologie moderne ?
  • Votre site nécessite un module multilingue (que le site soit disponible en plusieurs langues) ?
  • Vous avez besoin d'une liberté totale sur votre code en front ?

Principes et structure

Principe en blocks :

En allant du bas en haut :

  • Framework : la première base du CMS est porté par le framework Symfony. Une utilisation de patron de conception qui a fait ses preuves et largement testé. Étant fully-based sur Symfony, ceci garantit aussi la sécurité et une maintenabilité sur le long terme.
  • Content publication : cette couche assure le cycle de vie complet du contenu : création d’article, gestion de brouillons, et publications des articles dans le blog.
  • Digital marketing : à travers la gestion des SEO (Search Engine Optimisation) , et l’analyse du trafic. Chaque page et chaque article contiennent des champs spécifiques pour la sémantique de référencement.
  • Personnalisation : à ce niveau SULU propose la possibilité de gérer le contenu pour l’adapter aux différents utilisateurs cibles (définir des règles d’affichage pour des groupes par région, par navigateur). Ce qui permet de créer une expérience digitale personnalisée.
  • Custom business logic : suit le changement et l’intégration des sites web en des applications riches : intégration compréhensive. L’ajout des couches logic business.
  • Content delivery : cette couche reflète la capacité du CMS à s’adapter aux différents types d’informations qui peut afficher.
    • Native : un moteur de rendu HTML inclus.
    • Partiel : possibilité de renvoyer des fragments HTML.
    • Headless : consomme du contenu JSON ou XML à partir des API REST.
    • Format agnostique : supporte tout type de réponses (HTML, JSON, XML ...)

Composants:

Dans SULU :

  • Webspaces (espace web) :représente le domaine de création de site web ou bien l’espace dans lequel la structure et le contenu du site web seront créés. On peut créer plusieurs webspaces au sein du même projet (par exemple un workspace pour le côté public d’une application, et un autre workspace pour le coté premium de l’application)
  • Snippets & articles :
    • Snippet : (similaire aux assets) des fragments de contenu réutilisable au sein des workspaces
    • Article : pour une gestion de contenu orienté publication (blog, publications, actualités…)
  • Template :définit la structure d’une page ⇒ comment la page sera affiché et comment les données seront envoyées au thème (.twig)
  • Le fichier XML qui définit la structure de la page est composé par :

    • key : la clé unique du template
    • view : la route vers le fichier twig utilisé pour retourner le contenu du template.
    • controller: la route vers la classe controller qui charge le contenu de la page (par défaut Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction mais peut etre modifié).
    • cacheLifetime: durée en seconde qui définit le temps pendant lequel la page sera sauvegardée en cache pour l’utilisateur.
    • properties: définit la structure de la page à travers des sous éléments ayant chacun un content type: single line text, richtext, date….

Let’s go avec Sulu

(exemple d’une page : accueil du site blutech.fr )

Pour essayer Sulu j’ai pris le site web de Blutech comme un exemple pratique

Pour l’installation et l'initialisation du projet j’ai suivi le “Getting started" de la documentation officielle (création du projet, ajout d’un nouveau webspace, configuration de la base de données, et le build du projet).

1 - Structuration:

Pour bien préparer la structure du “template” des pages qu’on veut mettre en place il est important de trouver une décomposition idéale de chaque page à créer. On commence donc par la division de notre page en plusieurs divs (ci-dessous une première div que j’ai nommé Header).

Chaque div est à son tour composée par des éléments qu’on les appelle des propriétés “properties”. Chaque propriété est définie par un nom (name) un type (block, text line, text area, number, … voir les différents types disponibles ) qui vont être gérés par la suite à partir de l’interface admin.

Pour cette première div on distingue 4 sous-parties (en vert) :

  • “Nous sommes Blutech” : qui représente le titre de la div qui est de type champ texte: on lui attribue le nom header_title.
  • “Acteur spécialisé ….et qualitatives” : une description sous forme d’un paragraphe (type : text_area avec nom header_description).
  • “Découvrir les jobs” : bouton qui va nous rediriger vers une autre page donc ici on aura besoin de gérer le lien vers lequel on va être redirigé en cliquant sur ce bouton (type: single_page_selection nommé header_link_page).
  • Une image : avec comme nom `header_image` et donc de type single_media_selection

2 - Template : fichier XML:

Cette décomposition nous permet de déterminer les “divs” et “properties” qui vont former la notre page d’accueil. En suivant cette logique le fichier XML (/config/templates/pages/homepage.xml) définissant la structure de notre template sera sous cette forme pour la première div.

Template : XML file

3 - Template : Fichier Twig :

Une fois la structure fixée, on crée le fichier Twig contenant le code HTML permettant de structurer l’affichage du contenu qui sera géré à partir de l’espace d’administration (ici on va afficher le contenu du header_title sous la balise h2, le header_description sous forme de paragraphe < p >…)

Je ne vais pas traiter dans cet article la gestion du contenu par le contrôleur et comment ce dernier permet de retourner le contenu gérer dans l’espace admin vers le fichier twig. Ceci dit que j’ai utilisé le contrôleur par défaut : Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction
Vous pouvez créer vos propres contrôleurs pour gérer le contenu de vos pages et de les renseigner au niveau du fichier XML de votre template.
Template : TWIG file

2 - Modifier le contenu:

Arrivant à cette étape, il ne reste plus qu’à appliquer les notions du CMS et la gestion du contenu :

  • Dans un premier temps on sélectionne le webspace sur lequel on veut travailler.
  • Contenu : selectionner un webspace.
  • On crée une nouvelle page.
  • Contenu : créer une nouvelle page.
  • On sélectionne la template “Homepage” qu’on vient de créer.
  • Contenu : choix du template
  • Finalement, une fois le template "Homepage" sélectionné, la structure de la page sera changée pour correspondre à la composition définie dans le fichier XML, comme le montre l’image ci-dessous on obtient les champs Title (1), description (2), link (3) et Image (3).
  • Contenu : modification du contenu
  • Lors de la première sauvegarde, SULU nous permet de visualiser d’une façon instantanée le contenu de la page sur laquelle on travaille.
  • Contenu : modification du contenu avec live preview

Dois-je passer à SULU ?

Si tu aimes Symfony et que tu cherches un CMS se rapprochant au plus près de ce framework, n’hésite pas Sulu est très prometteur.

Il est très régulièrement mis à jour avec de nouvelles fonctionnalités et n’en est qu’à ses débuts !

top