Vous êtes sur la page 1sur 37

REPUBLIQUE TUNISIENNE

MINISTERE DE LENSEIGNEMENT SUPERIEUR ET DE


LA RECHERCHE SCIENTIFIQUES ET TECHNOLOGIQUES

UNIVERSITE DE JENDOUBA
FACULTE DES SCIENCES JURIDIQUES, ECONOMIQUES ET DE GESTION DE JENDOUBA

FASCICULE de Travaux pratiques


Programmation WEB
Adress aux tudiants de 2me anne Licence Fondamentale en
Informatique Applique la Gestion

Equipe pdagogique :

Talel ZID
Matre-Assistant en Infomatique

Riadh BOUSLIMI
Technologue en Informatique

Anne Universitaire : 2009-2010

Table des matires


TP n 1 ....................................................................................................................................... 3
Correction du TP 1 ................................................................................................................... 5
TP n 2 ....................................................................................................................................... 6
Correction du TP 2 .....................................................................................................................
TP n 3 ..................................................................................................................................... 12
Correction du TP 3 ................................................................................................................. 14
TP n 4 ..................................................................................................................................... 17
Correction du TP 4 ................................................................................................................. 18
TP n 5 ..................................................................................................................................... 20
TP n 6 ..................................................................................................................................... 24
Objectif .................................................................................................................................... 24
Correction du TP 6 ................................................................................................................. 30
Bibliographie........................................................................................................................... 37

2/37

Anne Universitaire : 2009/2010 - Semestre 2


Module : Programmation WEB
Facult des Sciences Juridiques,
Economiques et de Gestion de Jendouba

Classe : 2me LFIAG


Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 1
Objectif
Le but de ce TP c'est de comprendre la structure d'un document HTML et comment crer une
page HTML avec texte, titres et en-ttes et paragraphes.
HTML de base
le corps et l'en-tte
titre, texte, attributs de texte, sparateurs
mise en forme
caractres admissibles
1. Introduction
HTML = HyperText Marked Language

 HTML est un langage permettant de dcrire des donnes affichables sous forme de page
par un navigateur Web.
 HTML peut tre dit l'aide de n'importe quel traitement de texte
 HTML permet d'tablir des liens de navigation entre plusieurs pages Web
 HTML est galement un langage d'intgration. Il permet, l'aide de commandes
spcialises, d'incorporer des lments non purement textuels (graphismes mais galement
formulaires, programmes interactifs, animations, etc.)
 HTML est un langage riche et sa manipulation avec un simple diteur de texte s'avre
rapidement complexe. D'o la ncessit pour les dveloppeurs d'utiliser une gamme
d'outils prenant en charge la gnration automatique du code HTML.
Ce nest pas un langage de programmation.
Il est constitu de balises qui permettent de mettre en forme du texte et des images sur une
page Web avec des possibilits de navigation (liens hypertextes) au sein de ces pages.
Il suffit de possder un simple diteur de texte pour dfinir une page Web en HTML (le fichier
aura lextension .html) et un navigateur pour la visualiser.

2. La structure dune page Web en HTML


<HTML>
<HEAD>
<TITLE> Titre de la page </TITLE>
.
</HEAD>
<BODY>
.
</BODY>
</HTML>

3/37

Lentte comprise entre <HEAD> et </HEAD> regroupe des informations qui ne seront pas
affiches dans la page par le navigateur.
 Elle contient le titre du document entre <TITLE> et </TITLE> qui apparatra sur la
barre de titre de la fentre.
 Des mtadonnes comme le nom de lauteur, des mots-cls, un rsum, etc.
 Des scripts complmentaires crits en Javascript ou Java ou VBScripts qui compltent
les fonctionnalits de base du HTML.
 Le corps du document compris entre <BODY> et </BODY> reprsente ce qui
apparatra dans la fentre du navigateur.

3. Exercice de synthse
Vous allez crer une page, appele Base_HTML.html, qui fera apparatre plusieurs
mises en forme de paragraphes et de titres.
La page comprendra 3 parties. Il est conseill daller vrifier dans le navigateur votre
travail entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et
ractualisez la page dans le navigateur.
Description de la page crer :
Le fond de la page sera bleu et le texte blanc.
Le titre de la page sera :
Mise en forme de base

1re partie :
Un titre de niveau 1 centr :
PREMIERE PARTIE
Un paragraphe avec le texte suivant
en rouge :
Je suis le premier paragraphe, je suis
rouge
Une ligne sparatrice de taille 2 et de
couleur rouge

Un paragraphe centr constitu des 3 lignes


suivantes avec le texte jaune et de taille 5 :
Je suis le 2eme paragraphe
au centre
en taille 5 et en jaune
Une ligne sparatrice de taille 7, de 300 pixels de
longueur et de couleur noire

3me partie :
Un titre de niveau 3 centr :
TROISIEME PARTIE
Un paragraphe, droite comprenant le texte
suivant en taille 7 et la police Arial :
Je suis le dernier paragraphe, je suis en taille 7
avec la police Arial et droite

2me partie :
Un titre de niveau 2 centr :
DEUXIEME PARTIE

