STID 1 S2 IUT Lumière Lyon 2

Développement Logiciel & Technologies WebTP 7 – 8 – 9 PHP - MySQL

PARTIE 1Cette partie est consacré est à PHP. L’objectif est la manipulation des notions suivantes : insertion de code PHP dans du HTML, structure de langage echo, méthodes de passage des paramètres GET et POST, passage de paramètres, tableau associatif, attributs method, action, name, inclusion de pages.

Exercice 1. Votre première page Web avec du PHP

Etape 1. Dans le dossier htdocs>PART1, créez une première page Web nommée PART1-exo1.php. Insérez les balises de structure.

Etape 2. Associez la feuille de style myStyle.css à votre page Web.

Etape 3. Créez une barre latérale comprenant un peu de texte ainsi qu’une partie centrale comme le montre la figure ci-dessous. Regarder le code de la feuille de style pour trouver les identifiants à utiliser. Pour visualiser, tapez localhost/PART1/PART1-exo1.php dans la barre d’adresse du navigateur.

Etape 4. Affichez une phrase en utilisant du PHP, comme sur l’exemple ci-dessous. Rappelons que tout code PHP doit apparaître entre les balises <?php … ?>.

Exercice 2. Passage de paramètres entre pages

Etape 1. Faites un Copier/Coller de votre page et nommez la copie PART1-exo2.php.

Etape 2. Enlevez le script PHP et changez le titre comme ci-dessous.

Etape 3. Créez un formulaire avec 3 champs demandant le nom, le prénom et l’âge, un bouton de validation et un bouton de réinitialisation. La méthode est GET et le formulaire de traitement est bienvenue.php.

Page 1

STID 1 S2 IUT Lumière Lyon 2

Etape 4. Créez maintenant la page bienvenue.php qui doit afficher sur votre navigateur les informations saisies de la façon suivante, grâce à echo.

Etape 5. Testez votre formulaire. Après la soumission de celui-ci, vous obtenez la page d’affichage. Observez à ce moment-là le contenu de la barre d’adresse de votre navigateur. Que remarquez-vous après le nom de votre fichier php? Expliquez ce que vous voyez.

Exercice 3. Encore du passage de paramètres !

Etape 1. Ajoutez un champ de saisie « formation » à votre formulaire. Changez la méthode de transmission des paramètres à POST.

Etape 2. Dans le fichier bienvenue.php, ajoutez une ligne pour faire afficher la formation.

Etape 3. Testez votre formulaire. Après la soumission de celui-ci, vous obtenez la page d’affichage. Observez-vous la même chose que précédemment dans la barre d’adresse de votre navigateur ? Pourquoi ?

Exercice 4. Entraînement

Selon le même principe, créez une page Web PART1-exo4.php demandant le prénom, la taille et le poids. Ces données doivent être transmises à une page imc.php qui calculera et affichera l’indice de masse corporelle. L’IMC se calcule selon la formule suivante:

IMC=masse(kg)(taille (m )) ²

Exercice 5. Structure et contenu : Inclusion de portions de pages

Vous allez mettre en œuvre le principe de l’inclusion pour afficher dynamiquement le contenu de votre page Web. Il faudra coder directement une url avec les paramètres requis et les paramètres seront transmis par la méthode GET.

Etape 1. Créez une page Web php3.php avec une barre latérale en utilisant myStyle.css. Le corps de cette page doit contenir la fonction prédéfinie suivante qui permet d’inclure la page spécifiée $page:

<?phpinclude $page;

Page 2

STID 1 S2 IUT Lumière Lyon 2

?>

Etape 2. Vous allez créer 3 pages php (defaut.php, premier.php, second.php) qui représentent chacune un contenu différent. Ces pages seront affichées dynamiquement à l’endroit de la fonction include. Pour cela, insérez seulement un élément <div> avec l’identifiant « contenu » (cf feuille de style), ainsi que du contenu.

