Vous êtes sur la page 1sur 24

Universit Sidi Mohamed ben Abdellah

Facult des Sciences et Techniques Fs


Dpartement de Gnie Industriel

Bases de donnes
et Internet
Travaux pratiques

Master Sciences et Techniques


en Gnie Industriel

Professeur : F. Kaghat

T.P. n 1 : HTML XHTML


Exercice 1 : Paragraphes
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

Exercice 2 : Lien sur une image


Soit le logo suivant :
msn.gif
Insrez ce logo dans votre page Web (n'omettez pas l'attribut alt). Puis associez-y un lien vers le
serveur de msn (l'image devient alors un "bouton").
Utilisez comme valeur pour l'attribut border la valeur 0.
Exercice 3 : Imbrication des listes (Listes ordonnes et non-ordonnes)
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

Exercice 4 : Imbrication des listes (Listes ordonnes et non-ordonnes)


Ralisez les diffrentes listes suivantes :
1

Liste puce :
Adresse : Facult des Sciences et Techniques de Fs, Maroc.
Tl : (212) 12 34 56 78 90
Fax : (212) 12 34 56 78 91
E-mail : html@gmail.com
Combinaison de listes numrote et puce :
1. Premier cycle universitaire :
Module 1 : Physique
Module 2 : Mathmatiques
2. Dexime cycle universitaire :
o Module 1 : Systmes dinformation
o Module 2 : Bases de donnes
3. Stage :
FST, Fs
Exercice 5 : liens hypertextes
Crer une page Web appele exerxice5.html qui permet daccder aux sites Web de quelques
ministres du Maroc (via des liens hypertextes) :
Ministre des finances
Ministre des travaux publics
Ministre de lducation nationale

Les liens insrs sont sur les adresses suivantes :


Ministre des finances :
http://www.mfi.gov.ma
Ministre des travaux publics :
http://www.tp.gov.ma
Ministre de lducation nationale :
http://www.men.gov.ma
Exercice 6 : Listes et liens hypertextes
Rdiger un code XHTML reproduisant aussi fidlement que possible le document ci-dessous
comprenant deux diffrents types de liste avec des liens.

Exercice 7 :
Le but de cet exercice est de crer un curriculum vitae en langage HTML. Nous serons
amen utiliser la balise <table> pour la cration des tableaux, <tr> pour l'ajout des lignes
et <td> pour l'insertion des cellules.
Crer une nouvelle page appele cv.html.
Saisir le texte suivant comme titre h2, couleur "bleu fonc" :
CURRICULUM VITAE
A la ligne suivante, taper le texte "Informations personnelles" en gras couleur darkred et puis
passer la ligne suivante.
Insrer le tableau suivant (sans bordure) :
Nom et prnom
Tlphone
Adresse

Soufiane Alami
061-10-10-10
111 Bd Bir Anzarane

Email

alami@yahoo.fr

Ajouter une barre sparatrice de taille 50% couleur grise.


A la ligne suivante, taper le texte "Formations initiales" en gras couleur darkred et puis on
saute la ligne.
Crer la liste suivante qui numre les diplmes obtenus :

2007 : Master en Gnie Industriel - FST de Fs

2005 : Licence Sciences et Techniques - FST de Fs

2002 : Bac science Math.


Marquer le texte FST de Fs comme lien hypertexte sur le site de la FST : http://www.fstusmba.ac.ma/. Insrer une barre sparatrice de taille 50% couleur grise. Mettre une
couleur d'arrire plan beige pour la page. Changer les couleurs des liens hypertextes en vert
fonc.
Ajouter un paragraphe contenant le texte crivez-moi align droite comme lien hypertexte sur
lemail : alami@yahoo.fr
Exercice 8
Faire correspondre chaque morceau de code droite sa dfinition gauche :
L'image de fond pour la page entire
Rend le tableau invisible
Le texte est rouge
Les dimensions de l'image
Un tableau de 60% de la largeur
La source d'une image
Le tableau est centr
Un lien relatif
La couleur de fond de cette cellule est rouge

<img width="314" height="293">


<table border="0">
<table width="60%">
<font color="#cc0000"></font>
<td bgcolor="#cc0000">
<table align="center">
<img src="fruits.jpg" />
<a href="exercice8.htm">Exercice 8</a>
<body background="bati.jpg">

T.P. n 2 : HTML - XHTML : Les tableaux


Exercice 1 : Tableaux
Ecrire une page XHTML qui contient le tableau suivant :
Valeur (million deuros)
Pays
Import
France
2.5
Espagne
12.4
Pays Bas
3.6
Total
18.5
Diffrence (I-E)
+1.8

Export
10.3
1.3
5.1
16.7

Exercice 2 : Tableaux et liens hypertextes


Ecrire une page XHTML qui contient le tableau suivant :
Les moteurs de recherche les plus utiliss
Utilisateurs uniques (en
Taux d'utilisation
millions)
Google
59,327
39,37%
Yahoo! Search
45,774
30,38%
Msn Search
44,651
29,63%
Exercice 3 : Tableaux : Mise en forme
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

Exercice 4
Le recrutement via Internet est un moyen virtuel pour mettre en place une solution
d'intermdiation entre l'offreur et le demandeur d'emploi. Le but de cet exercice est de raliser un
composant d'un site du recrutement Electronique ou ce qu'on appelle EJOB.
Crer une page Web appele rubriques.html dans laquelle on regroupe toutes les rubriques du site
selon la prsentation suivante :
Espace Entreprise
Dposer une offre
Consulter les CV
Forum entreprises
Espace tudiant
Dposer votre CV
Consulter les offres
Forum tudiants

Les rubriques doivent tre marques comme des liens hypertexte sur le vide pour le
moment. La mise en forme doit tre respecte et l'arrire plan des titres de ce sommaire doit
tre en bleu fonc et la couleur du texte blanche.
Exercice 5 :
Crer une page appele formations.html contenant le tableau suivant :
Nos Formations
Intitul de la formation
Systme d'information, Audit et Contrle de
gestion

Gnie Financier - Banque et Finance

Marketing et Commerce

o
o
o

Perspectives
Contrleur de gestion
Responsable administratif
Auditeur interne
Responsable d'tudes
Ingnieur conseil en systme d'information
Conseiller en gestion de patrimoine
Responsable du marketing de produits
financie
Ingnieur financier
Responsable d'tudes financires
Chef de produit
Conseiller en marchandising
Directeur commercial

Vers la fin du tableau ajouter le texte retour comme lien hypertexte qui permettra de revenir la
page index.htm.
Exercice 6 : Tableaux cellules recouvrantes
Soient les tableaux suivants:

Tableau 1

Tableau 2

Tableau 3

En utilisant les balises XHTML et les attributs adapts crire le code XHTML permettant de
dfinir ces tableaux:
Note: On sintressera dans cet exercice uniquement la structure des tableaux.
Exercice 7 : Tableaux cellules recouvrantes
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

Exercice 8 :
Crer une page web qui regroupe une liste des liens hypertextes pour des moteurs de
recherche et serveurs de messagerie gratuits sous forme du tableau suivant :
LISTE DES MOTEURS DE RECHERCHE
image

Le moteur google

image

Aller sur altavista

image

Rechercher avec carrefour


LES SERVEURS DE MESSAGERIE

image

Envoyer un message via yahoo

image

Le serveur de messagerie caramail

image

Aller sur hotmail

Les phrases soulignes doivent tre mises sous la forme indique ci -dessus et qui
reprsentent les adresses des serveurs web selon la correspondance suivante
Le moteur google
http://www.google.fr
Aller sur altavista
http://www.altavista.com
Rechercher par carrefour http://www.carrefour.fr
7

Le serveur yahoo
http://www.yahoo.fr
Le serveur caramail
http://www.caramail.com
Le serveur hotmail
http://www.hotmail.com
A ct de chaque ligne du tableau on affiche une petite image de dimension 30X30 pixels
cliquable suppose enregistre dans le mme dossier que la page et s'appelle puce.gif.
Exercice 9 :
Crer une page nomme cours.html qui permet l'internaute de tlcharger des supports de
cours gratuitement. La page possde le canevas suivant :
Supports gratuits
Dpannage du premier degr d'un rseau
Le SGBD ACCESS
Programmation Web en PHP
Cration des sites Web
Langage C++

word

tlcharger

pdf

tlcharger

word

tlcharger
tlcharger

word
pdf

tlcharger

Les couleurs et du texte doivent tre alterns d'une ligne une autre. Si la couleur de
l'arrire plan est claire, la couleur du premier plan est fonce. Appliquer les couleurs selon
votre got.
Marquer le texte Tlcharger comme lien hypertexte, dans l'ordre, sur les documents
suivants : Resaux.doc, access.pdf, php.doc, web.doc, cpp.pdf.

T.P. n 3 : HTML - XHTML :


Les formulaires
Exercice 1 :
Crer le code XHTML qui permet de concevoir le formulaire suivant :

Exercice 2 :
Crez une petite calculatrice permettant deffectuer des oprations arithmtiques lmentaires
(addition, soustraction, multiplication et division) sur deux oprandes.
1. Affichez un formulaire permettant, dans lordre, de saisir la premire oprande, puis de
slectionner lopration parmi une liste (champ SELECT), enfin de saisir la seconde oprande.
2. Remplacez le champ SELECT par des champs RADIO.

Exercice 3 :
1) Dans la page web exerxice.html, crez un formulaire pays compos au moins des lments
suivants :
un champ select pour slectionner le nom dun pays parmi Allemagne, Espagne, France et Italie
(respectez la casse en saisissant lattribut value des champs option du select),
un champ input de type text pour saisir sa superficie,
un champ input de type text pour saisir le nombre dhabitants de ce pays,
un champ textarea pour dcrire ce pays,
un champ input de type submit et de value Envoyer pour envoyer les informations au script
exercice.php,
un champ input de type reset et de value Effacer pour rinitialiser votre formulaire.
Mettez la valeur de lattribut method du formulaire get.
Exercice 4 :
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

