Polycopié Des Travaux Pratiques - TIC - Bases de Données Et Internet

8/17/2019 Polycopié Des Travaux Pratiques - TIC - Bases de Données Et Internet

1/24

Université Sidi Mohamed ben AbdellahFaculté des Sciences et Techniques FèsDépartement de Génie Industriel

Bases de donnéeset Internet

Travaux pratiques

Master Sciences et Techniquesen Génie Industriel

Professeur : F. Kaghat


2/24

1

T.P. n° 1 : HTML – XHTML

Exercice 1 : ParagraphesEcrire un code XHTML qui permet de créer la page web de la structure suivante :

Exercice 2 : Lien sur une imageSoit le logo suivant :

Insérez ce logo dans votre page Web (n'omettez pas l'attribut alt). Puis associez-y un lien vers leserveur de msn (l'image devient alors un "bouton").Utilisez comme valeur pour l'attribut border la valeur 0.

Exercice 3 : Imbrication des listes (Listes ordonnées et non-ordonnées)Ecrire un code XHTML qui permet de créer la page web de la structure suivante :

Exercice 4 : Imbrication des listes (Listes ordonnées et non-ordonnées)Réalisez les différentes listes suivantes :

msn.gif


3/24

2

Liste à puce : Adresse : Faculté des Sciences et Techniques de Fès, Maroc. Tél : (212) 12 34 56 78 90 Fax : (212) 12 34 56 78 91 E-mail : [email protected]

Combinaison de listes numérotée et à puce :1.

Premier cycle universitaire : Module 1 : Physique Module 2 : Mathématiques

2. Dexième cycle universitaire :o Module 1 : Systèmes d‘informationo Module 2 : Bases de données

3. Stage : FST, Fès

Exercice 5 : liens hypertextesCréer une page Web appelée exerxice5.html qui permet d’accéder aux sites Web de quelquesministères du Maroc (via des liens hypertextes) :

Ministère des finances Ministère des travaux publics Ministère de l’éducation nationale

Les liens insérés sont sur les adresses suivantes :Ministère des finances : http://www.mfi.gov.maMinistère des travaux publics : http://www.tp.gov.maMinistère de l’éducation nationale : http://www.men.gov.ma

Exercice 6 : Listes et liens hypertextesRédiger un code XHTML reproduisant aussi fidèlement que possible le document ci-dessouscomprenant deux différents types de liste avec des liens.

http://mfi.gov.ma/http://mfi.gov.ma/http://www.tp.gov.ma/http://www.tp.gov.ma/http://www.meni.gov.ma/http://www.meni.gov.ma/http://www.meni.gov.ma/http://www.meni.gov.ma/http://www.tp.gov.ma/http://mfi.gov.ma/


4/24

3

Exercice 7 :Le but de cet exercice est de créer un curriculum vitae en langage HTML. Nous seronsamené à utiliser la balise pour la création des tableaux, pour l'ajout des ligneset pour l'insertion des cellules.Créer une nouvelle page appelée cv.html.

Saisir le texte suivant comme titre h2, couleur "bleu foncé" :CURRICULUM VITAEA la ligne suivante, taper le texte "Informations personnelles" en gras couleur darkred et puis passer à la ligne suivante.

Insérer le tableau suivant (sans bordure) :

Nom et prénom Soufiane AlamiTéléphone 061-10-10-10Adresse 111 Bd Bir Anzarane

Email [email protected]

Ajouter une barre séparatrice de taille 50% couleur grise.A la ligne suivante, taper le texte "Formations initiales" en gras couleur darkred et puis onsaute la ligne.Créer la liste suivante qui énumère les diplômes obtenus : 2007 : Master en Génie Industriel - FST de Fès 2005 : Licence Sciences et Techniques - FST de Fès 2002 : Bac science Math.

Marquer le texte FST de Fès comme lien hypertexte sur le site de la FST : http://www.fst-usmba.ac.ma/. Insérer une barre séparatrice de taille 50% couleur grise. Mettre une

couleur d'arrière plan beige pour la page. Changer les couleurs des liens hypertextes en vertfoncé.Ajouter un paragraphe contenant le texte écrivez-moi aligné à droite comme lien hypertexte surl’email : [email protected]

Exercice 8Faire correspondre à chaque morceau de code à droite sa définition à gauche :

L'image de fond pour la page entière 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 Exercice 8La couleur de fond de cette cellule est rouge

http://www.fst-usmba.ac.ma/http://www.fst-usmba.ac.ma/http://www.fst-usmba.ac.ma/mailto:[email protected]:[email protected]:[email protected]:[email protected]://www.fst-usmba.ac.ma/http://www.fst-usmba.ac.ma/


5/24

4

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

Exercice 1 : TableauxEcrire une page XHTML qui contient le tableau suivant :

Valeur (million d’euros) Pays Import ExportFrance 2.5 10.3Espagne 12.4 1.3Pays Bas 3.6 5.1Total 18.5 16.7Différence (I-E) +1.8

Exercice 2 : Tableaux et liens hypertextesEcrire une page XHTML qui contient le tableau suivant :

Les moteurs de recherche les plus utilisésUtilisateurs uniques (enmillions)

Taux d'utilisation

Google 59,327 39,37%Yahoo! Search 45,774 30,38%Msn Search 44,651 29,63%

Exercice 3 : Tableaux : Mise en formeEcrire un code XHTML qui permet de créer la page web de la structure suivante :

http://www.google.com/http://www.google.com/http://www.yahoo.com/http://www.yahoo.com/http://www.msn.com/http://www.msn.com/http://www.msn.com/http://www.yahoo.com/http://www.google.com/


6/24

5

Exercice 4Le recrutement via Internet est un moyen virtuel pour mettre en place une solutiond'intermédiation entre l'offreur et le demandeur d'emploi. Le but de cet exercice est de réaliser uncomposant d'un site du recrutement Electronique ou ce qu'on appelle EJOB.Créer une page Web appelée rubriques.html dans laquelle on regroupe toutes les rubriques du site

selon la présentation suivante :

Les rubriques doivent être marquées comme des liens hypertexte sur le vide pour lemoment. La mise en forme doit être respectée et l'arrière plan des titres de ce sommaire doitêtre en bleu foncé et la couleur du texte blanche.

Exercice 5 :Créer une page appelée formations.html contenant le tableau suivant :

Nos Formations Intitulé de la formation Perspectives

Système d'information, Audit et Contrôle degestion

Contrôleur de gestion Responsable administratif

Auditeur interne Responsable d'études Ingénieur conseil en système d'information

Génie Financier - Banque et Finance

Conseiller en gestion de patrimoine Responsable du marketing de produits

financie Ingénieur financier Responsable d'études financières

Marketing et Commerceo

Chef de produito Conseiller en marchandisingo

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 recouvrantesSoient les tableaux suivants:

Espace Entreprise

» Déposer une offre

» Consulter les CV

» Forum entreprises

Espace Étudiant

» Déposer votre CV

» Consulter les offres

» Forum étudiants


7/24

6

En utilisant les balises XHTML et les attributs adaptés écrire le code XHTML permettant dedéfinir ces tableaux: Note: On s’intéressera dans cet exercice uniquement à la structure des tableaux.

Exercice 7 : Tableaux à cellules recouvrantesEcrire un code XHTML qui permet de créer la page web de la structure suivante :

Tableau 2Tableau 1

Tableau 3


8/24

7

Exercice 8 :Créer 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 soulignées doivent être mises sous la forme indiquée ci-dessus et quireprésentent les adresses des serveurs web selon la correspondance suivante

Le moteur google http://www.google.frAller sur altavista http://www.altavista.comRechercher par carrefour http://www.carrefour.fr


9/24

8

Le serveur yahoo http://www.yahoo.frLe serveur caramail http://www.caramail.comLe serveur hotmail http://www.hotmail.com

A côté de chaque ligne du tableau on affiche une petite image de dimension 30X30 pixelscliquable supposée enregistrée dans le même dossier que la page et s'appelle puce.gif.

Exercice 9 :Créer une page nommée cours.html qui permet à l'internaute de télécharger des supports decours gratuitement. La page possède le canevas suivant :

Supports gratuits

Dépannage du premier degré d'un réseau wordtélécharger

Le SGBD ACCESS pdf télécharger

Programmation Web en PHP word télécharger

Création des sites Web word télécharger

Langage C++ pdf télécharger

Les couleurs et du texte doivent être alternés d'une ligne à une autre. Si la couleur del'arrière plan est claire, la couleur du premier plan est foncée. Appliquer les couleurs selonvotre goût.Marquer le texte Télécharger comme lien hypertexte, dans l'ordre, sur les documentssuivants : Resaux.doc, access.pdf, php.doc, web.doc, cpp.pdf.


10/24

9

T.P. n° 3 : HTML - XHTML :Les formulaires

Exercice 1 : Créer le code XHTML qui permet de concevoir le formulaire suivant :

Exercice 2 : Créez une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires(addition, soustraction, multiplication et division) sur deux opérandes.1. Affichez un formulaire permettant, dans l’ordre, de saisir la première opérande, puis desélectionner l’opération parmi une liste (champ SELECT), enfin de saisir la seconde opérande.2. Remplacez le champ SELECT par des champs RADIO.


11/24

10

Exercice 3 : 1) Dans la page web exerxice.html, créez un formulaire pays composé au moins des élémentssuivants :• un champ select pour sélectionner le nom d’un pays parmi Allemagne, Espagne, France et Italie (respectez la casse en saisissant l’attribut 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 d’habitants de ce pays, • un champ textarea pour décrire ce pays ,• un champ input de type submit et de value Envoyer pour envoyer les informations au scriptexercice.php,• un champ input de type reset et de value Effacer pour réinitialiser votre formulaire.Mettez la valeur de l’attribut method du formulaire à get .

Exercice 4 :Ecrire un code XHTML qui permet de créer la page web de la structure suivante :


12/24

11

Exercice 5 : Ecrire un code XHTML qui permet de créer la page web de la structure suivante :

Exercice 6 : Vous allez maintenant coder un formulaire complet destiné à collecter des informations auprès del’internaute. Les informations le plus souvent demandées dans les formulaires sont les suivantes :

un nom d’utilisateur ; une adresse ; une adresse de courrier électronique ; un mot de passe ;

la confirmation du mot de passe ;

une date de naissance ; le genre (masculin/féminin) ; les domaines d’intérêt ; les hobbies.

Lorsque l’utilisateur clique sur le bouton Submit, toutes les informations saisies dans leformulaire sont traitées par un script PHP.

Ecrire le code de la page Web affichant le formulaire HTML d’enregistrement d’un site d’acha ten ligne (voir figure ci-dessous, sauvegardez le fichier sous le nom index.htm).


13/24

12

Réaliser ce formulaire HTML destiné à collecter des informations sur l’utilisateur


14/24

13

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

Exercice 1 :

Compléter le tableau suivant en donnant la signification de chacune des règles de style suivantes :Code CSS Signification

1 * { color: blue; }

2 h1 {color: green;text-align: right;}

3 h2{font-family: Lucida, Helvetica, Arial,

sans-serif;font-weight: bold;font-size: 18pt;text-align: center;color: black;}

4 h1, h2, h3, p { color: green; }

5 p em { color: red; }

6 ul {list-style-type: square}

7 a { color: blue; }

8 a:visited { color: purple; }

9 a:hover { color: white; background-color: blue;}

Pour les hyperliens survolés (avec le pointeur de la souris), couleur blanc sur fond bleu.

10 a:active { color: purple; }

Exercice 2 :Créer une feuille de style interne appliquée aux titres :

gras taille 4 italique


15/24

14

Exercice 3 :Créer une feuille de style interne appliquée aux liens hypertextes :

taille 10px couleur rouge

pas de soulignement

Exercice 4 :Créer une feuille de style interne appliquée aux listes à puces :

gras

taille 12px verdana

Exercice 5 :Créer une feuille de style interne appliquée aux tableaux :

Largeur de 50% Sans bordure

L’alignement des cellules au centre

Exercice 6 :Créer un fichier externe qui regroupe tous les styles des exercices : 2, 3, 4 et 5.

Exercice 7 :Réalisez la page Web représentée par l'image ci-dessous :

d'abord en définissant un "embedded style sheet" puis en définissant un "external" stylesheet


16/24

15

T.P. n° 5Installation de l’environnement de

développement. Programmation en PHP (1ère

partie)

DocumentationLe site officiel de PHP est extrêmement bien fait. La documentation de n'importe quelle fonctionest accessible depuis l'URL :http://php.net/nom_de_la_fonction N'oubliez pas de consulter les commentaires utilisateurs, car de très nombreux commentairesdonnent des conseils très utiles.La documentation complète de PHP est disponible en français à l’adresse :http://www.php.net/manual/fr/

Remarque :Enregistrez toujours votre fichier sur votre serveur web en tp_y/exercice_z.php et ouvrez-ledepuis votre navigateur : http://xxx.xxx.xxx.xxx/tp_y/ exercice_z.phpAvecy : numéro du T.P.z : numéro de l’exercice

Exercice 1 : phpinfo()Recopiez le texte suivant dans un fichier ~/tp_4/essai.php :


17/24

16

2) Le fichier suivant peut-il être enregistré avec l’extension .php ou .htm ? Où se fait le traitementdes données ?

