[PDF] JEE et Framework Travaux Pratiques





Previous PDF Next PDF



Cours et exercices corrigés

tableau 2-1 . . Page 40. 26. Le langage HTML 5. PARTIE I. Tableau 2-1. Tous les éléments de la catégorie Phrasing (voir le tableau 2-3) ainsi que <head>. Le 



TP HTML Exercice 1 : Votre première page HTML Ecrivez lextrait de

Exercice 4 : Réalisez un mini site comprenant votre CV selon le descriptif suivant: • Un tableau avec bordure fine qui comportera les informations "standards".



Les cahiers dExercices en Programmation : Le langage HTML

Des tableaux seront alors utilisés. Les tableaux sont définis par des balises. Voici les balises utilisées dans ce chapitre : Balise. Description. <table> 



Exercice 6 – Les tableaux

Exercice 6 – Les tableaux. 1. Créez un fichier mon-cv.html dans le répertoire /EnvSystemeReseau/tp-html. balise <table> permet d'insérer un tableau dans une ...



Exercice 1. La structure minimale dune page HTML

Le résultat de l'affichage est le même que celui du tableau précédent. La balise <style> contient 3 règles CSS : la première s'applique à tous les éléments < 



HTML : exercices

Exercice 1 : Affichage de document HTML. 1. Ouvrez le bloc-note copiez-y le document Exercice 6 : Tableau de statistiques. Ajoutez à votre site une page ...



TP TIC (HTML) - Kiteb.net

TP N°1 : Objectifs : ➢ Savoir écrire le code minimum en HTML pour créer une page Web. ➢ Savoir créer en mode code un tableau. ➢ Savoir insérer une image en 



Cours PHP Accéléré

Jun 27 2023 Fabrication d'une table HTML avec les résultats : <html>. <head>. <title>. Connexion à MySQL avec PDO. </title>. <meta charset="utf-8">. <body>.



Travaux Pratiques - Fès

Liens hypertextes Tableaux





Exercice 1. La structure minimale dune page HTML

Créez un répertoire tp-html puis un fichier base.html dans le répertoire Le tableau commence par la balise ouvrante <table> et se termine par la balise ...



TP HTML Exercice 1 : Votre première page HTML Ecrivez lextrait de

Ecrivez l'extrait de code HTML qui réalise ce titrage dans un fichier nommé Un tableau avec bordure fine qui comportera les informations "standards".



Les cahiers dExercices en Programmation : Le langage HTML

Des tableaux seront alors utilisés. Les tableaux sont définis par des balises. Voici les balises utilisées dans ce chapitre : Balise. Description. <table> 



TP TIC (HTML) - Kiteb.net

Objectifs : ? Savoir écrire le code minimum en HTML pour créer une page Web. ? Savoir créer en mode code un tableau. ? Savoir insérer une image en HTML.



Exercices sur les tableaux Php - page 1

23 Dec 2015 On voudrait réaliser un tableau HTML $Mois donnant le nombre de jours de chaque mois de l'année par un script PHP utilisant un tableau PHP. Les ...



Travaux Pratiques

Travaux pratiques et exercices d'application Conception de sites Web Exercice 3 (Facultatif) : Donner le code html du plan suivant. - Filières EST.



JEE et Framework Travaux Pratiques

Déployer l'application et vérifier que la page page1.html est définie comme page d'accueil en accédant à Exercice 3 : Affichage dans un tableau.



TP n°1 : php

Exercice n°1: Premier programme </HTML>. Rappels : Les scripts php doivent être interprétés par un parser PHP ... Exercice n°5.2: Les tableaux array() ...





Les cahiers dExercices en programmation : CSS niveau 2 exercices

Ce livre complète les cahiers d'exercices en HTML. Il vous propose des énoncés L'utilisation de la balise <tbody> est obligatoire dans un tableau en.

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière GI : -2019/2020-

Professeur BALOUKI Youssef

Département Mathématiques et Informatique

JEE et Framework

Travaux Pratiques

2

Création d'un projet

1. Depuis la barre de menu faire

new/Dynamic Web project

2. Saisir le nom du projet

3. Spécifier Tomcat 9 comme environnement