10

Exercice 5 :
Ecrire un code XHTML qui permet de crer la page web de la structure suivante :

Exercice 6 :
Vous allez maintenant coder un formulaire complet destin collecter des informations auprs de
linternaute. Les informations le plus souvent demandes dans les formulaires sont les suivantes :
un nom dutilisateur ;
une adresse ;
une adresse de courrier lectronique ;
un mot de passe ;
la confirmation du mot de passe ;
une date de naissance ;
le genre (masculin/fminin) ;
les domaines dintrt ;
les hobbies.
Lorsque lutilisateur clique sur le bouton Submit, toutes les informations saisies dans le
formulaire sont traites par un script PHP.
Ecrire le code de la page Web affichant le formulaire HTML denregistrement dun site dachat
en ligne (voir figure ci-dessous, sauvegardez le fichier sous le nom index.htm).

11

Raliser ce formulaire HTML destin collecter des informations sur lutilisateur

12

T.P. n 4 : Feuilles de style en cascade (CSS)


Exercice 1 :
Complter le tableau suivant en donnant la signification de chacune des rgles de style suivantes :

h1 {
color: green;
text-align: right;
}
h2
{font-family: Lucida, Helvetica, Arial,
sans-serif;
font-weight: bold;
font-size: 18pt;
text-align: center;
color: black;}
h1, h2, h3, p { color: green; }