Insertion des données

//Suite du formulaire

Exercice 3 :1) Déclarer votre prénom dans une variable et faire afficher « Bonjour » suivi de la valeur decette variable.2) Utiliser la fonction strtoupper pour faire afficher votre prénom en majuscule.3) Utiliser la fonction strtolower pour faire afficher votre prénom en minuscule.4) Utiliser la fonction strlen pour compter combien de caractères comporte votre variable.5) Utiliser les caractères spéciaux \n \r et \t puis comprendre leurs significations.6) Utiliser et autour de votre code, si besoin, pour garder le format désiré(preformated)

Exercice 4 :1) Comment connaître la version de PHP utilisée ?2) Afficher le nom du navigateur ainsi que la date courante (au format 15 novembre 2010) enhaut à droite de l'écran.3) Ecrire un programme PHP qui affiche le nom du script en cours d’exécution, ainsi quel'adresse IP.


18/24

17

T.P. n° 6Programmation en PHP (2ème partie)


Exercice 1 :1) Écrire un programme PHP qui affiche tous les nombres impairs entre 0 et 15000, par ordrecroissant : « 1 3 5 7 ... 14995 14997 14999 »

2) Écrire un programme qui écrit 500 fois « Je dois faire des sauvegardes régulières de mesfichiers. »