4/37

Correction du TP 1

<!-- Base_HTML.html-->
<html>
<head>
<title>mise en forme de base</title>
</head>
<body bgcolor="#0000ff" text="#ffffff">
<center ><h1>PREMIERE PARTIE</h1></center>
<p>
<font color="#ff0000">
je suis le premier paragraphe, je suis rouge
</font>
<hr size="2" color="#ff0000">
<center><h2>DEUXIEME PARTIE</h2></center>
<p align="center">
<font color="#ffff00" size="5">
<i>je suis le 2emeparagraphe</i><br>
<b> au center</b><br>
<u> en taille 5 et en jaune</u>
</font>
<hr size="7" width="300" color="#000000">
<center><h3>TROISIEME PARTIE</h3></center>
<p align="right">
<font face="arial" size="7">
je suis le dernier paragraphe, je suis en
taille7 avec la police Arial et droite
</font>
</body>
</html>

5/37

Anne Universitaire : 2009/2010 - Semestre 2


Module : Programmation WEB
Facult des Sciences Juridiques,
Economiques et de Gestion de Jendouba

Classe : 2me LFIAG


Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 2
Objectif
Le but de ce TP c'est de comprendre l'utilisation des tableaux ainsi que les listes et leurs
usages pour le contrle du placement des lments dans une page HTML
 tude des balises principales des tableaux (TABLE, TR, TD, TH, CAPTION) et de
leurs paramtres;
 insertion d'un tableau simple;
 les tableaux invisibles et le contrle du placement;
 tude des balises principales des listes (OL, UL, LI) et de leurs paramtres;
Exercice 1
Donner le document html qui permet d'obtenir
A1 100 Un

1000.25

B1 200 Deux 2000.00


C1 300 Trois 3000.00
Exercice 2
Donner le document html qui permet d'obtenir
Salaires
Annes
Nord Sud Total
2005

10M

8M

18M

2006

14M 11M 25M

Exercice 3
Donner le document html qui permet d'obtenir

Marque

Comparatif modle conomique


Modle
Consommation
Vitesse
en
km/heure
en litre/100 km
Type Numero de srie

Peugeot 206 B2
Citron AX AT67B8

234.34

132

5,7

6789

126

5,5

6/37

Exercice 4
Donner le document html qui permet d'obtenir
1. Systmes d'exploitation
MerDos
Vaindaube
Unix
2. Langages de programmation
non orients objets
Fortran
Cobol
C
orients objets
Java
Perl
Python
Ruby
3. Rseaux

Exercice 5
Donner le document html qui permet d'obtenir

color="#FF0000

7/37

Correction du TP 2
Exercice 1
<HTML>
<HEAD>
<TITLE>Exercice 1</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=30%>
<TR>
<TD>A1</TD>
<TD>100</TD>
<TD>Un</TD>
<TD>1000.25</TD>
</TR>
<TR>
<TD>B1</TD>
<TD>200</TD>
<TD>Deux</TD>
<TD>2000.00</TD>
</TR>
<TR>
<TD>C1</TD>
<TD>300</TD>
<TD>Trois</TD>
<TD>3000.00</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Exercice 2
<HTML>
<HEAD>
<TITLE>Exercice 2</TITLE>
</HEAD>
<BODY>
<TABLE width=20% border=1>
<TR>
<TD rowspan="2">Anne</TD>
<TD colspan="3" align="center">Salaire</TD>
</TR>
<TR>
<TD>North</TD>
<TD>South</TD>
<TD>Total</TD>
</TR>
<TR>
<TD>2005</TD>
<TD>10M</TD>
<TD>8M</TD>
<TD>18M</TD>
</TR>
<TR>
<TD>2006</TD>
<TD>14M</TD>
<TD>11M</TD>

8/37

<TD>25M</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Exercice 3
<HTML>
<HEAD>
<TITLE>Exercice 3</TITLE>
</HEAD>
<BODY>
<UL>
<LI>Systme d'expoitation</LI>
<UL>
<LI>MerDos</LI>
<LI>Vaindaube</LI>
<LI>Unix</LI>
</UL>
<LI>Langages de programmation</LI>
<UL>
<LI>non orients objets</LI>
<UL>
<LI>Fortran</LI>
<LI>Cobol</LI>
<LI>C</LI>
</UL>
<LI>orients objets</LI>
<UL>
<LI>Java</LI>
<LI>Perl</LI>
<LI>Python</LI>
<LI>Ruby</LI>
</UL>
</UL>
<LI>Rseaux</LI>
</UL>
</BODY>
</HTML>

Exercice 4
<HTML>
<HEAD>
<TITLE>Exercice 4</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=1>
<CAPTION>Comparatif modle conomique</CAPTION>
<TR>
<TH COLSPAN="3"><STRONG>Modle</STRONG>
<TH ROWSPAN="2"><STRONG>Vitesse<BR>en km/heure</STRONG>
<TH ROWSPAN="2"><STRONG>Consommation<BR>en litre/100 km</STRONG>
</TR>
<TR>
<TH><STRONG>Marque</STRONG></TH>
<TH><STRONG>Type</STRONG></TH>
<TH><STRONG>Numero de srie</STRONG></TH>