p em { color: red; }

ul {list-style-type: square}

a { color: blue; }

a:visited { color: purple; }

a:hover { color: white;


background-color: blue;}

10

a:active { color: purple; }

Code CSS
* { color: blue; }

Signification

Pour les hyperliens survols (avec le


pointeur de la souris), couleur blanc sur fond
bleu.

Exercice 2 :
Crer une feuille de style interne applique aux titres :
gras
taille 4
italique

13

Exercice 3 :
Crer une feuille de style interne applique aux liens hypertextes :
taille 10px
couleur rouge
pas de soulignement

Exercice 4 :
Crer une feuille de style interne applique aux listes puces :
gras
taille 12px
verdana

Exercice 5 :
Crer une feuille de style interne applique aux tableaux :
Largeur de 50%
Sans bordure
Lalignement des cellules au centre
Exercice 6 :
Crer un fichier externe qui regroupe tous les styles des exercices : 2, 3, 4 et 5.

Exercice 7 :
Ralisez la page Web reprsente par l'image ci-dessous :
d'abord en dfinissant un "embedded style sheet"
puis en dfinissant un "external" stylesheet

14

T.P. n 5
Installation de lenvironnement de
dveloppement. Programmation en PHP (1re
partie)
Documentation
Le site officiel de PHP est extrmement bien fait. La documentation de n'importe quelle fonction
est accessible depuis l'URL :
http://php.net/nom_de_la_fonction
N'oubliez pas de consulter les commentaires utilisateurs, car de trs nombreux commentaires
donnent des conseils trs utiles.
La documentation complte de PHP est disponible en franais ladresse :
http://www.php.net/manual/fr/
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numro du T.P.
z : numro de lexercice

