PW

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 :
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 :
DEUXIEME PARTIE
4/37
Correction du TP 1

<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

Classe : 2me LFIAG

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
Salaires
Annes
Nord Sud Total
2005
10M
8M
18M
2006
14M 11M 25M
Exercice 3
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
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
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>
</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>
</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>
</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è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é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ê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ées)</sup></font></b></li>
<ul>
<li><b><i><h1>...</h1>&grave;<h6>...</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><hr></i></b></li>
<li><i><b><nobr>...</nobr></b></i></li>
</ul>
<li><b>Les styles de présentation.</b></li>
<li><b>Les polices de caractères.</b></li>
</ol>
</body>
</html>
11/37

Classe : 2me LFIAG

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>
<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><font color="#cc6600"><I>Venus sortant
<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><font color="#cc99ff"><I>Venus sortant
<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

Classe : 2me LFIAG

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

<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

Classe : 2me LFIAG

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

Classe : 2me LFIAG

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

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

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

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
-->
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);
?>
<br>Merci, l'tudiant
<b><?php echo($_POST['nom']." ".$_POST['prenom']);?></b>
<br>est bien t enregisr
</div>
<?php
}//fin du test d'existance
}else{?>
<h3>Saisie d'un nouveau tudiant</h3>
<hr size="2" width="50%">

<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">
<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
-->
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>
</div>
<?php
//connexion
?>
<?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>
<b> Pour le moment, il n'a aucun tudiant enregistr!!!</b>
</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
116
<b> Pour le moment, il n'a aucune tudiante enregistre!!!</b>
117
118
</div>
119
<?php
120
}
121
?>
122 </body>
123 </html>
33/37
1
2
3
4
5
<!-fichier : modif_Etudiant.php
-->
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
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
?>
<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">

<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);
?>
<br>Merci, l'tudiant <b><?php echo($_POST['nom']." ".$_POST['prenom']);?></b>
<br>est bien t enregisr
</div>
<?php
}
?>
</body>
</html>
35/37
1
2
3
4
5
<!-fichier : suppr_Etudiant.php
-->
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
//suppression de l'tudiant
$requete="delete from etudiant where NCIN='".$_GET['reference']."'";
mysql_query($requete);
?>
<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

PW

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

PW

Hochgeladen von

Copyright:

Verfügbare Formate

REPUBLIQUE TUNISIENNE

MINISTERE DE LENSEIGNEMENT SUPERIEUR ET DE

FASCICULE de Travaux pratiques

Anne Universitaire : 2009-2010

Table des matires

Anne Universitaire : 2009/2010 - Semestre 2

Classe : 2me LFIAG

2. La structure dune page Web en HTML

Un paragraphe centr constitu des 3 lignes

Anne Universitaire : 2009/2010 - Semestre 2

Classe : 2me LFIAG

B1 200 Deux 2000.00

14M 11M 25M

Comparatif modle conomique

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

Anne Universitaire : 2009/2010 - Semestre 2

Classe : 2me LFIAG

les liens hypertextes (A HREF)

Anne Universitaire : 2009/2010 Semestre 2

Classe : 2me LFIAG

Anne Universitaire : 2009/2010 Semestre 2

Classe : 2me LFIAG

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

Crer une base de donnes

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

Insrons un enregistrement de donnes.

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

Connexion au serveur de donnes ;

Slection de la base de donnes ;

Exploitation des rsultats de la requte.

1 tape : Connexion au serveur de donnes

tape : Slection de la base

int mysql_db(string database_name,[int link_identifier])

tape : Excution dune requte SQL

int mysql_query(string query)

tape : Exploitation dune requte SQL

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

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

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

Anne Universitaire : 2009/2010 Semestre 2

Facult des Sciences Juridiques,

Enseignants: Talel ZID - Riadh BOUSLIMI

II. Ajout dun enregistrement

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

2. Lancez lditeur de texte Bloc-notes ;

III. Affichage des enregistrements

1. Lancez lditeur de texte Bloc-notes ;

IV. Modification dun enregistrement

1. Lancez lditeur de texte Bloc-notes ;

V. Suppression dun enregistrement

1. Lancez lditeur de texte Bloc-notes ;

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

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

Das könnte Ihnen auch gefallen

<input type="submit" value="Valider">