Admin CliCours
Cours création de la partie administrative d’un site Web, tutoriel & guide de travaux pratiques en pdf.
TRAVAIL REALISE
Bases de données
Présentation des tables
Tous les premiers champs des tables sont un identificateur pour la table, en auto -incrément (c’est-à-dire qu’ils sont uniques et qu’ils s’incrémentent automatiquement de un à chaque insertion).
Les tables suivantes existaient déjà sous la forme de document texte :
– La table News, qui contenant toutes les informations nécessaires à l’affichage d’une news (titres anglais et français, images, textes, auteur, dates de saisie, société…)
– La table Fonction, contenant la fonction, le nom et la photo des personnes à faire apparaître sur le site.
– La table Pays, contenant le pays, l’id du continent, le logo…
– La table Périodicité, indiquant la fréquence de parution d’un magazine.
– La table Catégorie. (exemples de catégories : à rajouter)
– La table Continent.
– Les tables Magazine et Société, décrites plus loin.
Dans un premier temps, j’ai créé quatre tables reprenant ce qui existaient sur le site et qu’il faudra mettre à jour.
– La table Titre reprend tous les titres présents sur le site. La plupart d’entre eux (mais pas tous) sont également des liens permettant la navigation entre les pages.
– La table Image reprend toutes les images présentes sur le site.
– La table Texte reprend tous les textes présents sur le site.
Ces trois tables ont pour dernier champ un « id_emplacement » pointant vers la table Emplacement, servant à indiquer leur place dans le site.
– La table Emplacement, servant à l’organisation du site. Le niveau indique si l’on est dans la page principale (niveau 0) ou dans une sous-page (et quel niveau de sous page). L’ordre indique dans quel ordre afficher les titres (les images et les textes ayant le même ordre que le titre auquel ils se rapportent). Le père est l’id_titre du titre de niveau supérieur amenant à cette page (c’est-à-dire le lien sur lequel on a cliqué pour arriver à cette page). Pour les titres de niveau 0, ce père a la valeur NULL. L’url indique le chemin pour accéder à la page.
Pour la liste exacte des composants de chaque table, voir l’annexe 2 : « Description des tables ».
Travaux effectués sur ces tables
En utilisant php-myadmin, j’ai tout d’abord transformé les tables sous formes de texte en tables SQL et créé les quatre tables décrites plus haut.
Dans un second temps, les tables de Lagardère ont été récupérées. En les mettant en commun avec les nôtres, on a abouti à deux tables : Société et Magazine.
Dans la table Société, on retrouve toutes les informations sur une société (nom, pays, adresse, téléphones,…).
Dans la table Magazine, on retrouve toutes les informations sur un magazine. En plus de son nom, son pays, son adresse (tous les champs de la table Société), on a sa périodicité, sa couverture (image stockée dans la base).
Etudes
Recherches sur les langages utilisés
• PHP :
PHP est un langage qui s’exécute côté serveur permettant de créer dynamiquement des pages
HTML. En effet, le code PHP est envoyé au serveur qui les interprète et retourne la page
HTML générée.
C’est le langage le plus populaire utilisé pour la création d’un site web dynamique.
Ne connaissant que superficiellement le PHP, je me suis beaucoup aidé des sites Internet suivants
http://www.phpdebutant.org
http://www.phpindex.com/
http://www.phpfrance.com/
http://www.asp-php.net/
PHP est un langage très permissif, il faut faire très attention aux variables que l’on utilise.
• CSS :
Dans la création d’une page (HTML ou PHP), il m’a été interdit d’utiliser d’autres balises HTML que celles pour la création de tableau (<table>, <tr>, <td>…) ou pour la création de la page en elle-même (<html>, <head>, <body>…). Toutes les balises de style doivent être incluses dans une feuille de style (.css).
Pour cela, j’ai dû apprendre la syntaxe et le mode de fonctionnement des feuilles CSS.
Avec les feuilles CSS, on peut définir un style pour telle ou telle balise. On peut également créer des classes, par exemple, la classe titre :
Dans la feuille CSS :
.titre{
color : red ;
}
Appel dans la page HTML :
<span class = titre> titre </span>
Il est très pratique d’utiliser les feuilles CSS pour définir quoi faire avec les liens, lorsqu’ils sont sur une page, lorsqu’on passe dessus (hover), lorsqu’on les a visités (visited)…
a{
color: #000000;
font-weight:bold;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
• Javascript :
Florent m’a aidé à faire quelques fonctions utiles pour mon programme.Lors de ma recherche de menus (voir plus loin), j’ai eu besoin de comprendre les programmes trouvés alors j’ai effectué des recherches sur Internet.
Je me suis beaucoup aidé du site suivant :
http://www.toutjavascript.com/savoir/savoir.php3
Création d’une page test (reprenant l’existant)
Pour mettre en pratique la feuille CSS créée et commencer à coder en PHP, j’ai créé une page de test reprenant ce qu’il y avait sur le site Internet existant. La page créée ressemblait beaucoup à la page d’accueil du site existant.
Recherches sur Internet
• Recherche de menus dynamiques
En attendant que le service de Communication Interne nous fasse parvenir la charte graphique du site, j’ai dû chercher des menus dynamiques sur Internet, verticaux, horizontaux ou même plus originaux.
La principale contrainte était la compatibilité. En effet le principal problème rencontré a été que les menus trouvés ne marchaient pas correctement sur Mac. Pour chaque menu intéressant trouvé, j’ai testé la compatibilité sur PC avec IE, Mozilla, Opéra et sur Mac avec Safari et IE pour mac.
Une fois ces tests passés, j’ai pu passé à la mise en place de ces menus.
Il fallait voir s’ils étaient bien dynamiques, faciles à paramétrer, multi-niveaux, faciles d’utilisation pour le développeur…
L’utilisation du Javascript fut obligatoire car il fallait que tous les niveaux s’affichent en passant seulement sur le titre (rollover).
• Stockage des images dans une base de données
Karin m’a demandé de rechercher les désavantages à stocker des images dans une base de données. En effet, on souhaite garder les images que l’ont trouve fréquemment sur le site (pas très nombreuses) dans la base de données et non dans un répertoire comme il est conseillé de le faire car elles doivent être gérables de plusieurs endroits (HFM, Lagardère, …). De plus cela évite beaucoup de vérifications (vérification du chemin, de l’existence de l’image…). On n’a pas de problèmes du genre « l’image existe mais aucun chemin ne la référence » ou « le chemin référence une image qui a été supprimée ».
Le principal inconvénient pour stocker des images dans une base de données, est la taille des images. Puisque les images sont très coûteuses en mémoire, cela ralentit l’exécution des requêtes et occupe beaucoup de place.
Les principales informations ont été trouvées sur le site :
« http://sqlpro.developpez.com/Images/SQL_Images.html »
Réalisation de la partie administration du site
La partie « administration du site » se compose de deux pages reprenant deux grandes parties : la première, « Modification directe » où l’on modifie directement les tables de la base de données et la deuxième « Modification via une navigation par titre » où l’on peut modifier les tables titre, image et texte en allant à la page concernée en navigant par le menu. Au début de chaque partie, on inclut certains fichiers, on récupère les valeurs transmises par les formulaires, on prépare le téléchargement des images, on effectue les requêtes et on insère le menu.
Traitements en début de programme
Au début du programme, on inclut deux fichiers : « config_bdd.php » et « variables.cfg ». Avant de les inclure, on regarde s’ils existent et si on ne les trouve pas, on produit un message d’erreur.
I. PRESENTATION DE L’ENTREPRISE
A. Groupe LAGARDERE
1. Présentation Générale
2. Les domaines d’activités du groupe Lagardère
3. Rapide historique du groupe Lagardère
B. Hachette Filipacchi Médias
1. Présentation
2. Equipe Corporate
3. Contexte, site existant
4. Présentation de ma mission
II. TRAVAIL REALISE
A. Bases de données
1. Présentation des tables
2. Travaux effectués sur ces tables
B. Etudes
1. Recherches sur les langages utilisés
2. Création d’une page test (reprenant l’existant)
3. Recherches sur Internet
C. Réalisation de la partie administration du site
1. Traitements en début de programme
2. Traitement des Images
3. Vérifications
4. Menu
5. Page administration
6. Partie « Modification Directe »
7. Partie « Modification via une navigation par titre »
8. Transformation du code
III. BILANS
A. Perspectives
B. Bilan des connaissances acquises
Télécharger le cours complet