Exercice 1 : phpinfo()
Recopiez le texte suivant dans un fichier ~/tp_4/essai.php :
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=''text/html; charset=ISO-8859-1" />
<title>mon premier script php</title>
</head>
<body>
<?php phpinfo() ?>
</body>
</html>
Vous pouvez visualiser ce que rend votre script l'adresse : http://localhost/tp_5/exercice_1.php
Exercice 2 :
1) Quelle est la diffrence entre un \n et un <br /> ?

15

2) Le fichier suivant peut-il tre enregistr avec lextension .php ou .htm ? O se fait le traitement
des donnes ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Insertion des donnes </title>
</head>
<body>
<form method="post" action="ajout.php" >
//Suite du formulaire
</form>
</body>
</html>
Exercice 3 :
1) Dclarer votre prnom dans une variable et faire afficher Bonjour suivi de la valeur de
cette variable.
2) Utiliser la fonction strtoupper pour faire afficher votre prnom en majuscule.
3) Utiliser la fonction strtolower pour faire afficher votre prnom en minuscule.
4) Utiliser la fonction strlen pour compter combien de caractres comporte votre variable.
5) Utiliser les caractres spciaux \n \r et \t puis comprendre leurs significations.
6) Utiliser <pre> et </pre> autour de votre code, si besoin, pour garder le format dsir
(preformated)
Exercice 4 :
1) Comment connatre la version de PHP utilise ?
2) Afficher le nom du navigateur ainsi que la date courante (au format 15 novembre 2010) en
haut droite de l'cran.
3) Ecrire un programme PHP qui affiche le nom du script en cours dexcution, ainsi que
l'adresse IP.

16

T.P. n 6
Programmation en PHP (2me partie)
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numro du T.P.
z : numro de lexercice

Exercice 1 :
1) crire un programme PHP qui affiche tous les nombres impairs entre 0 et 15000, par ordre
croissant : 1 3 5 7 ... 14995 14997 14999
2) crire un programme qui crit 500 fois Je dois faire des sauvegardes rgulires de mes
fichiers.
3) crire un programme PHP qui affiche la table de multiplication par 13 :
0*13=0
1*13=13
2*13=26
.
10*13=130
On ralisera cet exercice avec linstruction for.
4) Affecter une valeur la variable nbre ($nbre=5 ;) et afficher la somme des entiers de 1 nbre.
On ralisera cet exercice avec linstruction for puis avec linstruction while.
5) crire un programme qui calcule 30!.
Exercice 2 :
1) Remplir un tableau index de chanes de caractres avec quelques valeurs (premire chane,
deuxime chane, une autre chane,). Afficher toutes ces valeurs dans une liste puces laide
dune boucle pour tout lment ).
2) Remplir un tableau associatif avec le menu du restaurant universitaire. Chaque indice
reprsentant un jour de la semaine et chaque valeur stocke dans le tableau le nom du plat de
rsistance. Afficher le menu de la semaine dans une liste numrote laide dune boucle pour
tout lment en prcisant le jour de la semaine.
Lundi : Poulet
Mardi : Poisson
Mercredi : Frites
Jeudi : Gratin