d'exécution cible

4. Spécifier la version 3.0 de l'API servlet

5. L'écran suivant sert à déterminer le dossier

des fichiers sources à compiler Installation et SULVH HQ PMLQ GH O·HQYLURQQHPHQP GH PUMYMLOB

Objectifs

1. Installation de la distribution JEE de l'environnement de développement intégré (EDI) Eclipse.

2. Intégration et configuration du serveur Tomcat (version 9.x)

3. Se familiariser avec la perspective JEE de l'EDI Eclipse.

4. Création, configuration et déploiement d'un projet Web dynamique.

Travail à faire

Installation et configuration

1. Décompresser les fichiers eclipse-jee-xxx.zip et apache-tomcat-

9.0.x.zip dans le dossier c:\JEE

2. Parmi les perspectives disponibles dans eclipse, sélectionner la perspective Jee

3. Configuration du serveur Tomcat :

a. Window/ show view/server) b. Choisir Add new Server (version 9.X de Tomcat) d. Démarrer le serveur 3

6. Spécifier la racine du contexte du projet (Context Root). Celle ci définit l'URL à partir du quel nous

allons accéder au projet. L'URL du projet étant toujours de la forme http://IPServ ur:Port/ContextRoot/. Dans notre cas l'URL du projet sera http: /localhost:8080/TP1/

7. Définir le dossier qui va contenir les pages Web ainsi que les ressources statiques (images,

scripts, videos, etc...). Par défaut, ce dossier est nommé WebConent.

8. Le fichier Web.xml est le fichier de déploiement et de configuration.

9. Créer une page html dans le projet:

a. clic droit sur le noeud du projet puis new > HTML b. nommer la page page1.html. c. rajouter le message Bonjour tout le monde à la page.

10. Déploiement et exécution :

a. clic droit dans le code source de la page puis run as > run on server b. sélectionner le serveur cible et valider

11. Test :

a. Vérifier que l'état du serveur est à [Started,Synchronised] b. Vérifier que l'URL de la page est http://localhost:8080/TP1/page1.html c. Exécuter la page depuis un navigateur externe (Chrome ou firefox) 4 2

FUpMPLRQ G·XQ SURÓHP JHN G\QMPLTXH

Objectifs

1. Création et configuration d'une application J2EE.

2. Configuration d'une page d'accueil.

3. Génération d'une page Web dynamique.

4. Configuration et déploiement d'une Servlet.

Travail à faire

Reprendre le projet précédent.

Problématique 1 :

Pour accéder à notre page de page1.html, un utilisateur devrait connaitre son nom afin de pouvoir émettre

une requête vers l'URL http://localhost:8080/TP1/page1.html. Sans cette information la page ne pourrait pas être

consultée. Par contre, en général, pour accéder à un site Web comme google, nous utilisons l'URL

www.google.com sans spécifier le nom de la page demandée. La page ainsi reçue est nommée page d'accueil

ou page de bienvenu. La page de bienvenu est retournée à chaque utilisateur ayant émis une requête vers l'URL racine

d'une application Web. En ce qui concerne notre application, le recours à l'URL racine

http://localhost:8080/, génère une erreur du type Resource non trouvée de code 404.

Solution : Définition d'une page d'accueil.

Pour remédier à ce problème nous allons définir déploiement comme suit: page1.html comme page d'accueil à partir du descripteur de

1. ouvrir le descripteur de déploiement (web.xml)dans le mode source, localiser la balise .

Celle ci sert à définir une liste de pages d'accueil moyennant la balise fille .

2. supprimer les pages d'accueil définies par eclipse par défaut et spécifier la page page1.html comme page

d'accueil comme suit:

3. Déployer l'application et vérifier que la page page1.html est définie comme page d'accueil en accédant à

l'URL racine de l'application.

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière : GI 2019/2020-

5/21 Problématique 2 : Génération dynamique d'un contenu html

La plateforme J2EE propose la technologie servlet pour créer des sites Web dynamiques. Les Servlets

sont des classes java, héritant de la classe HttpServlet et pouvant être sollicitées par des requêtes http

de types Get ou Post. Moyennant les Servlets, il est possible de générer un contenu html de façon