9/37

</TR>
<TR>
<TD>Peugeot 206</TD>
<TD>B2</TD>
<TD ALIGN=MIDDLE>234.34</TD>
<TD>132</TD>
<TD>5,7</TD>
</TR>
<TR>
<TD>Citron AX</TD>
<TD>AT67B8</TD>
<TD ALIGN=MIDDLE>6789</TD>
<TD>126</TD>
<TD>5,5</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Exercice 5
<html>
<head>
<title>Les listes en langage HTML</title>
</head>
<body>
<h2 align="center">Tables des mati&egrave;res sur le langage HTML</h2>
<hr width="90%" size="7">
<ol>
<li><b>Introduction au langage HTML.</b>
<ol type="a">
<li>Documents HTML.</li>
<li>Avantage de HTML</li>
<li>Structure d'une page Web.</li>
<li>Balises.</li>
<li>Attributs.
<ul>
<li><u>Exemples</u></li>
</ul>
</li>
<li>Les entit&eacute;s HTML.
<ul type="disc">
<li><u>Exemples</u></li>
</ul>
</li>
</ol>
</li>
<li><b>Ossature d'un document HTML.</b>
<ol>
<li><b>L'en-t&ecirc;te</b>
<ul>
<li><b>Le titre</b></li>
</ul>
</li>
<li><b>Les commentaires</b></li>
<li><b>Le corps</b></li>
</ol>
</li>

10/37

<li><b><font size="+1">Quelques balises<sup>(toutes les <i><font


color="#FF0000">balises</font></i>
ne sont pas trait&eacute;es)</sup></font></b></li>
<ul>
<li><b><i>&lt;h1&gt;...&lt;/h1&gt;&grave;&lt;h6&gt;...&lt;/h6&g
t;</i></b>
<ol type="A">
<li><font color="#FF0000">Les niveaux 1, 2 et 3.</font></li>
<li><font color="#ff0000">Le niveau 4</font></li>
<li><font color="#ff0000">Le niveau 5 et 6.</font></li>
</ol>
</li>
<li><b><i>&lt;hr&gt;</i></b></li>
<li><i><b>&lt;nobr&gt;...&lt;/nobr&gt;</b></i></li>
</ul>
<li><b>Les styles de pr&eacute;sentation.</b></li>
<li><b>Les polices de caract&egrave;res.</b></li>
</ol>
</body>
</html>

11/37

Anne Universitaire : 2009/2010 - Semestre 2


Module : Programmation WEB
Facult des Sciences Juridiques,
Economiques et de Gestion de Jendouba

Classe : 2me LFIAG


Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 3
Objectif
Le but de ce TP c'est de comprendre l'adressage, tre en mesure d'insrer des liens
hypertextes et des images dans une page et d'assimiler les paramtres obligatoires et
optionnels pour la balise IMG. Voir aussi comment changer l'aspect d'une page : couleurs,
fond, couleur et taille des caractres ainsi que la division de l'cran du navigateur en
plusieurs zones.






les liens hypertextes (A HREF)


insertion de liens sur des lments de texte
formats d'images permis
changer l'aspect d'une page : couleurs et fond, aspect des caractres
Les cadres (FRAMESET et FRAME)

venus.gif

runrabit.gif

Phare.gif

Left.html

venus1.html

Lapin.html

Sommaire.html
Travail faire
 Programmer les liens Venus1, Venus2 et Venus3 respectivement vers les pages html
Venus1.html, Venus2.html et Venus3.html ;

12/37

 Programmer les liens Lapin vers la page Lapin.html et Orque vers la page
Orque.html ;
 Les images seront sauvegardes dans le mme rpertoire que les pages HTML
[orque.gif, runrabit.gif, venus.gif, phare.gif] ;
 Programmer la page Left.html qui contienne tous les liens vers les autres pages ;
 Subdiviser la page Sommaire.html en trois parties et programmer les diffrents liens.
NB : Lorsquon clique sur les liens Venus 1, Venus 2, Venus 3 et Lapin la page Lapin.htm
sera affich dans le troisime cadre alors que le lien Orque permettra dafficher la page
Orque.htm.
venus.gif
color:#888888

Venus1.html
color:#bbbbbb

Venus2.html

Venus3.html
color: #0099ff

color: #ff9900
color: #777777

color: #cc6600

Runrabit.gif

color: #cc99ff

Orca.gif

Lapin.html

Orque.html

13/37

Correction du TP 3

Left.html
<HTML>
<head>
<title>TP3</title>
</head>
<body>
<p>
<font color="#000000" font size="2">
<I>Contenu du cadre "sommaire"</I>
</font>
<br>
<font color="#0000FF" size="3">Au sommaire</font>
<p><A href="Venus1.html" target=principale>Venus 1</A>
<p><A href="Venus2.html" target=principale>Venus 2</A>
<p><A href="Venus3.html" target=principale>Venus 3</A>
<br>
<p><A href="Lapin.html" target=cadre_droit>Lapin</A>
<p><A href="Orque.html" target=cadre_droit>Orque</A>
<br>
<br>
<p><IMG src="phare.gif" alt="phare">
</body>
</html>

