C C PHP PHP 1 SEN

(1)

Date: NOM – Prénom : TP n° /6

Lycée professionnel

Pierre

MENDÈS-FRANCE

Sujet de Travaux Pratiques

1

^ère

SEN

C

C RÉER RÉER UN UN SITE SITE PHP PHP

Objectifs de la manipulation : Objectifs de la manipulation :

On souhaite créer une base de données répertoriant les anciens élèves.

Les élèves saisissent leurs informations depuis un site Web par l'intermédiaire d'un formulaire de saisies qui renseigne la base de données.

Le but du TP est de construire petit à petit le squelette de ce site Web.

1 )

1 ) Qu'est ce que le langage PHP ? Qu'est ce que le langage PHP ?

1.1 ) Que veut dire PHP ?

1.2 ) De quel langage de programmation le PHP et il proche ?

1.3 ) Grâce au schéma ci-dessous expliquez le fonctionnement du PHP. Pourquoi parle t'on de site « dynamique » ?

1.4 ) Quelles sont les différences entre un site « statique » et un site « dynamique » ?

1.5 ) Peut on mélanger des pages statiques (HTML) et dynamiques (PHP) dans un même site ? 1.6 ) Peut on mélanger instructions statiques (balises HTML) et instruction dynamiques

(programme PHP) dans une même page ?

2 )

2 ) Et MySQL ? Et MySQL ?

2.1 ) Qu'est-ce que MySQL ?

2.2 ) Qu'apporte MySQL au langage PHP ?

3 )

3 ) Et phpMyAdmin ? Et phpMyAdmin ?

3.1 ) Qu'est-ce que phpMyAdmin ?

3.2 ) Quel langage de programmation utilise phpMyAdmin ? 3.3 ) Quel type de base de données est géré par phpMyAdmin ?

4 )

4 ) Association PHP/MySQL Association PHP/MySQL

L'association d'une base de données et d'un langage de programmation permet aux site web (mais pas seulement) de prendre une toute autre dimension.

(2)

4.1 ) Donner un type de site web qui a besoin de cette association.

4.2 ) Donner un type de site web qui n’a pas besoin de cette association.

4.3 ) Citer au moins une autre association d'une base de donnée et d'un langage de programmation.

4.4 ) Cette association fonctionne t 'elle sous tous les OS courant ? Windows, Linux, Mac ?

5 )

5 ) Outils de programmation PHP Outils de programmation PHP

Pour réaliser cette manipulation nous aurons besoin d'utiliser : le langage PHP, une base de données MySQL, phpMyAdmin (pour travailler dans la base de données) mais aussi un serveur web.

5.1 ) Qu'est ce qu'un serveur web (ou serveur HTTP) ? 5.2 ) Donner le prix du serveur web apache

L'ensemble de ces outils (PHP-MySQL-phpMyAdmin-apache) est regroupé dans un bon nombre de logiciels.

5.3 ) La plupart ont un nom qui ce termine par AMP. Ex: Wamp, Mamp, Lamp,… Pourquoi ? Que veut dire Wamp ?

Pour notre manipulation nous allons utiliser XAMPP.

5.4 ) Quelle est la différence avec les autres « package amp » ?

6 )

6 ) Installation Installation

6.1 ) Charger la version alléger de xampp (xampplite) pour windows au format zip : http://www.apachefriends.org/fr/xampp.html

6.2 ) Quelle version de PHP utilise xampplite ? 6.3 ) Quelle version de MySQL utilise xampplite ? 6.4 ) Quelle version d'apache utilise xampplite ?

6.5 ) « Dé-zipper » le fichier à la racine du disque C:/ de manière à obtenir l'ensemble des fichiers et dossier dans le dossier C://xampplite/

6.6 ) Le serveur « apache » est un serveur web qui doit donc servir des page web en local.

=>Lancer un navigateur et saisir l'adresse http://localhost . Que ce passe t'il ?

6.7 ) Lancer le fichier « xampp-control.exe ». Ce programme permet de connaître et de modifier l'état des services de XAMPP. Qu'en est il des services apache et MySql ?

6.8 ) Lancer apache par un clic sur « start » (RQ: Si windows vous demande l'autorisation d'ajouter le programme apache à la liste des exception du pare-feu, répondre par oui) et refaire la manip 6.6 ). Que ce passe t'il maintenant ? Saisir l'adresse http://127.0.0.1 . Que ce passe t'il ? Expliquer ce qu'est l'adresse 127.0.0.1

6.9 ) Dans le menu de xampplite, cliquer sur statut. Quels sont les composants qui sont actifs ? 6.10 ) La base de données MySQL n'est pas active. Comment activer ce

composant ? Activer la base MySQL (RQ: Si windows vous demande l'autorisation d'ajouter la base de données à la liste des exception du pare- feu, répondre par oui) et revenir sur statut pour vérifier que la base est active.

Faire valider par le professeur

(3)

7 )

7 ) Serveur apache Serveur apache et interprétation du code PHP et interprétation du code PHP

