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.

Ce tutoriel peut nécessiter certains composants dont l'installation est optionnelle. Assurez-vous qu'ils sont installés en consultant la liste Configuration requise.

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 :

WebSphere Application Server 6.1

Pour des informations sur le déploiement d'objets SDO sur des serveurs autres que WebSphere Application Server, consultez la rubrique d'aide Déployer des objets SDO sur des serveurs autres que WAS.

Ce tutoriel peut nécessiter certaines capacités qui n'ont pas été activées durant l'installation du produit. Si vous ne trouvez pas certaines options de l'interface utilisateur décrites dans les exercices, assurez-vous d'avoir activé toutes les capacités appropriées (Fenêtre > Préférences > Général > Capacités). Pour exécuter ce tutoriel, vous aurez besoin des capacités suivantes :

Java Developer
Web Developer (normal)
XML Developer
Database Developer
Enterprise Java Developer
Data

Pour utiliser ce tutoriel, vous devez disposer d'un serveur d'applications installé et configuré. Pour vérifier qu'un environnement d'exécution serveur est disponible, sélectionnez Fenêtre > Préférences, développez la branche Serveur et cliquez sur Environnements d'exécution installés. Vous pouvez utiliser ce volet pour ajouter, supprimer ou éditer des définitions d'environnements d'exécution serveur installés. Vous pouvez aussi télécharger et installer le support d'un nouveau serveur.

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.