Module 2 : Ajouter des fonctions avancées

Dans ce module, vous allez apprendre à utiliser des fonctions avancées pour modifier le format de vos pages Web, ajouter un composant permettant aux utilisateurs de télécharger des fichiers vers la base de données, définir des règles qui dirigeront automatiquement les utilisateurs vers une page particulière et automatiser certaines tâches d'administration telles que la génération de clés.

Objectifs d'apprentissage

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.

Durée nécessaire

Ce module vous prendra environ 1 heure 30 minutes. Comptez plus de temps si, tout en suivant le tutoriel, vous explorez d'autres facettes des sites Web dynamiques.

Conditions préalables

Si vous avez déjà suivi le module 1 (Créer des pages Web avec des connexions de données), ne tenez pas compte de la présente section et passez directement à la Leçon 2.1 : Mettre en forme une table de données.

Si vous abordez ce tutoriel en commençant par le module 2, sans avoir suivi les exercices du module 1, vous devez d'abord importer les ressources requises, définir le serveur cible et configurer la connexion à la base de données.

Pour importer les ressources nécessaires :

Importez le projet. Passez dans la perspective Web (Fenêtre > Ouvrir la perspective > Web).
Dans la vue Explorateur de projets de la perspective Web, vérifiez que votre projet ClassifiedsTutorial ressemble à l'image suivante :

Pour définir le serveur cible :

Dans la vue Explorateur de projets de la perspective Web, cliquez avec le bouton droit sur le projet ClassifiedsTutorial et sélectionnez Propriétés.
Dans la liste des catégories de propriétés, cliquez sur Serveur.
Dans la liste Serveur par défaut, sélectionnez le serveur que vous souhaitez utiliser comme serveur par défaut. Cliquez sur Appliquer.
Dans la liste des catégories de propriétés, cliquez sur Environnements d'exécution cible.
Dans la liste Environnements d'exécution, cliquez sur l'environnement qui correspond au serveur que vous venez de sélectionner. Cliquez sur OK.

Si le serveur que vous comptez utiliser ne figure pas dans la liste des environnements d'exécution cible, installez-le en fermant préalablement le plan de travail. Après quoi, suivez les instructions de définition du serveur cible.

Remarque : Si aucun serveur ne figure dans la liste Serveur par défaut et que vous avez pourtant des environnements d'exécution serveur installés, il est possible que votre serveur ait besoin d'être configuré. Voici comment vous pouvez procéder :

Cliquez avec le bouton droit sur le fichier all_records.jsp et sélectionnez Exécuter en tant que > Exécuter sur le serveur.
Choisissez Définir manuellement un nouveau serveur.
Sélectionnez un serveur que vous avez installé.
Suivez les instructions de l'assistant pour configurer le serveur. A la première exécution sur le serveur, il est possible que vous receviez un message d'erreur. Pour y remédier, définissez le serveur cible comme expliqué plus haut, redémarrez le serveur dans la vue Serveurs et rechargez la page Web dans le navigateur.

Si vous reprenez maintenant la procédure précédente qui explique comment définir un serveur cible, vous verrez que le serveur par défaut est celui que vous venez de configurer. Si un serveur est installé mais non configuré, il n'apparaît pas dans la liste des serveurs que vous pouvez choisir comme cible par défaut.

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.

Pour configurer la connexion à la base de données :