dynamique.

Travail à effectuer :

1. Créer une Servlet depuis le menu contextuel du projet:

a. effectuer new > Servlet b. nommer la classe de la servlet Bonjour (champ class name) c. cocher les méthodes doGet et doPost de la servlet. Ces deux méthodes traitent respectivement les requêtes de types

Get et

Post.

2. Rajouter à la Servlet le code suivant :

response.setContentType("text/html");

PrintWriter p = response.getWriter();

p.print("Bonjour Servlet");

3. Exécuter la servlet par la commande start de

son menu contextuel.

la méthode response.setContentType("text/html")sert à spécifier le type de la réponse à générer.

Dans notre cas, le contenu à générer est constitué de texte et de html. La méthode response.getWriter() permet d'obtenir un objet de type PrintWriterservant à écrire le contenu dynamique dans la page à générer moyennant sa méthode print.

Exercices:

1. Modifier la servlet Bonjour pour afficher un tableau de N

lignes et M colonnes

2. Modifier la servlet Bonjour pour qu'elle affiche la date

courante.

3. Modifier la servlet pour afficher les deux messages sur deux

lignes successives

4. Créer la servlet Moyennesaffichant les noms de N

étudiants ainsi que leurs moyennes.

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière : GI 2019/2020-

6/21

Remarques:

Utiliser la boucle for pour la génération de la liste des étudiants Utiliser la méthode Math.random() pour générer les moyennes.

Objectifs Création d'une application Web qui affiche les moyennes des étudiants. Cette application permettra de

réaliser les objectifs suivants. 1. Création et configuration d'une application J 2EE.

2. Utilisation d'une source de données dans une servlet.

3. Génération de pages Web dynamiques contenant les éléments suivants :

a. Listes à puces b. Tableaux c. Images 4. Configuration et dé ploiement d u projet. Travail préliminaire 1. Créer u nouveau projet intitulé TP3.

2. Créer la classe Etudiant con tenant :

o les attributs cin (String), nom (String) et moyenne (double). o un constructeur paramétré. o les accesseurs et les mutateurs des attributs. o la méthode equals comparant deux étudiants sur la base de leurs numéros de cin

3. Créer la classe GestionEtudiants contenant les membres suivants :

o un attribut statique de type Array List nommé listeEtudiants. o une méthode statique appelée getListeEtudiants permettant de retourner la liste des étudiants

Exercice 1 : Affichage simple

Créer la servlet AffichageEtudiants effectuant les traitements suivants:

1. récupération de la liste des étudiants génération d'une page Web dynamique affichant les noms ainsi que les moyennes des étudiants

conformément à la figure 1.

Figure 1 : Affichage de la liste des étudiant

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière : GI 2019/2020-

7/21

Exercice 2 : Affichage dans un liste à puces

Modifier la servlet AffichageEtudiants de manière à afficher les étudiants sous f orme d'une liste à puces

nom Etudiant1 cin 1 12.0 nom Etudiant2 cin 2 14.0 nom Etudiant3 cin 3 9.0 nom Etudiant4 cin 4 15.0 nom Etudiant5 cin 5 8.0

Figure 2: Affichage de la liste des étudiants

Exercice 3 : Affichage dans un tableau

Modifier la servlet AffichageEtudiants de manière à afficher les étudiants sous f orme d'un tableau contenant

les colonnes cin, nom et moyenne (Figure3).

Figure 3 : Affichage sous forme de tableau

Exercice 4 : Insertion d'image

1. Rajouter l'attribut image (String ) dans la classe Etudiant tout en modifiant le constructeur de la classe.

(ou bien avec une nouvelle classe qui hérite de la classe Etudiant)

2. Créer un répertoire nommé images dans le dossier

WebContent du projet.

3. Copier l es images des étudiants dans le répertoire images (une image par étudiant).

4. Passer l e nom du fichier de l'image comme paramètre du constructeur lors de l'instanciation des étudiants. Exemple : new Etudiant("110","Alami",15.2,"im.jpg")

5. Modifier la servlet de manière à afficher l'image de chaque étudiant dans une nouvelle colonne (voir figure