Venus1.html
<HTML>
<head>
<title>TP3</title>
</head>
<body>
<p>
<I><font size="2">Contenu du cadre "principal"</font></I>
<div align=right>
<p><img src="venus.gif" alt="Venus">
<p><font color="#777777"><I>Venus sortant
<br> du bain</I><em><br>(dtail)</em></font>
<p><font color="#bbbbbb"><I><B>Boticelli</B></I></font>
</div>
</body>
</html>

14/37

Venus2.html
<HTML>
<head>
<title>TP3</title>
</head>
<body>
<p>
<I><font size="2">Contenu du cadre "principal"</font></I>
<div align=right>
<p><img src="venus.gif" alt="Venus">
<p><font color="#cc6600"><I>Venus sortant
<br> du bain</I><em><br>(dtail)</em></font>
<p><font color="#ff9900"><I><B>Boticelli</B></I></font>
</div>
</body>
</html>

Venus3.html
<HTML>
<head>
<title>TP3</title>
</head>
<body>
<p><I><font size="2">Contenu du cadre "principal"</font></I>
<div align=right>
<p><img src="venus.gif" alt="Venus">
<p><font color="#cc99ff"><I>Venus sortant
<br> du bain</I><em><br>(dtail)</em></font>
<p><font color="#0099ff"><I><B>Boticelli</B></I></font>
</div>
</body>
</html>

Lapin.html
<HTML>
<head>
<title>TP3</title>
</head>
<body bgcolor="#000000">
<p><font color="#FFFFFF"><I>Contenu du cadre "cadre_droit"</I></font>
<p><font color="#FFFFFF">Et le lapin court, court et il court encore.
Plus vite, plus loin, le lapin court toujours... </font>
<p><img src=runrabit.gif alt="Un lapin qui court">
</body>
</html>

15/37

Orque.html
<HTML>
<head>
<title>TP3</title>
</head>
<body bgcolor="#000000">
<p><font color="#FFFFFF"><I>Contenu du cadre "cadre_droit"</I></font>
<p><font color="#FFFFFF">Et l'orque saute, saute et saute encore.
Plus haut, plus loin l'orque saute toujours</font>
<p><img src=orca.gif alt=Orque>
</body>
</html>

Sommaire.html
<HTML>
<head>
<title>Programmation WEB TP3</title>
</head>
<frameset cols="20%,60%,20%">
<frame src=Left.html name=sommaire scrolling=no resize=no
marginwidth=0>
<frame src=venus1.html name=principale>
<frame src=Lapin.html name=cadre_droit scrolling=no resize=no
marginwidth=0>
</frameset>
</html>

16/37

Anne Universitaire : 2009/2010 Semestre 2


Module : Programmation WEB
Facult des Sciences Juridiques,
Economiques et de Gestion de Jendouba

Classe : 2me LFIAG


Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 4
Objectif
Ce TP est un premier pas vers l'interactivit par le biais des formulaires. L'tudiant verra en
dtail les diffrents lments constituant les formulaires
 les lments interactifs disponibles (botes de texte, listes de choix, boutons, rgion de
texte, etc).
 la balise FORM et ses paramtres
 comment btir un formulaire
Enonc : Reproduire lapparence de la page (formulaire.htm) de la faon la plus fidle possible.

Travail faire
Programmer les boutons Soumettre formulaire pour envoyer le contenu du formulaire
par email en utilisant la mthode (METHOD="POST"), le bouton Effacer qui permet
linitialisation du formulaire (vider les champs de saisies). La liste droulante contient les
options suivantes : France, Italie, Tunisie.

17/37

Correction du TP 4
<!-- Formulaire.htm -->
<HTML>
<HEAD>
<TITLE>Les Formulaires</TITLE>
</HEAD>
<BODY>
<FORM METHOD="GET" ACTION="nom_de_votre_page.html">
<CENTER>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="90%">
<TR>
<TD WIDTH="20%"><B>Civilit</B>
<TD WIDTH="70%">
<INPUT TYPE=RADIO NAME=civilite
VALUE="Mademoiselle">Mademoiselle
<INPUT TYPE=RADIO NAME=civilite
VALUE="Madame">Madame
<INPUT TYPE=RADIO NAME=civilite VALUE="Monsieur"
CHECKED>Monsieur
<TR>
<TD><B>Nom / Prnom</B></TD>
<TD> <INPUT TYPE=TEXT NAME=nom SIZE=50 MAXLENGTH=80></TD>
<TR>
<TD><B>Adresse</B></TD>
<TD><TEXTAREA NAME=adresse COLS=50 ROWS=2 >Rue No Bote
postale</TEXTAREA></TD>
<TR>
<TD><B>No postal / Localit</B></TD>
<TD><INPUT TYPE=TEXT NAME=no_postal Size=5 MAXLENGTH=4>
<INPUT TYPE=TEXT NAME=localite SIZE=20 MAXLENGTH=80
VALUE="Jendouba">
</TD>
<TR>
<TD><B>Pays</B> </TD>
<TD> <SELECT NAME=pays>
<OPTION>France
<OPTION>Italie
<OPTION SELECTED>Tunisie
</SELECT>
<TR>
<TD><B>Plateforme(s)</B></TD>
<TD><INPUT TYPE=CHECKBOX NAME=materiel VALUE="Windows"
CHECKED>Windows
<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Mac"
CHECKED>Macintosh
<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Unix">Unix
</TD>