3) Écrire un programme PHP qui affiche la table de multiplication par 13 :0*13=01*13=132*13=26………………. 10*13=130On réalisera cet exercice avec l’instruction for.

4) Affecter une valeur à la variable nbre ($nbre=5 ;) et afficher la somme des entiers de 1 à nbre.On réalisera cet exercice avec l’instruction for puis avec l’instruction while.

5) Écrire un programme qui calcule 30!.

Exercice 2 :1) Remplir un tableau indexé de chaînes de caractères avec quelques valeurs (première chaîne,deuxième chaîne, une autre chaîne,…). Afficher toutes ces valeurs dans une liste à puces à l’aided’une boucle « pour tout élément »).

2) Remplir un tableau associatif avec le menu du restaurant universitaire. Chaque « indice »représentant un jour de la semaine et chaque valeur stockée dans le tableau le nom du plat derésistance. Afficher le menu de la semaine dans une liste numérotée à l’aide d’une boucle « pourtout élément » en précisant le jour de la semaine.Lundi : PouletMardi : PoissonMercredi : FritesJeudi : Gratin


19/24

18

Vendredi : Couscous

Exercice 3 : Instructions conditionnellesOn souhaite diffuser les messages suivants selon l’heure de la journée où l’internaute seconnecte:

Avant 7 heures : « Vous êtes bien matinal(e) »Entre 7 et 12 heures : « Bonne Matinée »Entre 12 et 18 heures : « Bonne Journée »Entre 18 et 20 heures : « Bonne Soirée »Après 20 heures : « Bonne nuit »

