Manuel du développeur : Design et templates
Qu’est-ce qu’un template ?
Dans phpMySport, le développement PHP est séparé du design HTML. Ainsi, le logiciel peut être personnalisé selon les couleurs et la mise en page souhaitées par l’utilisateur. Ceci est possible grâce un système de « template ». Il y a d’un côté les fichiers contenant le code PHP et de l’autre les fichiers « template » qui sont en réalité des pages HTML contenant un code template. Avant l’affichage d’une page web, le logiciel va lire ces fichiers HTML et remplacer le code template par la valeur des variables PHP correspondantes.
Les différents designs sont situés dans le dossier « template ». Chaque design est composé d’un dossier comportant l’ensemble des fichiers HTML, classé par organe. Un seul design est fourni avec phpMySport, il s’agit du template « defaut ».
Voyons en détails le code template.
Le code template
Trois types d’informations peuvent être affichés dans une page : des données statiques comme du texte, des données cycliques comme des listes et des données optionnelles.
Trois codes template ont donc été mis en place. Ils sont chacun associés à un type de variables PHP : du texte (string) pour les données statiques, des tableaux (array) pour les listes et un booléen pour les données optionnelles.
L’ensemble des données à afficher sont stockées dans une seule et unique variable : $page. Il s’agit d’un tableau à deux dimensions qui contient l’ensemble des textes, des tableaux et des booléens nécessaires à une page du site.
Une fonction PHP utilisée dans le fichier « index.php » va fusionner cette variable $page et le fichier template défini pour produire le code HTML final envoyé au navigateur.
Code simple
Le code simple est utilisé pour afficher une variable PHP de type « texte ».
Le nom des variables est placé entres accolades « { » et « } »
| Code
template (fichier HTML) |
Code
PHP (fichier PHP) |
Affichage à l’écran |
|---|---|---|
|
{mon_texte} |
$page['mon_texte'] = "Mon texte" |
Mon texte |
Code des listes
Les listes sont utilisées pour afficher une variable PHP de type « array ». Le mot clé « LOOP » est utilisé pour signifier que la variable correspond à une boucle. Tout le code HTML compris entre « LOOP » et « END LOOP » sera répété autant de fois que le tableau a de lignes.
| Code
template (fichier HTML) |
Code
PHP (fichier PHP) |
Affichage à l’écran |
|---|---|---|
|
{nom} {prenom}
|
$page['ma_liste']=array( array('nom'=>"Durant",'prenom'=>"Martin"), array('nom'=>"Dupond",'prenom'=>"Marie")); |
Durant Martin
Dupond Marie |
Code optionnel
Le code optionnel est utilisé pour les variables de type booléen ou précisément « vide/non vide ». Si la variable est vide, alors le code HTML compris entre les deux balises « OPTION » sera invisible. Sinon il s’affichera.
| Code
template (fichier HTML) |
Code
PHP (fichier PHP) |
Affichage à l’écran |
|---|---|---|
|
{texte1}
{texte2}
|
$page['texte1']="Texte 1"; $page['texte2']="Texte 2"; $page['var1']=""; $page['var2']="1"; |
Texte 2 |
Créer votre propre design
Pour personnaliser le design de phpMySport et le mettre aux couleurs de votre club, il vous faudra créer votre propre template. Cela est relativement rapide, mais il est préférable d’avoir déjà quelques notions en langage CSS et HTML. Voici les différentes étapes à suivre :
- Ouvrez le répertoire où sont stockés les fichiers de phpMySport (à l’aide votre client FTP si besoin).
- Ouvrez le répertoire « template » situé à la racine de votre site. Un sous-répertoire intitulé « défaut » est présent. Ce dernier contient le design par défaut de phpMySport. Pour éviter tout risque de dysfonctionnement du script, il est vivement déconseiller d’effacer ou de modifier ce répertoire ainsi que les fichiers qu’il contient !
- Copier/coller le dossier « defaut ». Renommer le avec un mot (texte sans espace) de votre choix (ex : « mondesign ») et placer le dans le répertoire « template ». Celui-ci contient désormais deux sous-répertoires : « defaut » et « mondesign »
- Ouvrez le répertoire que vous venez de copier/coller. Vous y trouverez
plusieurs dossiers ainsi que de nombreux fichiers HTML. Rassurez-vous, il n’est
pas nécessaire de tous les modifier pour changer le design de votre site !
Seuls 2 éléments sont importants :
- Le dossier « /tpl_image/ » : il contient tous les images qui composent l’interface graphique du site.
- Le fichier « /tpl_image/styles.css » : il contient toutes les informations de mise en forme et de mise en page du texte, des menus, des rubriques, des tableaux, etc
- Pour modifier le design, il vous suffit donc d’intégrer vos propres images et de modifier le contenu du fichier CSS.
- Voici un exemple si vous souhaitez insérer votre logo à la place de
celui de phpMySport :
- Placez l’image correspondante à votre logo (format .jpg, .gif, .png ou autre) dans le dossier « /tpl_image/ » du répertoire que vous avez copier/coller ( « mondesign »)
- Ouvrez le fichier « /tpl_image/styles.css »
- Remplacer
la ligne suivante :
div#header { height:90px; width:100%; margin:0 auto; padding:0; }
- Par :
div#header { height: 90px; width:100%; margin:0 auto; padding:0; background:url(mon_logo.jpgmon_logo.jpg) no-repeat; }
#header img { display:none }; - Le fichier « mon_logo.jpg » correspond à l’image que vous avez placé dans « /tpl_image/ ». Si nécessaire, modifier la hauteur « 90px » par celle de votre image.
- Vous pouvez bien entendu personnaliser les autres éléments de l’interface : menu, entête, pied de page, couleur de fond, taille et couleur du texte, titres, etc.
- Pour changer le design par défaut et appliquer les modifications que
vous venez d’apporter :
- Allez dans l’espace d’administration, rubrique « configuration du site »
- Dans la liste déroulante correspondantes, choisissez le design que vous venez de créer et valider votre choix
- Le nouveau design de votre site apparaît alors.
N’hésitez pas à faire connaître vos qualités artistiques en diffusant vos réalisations graphiques auprès des autres utilisateurs de phpMySport. Pour cela, envoyez-nous vos images et vos feuilles de styles CSS personnalisées !