18/37

<TR>
<TD><B>Applications(s)</B>
<TD><SELECT NAME=applications SIZE=5 MULTIPLE>
<OPTION SELECTED>Bureautique
<OPTION>DAO
<OPTION>Statistiques
<OPTION>SGBD
<OPTION SELECTED>Internet
</SELECT>
</TD>
</TR>
</TABLE>
<BR>
<INPUT TYPE=SUBMIT VALUE=" Soumettre formulaire
TYPE=RESET VALUE=" Effacer ">
</CENTER>
</FORM>
</BODY>
</HTML>

19/37

">

<INPUT

Anne Universitaire : 2009/2010 Semestre 2


Module : Programmation WEB
Facult des Sciences Juridiques,
Economiques et de Gestion de Jendouba

Classe : 2me LFIAG


Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 5
Objectif
Ce TP c'est d'apprendre crer une base de donnes sous MySQL en utilisant PhpMyAdmin
et apprendre la syntaxe de base de php permettant la manipulation cette dernire.
Rappel


MySQL est un systme de base de donnes gratuit et rapide, fonctionnant (entre


autres) sous Linux. Etant donn que la majorit des serveurs Web (dont le fameux
serveur Apache) fonctionnent sous Linux, MySQL est de ce fait le systme de base de
donnes le plus utilis avec PHP.

PhpMyAdmin qui se prsente comme un site Web (en local), est un ensemble de
scripts PHP permettant de grer aisment et visuellement MySQL sans devoir passer
par l'apprentissage du langage SQL.
PhpMyAdmin peut ainsi :
 crer et supprimer des bases de donnes.
 crer, modifier et supprimer des tables.
 diter et ajouter des champs.
 insrer des donnes.
 grer de multiples utilisateurs avec des permissions diffrentes.

20/37

Crer une base de donnes


 Crer une base de donnes avec PhpMyAdmin
Pour la suite de l'apprentissage de MySQL, nous aurons besoin d'une base de
donnes que nous allons crer par PhpMyAdmin.
Crons la base de donnes base sur le serveur MySQL.

Dans cette base de donnes, nous allons crer la table liste.


La table liste comportera 3 champs :
- un index id, un entier qui servira de cl primaire.
- un champ nom qui pourra contenir une chane de 50 caractres.
- un champ email qui pourra contenir une chane de 70 caractres.
Parmi les multiples possibilits offertes par PhpMyAdmin, retenons celle qui
permet d'encoder les requtes SQL.
CREATE TABLE liste (
id int NOT NULL auto_increment PRIMARY KEY,
nom varchar(50) NOT NULL,
email varchar(70) NOT NULL
)

Ou tout simplement :

21/37

Insrons un enregistrement de donnes.

INSERT INTO liste VALUES ('', 'BOUSLIMI Riadh',


'riadh_inform@yahoo.fr');

Ou tout simplement :

22/37

Php/MySQL
Lutilisation de MySQL avec Php seffectue en quatre tapes :


Connexion au serveur de donnes ;

Slection de la base de donnes ;

Excution de la requte ;

Exploitation des rsultats de la requte.

er

1 tape : Connexion au serveur de donnes


int mysql_connect(string hostname,string username,string password)
Pour se connecter, il faut dfinir ladresse du serveur de donnes ainsi que le
nom dutilisateur et le mot de passe. La valeur par dfaut de hostname est
localhost, de username est root et de password est
La fonction mysql_connect() retourne un entier permettant de vrifier
ltablissement de la connexion.
eme

tape : Slection de la base

int mysql_db(string database_name,[int link_identifier])


Le paramtre database_name est obligatoire, le paramtre link_identifier est
facultatif.
La fonction mysql_db retourne true ou false selon que lopration russit ou
non.
Si on ne donne pas le paramtre link_identifier, la fonction utilise la dernire
connexion ouverte.
eme

tape : Excution dune requte SQL

int mysql_query(string query)


Envoie au serveur mysql une instruction SQL excuter.
eme

tape : Exploitation dune requte SQL

Le traitement des donnes en rsultat est seulement pour les requtes de


slection. A la suite dune requte de slection, les donnes sont mises en
mmoire.
Pour pouvoir les exploiter, Php gre un pointeur de rsultat, c'est--dire quil
repre un enregistrement parmi les autres et lorsquon veut en lire un, cest qui
est point qui sera retourn et le pointeur est dplac vers lenregistrement
suivant.
La fonction de lecture du rsultat est :
array mysql_fetch_array(int result, int result_type)
Extrait la ligne sous forme dun tableau associatif.
Le paramtre result_type est facultatif. Il peut prendre les valeurs suivantes :


