Afficher des informations dynamiques sur les pages Web à l'aide de composants JSF

Ce tutoriel va vous apprendre à concevoir un site Web dynamique fonctionnant comme la rubrique petites annonces d'un journal. Ce site est une application Web J2EE complète, utilisant des composants JavaServer Faces (JSF) et des objets SDO (Service Data Objects). La technologie JSF est utilisée ici pour créer des pages Web dynamiques liées à une base de données dans laquelle sont stockées les petites annonces. En faisant glisser et en déposant des composants JSF sur vos pages, vous pouvez créer une application Web JSF que l'on appelle parfois application CRUD en raison de son aptitude à créer, à lire, à mettre à jour et à supprimer des enregistrements dans une base de données (CRUD est l'acronyme de Create, Read, Update, Delete). Ces fonctions permettront aux utilisateurs du site de gérer les annonces dans la base de données.

En suivant ce tutoriel, vous allez créer un site Web qui permettra à ses utilisateurs non seulement de consulter les annonces de vente, mais aussi d'ajouter de nouveaux articles à vendre, de changer leurs détails (par exemple, leur prix de vente ou leur description) et de rechercher un article particulier. Le site créé dans le cadre de ce tutoriel est d'une conception simple, mais les principes et technologies qu'il met en oeuvre et que vous découvrirez sont également utilisés dans des sites Web beaucoup plus grands et complexes.

Objectifs d'apprentissage

Ce tutoriel se compose de deux modules qui ont chacun des objectifs différents. Vous pouvez les exécuter tous les deux ou vous limiter à un seul. Pour que le site Web fonctionne correctement, vous devez aller jusqu'au bout de chaque exercice.

Module 1 : Créer des pages Web avec des connexions de données

Ce module vous apprendra à configurer une connexion à une base de données et à afficher le contenu de cette dernière sur une page Web. Dans ce module, vous allez :

connecter des pages Web à une base de données ;
créer des pages permettant d'afficher, de créer, d'éditer et de supprimer des enregistrements de la base de données ;
envoyer des données d'une page à une autre.

Module 2 : Ajouter des fonctions avancées

Ce module va vous faire découvrir des techniques plus efficaces pour utiliser les données d'une base de données. Dans ce module, vous allez :

mettre en forme les enregistrements de la base de données sur une page Web ;
ajouter un composant permettant à l'utilisateur de télécharger des fichiers vers une base de données à partir d'une page Web ;
créer un mécanisme de navigation automatique de page en page ;
automatiser certaines tâches d'administration de la base de données.

Lorsque vous êtes prêt, commencez l'exécution du Module 1 : Créer des pages Web avec des connexions de données.

Durée nécessaire

Total : 3 heures 30 minutes

Module 1 : 2 heures

Module 2 : 1 heure 30 minutes

Niveau de compétences

Intermédiaire

Audience

Développeurs d'applications Web, concepteurs d'interfaces utilisateur Web

Configuration requise

Pour exécuter ce tutoriel, vous devez d'abord installer et configurer un serveur d'exécution. Ce tutoriel a été testé avec les serveurs suivants :

IBM WebSphere Application Server versions 6.0, 6.1 et 7.0

Conditions préalables

Pour exécuter ce tutoriel, vous devez maîtriser les sujets suivants :

Notions élémentaires de conception Web, telles que les sites, les pages et les navigateurs Web
Comment créer une page Web statique simple
Les éléments d'une page Web, tels que les tables, les hyperliens, les formulaires et les images
La terminologie propre aux bases de données, telle que les tables, les enregistrements, les colonnes et les champs

Il est également souhaitable de maîtriser les notions suivantes :

utiliser les perspectives et les vues du plan de travail ;
éditer le code HTML d'une page Web.

Résultats attendus

Une fois l'application Web terminée, sa page d'accueil ressemblera à celle qui est représentée ci-dessous. Grâce à la fonction de navigation ajoutée aux pages Web par l'intermédiaire du modèle de page, l'utilisateur pourra accéder à une page lui permettant de créer une nouvelle annonce et à une autre page lui permettant de consulter toutes les annonces. L'action de ligne associée à la table lui permettra d'accéder à une page de mise à jour où il pourra modifier les informations d'une annonce particulière.