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….

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.

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 h3, le header_description sous forme de paragraphe < p >…)