MYSQL_NUM : Le tableau ne contient que des indices numriques.

MYSQL_ASSOC : Le tableau ne contient que des indices associatifs.

MYSQL_BOTH : Le tableau contient la fois des indices numriques et


des indices associatifs. (cest la valeur qui est par dfaut).

int mysql_num_rows(int result) : retourne le nombre denregistrement qui ont


t retourns par la slection.

23/37

Anne Universitaire : 2009/2010 Semestre 2


Module : Programmation WEB
Classe : 2me LFIAG

Facult des Sciences Juridiques,


Economiques et de Gestion de Jendouba

Enseignants: Talel ZID - Riadh BOUSLIMI

TP n 6
Objectif
Le but de ce TP c'est de raliser un site web dynamique avec la technologie Php/MySQL.
 Apprendre excuter une page php en utilisant un serveur apache
 Connexion une base de donnes depuis une page php;
 Manipulation d'une base de donnes MySQL;
 Interroger et afficher depuis une page php le contenu une table dans une base de
donnes;
I. Cration de la base de donnes
On dispose de la classe tudiant suivante :
Etudiant
NCIN : VARCHAR(8)
NOM : VARCHAR(25)
PRENOM : VARCHAR(25)
SEXE :VARCHAR(1)

1.
2.
3.
4.

Lancez EasyPhp ;
Crez la base de donnes MySQL dont son nom est TPMySQL ;
Crez la table Etudiant ;
Insrez dans la table Etudiant les champs suivants :
NCIN
07899039
08072024
09450267
07896864
ML060005
07883548
07881322
07897135
07895883
07885840
07886810

NOM
KHAMIRI
NAIMI
TOUIHRI
HAMDI
TRAORE
ECHI
SOLTANI
AYEDI
SAIDI
TOUIHRI
OUHIIBI

PRENOM
GHAYA
ATEF
ALAA
BOUTHEINA
GAOUSSOU
HAMDI
MAHA
MARWA
SAMEH
EMNA
NAWEL

SEXE
F
H
H
F
H
H
F
F
H
F
F

II. Ajout dun enregistrement

1. Crez un rpertoire de travail tpphpmysql dans le chemin suivant :


C:\Program Files\EasyPHP1-8\www\

2. Lancez lditeur de texte Bloc-notes ;


3. Crer le fichier AjouterEtudiant.php qui permet de visualiser un formulaire de
saisie pour lajout dun nouveau tudiant. Lapparence de ce formulaire doit
ressembler la figure n1.

24/37

4. Lorsque lutilisateur clique sur le bouton Valider , la page est de nouveau appele
afin dinsrer les nouvelles donnes sur le nouveau tudiant dans la base de donnes
(figure n2). Le bouton Annuler permet dinitialiser le formulaire.
Programmer le lien hypertexte Liste des tudiants qui permet daccder la page
lstEtudiants.php .
NB : Avant dajouter un tudiant, il faut dabord sassurer que lutilisateur bien
saisie les donnes sur ltudiant, ensuite on test lexistence de ltudiant dans la base
de donnes. Sil est existant alors vous devez le signaler lutilisateur travers un
message (figure n3).

Figure n1

25/37

Figure n2

Figure n3

III. Affichage des enregistrements

1. Lancez lditeur de texte Bloc-notes ;


2. Crez le fichier lstEtudiants.php qui permet dafficher la liste des tudiants par
sexe et ordonne par nom et prnom selon lordre croissant. Cette liste doit tre sous la
forme dun tableau de 5 colonnes.
NB : La dernire colonne de ce tableau doit contenir 2 liens hypertextuels
modifier et supprimer , qui permettent dappeler respectivement les fichiers
modif_Etudiant.php et suppr_Etudiant.php qui effectuent les traitements
correspondants partir de la rfrence du NCIN qui doit tre passe en
paramtre.(figure n4).

26/37

Figure n4

27/37

IV. Modification dun enregistrement

1. Lancez lditeur de texte Bloc-notes ;


2. Crez le fichier modif_Etudiant.php qui permet de modifier un tudiant.
Lorsque lutilisateur clique sur le lien hypertexte Modifier (figure n5) dans la page
lstEtudiants.php la page modif_Etudiant.php apparatra avec un formulaire qui
contient les renseignement sur ltudiant en question (figure n6) .
Lorsque lutilisateur clique sur le bouton valider la figure n7 apparatra.

Figure n5

Figure n6

Figure n7

28/37

V. Suppression dun enregistrement

1. Lancez lditeur de texte Bloc-notes ;


2. Crez le fichier suppr_Etudiant.php qui permet de modifier un tudiant.
Lorsque lutilisateur clique sur le lien hypertexte Supprimer (figure n8) dans la
page lstEtudiants.php la page suppr_Etudiant.php apparatra avec un message
pour indiquer que la suppression a t effectu avec succs (figure n9) .

Figure n8

Figure n9

29/37

Correction du TP 6
1
2
3
4
5