4). 5. Fixer la taille des images à 40x4

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière : GI 2019/2020-

8/21

Figure 4 : tableau avec images

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière : GI 2019/2020-

9/21 Ex rcice 5 : Modifier le code de la servle t de manière à :

1. colorer en rouge les lignes des étudiants aya nt une moyenne inférieure à 10 2. colorer en jaune les lignes des étudiants ayan t une moyenne supérieure ou égale à 10

Nom CIN Moyenne Photo

nom Etudiant1 cin 1 12.0 nom Etudiant2 cin 2 14.0 nom Etudiant3 cin 3 9.0 nom Etudiant4 cin 4 15.0 nom Etudiant5 cin 5 8.0

Figure 5 : coloration conditionnelle du fond

Annexes

liste non ordonnée en HTML :
  • item1
  • item2

    • Université Hassan 1er

    Faculté des Sciences et Techniques

    Département Mathématiques et Informatique

    Filière GI : -2019/2020-

    10/21 < li> item3

Tableau en HTML : <

< tr > < td > Row 1, Column 1 < /td > < td > Row 1, Column 2 < /td > < / tr > < tr > < td > Row 2, Column 1 < /td > < td > Row 2, Column 2 < /td > < /tr > < /table >

Utiliser la balise pour les titres

Utilisation d es images : < img src=smile.gif alt=Wrox Logo height=40 width=40 / >

Manipulation des couleurs du texte: ou

Objectifs Maitriser la notion de redirection et les méthodes permettant de l'effectuer.

1 Introduction Il est possible de rediriger le client vers une URL déterminée à l'aide de l'objet RequestDispatcher. Cette

technique s'effectue à travers le code suivant : RequestDispatcher rd = getServletContext().getRequestDispatcher("/UrlDestination"); rd.forward(request, response); Il est possible de compacter l'écriture précédente sous la forme : getServletContext().getRequestDispatcher("/UrlDestination").forward(request, response);

Explication

La méthode getServletContext permet à la servlet de communiquer avec son conteneur de servlets. La méthode getRequestDispatcher prend comme paramètre l'URL de la ressource vers laquelle

l'utilisateur sera redirigé. La méthode forward permet de passer la requête et la réponse de la servlet courante à une autre ressource.

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière GI : -2019/2020-

11/21

Exercice 1 3. Créer un nouveau projet 4. Créer une page HTML identification.html contenant un formulaire avec deux champs texte nommés

login et password avec un bouton de validation.

5. Créer une page HTML succes.html contenant la phrase identification réussie 6. Créer une page HTML echec.html contenant la phrase échec de l'identification 7. Créer la Servlet Identification qui traite le formulaire d'identification et qui implante la logique suivante : Si le login est égal à "admin" et le mot de passe est égal à "admin" alors rediriger l'utilisateur vers

la page succes.html. Sinon, rediriger la page echec.html.

Exercice 2 (Figure 1) 1. Créer un nouveau projet 2. Créer une page HTML identification.html contenant un formulaire avec deux champs texte nommés login et password un menu déroulant contenant les choix IM, CM et AV un bouton de validation.

3. Ǧ Créer la Servlet Identification qui traite le formulaire d'identification et qui implante la logique suivant : a Si le login es t égal à "admin" et le mot de passe est égal à "admin", rediriger la requête vers la servlet UtilisateurValide b Sinon, rediriger la requête vers la servlet UtilisateurNonValide 2. Créer la servlet UtilisateurValide qui, selon la sélection effectuée, affiche le texte suivant:

bonjour, vous êtes dans la section {IM, CM, A V}.

3. Créer la servlet UtilisateurNonValide qui affiche le texte suivant suivi d' un lien hypertexte vers la

page d'identification: Echec d'identification; vous avez saisi le login "XXXX" et le mot de passe "YYYY"

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière GI : -2019/2020-

12/21

Figure 1 : Illustration de l'exercice 2

TP5 : Gestion des formulaires

Objectifs Se familiariser avec les API de traitement des formulaires dans un projet J2EE. Ceci passe par :

1. La création de formulaires comprenant les éléments

suivants: a. La déclaration du formulaire. d. Les listes et menus déroulants. b. Les champs de saisie de texte et de e. Les cases à cocher. mots de passe. f.

