Développement d’un thème pour une
plateforme universitaire de gestion
des cours
Réalisée par :
RACHID IMANE
Encadrée par :
BOUHAMIDI Fatima Zahra
Prof Khebbou Driss
EL KHAMMOURI LAILA
OUSALAH IMANE
PLAN
Introduction
Présentation de Liferay
Technologie intégrée
Conception du théme
Etapes de développement
Maquettes et interfaces du thème
Démonstration
Conclusion
1
Introduction
Liferay est une plateforme modulaire et flexible pour créer des portails intranet(réservé
aux utilisateurs internes), extranet (réservé à des utilisateurs externes, mais avec des
accès spécifiques et contrôlés) ou sites d’entreprise, dont l’apparence peut être
entièrement adaptée via des thèmes sur mesure.
Le projet consiste à élaborer un thème personnalisé en utilisant FreeMarker pour le rendu
dynamique des pages et du CSS pour le style graphique.
2
Présentation de Liferay
Portail web avec Liferay
Un portail web centralise l’accès à des informations, services et applications. Avec Liferay, il permet
aux utilisateurs authentifiés de :
Accéder à des contenus dynamiques (actualités, documents, rapports) via un CMS puissant.
Utiliser des services métiers ( tableaux de bord..).
Intégrer des applications tierces (ERP, messagerie) grâce à des portlets .
Liferay crée ainsi des portails modulaires et personnalisables pour répondre aux besoins spécifiques
de l'organisation.
3
Présentation de Liferay
CMS (Content Management System) dans Liferay
Un système de gestion de contenu (CMS), comme celui intégré dans Liferay, est une application dédiée à
la création, la modification et la publication de contenus numériques.
Une interface WYSIWYG pour créer et modifier facilement des contenus sans compétences
techniques.
De stocker et organiser les contenus avec des catégories et des tags pour faciliter la gestion et la
recherche.
Gérer les versions des contenus et attribuer des droits d’édition selon les rôles des utilisateurs.
4
Architecture générale
Couche de présentation : gère l’affichage via les pages HTML
et les portlets(composants modulaires affichant des informations
ou des fonctionnalités comme des tableaux de bord, des
formulaires).
Couche métier : traite la logique applicative.
Couche persistance : stocke les données dans une base de
données relationnelle.
Ces couches communiquent entre elles pour offrir un portail
5
web dynamique, modulaire et sécurisé.
Architecture générale
Liferay repose sur une architecture modulaire en Java, déployée sur des serveurs d'applications tels que Tomcat.
Liferay utilise également des portlets pour afficher du contenu et des modules OSGi( développer des applications
modulaires où chaque fonctionnalité peut être ajoutée, mise à jour ou supprimée indépendamment) pour une
gestion modulaire des fonctionnalités.
En ce qui concerne l'apparence du portail, les thèmes dans Liferay permettent de personnaliser les éléments visuels,
tels que les couleurs, les polices et la mise en page. Ces thèmes sont composés de fichiers CSS, HTML, FreeMarker
et JavaScript, ce qui permet une personnalisation facile et modulaire de l'interface sans affecter les fonctionnalités
du portail.
6
Technologie intégrée
FreeMarker est un moteur de template open source écrit en Java, utilisé pour générer
dynamiquement du contenu (souvent HTML) à partir de modèles et de données. Il ne
produit pas lui-même l’affichage, mais transforme des fichiers .ftl (FreeMarker
Template Language) en documents rendus avec les données fournies.
7
Technologie intégrée
Rôle dans le thème Liferay
Définir la structure HTML des pages du portail (en-tête, pied de page, mise en page des portlets..).
Insérer dynamiquement des données (ex. : nom de l’utilisateur, titre de page, navigation).
Organiser la logique de présentation grâce à des instructions conditionnelles(<#if>), des boucles(<#list>),
des inclusions de fichiers(<#include>).
8
CONCEPTION
DU THÈME
Structure du thème Liferay
9
Arborescence des fichiers
templates/ : Contient les fichiers
FreeMarker pour la structure
HTML.
css/ : Contient les styles
personnalisés.
js/ : Pour les interactions
dynamiques via AlloyUI ou
vanilla JS.
images/ : Logo, icônes, fonds.
10
Compatibilité responsive et UX
(Expérience Utilisateur)
Test sur plusieurs navigateurs
(Chrome, Firefox, Safari, etc.).
Respect des règles de l’UX
Design : simplicité, accessibilité,
visibilité des éléments
importants.
Menus adaptables
This sentence contains This sentence contains This sentence contains
information related information related information related
to the title to the title to the title
11
Compatibilité responsive et UX (Expérience Utilisateur)
12
Compatibilité responsive et UX (Expérience Utilisateur)
13
ETAPES DE
DEVELOPPEMENT
Configuration de l’environnement
1️⃣ Installer les dépendances 2️⃣ Installer le Liferay Theme Generator
Node.js Pour Liferay 7.0 et 7.1 :
Installer Yeoman et Gulp
4️⃣ Générer un thème
3️⃣ Configurer Sass Depuis le dossier où tu veux créer ton thème :
gem install sass -v "=3.4.0"
yo liferay-theme
gem install compass
6️⃣ Développement du thème & Déploiement
Lancer la compilation :
5️⃣Configurer Compass gulp build
Modifier package.json
Appliquer le thème via l'interface Liferay
gulp deploy
14
Configuration de l’environnement
🧩 FreeMarker dans un thème Liferay
FreeMarker permet de personnaliser l’apparence des pages Liferay via des fichiers .ftl.
📁 Où placer les fichiers ?
src/templates/
15
Défis rencontrés
Incompatibilité entre les versions de Liferay
16
Défis rencontrés & solution
Manque d’information
Les informations concernant Liferay et la
création de thèmes sont limitées ; seules
les ressources du Help Center de Liferay
sont disponibles.
17
Défis rencontrés & solution
18
Défis rencontrés & solution
Liferay n’a pas réussi à charger le fichier depuis le thème personnalisé. Cela peut être dû à
l’absence du fichier, une erreur de syntaxe dans le code Freemarker, ou un problème de
déploiement du thème. En conséquence, le rendu de la page échoue, entraînant une erreur système
inattendue à l’affichage.
19
MAQUETTES DU
THÈME
Maquette d’acceuil
Logo de l’université en haut à gauche.
Barre de navigation horizontale avec les liens :
Accueil
Mes cours
À propos de l’université
Contactez-nous
20
Maquette Mes cours & À propos de l’université
Deux maquettes présente respectivement :
les cours proposé par l'universités
A propos de l’université (infos sur l’équipe, infos supplémentaires...)
21
Maquette Contactez-nous
Formulaire de contact : nom, e-mail,
message, objet de la demande.
Informations de contact : adresse
postale, téléphone, e-mail.
22
INTERFACES DU
THÈME
Interface d’acceuil
23
Interface Mes cours & À propos de l’université
24
Interface Contactez-nous
25
CONCLUSION
Conclusion
En conclusion, ce projet basé sur Liferay démontre la puissance d'une plateforme de
portail moderne et modulaire pour créer un écosystème web complet,
personnalisable et centré sur l’utilisateur. Grâce à l’intégration de templates
dynamiques, de thèmes personnalisés, et de composants modulaires, nous avons
pu concevoir une interface intuitive, responsive, et adaptée aux besoins spécifiques
de notre portail universitaire.
26
MERCI POUR
VOTRE
ATTENTION