Le serveur apache est un serveur web (ou plus précisément un serveur HTTP), c'est a dire qu'il va répondre aux requêtes envoyées par les navigateurs (Internet Explorer, Firefox, Chrome, …) en leur envoyant les fichiers (html, php ou autres) correspondant à cette requête. Pour xampp, le dossier dans lequel on doit placer les fichiers du site web est « htdocs ».

7.1 ) Copier le dossier « site1 » de la manip dans le dossier « htdocs » puis saisir l'adresse http://localhost/site1/page1.html dans votre navigateur. Que ce passe t'il ? Pourquoi parle t'on de « serveur http »?

7.2 ) Copier le dossier « site2 » de la manip dans le dossier « htdocs » puis saisir l'adresse http://localhost/site2/page1.php Que ce passe t'il ?

7.3 ) Analyser les deux fichiers (page1.html et page1.php) en les ouvrants avec un éditeur de texte comme notepad++ et donner les différences (s'il y en a).

7.4 ) Rechercher la balise qui permet d'insérer du code php dans une page html.

7.5 ) Grâce à cette balise php, écrire (dans le fichier page1.php du site2) entre les deux balises de saut de ligne ( ) la ligne :

<?php echo "Ceci est du texte écrit en PHP"; ?>

Dans votre navigateur saisir la ligne http://localhost/site2/page1.php

Demander à votre navigateur de vous afficher le code source de la page et comparer le à ce que contient le fichier page1.php. Que c'est il passer pour le code php ?

7.6 ) Dans tout programme il est très important de commenter son code.

Rechercher les deux moyens d'ajouter un commentaire au milieu du code php et ajouter un commentaire.

U

UTILISATIONTILISATIONDEDEVARIABLEVARIABLE

Les programmes ci-dessous utilisent des variables. Pour comprendre le rôle des variables, visiter la partie consacré à celles-ci sur le « site du zéro » :

http://www.siteduzero.com/tutoriel-3-14451-les-variables.html

7.7 ) Copier le dossier « site3 » de la manip dans le dossier « htdocs » puis éditer le fichier page1.php. Dans le script de la page modifier les chiffres de votre age et de votre taille contenus respectivement dans les variables $Votre_age et $Votre_taille.

Dans votre navigateur saisir la ligne http://localhost/site3/page1.php

7.8 ) Analyser le programme pour en faire un organigramme. RQ : demander de l'aide à votre professeur si cela vous paraît trop complexe.

7.9 ) Modifier le programme pour répondre au nouveau cahier des charges : - le test de majorité soit à 21 ans,

- les nouveaux seuils de tailles soit de 190 et 165,

- et que vous rajoutiez une phrase de résumé à la fin du texte php qui dit :

« Vous avez …. ans et vous mesurez …. m. ».

7.10 ) Afficher la taille en mètre en créant une nouvelle variable : $taille_en _m.

(4)

8 )

8 ) Gestion de la base MySQL avec phpMyAdmin Gestion de la base MySQL avec phpMyAdmin

Lancer phpMyAdmin : cliquer sur le bouton «Admin» de MySQL de l'application « XAMPP Control Panel Application ».

Nous allons créer une nouvelle base de données : bd_tp_php

dans laquelle il y aura la table : table1 qui comportera trois champs : id, age et taille.

RQ: Pour l’utilisation de phpMyAdmin vous pouvez vous reporter à la partie consacré à celles-ci sur le « site du zéro » :

http://www.siteduzero.com/tutoriel-3-14496-phpmyadmin.html

A la racine de phpMyAdmin créer la nouvelle base de donnée puis dans cette base créer la table1 comportant 3 champs.

8.1 ) Compléter ensuite les trois champs comme ci-dessous puis Sauvegarder

Après sauvegarde on visualise la structure de la table.

8.2 ) Pour que la base soit plus complète, nous allons ajouter le champs nom (de type texte et interclassement utf8_genera_ci) juste après le champ id dans la structure de la table.

(5)

8.3 ) Cliquer maintenant sur l'onglet Insérer du menu du haut pour pouvoir insérer vos nom, age et taille (le champ id se complète tout seul si vous avez coché l'auto-incrémentation pour ce champ), puis Exécuter.

8.4 ) Vérifier votre saisie à l'aide de l'onglet Rechercher.

9 )

9 ) Extraction des données de la base Extraction des données de la base

RQ: Pour la lecture des données vous pouvez vous reporter à la partie consacré à celles-ci sur le

« site du zéro » :

http://www.siteduzero.com/tutoriel-3-14506-lire-des-donnees.html

9.1 ) Copier le dossier « site4 » de la manip dans le dossier « htdocs » puis saisir l'adresse http://localhost/site4/page1.php . Que ce passe t'il ?

9.2 ) Retourner dans phpMyAdmin pour insérer le nom , la taille et l'age de plusieurs de vos camarades (au moins 5). Actualiser la page http://localhost/site4/page1.php . Que ce passe t'il ?

Éditer le fichier page1.php pour essayer de comprendre le script. Quel est le rôle de :

$reponse = mysql_query("SELECT * FROM table1 WHERE taille>'120'"); ? 9.3 ) Modifier le critère de sélection pour que la page affiche tout les

enregistrements des élèves mesurant plus de 170 cm.