Les zones de saisie de texte

libre. c. Les boutons radio. g.

Les boutons d'envoi de

formulaire. ww L'implémentation de Servlets capables de récupérer et de traiter le contenu d'un formulaire comprenant: Des composants à retour simple (text, password, radio, textarea, select) Des composants à retour multiple (checkbox)

Introduction Les formulaires permettent aux développeurs de doter une page web d'éléments interactifs permettant le dialogue

avec les internautes. L'utilisateur saisit des données en remplissant des champs, en activant des boutons radio ou

des cases à cocher, en sélectionnant des options dans une liste de choix ou en cliquant sur des boutons. Un

formulaire peut être soumis en cliquant sur un bouton de type submit afin d'envoyer son contenu à un URL

capable de le traiter.

1 Création d'un formulaire

1.1 Déclaration d'un formulaire

Les formulaires sont délimités par la balise

...
et contiennent obligatoirement l'attribut action

spécifiant l'URL d'envoi du formulaire et l'attribut method désignant la méthode d'envoi du formulaire qui pourrait

être soit get ou post. Dans une application J2EE, l'URL d'envoi peut être soit celui d'une servlet, soit celui d'une

page jsp. Voici un exemple d'un formulaire :

................................................

1.2 Composants d'un formulaire

La balise FORM constitue permet de regrouper des éléments qui permettent à l'utilisateur de choisir ou de saisir les

informations à envoyer à l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par

l'attribut METHOD. Les éléments à déclarer dans un formulaire devraient avoir un identifiant (attribut name)

permettant de récupérer leurs valeurs ensuite. Les éléments d'un formulaire peuvent être :

o Champs de saisie de texte :

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière GI : -2019/2020-

13/21 o Zone de texte libre : o Liste : une liste permet à l'utilisateur de sélectionner un choix parmi ceux qui sont disponibles. La

liste (balise select) a un identifiant (attribut name) et regroupe un ensemble de choix (balise option) ayant chacun une valeur prédéfinie (attribut value).

Boutons radios : il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons

radios relatifs à la même information devant porter le même attribut name pour être mutuellement exclusifs.

La paire nom/valeur du bouton radio sélectionné sera envoyée à l'URL de l'action.

Homme : Femme :

Cases à cocher: permettent d'effectuer des choix multiples en envoyant les valeurs des cases cochées.

Lecture Sport

Voyage Bouton d'envoi : est un bouton permettant d'envoyer le contenu du formulaire à l'URL défini dans l'attribut

action de la balise form.

1.3 Codage des données

Lors de l'envoi du formulaire les données sont codées selon le type de la méthode d'envoi. Chaque élément du formulaire est codé selon le format nom=valeur. Par exemple, si l'utilisateur a saisit dans le champ texte (déclaré

auparavant) la chaine Alami, alors cet élément sera codé sous la forme prenom=Alami.

Si le formulaire contient plusieurs éléments, leurs résultats seront concaténés et séparés par le caractère &

1. méthode get: la méthode get envoi le formulaire dans l'URL comme suit :

2. méthode post: Le contenu des éléments du formulaire sont envoyées sous un format binaire, cachés

dans l'entête de la requête.

Université Hassan 1er

Faculté des Sciences et Techniques

Département Mathématiques et Informatique

Filière GI : -2019/2020-

14/21

2 API de traitement des formulaires

La méthode d'envoi du formulaire spécifie la méthode de la servlet qui sera invoquée. En effet, la méthode get

permet d'actionner la méthode doGet de la servlet tandis ce que le type post invoque la méthode doPost. Les

paramètres du formulaire sont envoyées dans un objet de type HttpServletRequest. Celui ci propose deux

méthodes pour la lecture des paramètres envoyés à partir d'un formulaire à savoir:

6. public String getParameter(String name) : permet de retourner la valeur d'un champ dont on

a passé le nom en argument. Cette méthode est utilisée pour récupérer la valeur d'un champ à une seule

valeur de retour. 7. public String[] getParameterValues(String name):cette méthode est utilisée pour récupérer la

quotesdbs_dbs1.pdfusesText_1