17

Vendredi : Couscous
Exercice 3 : Instructions conditionnelles
On souhaite diffuser les messages suivants selon lheure de la journe o linternaute se
connecte:
Avant 7 heures : Vous tes bien matinal(e)
Entre 7 et 12 heures : Bonne Matine
Entre 12 et 18 heures : Bonne Journe
Entre 18 et 20 heures : Bonne Soire
Aprs 20 heures : Bonne nuit
Exercice 4 : Le test switch
Selon la valeur $prenom, le test switch devra faire afficher la phrase :
$prenom est un homme
(pour les valeurs Alain, Pierre et Vincent),
$prenom est une femme
(pour les valeurs Aline, Virginie et Marie),
ou bien
Je nai pas russi dterminer le sexe de $prenom
(dans tous les autres cas).
Exercice 5 :
Soit un tableau $note reprsentant les notes de la gamme : $note = array ("do", "r", "mi", "fa",
"sol", "la", "si", "do");
Parcourez le tableau avec la fonction foreach et affichez les notes dans un tableau HTML.
Exercice 6 :
Un tableau associatif contient les notes des tudiants en PHP
albert
12

dorothe
13

patrick
7

virginie
19

elias
10

hugo
7

sophie
16

thierry
17

stphane
15

A l'aide de boucle foreach, calculer la moyenne. Afficher le rsultat. Rappel : la moyenne


arithmtique est la somme des notes divise par l'effectif.
Exercice 7 :
Stocker la matrice ci-dessous dans un tableau deux dimensions puis, laide de deux boucles
pour imbriques, calculer la somme des valeurs contenues dans le tableau. Afficher le
rsultat.
1 3 5

9 0 2

18

T.P. n 7
Programmation en PHP (3me partie).
Traitement en PHP dun formulaire
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numro du T.P.
z : numro de lexercice

La variable systme Register_globals est dsactive dans le fichier de configuration de PHP :


php.ini.
Quand l'un de vos visiteurs entre les informations dans un formulaire, celles-ci sont rcupres
sous forme de variables. Le nom de ces variables dpend de la mthode d'envoi du formulaire.
Dans les exercices 1, 2, 3 et 5 la mthode d'envoi sera POST, il faut mettre comme nom
$_POST['nom_du_champ'].
Dans lexercice 4 la mthode d'envoi sera GET, il faut mettre comme nom
$_GET['nom_du_champ'].
Exercice 1 :
Ecrire une page qui demande par formulaire un entier positif entre 10 et 100 (mettre 37 comme
valeur par dfaut) et qui appelle en mode post une seconde page dont l'affichage est le carr et la
racine carre du nombre fourni. La variable php associe au nombre sera nomme mon_Nb. On
vrifiera que la valeur entre est bien un entier compris entre 10 et 100.
Remarque : La racine carre : sqrt().

19

Exercice 2 : Calculatrice
Crez une petite calculatrice permettant deffectuer des oprations arithmtiques lmentaires
(addition, soustraction, multiplication et division) sur deux oprandes.
1) Affichez un formulaire permettant, dans lordre, de saisir la premire oprande, puis de
slectionner lopration parmi une liste (champ SELECT), enfin de saisir la seconde oprande.
Associez ce formulaire le script effectuant le calcul et affichant le rsultat.
2) Remplacez le champ SELECT par des champs RADIO.