Exercice 4 : Le test switchSelon 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 n’ai pas réussi à déterminer le sexe de $prenom » (dans tous les autres cas).

Exercice 5 :Soit un tableau $note représentant 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 dorothée patrick virginie elias hugo sophie thierry stéphane

12 13 7 19 10 7 16 17 15

A l'aide de boucle foreach, calculer la moyenne. Afficher le résultat. Rappel : la moyennearithmétique est la somme des notes divisée par l'effectif.

Exercice 7 :Stocker la matrice ci-dessous dans un tableau à deux dimensions puis, à l’aide de deux boucles« pour » imbriquées, calculer la somme des valeurs contenues dans le tableau. Afficher le

résultat.

209

531


20/24

19

T.P. n° 7Programmation en PHP (3ème partie).Traitement en PHP d’un formulaire


La variable système Register_globals est désactivée dans le fichier de configuration de PHP : php.ini.Quand l'un de vos visiteurs entre les informations dans un formulaire, celles-ci sont récupéréessous forme de variables. Le nom de ces variables dépend de la méthode d'envoi du formulaire.Dans les exercices 1, 2, 3 et 5 la méthode d'envoi sera POST, il faut mettre comme nom$_POST['nom_du_champ'].Dans l’exercice 4 la méthode 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 commevaleur par défaut) et qui appelle en mode post une seconde page dont l'affichage est le carré et laracine carrée du nombre fourni. La variable php associée au nombre sera nommée mon_Nb. Onvérifiera que la valeur entrée est bien un entier compris entre 10 et 100.Remarque : La racine carrée : sqrt().


