| L3 MIAGE | TP 2 (3 séances) | I. Mirbel & M. Winter (d'après P. Renevier) |
| L3 Web Persistance | Prise de contact avec PHP | Année 2017-2018 |
Toutes vos pages devront être valides. Il faut respecter une DTD, par exemple :
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pages pour le cours Web...</title>
<!-- ligne pour l'encodage de la page -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>
Assurerez-vous que l'encodage du fichier soit cohérent avec l'attribut "encoding" et "charset" (cela dépend de votre éditeur de texte).
Le signe <? qui permet d'expliciter la version de XML peut-être aussi interprété comme début d'une zone php (raccourci activé ou non dans le fichier php.ini) ; ce qui peut donc générer une erreur de syntaxe... Pour résoudre ce problème, il faut que cela soit un morceau de programme écrit en PHP qui génère cette ligne déclarative !
Vous pouvez opter pour une DTD HTML5,
<!doctype html>
<html lang="fr">
<head>
<title>pages pour le cours Web...</title>
<!-- ligne pour l'encodage de la page -->
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Autant que possible, séparez le code PHP de l'HTML. Réservez l'usage du PHP dans le corps des pages (body) à l'usage de l'instruction echo.
Le déroulement du TP sera le suivant : Ce sujet de TP est constitué de 6 parties. Il couvre 3 séances d'1h30. Les 2 premiers points sont à étudier pendant la première séance ; Les points 3 et 4 pendant la deuxième séance et les 2 derniers points pendant la troisième séance. Vous avez donc 3 séances pour faire le sujet en entier.
Dans votre dossier ~/www, créez (si cela n'est pas encore fait) un dossier web. Dans ce dossier, vous réaliserez tous vos tps de web. A l'intérieur de ce dossier, créez un dossier tp2. Ce dossier est accessible à l'adresse : http://www-mips.unice.fr/~votrelogin/web/tp2 . Lors des deux prochaines séances durant lesquelles vous continuerez ce même tp, vous pourrez continuer à travailler dans le répertoire tp2.
Si vous testez maintenant, vous devriez avec une erreur 403 (FORBIDDEN) car il n'y a pas encore de fichier index.html dans le répertoire tp2. Celui-ci sera créé plus tard dans le déroulement du tp.
Dans le dossier tp2, créez une page (fichier) date.php. Cette page est accessible à l'adresse : http://www-mips.unice.fr/~votrelogin/web/tp2/date.php . Dans cette page, écrivez la date et l'heure (avec la fonction date), ainsi que le nombre de jours et de secondes restant avant le 01 novembre de l'année courante (en utilisant la fonction strtotime et quelques calculs). Votre page doit être valide (validator.w3.org).
Rajouter dans la page date.php un formulaire qui permet d'entrer une date. Le formulaire est traité par cette même page (date.php), qui affiche également le temps restant avant la date saisie ou le temps passé depuis la date saisie.
Vous pouver choisir le format que vous voulez pour la date à saisir, mais une simple chaine de caractères du style 24-12-1975 ou 1975-12-24 ou 24 december 1975 devrait pouvoir fonctionner.
Affichez la date saisie (24-12-1975 ou 24 december 1975) en français (24 décember 1975). Pour cela vous pouvez utiliser str_replace($valeurs_remplacées, $valeurs_qui_remplacent, $string) qui remplace $valeurs_remplacées[$i] par $valeurs_qui_remplacent[$i] dans la chaîne $string.
Toujours dans le dossier tp2, créez une page tableau.php.
Créez une variable $tab qui contient le tableau php suivant (au besoin changer la date) :
| date.php | 23-09-2016 | 1856 |
| tableau.php | 23-09-2016 | 1875 |
Et une variable(tableau php) $titre
| Nom du fichier | Date de modification | taille |
Affichez le contenu de ces variables à l'aide de la fonction print_r puis de la fonction var_dump.
Cela ne produit pas encore du HTML qui s'intègre à une page web : Regardez le code source HTML et/ou placez les résultats des appels des fonctions print_r et var_dump dans une balise <pre>.
Vous allez donc maintenant générer un tableau HTML (balise table, thead, tr, th, tbody, etc.).
Pour cela, écrivez une fonction genereTableau ($title, $body). Cette fonction retourne une chaine de caractères qui correspond au codage HTML d'un tableau (<table>) avec une légende (<caption>) qui indique le nombre de lignes du tableau (hors ligne de titre), une entête (<thead>) constituée des titres des colonnes contenus dans le paramètre $title et un corps (<tbody>) dont le contenu se trouve dans le tableau à deux dimensions $body. Chaque élément de $body correspond à une ligne du tableau. Chaque élément de $body est donc un tableau dont le nombre d'éléments et le même que celui de $title. Utilisez cette fonction sur $tab et $titre.
Maintenant, créez automatiquement un tableau-php $listeFichier dont le contenu est celui du dossier courant. Pour cela, utiliser glob, filesize et filemtime (et la fonction date), mais n'indiquez une taille que pour les fichiers (is_file) (et rien sinon).
Faites évoluer votre code pour que la première colonne de $listeFichier contienne un lien (<a>) vers le fichier.
Utilisez des fonctions de tri (sort, rsort) sur $listeFichier en fonction de la présence d'un paramètre tri passé dans l'url (par exemple : tableau.php?tri=reverse) que vous récupérez avec $_GET. Placez deux liens pour avoir le tableau trié dans un sens ou dans l'autre.
Toujours dans le dossier tp2, créez une page preference.php . Téléchargez les feuilles de styles et placez-les dans votre dossier tp2.
La page preference.php contient un formulaire dont l'action est preference.php. Ce formulaire contient un menu déroulant (select) dont les options (option) sont les feuilles de style présentes dans le dossier courant (donc tp2). Le formulaire contient aussi un bouton pour validez le choix (submit). Si la page preference.php reçoit des valeurs via le formulaire, elle en extrait la feuille de style pour l'appliquer à elle-même (balise <link>). De plus, ce choix sera sélectionné par défaut dans le select.
A l'aide d'une session (utilisez session_name avec session_start pour ne pas avoir de collision entre les sessions de tous les étudiants), sauvegardez le style choisi.
Dans les pages tableau.php et date.php, chargez la feuille de style choisie si une feuille a été choisie (testez l'existence de la variable de session avec isset).
Identifiez le code commun aux trois pages (l'entête de la page HTML générée) : preference.php, date.php et tableau.php. Dans le dossier tp2, créez un fichier entetes.inc dont le code permettra de générer l'entête des pages HTML. Pour cela, ce fichier aura une fonction qui retournera une entête (balise <head>). Paramétrez cette fonction avec le titre de la page (balise <title>). Utilisez entetes.inc dans tous les fichiers php (et enlever le code redondant). Ce code permet de s'assurer que les classes que vous utiliserez par la suite seront chargées.
Pour faciliter la cohérence de la navigation entre les pages du site, vous allez créer un fichier bandeau.inc (à placer dans le dossier tp2) qui permettra de générer une barre de navigation (c'est-à-dire une "ligne" avec les liens vers les autres pages). Dans bandeau.inc, créer un tableau à deux dimensions $map. Chaque élément de $map est un tableau à deux éléments contenant (i) le nom du fichier (valeur du href du lien) et (ii) le nom de la page tel qu'il apparaitra dans un lien (texte à l'intérieur de la balise <a>).
Voici un exemple incomplet de $map :
$map = array( array("tableau.php", "plan du site"), array("preference.php", "Choix du style") );
Ecrivez une fonction genererLien($href, $name) qui renvoit une chaine de caractères correspondant à un lien hypertexte du style <a href="$href">$name</a> . Vous pourrez encapsulez ces liens dans des <div> dont le style pourra être précisé, par exemple, de la manière suivante : <div class='lien'>. Vous pouvez modifier entete.inc pour inclure une feuille de style nav.css qui pourrait contenir la mise en forme associée. Par exemple :
div.lien { border: blue thin solid; float: left; margin-right:2em; } .
Ecrivez une fonction genererBarNav() qui parcourt le tableau $map (c.f. ATTENTION ci-dessous) et qui génère la barre de navigation, en utilisant la fonction genererLien. Cette barre sera encapsulée dans une <div> dont l'attribut id aura pour valeur par exemple barrenavigation et dont le style pourrait être également précisé dans la feuille de style nav.css. Ceci pourrait permettre par exemple de mettre cette barre en position fixed, en haut de la page, avec 1.5em de hauteur, etc.
ATTENTION : $map doit être visible dans la fonction. Pour simplifier et ne pas avoir à recourir à une déclaration global, encapsulez $map$ en tant que champ de classe static et les fonctions genererBarNav() et genererLien($href, $name) dans une classe Bandeau (sans constructeur, le constructeur par défaut sera suffisant).
Le squelette de la classe Bandeau est le suivant :
class Bandeau {
public static $map = array( array("tableau.php", "plan du site"),
array("preference.php", "Choix du style"),
array("date.php", "manipulation de dates")
);
// $map s'utilisera ainsi : Bandeau::$map
private function genererLien($href, $name) {
// code à écrire
}
public function genereBarNav() {
// code à écrire
}
}
Pour utiliser cette classe dans entetes.inc, il faudra l'utiliser comme suit :
$bandeau = new Bandeau();
$headers .= $bandeau->genereBarNav(); // variable qui contient les entêtes du document HTML
Notez que le fichier nav.css pourrait certainement avoir une autre extension ou être dans un sous dossier (pour ne pas être lister dans preference.php).
Utilisez cette classe dans entetes.inc.
Avec la variable super globale $_SERVER, il est possible d'avoir des informations sur le serveur, la requête, etc.
Notamment, $_SERVER['PHP_SELF'] permet d'avoir le nom du fichier php précédé du chemin de la base du "site". Avec la fonction explode("/", $_SERVER['PHP_SELF']) il est possible de découper $_SERVER['PHP_SELF'] en un tableau dont les éléments sont les caractères entre les "/". Par exemple :
$_SERVER['PHP_SELF'] dans tableau.php donnerait : /~login/web/tp2/tableau.php
explode("/",$_SERVER['PHP_SELF']) donnerait : array( "", "~login", "web", "tp2", "tableau.php")
en alternative à explode, la fonction basename permet d'obtenir le nom du fichier.
Grâce à ces informations, modifier bandeau.inc pour mettre "automatiquement" en valeur (style particulier, à inclure dans nav.css pour les balises <div> identifiées par lien.ici par exemple) le lien qui correspond à la page courante.
Créez un page index.php dans votre répertoire tp2. Cette page doit avoir la même structure que les autres pages (en incluant entetes.inc).
La page ne doit pas être encore dans la barre de navigation, ajoutez-la en premier en tant que connexion dans bandeau.inc et dans $map).
Cette page contient un formulaire, demandant le nom, le prénom et un mot de passe. La cible de ce formulaire est index.php.
Il va falloir faire plusieurs modifications :
Modification 1: lorsque index.php reçoit un formulaire, il faudra vérifier si le login (nom+prénom) / mot de passe est valide. Si c'est le cas alors l'utilisateur sera connecté.
Modification 2: Pour la gestion de la connexion, il faudra utiliser un fichier (users.csv par exemple)
Modification 3 : Il faudra modifier bandeau.inc pour n'afficher que les liens autorisés. Pour cela, il faut créer un champ de classe static $publicAcces qui est un tableau associatif et qui associe aux noms des liens un champ acces qui prend les valeurs "toujours accessible", "accessible si connecte", "accessible si deconnecte" et qui indiquera si l'accès est autorisé ou non : par exemple "plan du site" => "accessible si connecte". On génère le lien correspondant à un fichier :
index.php et tableau.php sont "toujours accessible", date.php est "accessible si deconnecte" (pour tester). Les autres fichiers (preference.php) sont "accessible si connecte".
Ajoutez aussi au niveau du bandeau un message qui affiche dans une <div> de classe css droite :
Si on n'est pas connecté : "bienvenu cher visiteur, nous sommes le 9/02/2016, 4:07:39"
Si on est connecté : " bienvenu Raymond Lewis, nous sommes le 9/02/2016, 5:27:32"
Modification 4 : Il faudra modifiez entetes.inc pour redirigez (fonction header) vers index.php si on n'est pas connecté et si l'accès est "accessible si connecte". $publicAccess devra donc être accessible aux deux fichiers bandeau.inc et entetes.inc. Cette redirection est nécessaire car on pourrait taper l'adresse directement dans le navigateur.
Il est étrange de pouvoir avoir accès à la page de login en étant connecté... Faites donc un test dans index.php pour savoir si on est connecté ou non :
Si on est connecté proposer un formulaire pour la déconnection. Ce formulaire constitué d'un simple input de type submit pour se déconnecter. La cible du formulaire est index.php. En réponse, il faut utiliser session_destroy, effacer les variables de session et éventuellement le cookie sur le client.
Si on n'est pas connecté, alors c'est la page de connexion qui apparait.
En créant plusieurs liens vers index.php avec différents noms dans la barre de navigation et avec des conditions d'accès ($publicAcces) différentes, changez le nom du lien associé à index.php en fonction de la connexion (ou de la non connexion).
Créez un nouveau fichier, creation.php, et construisez-le comme les autres fichiers du site avec l'appel à entetes.inc et bandeau.inc. La page creation.php sera "accessible si deconnecte" (cf. $publicAcces). Le but de cette page est de proposer un formulaire qui permette de créer un nouveau compte. Pour cela, vous devez placer un formulaire, composé des champs "nom", "prénom" et "mot de passe". Le formulaire s'appelle lui-même, i.e. le champ action est "creation.php". Et lorsque la page creation.php reçoit le formulaire, un ajout d'utilisateur (concaténation dans le fichier user.csv, si la création est effective) doit se faire. Afficher un message pour confirmer (ou non) la création du compte. Pour que la création soit effective, bien sûr, il ne faut pas que le nom et le prénom soient déjà présents dans le fichier user.csv.
Pour l'instant, vous avez abordé un TP axé sur la technologie (PHP). Vous avez maintenant un aperçu de ce qu'il est possible de faire. Il y a de nombreuses variantes. Parmi elles, celles-ci :
Modifiez la génération de la barre de navigation pour que les pages non accessibles soient indiquées mais en texte grisé (et non pas en lien).
Modifiez les styles pour avoir une barre de navigation verticale avec et sans les pages non accessibles.
Pour paramétrer cela sur le site, vous pouvez créer une classe config dans un fichier config.inc :
class config {
const STYLE = "messtyles/styleVert.css";
const HIDE_UNREACHABLELINK = false;
}
Pour modifier la configuration, il suffit de modifier ce fichier.
Vous avez là un aperçu de la notion de choix de "template" / "skin" d'un site.
Vous pouvez enichir votre site de nouvelles pages php ou de styles css différents.
| Année 2017-2018 | TP Web Persistance L3 MIAGE UNS | I. Mirbel & M. Winter |