5 ICN : Réalisation d un site internet dynamique Nom de l'élève : Classe : Table des matières 5 ICN : Réalisation d un site internet dynamique...1 5.1Le langage php...2 5.2Déplacement de votre site dans le dossier de Wampserveur...3 5.3Modification de la page d accueil html pour rendre le site dynamique...4 5.4Exemple : Afficher un prénom sélectionné sur une autre page html...5 5.5Changer la présentation d une page selon le prénom sélectionné...6 5.6Création de votre site dynamique...7 à savoir sans documentation à savoir faire avec documentation Objectif Réaliser un site internet dynamique de 3 pages minimum par groupe. (maîtriser les bases du langage php) Taches proposées pour atteindre l objectif Modifier un fichier html pour le rendre dynamique Récupérer des données issues du fichier html dans un fichier php Modifier une page html avec des données php
1 Pourquoi utiliser le langage php? 5.1 Le langage php. Les sites produits en html et css sont statiques, les pages sont fixes, elles ne peuvent être modifiées par l utilisateur. Un site devient dynamique si certaines pages s adaptent aux demandes de l utilisateur : - en changeant la mise en page (couleurs, positions ) - en changeant le contenu (titre, image affichée, valeurs dans un tableau ) Pour les rendre dynamiques, réactives aux actions de l utilisateur, il est nécessaire d utiliser un autre langage en complément des langages css et html, le langage php (extension de fichier = php). Il va donc être nécessaire de - proposer des choix à l utilisateur ou de le laisser saisir des informations (fichier html N 1) - de traiter les informations saisies ou sélectionnées par l utilisateur (fichier php) - d afficher une nouvelle page en fonction du résultat de ce traitement (fichier html N 2) Étape 1 : Fichier Accueil.html Étape 2 : Fichier traitement.php Étape 3 : Fichier Resultat.html Mais, le langage php n est pas directement compréhensible par un navigateur, il est donc nécessaire de passer par un logiciel traducteur qui va faire le travail demandé par le code php puis renvoyer un code html compréhensible par les navigateurs. Wampserveur est un logiciel assurant en particulier cette fonction de traduction, c est pourquoi nous l utiliserons. Dans un premier temps, vous devez déplacer votre site dans une zone réservée du logiciel Wampserveur.
5.2 Déplacement de votre site dans le dossier de Wampserveur Wampserveur est une plateforme de développement web, c est à dire un logiciel ayant pour objet de faciliter la tâche des développeurs créant des pages web. Elle fournit une librairie de fonctions permettant à la fois de réaliser les pages et de tester leur fonctionnement. Pour pouvoir développer votre site avec wampserveur, il est nécessaire : - d accéder au dossier www de wampserveur, dossier de stockage des sites. - de créer un dossier pour votre site dans ce dossier www - de déposer vos fichiers dans votre dossier - de créer dans ce même dossier un fichier index.php (ou index.html) qui sera utilisé par wampserveur pour exécuter le code de votre site - d exécuter votre code depuis la page d accueil de wampserveur par un lien prévu à cet effet (alias) 1 Accès à la zone de stockage des sites de wampserveur Ouvrir l explorateur de fichier. Réaliser un clic droit sur «ordinateur» et sélectionner «connecter un lecteur réseau» L ordinateur vous demande à quelle adresse vous voulez vous connecter Saisir «\\lab02\www» puis valider Un nouveau partage apparaît dans votre explorateur en plus de L : T : Ce nouveau partage vous donne accès facilement à la zone www, zone de stockage des sites. 2 Mise en place de vos fichiers dans la zone de stockage des sites Créer votre dossier dans www en suivant les règles de nommage suivantes : Nom de dossier commençant par M pour les groupes du mardi, par J sont ceux du jeudi. Ajouter ensuite gp + numéro de groupe exemples : Mgp1 = groupe N 1 du mardi Jgp5 = groupe 5 du jeudi Copier tous les fichiers nécessaires au fonctionnement de votre site dans votre dossier fichiers html (3 si vous avez respecté les consignes) fichier css fichiers images éventuellement Pour faciliter le transfert de votre site sur internet, renommer votre fichier html de la page d accueil (dans Notepad++ clic droit sur l onglet avec le nom du fichier à renommer) avec le nom de votre dossier (en respectant les majuscules/minuscules). exemples : Mgp1.html ou Jgp5.html 3 Création de votre fichier index.php Avec Notepad++, créer un nouveau fichier (Menu «Ficher» puis «Nouveau») à enregistrer dans votre dossier dans www sous le nom de «index.php» Dans le fichier index.php saisir le code suivant (pour le groupe Mgp1) : <?php // indique le début d un fichier php require 'Mgp1.html'; // exécute le fichier nommé Mgp1.html?> // indique la fin d un fichier php 4 Connexion à wampserveur et test de fonctionnement de votre espace de travail : Le logiciel wampserveur est installé sur un autre poste du réseau du lycée. Pour y accéder : - ouvrir firefox - saisir l adresse lab02 ou 172.16.215.24 - valider La page d accueil de Wampserveur apparaît. Une série d hyperliens apparaissent à droite dans la rubrique «vos alias». Repérer celui portant le nom de votre dossier puis cliquer sur ce lien. Votre page principale s affiche dans le navigateur, sinon, il vérifier toute la procédure. Vous pouvez dorénavant faire des pages en php qui seront converties par wampserveur en pages html pour être rendues lisibles par les navigateurs. Votre site mélengeant html, css et php est accessible via votre alias.
5.3 Modification de la page d accueil html pour rendre le site dynamique 1 Des balises pour rendre un site dynamique : Certaines balises html permettent une action de l utilisateur, par exemple : balise <select> qui donne un choix parmi des options (balise <option>) balises <input> <input type="text"> qui permet de saisir des informations <input type="radio"> qui permet de faire un choix dans une liste <input type="submit"> qui permet de créer un bouton pour valider des choix <input type="checkbox"> qui permet de faire des choix dans une liste <input type="button"> qui permet de créer un bouton <input type="hidden"> qui permet de cacher une information dans la page... balise <map> qui permet de créer une image cliquable (en combinaison avec la balise <area>)... 2 La balise formulaire, balise nécessaire pour rendre le site réactif: Les balises laissant un choix ou une possibilité de saisie à l utilisateur doivent être incluses dans une balise formulaire (<form>) qui indique au navigateur que des données vont être envoyées depuis la page internet. Exemple (non fonctionnel tel quel, voir en-dessous) : <form> <input type="text"> <select> <option>enseignant</option> <option>gestionnaire</option> <option>cpe</option> </select> <input type=submit value="bouton de validation" class="centrer"> </form> Certains paramètres doivent être affectés à la balise <form> et aux balises incluses dans le <form> pour que la récupération des informations saisies ou sélectionnées soit possible. Exemple fonctionnel : voir Alias SitePHPV2 <form action="2validation.php" method=post> <input type="text" name="nom" value="saisissez votre nom"> <select name='profession'> <option value="prof">enseignant</option> <option value="gestionnaire" selected>gestionnaire</option> <option value="cpe">conseiller principal d éducation</option> </select> <input type=submit value="bouton de validation" class="centrer"> </form> Le paramètre «action» de la balise form indique le nom du fichier qui sera exécuté (2Validation.php ici) lorsque l utilisateur validera ses choix. Le paramètre «method» de la balise form indique de quelle manière («post» ou «get») doivent être récupérées les informations choisies par l utilisateur. Le paramètre «name» donne un nom à chaque balise, nom qui sera utilisé pour récupérer l information envoyée par cette balise. Le paramètre «value» indique la valeur affectée à la balise, valeur qui peut être différente de ce qui est écrit dans la balise (voir l exemple des options du select, contenu = «Enseignant» et nom = «Prof»). L input type submit permet de valider les choix de l utilisateur et d exécuter le fichier déclaré dans la balise form, paramètre action (ici, 2Validation.php sera exécuté lors que clic sur le bouton submit). Appeler l enseignant pour lui montrer votre formulaire.
5.4 Afficher des données saisies sur une autre page html Dans un premier temps, il est nécessaire de récupérer les données issues du premier fichier html. 1 Récupération du nom sélectionné dans le fichier html par le fichier php Les données ayant été envoyées par la méthode «post» (voir 1 er fichier html), la récupération d une donnée dans le fichier php se fait en créant une variable (symbole stockant une information en mémoire) et en lui donnant la valeur envoyée par la page html. $Nom = $_POST['nom']; Étape 1 : Fichier Accueil.html Code : <input type="text" name="nom"> Saisie «Devallois» par l utilisateur Clic sur le input type submit Mise en mémoire De «Devallois» Sous le nom «nom» Méthode post Cette ligne de code a pour effet de définir une variable appelée '$Nom' (les noms de variables commencent par $ en php) qui met en mémoire la valeur de la balise ayant pour nom 'nom'. Pour tester la valeur de la variable que vous venez de créer, saisir dans votre fichier php le code suivant : echo $Nom ; la fonction php echo affiche à l écran ce qui la suit donc lorsque vous exécuterez le code, il vous affichera à l écran ce qu il a récupéré comme nom. Appeler l enseignant pour lui montrer que vous récupérez bien la valeur de la variable. Il est ensuite possible de déclencher différentes actions en utilisant la valeur de la variable $Nom stockée en mémoire. 2 Transmission du prénom du fichier php au 2ème fichier html Étape 2 : Fichier traitement.php Code : $Nom = $_POST['nom']; Récupération de la variable «nom» transmise par post Variable $Nom prend la valeur «Devallois» Les variables définies dans le fichier php vont maintenant être incluses dans le 2ème fichier html, par exemple pour afficher le nom choisi sur une autre page. dans le fichier html la syntaxe d un titre statique serait : <h2>son nom est Devallois</h2> ou «Devallois» est le nom à afficher dans le fichier html la syntaxe utilisant la variable php pour avoir un titre dynamique est la suivante : <h2>son nom est <?php echo $Nom?></h2> <?php signale le début d un code php dans le fichier html echo est une fonction php qui demande d écrire $Nom est la variable que le echo doit écrire?> indique la fin du code php dans le fichier html Or la variable $Nom a une valeur différente fonction de la saisie réalisée par l utilisateur dans le premier fichier html (dans le input type text). La fonction echo va donc écrire la valeur saisie dans le premier fichier html, valeur récupérée dans la variable $Nom par le fichier php. Étape 2 : Fichier traitement.php Code : $Nom = $_POST['nom']; Variable $Nom prend la valeur «Devallois» Mise en mémoire De «Devallois» Sous le nom de variable «$Nom» Étape 3 : Fichier Resultat.html Code :<h2>son nom est <?php echo $Nom?></h2> Insertion de la variable «$Nom» dans le fichier html Affichage de «Devallois» comme nom
5.5 Changer la présentation d une page selon le prénom sélectionné 1 Choisir un style de présentation selon la valeur de $Nom (voir alias SitePHP) Le langage php comporte un très grand nombre de fonctions prédéfinies permettant de traiter les informations (http://php.net/manual/fr/indexes.functions.php). Par exemple, les fonctions php «switch» et «if» permettent de déclencher une action différente selon la valeur d une variable. Ainsi, pour adapter la couleur du fond au prénom choisi, il est possible d utiliser la fonction switch : switch ($Prenom){ case "Albert": $Couleur = "styletitre1"; break; case "Alfred": $Couleur = "styletitre2"; break; default: break; } Ou d utiliser une combinaison de fonctions if : if ($Prenom== "Albert") {$Couleur = "styletitre1";} else {if ($Prenom== "Alfred") {$Couleur = "styletitre2";} else {$Couleur = "styletitre3";} } // définir une variable $Couleur ayant pour valeur "styletitre1" // quitter le switch // définir une variable $Couleur ayant pour valeur "styletitre2" // quitter le switch // si la variable $Nom n'a aucune des 3 valeurs prévues // quitter le switch // variable $Couleur prend pour valeur "styletitre1" // sinon // variable $Couleur prend pour valeur "styletitre2" // sinon // variable $Couleur prend pour valeur "styletitre3" 2 Appliquer le style sélectionné par le fichier php au fichier html Par exemple pour changer un sélecteur d identifiant («id»). Dans le fichier html, la syntaxe de présentation statique serait <h1 id="styletitre1"> ou «styletitre1» est le nom de l identifiant à appliquer Dans le fichier html, la syntaxe avec variable php pour avoir une présentation dynamique est : <h1 id="<?php echo ($Couleur)?>"> Or la variable $Couleur a une valeur différente selon le traitement réalisé dans le fichier php. Elle peut avoir pour valeur : styletitre1 si $Prenom = albert styletitre2 si $Prenom = alfred styletitre3 si $Prenom = alphonse En remplaçant la valeur de l identifiant par une variable on obtient donc une présentation variable selon le prénom sélectionné au départ. Étape 2 : Fichier traitement.php Code: case "Alfred": $Couleur = "styletitre2"; Variable $Couleur prend la valeur «styletitre2» Mise en mémoire De «styletitre2» Sous le nom de variable «$Couleur» Étape 3 : Fichier Resultat.html Code :<h1 id="<?php echo ($Couleur)?>"> Affectation du style «styletitre2» à h1
5.6 Création de votre site dynamique 1 Résumé : les principales étapes du travail Lorsque vos pages actuelles sont dans votre dossier sur le www de wampserver, vous pouvez tester leur fonctionnement en cliquant sur l alias de votre groupe. Si tout est bien en place, votre site devrait être affiché dans le navigateur. Pour rendre votre site dynamique, vous devez alors : 1- modifier votre premier fichier html décider des données à saisir ou à sélectionner par l utilisateur écrire le formulaire permettant cette saisie ou sélection dans le fichier html ajouter un bouton de validation 2- créer votre fichier php de traitement de données décider du résultat attendu dans le 2ème fichier html déterminer les variables nécessaires pour obtenir votre résultat écrire le code php permettant d obtenir les variables nécessaires dans le 2ème fichier html 3- intégrer les variables obtenues par le fichier php dans le 2ème fichier html 2 Création d une page en langage php Pour créer vos pages en langage php, vous pouvez procéder comme pour les autres langages en créant un nouveau fichier avec le logiciel Notepad++. Un fichier php commence par : <?php et se termine par :?> Les instructions en langage php doivent être incluses entre ces 2 marqueurs. Un fichier php porte l extension.php Dans le langage PHP, les commentaires commencent par /* et finissent par */ (ou // en début de ligne) Un grand nombre d instructions existent en langage php, par exemple : include xxx.php qui exécute le fichier xxx.php echo "$Couleur"; qui écrit le contenu de la variable $Couleur switch qui exécute une action en fonction de la valeur d une variable voir http://php.net/manual/fr/indexes.functions.php