<!-fichier : AjouterEtudiant.php
Auteur : Riadh BOUSLIMI
Module : Programmation WEB
-->

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<html>
<head>
<title>Saisie d'un nouveau tudiant</title>
</head>
<body>
<?php
if (!empty($_POST['ncin']) AND !empty($_POST['nom'])
AND !empty($_POST['prenom'])) {
//connexion
mysql_connect("localhost","root","");
//selection de la base de donnes
mysql_select_db("tpmysql");
//test d'existance de l'tudiant
$requete1="select * from etudiant where NCIN='".$_POST['ncin']."'";
$resultat=mysql_query($requete1);
if ($enreg=mysql_fetch_array($resultat)){
//l'tudiant est dj existant
?>
<div align="center">
<br>L'tudiant <b><?php echo($_POST['nom']." ".$_POST['prenom']);?></b>
<br>est dj existant!!!
<br><br><a href="AjouterEtudiant.php">Retour</a>
</div>
<?php
}else {
//insertion du nouveau tudiant
$requete2="insert into etudiant
values('".$_POST['ncin']."','".$_POST['nom']."',
'".$_POST['prenom']."','".$_POST['sexe']."')";
mysql_query($requete2);
?>
<div align="center">
<br>Merci, l'tudiant
<b><?php echo($_POST['nom']." ".$_POST['prenom']);?></b>
<br>est bien t enregisr
<br><br><a href="AjouterEtudiant.php">Retour</a>
</div>
<?php
}//fin du test d'existance
}else{?>
<div align="center">
<h3>Saisie d'un nouveau tudiant</h3>
<hr size="2" width="50%">
<!--Ici c'est le Formulaire-->
<form name="SaisieEtudiant" method="POST" action="AjouterEtudiant.php">
<table border="1">
<tr>
<td width="35%">N.C.I.N :</td>
<td width="65%"><input type="text" name="ncin"
value="" size="8" maxlength="8"></td>
</tr>
<tr>
<td width="35%">Nom :</td>

30/37

59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<td width="65%"><input type="text" name="nom" value=""


size="25" maxlength="25"></td>
</tr>
<tr>
<td width="35%">Prnom :</td>
<td width="65%"><input type="text" name="prenom"
value="" size="25" maxlength="25"></td>
</tr>
<tr>
<td width="35%">Sexe :</td>
<td width="65%">
<select name="sexe">
<option value="H">Homme</option>
<option value="F">Femme</option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" value="Valider">&nbsp;&nbsp;
<input type="reset" value="Annuler">
</form>
<a href="lstEtudiants.php">Liste des tudiants</a>
</div>
<?php
}
?>
</body>
</html>

1
2
3
4
5

<!-fichier : lstEtudiants.php
Auteur : Riadh BOUSLIMI
Module : Programmation WEB
-->

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<html>
<head>
<title>Liste des tudiants</title>
</head>
<body>
<div align="Left">
<h3>Liste des tudiants</h3>
<hr width="50%" size="2">
</div>
<?php
//connexion
mysql_connect("localhost","root","");
mysql_select_db("tpmysql");
?>
<?php
//Liste des tudiants dont le sexe est Homme
$requete_H="select * from etudiant where SEXE='H' order by NOM,PRENOM";
$resultat_H=mysql_query($requete_H);
if (mysql_num_rows($resultat_H)<>0){
?>
<div align="Left">
<br>
<h4>Sexe : <b>Homme</b></h4>
<table border="1" cellpaccing="2" cellpadding="0">
<tr>
<td><b>N C.I.N</b></td>
<td><b>Nom</b></td>
<td><b>Prnom</b></td>

31/37

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<td><b>Sexe</b></td>
<td><b>Modif/Suppr</b></td>
</tr>
<?php
while ($enreg_H=mysql_fetch_array($resultat_H)){
?>
<tr>
<td><?php echo $enreg_H["NCIN"];?></td>
<td><?php echo $enreg_H["NOM"];?></td>
<td><?php echo $enreg_H["PRENOM"];?></td>
<td><?php echo $enreg_H["SEXE"];?></td>
<td>
<a href="modif_Etudiant.php?reference=
<?php echo $enreg_H["NCIN"];?>
">Modifier</a>
<a href="suppr_Etudiant.php?reference=
<?php echo $enreg_H["NCIN"];?>
">Supprimer</a>
</td>
</tr>
<?php
}
?>
</table>
</div>
<?php
}else{
?>
<div align="Left">
<h4>Sexe : <b>Homme</b></h4>
<hr width="50%" size="2">
<b> Pour le moment, il n'a aucun tudiant enregistr!!!</b>
<hr width="50%" size="2">
</div>
<?php
}
?>
<?php
//Liste des tudiants dont le sexe est Femme
$requete_F="select * from etudiant where SEXE='F' order by NOM,PRENOM";
$resultat_F=mysql_query($requete_F);
if (mysql_num_rows($resultat_F)<>0){
?>
<div align="Left">
<br>
<h4>Sexe : <b>Femme</b></h4>
<table border="1" cellpaccing="2" cellpadding="0">
<tr>
<td><b>N C.I.N</b></td>
<td><b>Nom</b></td>
<td><b>Prnom</b></td>
<td><b>Sexe</b></td>
<td><b>Modif/Suppr</b></td>
</tr>
<?php
while ($enreg_F=mysql_fetch_array($resultat_F)){
?>
<tr>
<td><?php echo $enreg_F["NCIN"];?></td>
<td><?php echo $enreg_F["NOM"];?></td>
<td><?php echo $enreg_F["PRENOM"];?></td>
<td><?php echo $enreg_F["SEXE"];?></td>
<td>

32/37

97
<a href="modif_Etudiant.php?reference=
98
<?php echo $enreg_F["NCIN"];?>
99
">Modifier</a>
100
<a href="suppr_Etudiant.php?reference=
101
<?php echo $enreg_F["NCIN"];?>
102
">Supprimer</a>
103
</td>
104
</tr>
105
<?php
106
}
107
?>
108
</table>
109
</div>
110
<?php
111
}else{
112
?>
113
<div align="Left">
114
<h4>Sexe : <b>Femme</b></h4>
115
<hr width="50%" size="2">
116
<b> Pour le moment, il n'a aucune tudiante enregistre!!!</b>
117
<hr width="50%" size="2">
118
</div>
119
<?php
120
}
121
?>
122 </body>
123 </html>