9.4 ) Modifier le critère de sélection pour que la page affiche tout les enregistrements des élèves âgés de plus de 17 ans.

9.5 ) Nous allons maintenant faire un autre tris dans la base de données.

Pour cela nous allons ajouter les deux critères de sélection précédent à notre requête. RQ : Pour ajouter un autre critère il suffit de séparer les critère par un AND.

(6)

10 )

10 ) Insertion de données dans la base Insertion de données dans la base

Nous allons insérer les données dans la base par l’intermédiaire d'un formulaire de saisie placé dans une page web. La page contenant le formulaire peut tout a fait être une page HTML.

RQ: Pour insérer des données avec les formulaires vous pouvez vous reporter à la partie consacré à celles-ci sur le « site du zéro » :

http://www.siteduzero.com/tutoriel-3-14543-transmettre-des-donnees-avec-les-formulaires.html Dans notre cas nous allons créer cette page avec un éditeur « wysiwyg » appelé KOMPOZER.

10.1 ) Que veut dire wysiwyg ?

10.2 ) Quels sont les avantages et inconvénients de ce genre d'outils ?

10.3 ) Charger la version « portable » de la dernière édition du logiciel « KOMPOZER ».

10.4 ) Qu'est ce qu'une version « portable » d'un logiciel ?

10.5 ) Dans KOMPOZER commencez à créer votre page web html en mettant un titre en haut de la page puis en présentant avec un texte simple (à destination de l'internaute qui doit compléter ce formulaire) le fonctionnement de ce formulaire (voir image ci-dessous).

Plus bas dans la page, définir un formulaire de nom « formulaire de saisie » avec comme fichier à exécuter à l'envoi du formulaire « inscription.php » et comme méthode d'envoi : POST. Valider par OK. Kompozer crée alors un cadre bleu qui délimite le formulaire.

RQ : Pour vous aider a créer votre formulaire avec KOMPOZER vous pouvez vous aider de ce petit tutoriel :

http://info.sio2.be/kpz/5/2.php

10.6 ) Créer les trois champs de formulaire dont on a besoin : NOM, AGE et TAILLE (répéter 3 fois la procédure « Ajout d'un champ texte » du site proposé ci- dessus).

Attention à ne pas ce tromper dans les nom des champs (NOM, AGE et TAILLE).

10.7 ) Insérer un champs bouton de

validation (voir la procédure « Ajout de bouton de validation » du site proposé ci-dessus).

Le site doit être conforme à l'image ci-dessus.

Enregistrer votre page sous « Inscription_base.html » dans un dossier « site5 » de htdocs de XAMPP.

=> Notre page de saisies est maintenant créée. Il ne nous reste plus qu'à faire notre script PHP d'insertion dans la base. Ce script doit être placé dans un fichier qui doit s’appeler

« inscription.php » (c'est le nom que l'on a saisi dans la déclaration du formulaire).

(7)

Créer un fichier incription.php contenant le script ci-dessous et enregistrer le dans le dossier

« site5 ».

<?php

/*---

Programme d'insertion des données saisie grace au formulaire dans la base avec envoi sur la page de remeciement

---*/

//Connection à MySQL

mysql_connect("localhost", "root", ""); //serveur, utilisateur, mot de passe mysql_select_db("bd_tp_php"); //nom de la base de données

//récupération des données envoyées par le formulaire (méthode POST)

$nom = $_POST['NOM'];

$taille = $_POST['TAILLE'];

$age = $_POST['AGE'];

//Enregistre dans la base

mysql_query("INSERT INTO table1 VALUES('', '$nom', '$taille', '$age')") ;

echo "Vous avez inséré une nouvelle ligne dans la base. ";

echo "Contenu de la nouvelle inscription : ";

echo "NOM : $nom ";

echo "TAILLE : $taille ";

echo "AGE : $AGE ";

//Déconnection de MySQL mysql_close();

echo '<a href="Inscription_base.html">Retour à la page d\'inscription'; //Lien vers la page du formulaire

?>

10.8 ) Saisir l'URL « http://localhost/site5/Inscription_base.html ». Faire des inscriptions.

10.9 ) Vérifier grâce à phpMyAdmin que les inscriptions sont bien ajoutés à la base de données et observer qu'il y a une erreur dans l'ordre des champs et dans l'affichage de l'age.

10.10 ) Supprimer les mauvaises inscriptions de la base et modifier le fichier « inscription.php » pour supprimer cet erreur de script.

Faire valider par le professeur Faire valider

par le professeur

(8)

11 )

11 ) Création d'un site web répondant à un nouveau cahier des charges Création d'un site web répondant à un nouveau cahier des charges

En vous aidant de l'exemple ci dessus faire un petit site qui respectera le cahier des charges suivant : – Une page d'inscription dans la base et une page de visualisation des inscriptions

– Lors de l'inscription il sera demandé les Nom, Prénom, Age, Lieu de naissance, Taille et le Régime de pension (externe, demi-pension, interne).

– La page de visualisation permettra de visualiser l'ensemble des inscriptions puis de ne visualiser que les élèves en fonction de leur régime de pension.