PW

REPUBLIQUE TUNISIENNE

MMIINNIISSTTEERREE DDEE LLEENNSSEEIIGGNNEEMMEENNTT SSUUPPEERRIIEEUUR ET DE LA RECHERCHE SCIENTIFIQUES ET TECHNOLOGIQUES

UUNNIIVVEERRSSIITTEE DDEE JJEENNDDOOUUBBAA

FFAACCUULLTTEE DDEESS SSCCIIEENNCCEESS JJUURRIIDDIIQQUUEESS,, EECCOONNOOMMIIQQUUEESS EETT DDEE GGEESSTTIIOONN DDEE JJEENNDDOOUUBBAA

FASCICULE de Travaux pratiques

Programmation WEB

Adress aux tudiants de 2

me anne Licence Fondamentale en

Informatique Applique la Gestion

Equipe pdagogique : Talel ZID Riadh BOUSLIMI Matre-Assistant en Infomatique Technologue en Informatique

Anne Universitaire : 2009-2010

2/37

TTaabbllee ddeess mmaattiirreess

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

3/37

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

Titre de la page

.

.

Facult des Sciences Juridiques,

Economiques et de Gestion de Jendouba

Anne Universitaire : 2009/2010 - Semestre 2

Module : Programmation WEB

Classe : 2me

LFIAG

Enseignants: Talel ZID - Riadh BOUSLIMI

4/37

Lentte comprise entre et regroupe des informations qui ne seront pas

affiches dans la page par le navigateur.

Elle contient le titre du document entre et 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 et 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

2me


DEUXIEME PARTIE

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


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

5/37

Correction du TP 1

mise en forme de base PREMIERE PARTIE

je suis le premier paragraphe, je suis rouge

DEUXIEME PARTIE

je suis le 2emeparagraphe au center en taille 5 et en jaune

TROISIEME PARTIE

je suis le dernier paragraphe, je suis en taille7 avec la police Arial et droite

6/37

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

Exercice 2


Exercice 3






Classe : 2me

LFIAG


Annes Salaires

Nord Sud Total

2005 10M 8M 18M

2006 14M 11M 25M

A1 100 Un 1000.25

B1 200 Deux 2000.00

C1 300 Trois 3000.00

Comparatif modle conomique

Modle Vitesse

en km/heure

Consommation

en litre/100 km Marque Type Numero de srie

Peugeot 206 B2 234.34 132 5,7

Citron AX AT67B8 6789 126 5,5

7/37

Exercice 4


Exercice 5


color="#FF0000

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

8/37

Correction du TP 2

Exercice 1

Exercice 1 A1 100 Un 1000.25 B1 200 Deux 2000.00 C1 300 Trois 3000.00

Exercice 2

Exercice 2 Anne Salaire North South Total 2005 10M 8M 18M 2006 14M 11M

9/37

25M

Exercice 3 Exercice 3 Systme d'expoitation MerDos Vaindaube Unix Langages de programmation non orients objets Fortran Cobol C orients objets Java Perl Python Ruby Rseaux

Exercice 4

Exercice 4 Comparatif modle conomique

Modle Vitesseen km/heure

Consommationen litre/100 km

Marque Type Numero de srie

10/37

Peugeot 206 B2 234.34 132 5,7

Citron AX AT67B8 6789 126 5,5

Exercice 5 Les listes en langage HTML Tables des matires sur le langage HTML Introduction au langage HTML. Documents HTML. Avantage de HTML Structure d'une page Web. Balises. Attributs. Exemples Les entits HTML. Exemples Ossature d'un document HTML. L'en-tte Le titre Les commentaires Le corps

11/37

Quelques balises(toutes les balises ne sont pas traites)

...&grave;...>

Les niveaux 1, 2 et 3. Le niveau 4 Le niveau 5 et 6. ... Les styles de prsentation. Les polices de caractres.

12/37

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)

Sommaire.html

Travail faire

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





Classe : 2me

LFIAG


Left.html venus1.html Lapin.html

Phare.gif

runrabit.gif

venus.gif

13/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.

Venus1.html Venus2.html Venus3.html

Lapin.html Orque.html

color:#bbbbbb

color: #777777

color: #ff9900

color: #cc6600

color: #0099ff

color: #cc99ff

color:#888888

venus.gif

Runrabit.gif Orca.gif

14/37

Correction du TP 3

Left.html

TP3

Contenu du cadre "sommaire"

Au sommaire

Venus 1 Venus 2 Venus 3 Lapin Orque

Venus1.html

TP3

Contenu du cadre "principal"

Venus sortant du bain(dtail) Boticelli

15/37

Venus2.html

TP3



Venus3.html

TP3



Lapin.html

TP3

Contenu du cadre "cadre_droit" Et le lapin court, court et il court encore. Plus vite, plus loin, le lapin court toujours...

16/37

Orque.html

TP3

Contenu du cadre "cadre_droit"

Et l'orque saute, saute et saute encore. Plus haut, plus loin l'orque saute toujours

Sommaire.html

Programmation WEB TP3

17/37

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.



Anne Universitaire : 2009/2010 Semestre 2


Classe : 2me

LFIAG


18/37

Correction du TP 4

Les Formulaires

Civilit

Mademoiselle Madame Monsieur

Nom / Prnom

Adresse

Rue No Bote postale

No postal / Localit

Pays France Italie Tunisie

Plateforme(s)

Windows Macintosh

Unix

19/37

Applications(s) Bureautique DAO Statistiques SGBD Internet

20/37

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.





Classe : 2me

LFIAG


21/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 :

22/37

Insrons un enregistrement de donnes.

INSERT INTO liste VALUES ('', 'BOUSLIMI Riadh', '[email protected]');

Ou tout simplement :

23/37

Php/MySQLPhp/MySQLPhp/MySQLPhp/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.

1er 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.

2eme

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.

3eme

tape : Excution dune requte SQL

int mysql_query(string query)

Envoie au serveur mysql une instruction SQL excuter.

4eme

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.

24/37

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. Lancez EasyPhp ; 2. Crez la base de donnes MySQL dont son nom est TPMySQL ; 3. Crez la table Etudiant ; 4. Insrez dans la table Etudiant les champs suivants :

NCIN NOM PRENOM SEXE

07899039 KHAMIRI GHAYA F

08072024 NAIMI ATEF H

09450267 TOUIHRI ALAA H

07896864 HAMDI BOUTHEINA F

ML060005 TRAORE GAOUSSOU H

07883548 ECHI HAMDI H

07881322 SOLTANI MAHA F

07897135 AYEDI MARWA F

07895883 SAIDI SAMEH H

07885840 TOUIHRI EMNA F

07886810 OUHIIBI NAWEL 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.





Classe : 2me

LFIAG


25/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

26/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).

27/37

Figure n4

28/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

29/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

30/37

Correction du TP 6

1 2 3 4 5 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

Saisie d'un nouveau tudiant

31/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

Prnom : Sexe : Homme Femme Liste des tudiants

1 2 3 4 5 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

Liste des tudiants Liste des tudiants

32/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

Sexe Modif/Suppr

33/37

97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

34/37

1 2 3 4 5 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

Modification d'un tudiant Modifier un tudiant Nom :

35/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

Liste des tudiants

36/37

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

Suppression d'un tudiant est bien t supprim Retour

37/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/

PW

Documents

Transcript of PW