21/24

20

Exercice 2 : Calculatrice Créez une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires(addition, soustraction, multiplication et division) sur deux opérandes.1) Affichez un formulaire permettant, dans l’ordre, de saisir la première opérande, puis de

sélectionner l’opération parmi une liste (champ SELECT), enfin de saisir la seconde opérande.Associez à ce formulaire le script effectuant le calcul et affichant le résultat.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) Créer le formulaire qui permet de saisir la valeur en dirhams.2) Créer le script qui récupère la valeur saisie, et affiche la conversion en Euro (NB : un euro =11,50 Dhs).3) Améliorer le script pour permettre à l'internaute d'indiquer si la valeur saisie est en dirhams ouen euro, et tenez en compte dans le script pour appliquer la conversion correspondante.

Exercice 4: 1) Dans la page web exerxice4.html, créez un formulaire pays composé au moins des élémentssuivants :• un champ select pour sélectionner le nom d’un pays parmi Allemagne, Espagne, France et Italie (respectez la casse en saisissant l’attribut 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 d’habitants de ce pays, • un champ textarea pour décrire ce pays ,• un champ input de type submit et de value Envoyer pour envoyer les informations au scriptexercice4.php,• un champ input de type reset et de value Effacer pour réinitialiser votre formulaire.Mettez la valeur de l’attribut method du formulaire à get .


22/24

21

2) Créez alors le fichier exercice4.php. Dans ce fichier, insérez des instructions permettantd’afficher dans l’ordre les données : nom, superficie, nombre d’habitants et description saisiesdans le formulaire pays.3) Que constatez-vous dans la barre d’adresse du navigateur lorsque vous saisissez et validezdans le formulaire exercice4.html les données d’un pays.

Exercice 5 :Créer un formulaire qui possède les champs suivants: nom, prénom, état civil (boutons radiomarié ou célibataire) et salaire.Le formulaire calcule les impôts payés de la manière suivante:

5% du salaire pour les salaires inférieurs à 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 mariée, rabais de 10%

Afficher les nom et prénom, le salaire et le montant d'impôts payé par la personne.


23/24

22

T.P. n° 8Programmation en PHP (4ème partie). Site web

de vente par correspondance


Exercice 1 :Créer une fonction addition acceptant 2 paramètres : $a et $b.Cette fonction doit calculer un résultat intermédiaire $r, étant l’addition de $a et $b. La fonction doit faire un retour à la ligne avant de renvoyer ce résultat $r.L’appel de la fonction pourra se faire via des variables, ou directement grâce à des valeursnumériques.Ex : addition ($x,$y);Ex : addition (14,6);

Exercice 2 :La fonction mail permet d’envoyer des emails. Créez un couple formulaire/script PHP permettant de saisir les informations constituant un email,et de l’envoyer.

Exercice 3 :Une société de vente de composants informatiques souhaite créer son site web de vente parcorrespondance.1) Ecrire un formulaire qui demande les informations suivantes : Nom, Prénom, Adresse, Code postal, Ville, Téléphone du client suivis du questionnaire suivant :

Votre commandeIndiquez les composants que vous commandez (avec la quantité désirée)

Composant Prix HT QtéAlimentation 65.00 1Carte graphique 299.00 1

Disque dur 105.00 1Graveur DVD 58.00 1

Carte mère 152.00 1Mémoire RAM 49.00 1

Ventilateur de boîtier 15.00 1


24/24

Carte son 107.00 1Processeur 246.00 1

Règlement par : Carte bancaireChèque

Contre-remboursementIndiquez le cadeau que vous choisissez (sélection unique d’un article : souris, 20 CD-R,webcam…)

Vos remarques (zone de texte)

2) Ecrire un script PHP qui affiche la facture du client selon ce qu’il a commandé.

Polycopié Des Travaux Pratiques - TIC - Bases de Données Et Internet

Documents

Transcript of Polycopié Des Travaux Pratiques - TIC - Bases de Données Et Internet