33/37

1
2
3
4
5

<!-fichier : modif_Etudiant.php
Auteur : Riadh BOUSLIMI
Module : Programmation WEB
-->

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<html>
<head>
<title>Modification d'un tudiant</title>
</head>
<body>
<?php
//connexion
mysql_connect("localhost","root","");
mysql_select_db("tpmysql");
if (empty($_POST['ncin']) AND empty($_POST['nom'])
AND empty($_POST['prenom'])) {
//Info. sur l'tudiant
$requete1="select * from etudiant where NCIN='".$_GET['reference']."'";
$resultat=mysql_query($requete1);
if ($enreg=mysql_fetch_array($resultat)){
//Remplissage des renseignements sur l'tudiant en question
?>
<div align="center">
<h3>Modifier un tudiant</h3>
<hr size="2" width="50%">
<form name="ModifierEtudiant" method="POST" action="modif_Etudiant.php">
<table border="1">
<tr>
<td width="35%">Nom :</td>
<td width="65%"><input type="text" name="nom"
value="<?php echo $enreg['NOM'];?>"
size="25" maxlength="25">
</td>
</tr>
<tr>
<td width="35%">Prnom :</td>
<td width="65%"><input type="text" name="prenom"
value="<?php echo $enreg['PRENOM'];?>"
size="25" maxlength="25">
</td>
</tr>
<tr>
<td width="35%">Sexe :</td>
<td width="65%">
<select name="sexe">
<?php if (strcmp($enreg['SEXE'],"H")==0) {?>
<option value="H" selected>Homme</option>
<?php }else{?>
<option value="H">Homme</option>
<?php }?>
<?php if (strcmp($enreg['SEXE'],"F")==0) {?>
<option value="F" selected>Femme</option>
<?php }else{?>
<option value="F">Femme</option>
<?php }?>
</select>
</td>
</tr>
</table>
<input type="hidden" name="ncin" value="<?php echo $enreg['NCIN'];?>">
<br>

34/37

62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<input type="submit" value="Valider">&nbsp;&nbsp;


<input type="reset" value="Annuler">
</form>
<a href="lstEtudiants.php">Liste des tudiants</a>
</div>
<?php
} ?>
<?php
}else {
//modification de l'tudiant
$requete2="Update etudiant set NOM='".$_POST['nom'].
"',PRENOM='".$_POST['prenom'].
"',SEXE='".$_POST['sexe']."'
where NCIN='".$_POST['ncin']."'";
mysql_query($requete2);
?>
<div align="center">
<br>Merci, l'tudiant <b><?php echo($_POST['nom']." ".$_POST['prenom']);?></b>
<br>est bien t enregisr
<br><br><a href="AjouterEtudiant.php">Retour</a>
</div>
<?php
}
?>
</body>
</html>

35/37

1
2
3
4
5

<!-fichier : suppr_Etudiant.php
Auteur : Riadh BOUSLIMI
Module : Programmation WEB
-->

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<head>
<title>Suppression d'un tudiant</title>
</head>
<body>
<?php
//connexion
mysql_connect("localhost","root","");
mysql_select_db("tpmysql");
//suppression de l'tudiant
$requete="delete from etudiant where NCIN='".$_GET['reference']."'";
mysql_query($requete);
?>
<div align="center">
<br>Merci, l'tudiant au n C.I.N <b><?php echo($_GET['reference']);?></b>
<br>est bien t supprim
<br><br><a href="lstEtudiants.php">Retour</a>
</div>
</body>
</html>

36/37

Bibliographie
 Eric Daspet , Cyril Pierre de Geyer, PHP 5 avanc, Eyrolles.
 Sylvie Vauthier, PHP : Le tutoriel pour grands dbutants presss,
http://sylvievauthier.
 developpez.com/tutoriels/php/grand-debutant/
 http://j-willette.developpez.com/tutoriels/html/les-bases-du-html/

37/37