CMS Panther Guide de conception de Template Herimihaona
But du document Il s agit d un guide rapide de conception du Template Panther. Back Office url : http://domaine.com/adminpanther Dans ce qui va suivre, on prend comme exemple l onglet pages. Les autres onglets auront la même structure. Bandeau Session Gestion des contenus Accueil Menus Sous-menus Pages Gestion des documents Dossiers Fichiers Ajouter Annuler Id Nom Sous-menu Menu Date d ajout Rang Publié Modif Suppr 1 Page1 Ssmenu1 Menu1 13-05-2009 v v / x 2 Page2 Ssmenu1 Menu1 06-07-2009 v^ O / x 3 Page3 Ssmenu1 Menu1 06-07-2009 ^ v / x Paramètres du site Template Pied de page Configuration Sitemap Figure 1 : Architecture du BO. Exemple pour l onglet pages. Terme Description Table Colonne table Id identifiant de la page. Click->contenu page id Nom Nom de la page page nom Contenu Contenu de la page page text Sous-menu Sous-menu dans lequel la page appartient article nom Menu Menu dans lequel le Sous-menu appartient categorie nom Date d ajout Date d ajout page date Rang Rang de la page dans son Sous-menu page rang Publié Etat de la page (publié ou non) page etat Tableau 1 : Principaux termes utilisés dans la partie centrale de l onglet page. 2
Base de données La partie CMS de Panther est constituée principalement de quatre tables : catégorie, article, page et user. Chaque catégorie est associée à un utilisateur (table user). Une catégorie peut contenir plusieurs articles. Un article comporte plusieurs pages. Et une page peut contenir du texte, des images, des sons, des vidéos et des liens. User Categorie Article Page Id : entier nom : chaîne rang : entier etat : entier date : date idreda : entier idlecteur : entier Id nom rang etat date Id nom rang etat date * * * Id nom rang etat date texte : chaîne head : chaîne Aucune importance pour le Template IPAC Figure 2 : Diagramme de classes représentant la structure de la partie CMS de la BDD Site sous Panther La partie CMS de Panther peut traiter 1 à 3 niveaux de navigation : Navigation à 1 niveau : Page Navigation à 2 niveaux : Menu/Page Navigation à 3 niveaux : ou Menu/Sous-menu/Page. Le BO est invisible en FTP pour protéger son code source. Le code source de l application est transparent y compris celui du Template «Default». Le template «Default» est un bon exemple pour la conception d un nouveau Template Panther. 3
Le front office est constitué de quelques dossiers dont seuls userfiles/template nécessite des modifications lors de la conception d un Template. Voici le schéma organisationnel des fichiers d un site Panther. Panther adminpanther : codes sources du BO google : gabarit d un sitemap google inc : paramètres et constantes globales obj : bibliothèque de classes du FO Plug : plugins divers (open source) userfiles : dossiers fck et template.htaccess index.php sitemap.xml Aucune importance pour le Template IPAC Masqué Figure 3 : Fichiers constituant un site Panther Template Panther Le Template Panther doit se trouver dans le dossier userfiles/template pour qu il puisse être interprété automatiquement comme Template par Panther. Il sera ainsi affiché dans l onglet Template du BO comme Template disponible pour Panther. Le nom du dossier du Template est automatiquement le nom du Template. Quand on choisit un Template depuis l onglet Template du BO, la chaîne de caractères «Default» du paramètre de la fonction include de la page index.php est remplacé automatiquement par le nom du Template. Le site sera alors visible avec le visuel du Template spécifié. 4
La figure ci-dessous montre un Template intégré au visuel du site. index.php include Userfiles/template/Nom_template/index.php Figure 4 : Appel d un template. Ex : Nom_template = Default pour le Template par défaut Template Default La page principale du template Default est «index.php». Ce dernier utilise la bibliothèque de classes obj pour faire abstraction des opérations de pré-chargement et de post-chargement de page. C est l unique page obligatoire dans un Template Panther. Voici un tableau récapitulatif des fonctionnalités de chaque fichier du template Default. Les fichiers sont listés par ordre alphabétique et non par ordre d importance. Fichier Description Fichier en liaison Fichier obligatoire dans un autre template bandeau.png logo du site non base.css css des zones principales inc.css non center.css css de la zone de contenu inc.css non center.php zone de contenu index.php non design.css.php css dynamique : déclinaison du design.xml non template design.xml paramètres de déclinaison du non template divers.php Depreced non fond_contentarea.png image de fond de la zone base.css non contentarea footer.css css de la zone de pied de page footer.php non footer.php zone de pied de page Index.php non header.css css de la zone d entête header.php non header.php zone d entête Index.php non inc.css inclusion en cascade des css index.php non index.php page principale du template racine_site/index.php oui left.css css de la zone gauche (menu) left.css non left.php zone gauche Index.php non lisez_moi.txt description du template BO conseillé sendtofriend.png Depreced non vignette.gif vignette du template BO conseillé Tableau 2 : fonctionnalités des fichiers du template Default. Un bon point de départ pour la conception d un nouveau Template Panther. 5
Règles d or 1. Le passage de variable la variable HTTP en mode GET doit être du type?p=id-page&s=idsousmenu&m=id-menu, pour que le passage en mode rewriting puisse s effectuer automatiquement depuis l onglet configuration du BO. 2. L appel d un menu affiche par défaut son premier sous-menu et l appel d un sous-menu affiche par défaut sa première page. 3. Le template est à mettre dans userfiles/template. Les autres dossiers du FO ne devront pas être modifiés. 4. N utilisez JavaScript qu en cas d extrême nécessité. CSS en cascade est assez puissant pour traiter proprement un design même complexe. 5. Le template devra être compatible non seulement avec les navigateurs respectant la norme W3C mais aussi avec IE7 ou plus. 6. Se méfier de la compatibilité de IE à la norme W3C. Cela implique qu un test devra être effectué avec ce navigateur pour valider la bonne apparence du site. 7. Mettre les scripts PHP dans le HTML et non l inverse (HTML dans des echo), pour faciliter la compréhension des scripts PHP et pour que les scripts soient visibles en mode wysiwyg (dreamweaver). 8. Fonctionner au mieux avec des blocs séparés afin de faciliter la modification, le débogage et l apparence des scripts PHP. 9. La bibliothèque obj est une suggestion mais n est pas obligatoire à réalisation du travail. Vous pouvez utilisez une méthode classique de requête SQL pour la réalisation du front office. 6