Exercice 3 : Conversion Euro


crire une paire formulaire/script PHP qui permette de convertir des Dirhams en Euros.
1) Crer le formulaire qui permet de saisir la valeur en dirhams.
2) Crer le script qui rcupre la valeur saisie, et affiche la conversion en Euro (NB : un euro =
11,50 Dhs).
3) Amliorer le script pour permettre l'internaute d'indiquer si la valeur saisie est en dirhams ou
en euro, et tenez en compte dans le script pour appliquer la conversion correspondante.
Exercice 4:
1) Dans la page web exerxice4.html, crez un formulaire pays compos au moins des lments
suivants :
un champ select pour slectionner le nom dun pays parmi Allemagne, Espagne, France et Italie
(respectez la casse en saisissant lattribut value des champs option du select),
un champ input de type text pour saisir sa superficie,
un champ input de type text pour saisir le nombre dhabitants de ce pays,
un champ textarea pour dcrire ce pays,
un champ input de type submit et de value Envoyer pour envoyer les informations au script
exercice4.php,
un champ input de type reset et de value Effacer pour rinitialiser votre formulaire.
Mettez la valeur de lattribut method du formulaire get.

20

2) Crez alors le fichier exercice4.php. Dans ce fichier, insrez des instructions permettant
dafficher dans lordre les donnes : nom, superficie, nombre dhabitants et description saisies
dans le formulaire pays.
3) Que constatez-vous dans la barre dadresse du navigateur lorsque vous saisissez et validez
dans le formulaire exercice4.html les donnes dun pays.
Exercice 5 :
Crer un formulaire qui possde les champs suivants: nom, prnom, tat civil (boutons radio
mari ou clibataire) et salaire.
Le formulaire calcule les impts pays de la manire suivante:
5% du salaire pour les salaires infrieurs 30000
10% du salaire pour les salaires entre 30000 et 60000
15% entre 60000 et 100000
10% en dessus de 100000
Si la personne est marie, rabais de 10%
Afficher les nom et prnom, le salaire et le montant d'impts pay par la personne.

21

T.P. n 8
Programmation en PHP (4me partie). Site web
de vente par correspondance
Remarque :
Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-le
depuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.php
Avec
y : numro du T.P.
z : numro de lexercice

Exercice 1 :
Crer une fonction addition acceptant 2 paramtres : $a et $b.
Cette fonction doit calculer un rsultat intermdiaire $r, tant laddition de $a et $b.
La fonction doit faire un retour la ligne avant de renvoyer ce rsultat $r.
Lappel de la fonction pourra se faire via des variables, ou directement grce des valeurs
numriques.
Ex : addition ($x,$y);
Ex : addition (14,6);
Exercice 2 :
La fonction mail permet denvoyer des emails.
Crez un couple formulaire/script PHP permettant de saisir les informations constituant un email,
et de lenvoyer.
Exercice 3 :
Une socit de vente de composants informatiques souhaite crer son site web de vente par
correspondance.
1) Ecrire un formulaire qui demande les informations suivantes : Nom, Prnom, Adresse, Code
postal, Ville, Tlphone du client suivis du questionnaire suivant :
Votre commande
Indiquez les composants que vous commandez (avec la quantit dsire)
Composant
Alimentation
Carte graphique
Disque dur
Graveur DVD
Carte mre
Mmoire RAM
Ventilateur de botier

Prix HT
65.00
299.00
105.00
58.00
152.00
49.00
15.00

Qt
1
1
1
1
1
1
1

22

Carte son
Processeur

107.00
246.00

1
1

Rglement par : Carte bancaire


Chque
Contre-remboursement
Indiquez le cadeau que vous choisissez (slection unique dun article : souris, 20 CD-R,
webcam)
Vos remarques (zone de texte)
2) Ecrire un script PHP qui affiche la facture du client selon ce quil a command.

23