Etape 3. Dans php3.php, insérez 3 liens dans la barre latérale qui vont permettre « d’appeler » les trois pages de contenu, sous la forme suivante :

<a href="nomPagePrincipale.php?content=val_param">Texte du lien</a>

val_param correspond au nom la page à insérer.content est la variable qui reçoit le nom de la page à insérer.

Etape 4. Analysez les lignes de code suivantes. Elles doivent être écrites textuellement au début de la page Web (avant l’entête).

<?php$content="";if(isset($_GET[’content’])) {$content=$_GET[’content’];}else {$content="default";}$page=$content.".php";

?>

Etape 5. Ajoutez le code nécessaire dans la feuille de style pour représenter un bandeau en haut de page et une zone de pied de page.

Page 3

STID 1 S2 IUT Lumière Lyon 2

PARTIE 2L’objectif de cette partie est de créer des formulaires dynamiques en lien avec une base de données (MySQL) grâce à PHP. Les notions suivantes sont utilisées: transmission de variables via un formulaire, accès à une base de données, lire dans une table, écrire dans une table.

Exercice 1. Création d’un mini chat

Aperçu du mini-chat :

Etape 1. Préparation de la base avec phpMyAdminL'interface phpMyAdmin permet d'administrer une base MySQL, d'exécuter des requêtes SQL interactivement, etc.Accédez à phpMyAdmin en tapant localhost/phpmyadmin/ dans la barre d’adresse de votre navigateur. Dans cette page d’accueil, créez la base de données « minichat ».Dans votre base, créez la table « dialogue » avec les champs suivants :

id (type INT) : l’identifiant ; permet en outre de savoir dans quel ordre ont été postés les messages. Mettre en auto_increment pour que l’identifiant soit généré automatiquement. Sélectionner « Primaire » pour indiquer la clé primaire ;

pseudo (type VARCHAR) : indiquer la taille maximale du champ (maximum, « 255 ») ; message (type VARCHAR) : taille maximale de 255 caractères ou type TEXT pour des

messages plus longs.

Sauvegarder et remarquez l’apparition de votre base et de son contenu dans le menu de gauche.

Etape 2. Fichier chat.phpCréez le fichier chat.php qui doit contenir :

Le formulaire d’insertion La connexion à la base de données La récupération des données du formulaire et leur insertion dans la table dialogue L’affichage des messages du chat

Pour tester la connexion, faites afficher des messages en vous servant des valeurs de retour des fonctions mysql_connect() et mysql_select_db().

Page 4

STID 1 S2 IUT Lumière Lyon 2

Etape 3. Inclusion d’un fichier de connexionDe façon à alléger le code et pour permettre la réutilisabilité, vous allez extraire les lignes de codes php liées à la connexion, les mettre dans un fichier à part et appeler ce fichier depuis chat.php.Pour appeler le fichier de connexion, ajoutez en début de chat.php (au-dessus de la balise html), les lignes de code suivantes :

<?phpinclude("nomFichierConnexion.php");

?>

Exercice 2. Informations sur les données

Créez un nouveau fichier chatBis.php et réalisez un formulaire qui permet d’obtenir des informations sur les données selon le choix opéré par l’utilisateur en vous inspirant des captures d’écran ci-dessous :

Exercice 3. Lien entre pages

Sur la page chat.php, créez un lien permettant d’ouvrir chatBis.php.

Exercice 4. Créez une autre base de données avec deux tables : personne (pseudo, nom, prénom, âge) et dialogue (id, message, #pseudo) (une personne peut écrire plusieurs messages, un message est écrit par une et une seule personne). Remplissez vos tables et faites afficher l’âge moyen des chatteurs.

PARTIE 3Exercice 1. Questionnaire

Page 5

STID 1 S2 IUT Lumière Lyon 2

Reprenez le questionnaire créé lors du TP 3 et créez la base de données permettant de stocker les réponses. Ecrivez le code php pour l’insertion de ces données en base.

Page 6