Dans la vue Explorateur de projets, cliquez avec le bouton droit sur le projet ClassifiedsTutorial et sélectionnez Propriétés. La fenêtre Propriétés de ClassifiedsTutorial s'ouvre.
Cliquez sur Connexions JDBC.
Dans le volet de propriétés Connexions JDBC, cliquez sur Nouvelle. La fenêtre Nouvelle connexion JDBC s'ouvre.
Sélectionnez l'option Créer une connexion et cliquez sur Suivant.
Dans la liste Sélectionnez un gestionnaire de base de données, développez l'entrée Derby et choisissez 10.1.
Dans la zone Emplacement de la base de données, cliquez sur Parcourir et sélectionnez <emplacement_espace_travail>\ClassifiedsTutorial\WebContent\\database, où <emplacement_espace_travail> est le répertoire de votre espace de travail actuel. Cliquez sur OK pour fermer la fenêtre Rechercher un dossier.
Dans la zone Emplacement de la classe, tapez l'emplacement du ou des fichiers JAR qui implémentent la classe du pilote JDBC, ou bien cliquez sur Parcourir pour sélectionner cet emplacement dans votre système de fichiers. Après avoir sélectionné l'emplacement des fichiers JAR, cliquez sur Ouvrir.
Il est possible que vous deviez entrer un ID utilisateur pour accéder à la base de données. Aucun mot de passe n'est nécessaire. L'assistant Nouvelle connexion à une base de données doit se présenter comme suit :
Dans l'assistant Nouvelle connexion JDBC, cliquez sur Terminer. Vous retrouvez la fenêtre Propriétés de ClassifiedsTutorial.
Cliquez sur Configurer les connexions à une base de données du projet. La fenêtre de propriétés Connexions JDBC s'ouvre.
Cliquez sur le bouton Modifier dans la section Caractéristiques de la connexion du contexte d'exécution. Pour le type de connexion à utiliser lors de l'exécution, choisissez Utiliser la connexion au gestionnaire de pilote de périphérique. Cliquez sur Terminer, puis sur OK.

Vous pouvez parcourir les fichiers qui composent le projet Web du tutoriel. Pour ouvrir un fichier, cliquez deux fois dessus à partir de la vue Explorateur de projets. Pour afficher une représentation sous forme de carte des liaisons entre les pages, faites un double clic sur l'icône Navigation sur le site Web, dans la vue Explorateur de projets.

Dans ce tutoriel, la plus grande part de votre travail portera sur les fichiers suivants :

all_records.jsp: Ce fichier correspond à la page d'accueil du site. Il affichera chaque annonce stockée dans la base de données.
new_record.jsp: Cette page servira à créer une nouvelle annonce.
update_record.jsp: Cette page permettra de modifier les détails d'une annonce dans la base de données ou de supprimer une annonce.
classifiedTemplate.jtpl: Ce fichier est utilisé comme modèle pour les pages du site. Il inclut des éléments tels que la table et la bannière grise "Welcome to the Classifieds", qui apparaissent sur toutes les pages. Cette page comporte également deux onglets de navigation, sous la bannière grise, qui permettent d'accéder à la page d'accueil et à la page de création d'une nouvelle annonce.

Les leçons dans ce module

Leçon 2.1 : Mettre en forme une table de données
La table de données de la page all_records.jsp a une apparence minimaliste. Elle remplit sa fonction en affichant tous les enregistrements de la base de données et les liens aux autres pages, mais sa présentation est quelque peu austère. Dans cet exercice, vous allez améliorer cette table en données en y ajoutant une fonction de pagination, des règles de style et des photos des articles à vendre.
Leçon 2.2 : Utiliser le composant de téléchargement de fichier montant
Dans cette leçon, vous allez voir comment donner aux utilisateurs la possibilité d'accompagner leurs annonces de photos des articles qu'ils vendent et donc de leur proposer une fonction de téléchargement de fichier montant (upload). Cette fonction revêt une importance particulière dans les pages new_record.jsp et update_record.jsp. Le composant de téléchargement de fichier montant permet aux utilisateurs de naviguer dans leur système de fichiers, de télécharger un fichier vers la base de données et de l'y faire apparaître immédiatement.
Leçon 2.3 : Utiliser des règles de navigation
Dans cette leçon, vous allez apprendre à définir des règles de navigation pour rediriger un utilisateur du site vers des pages Web spécifiques.
Leçon 2.4 : Utiliser la génération automatique de clés
Dans la leçon précédente, vous avez configuré des règles de navigation visant à garantir que l'utilisateur entre un ID unique pour chaque nouvelle annonce créée. Ce procédé manque à la fois de convivialité et de réalisme, car il peut contraindre l'utilisateur à essayer plusieurs ID avant d'en trouver un qui ne soit pas déjà utilisé. Dans cette leçon, vous allez configurer la génération automatique de clés afin que la base de données attribue elle-même un nouveau numéro à chaque nouvel enregistrement créé.
Module 2 : Récapitulatif
L'exécution du module 2 : Ajouter des fonctions avancées est terminée.