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 Enterprise de la perspective Web, vérifiez que votre projet ClassifiedsTutorial se présente comme dans l'image suivante :

Pour définir le serveur cible :

Dans la vue Explorateur Enterprise 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.

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 configurer la connexion à la base de données :

Dans la vue Explorateur Enterprise, 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 boîte de dialogue Parcourir les profils s'ouvre.
Dans la boîte de dialogue Parcourir les profils, cliquez sur Nouveau. La boîte de dialogue Nouveau profil de connexion s'ouvre.
Dans la liste Type du profil de connexion, sélectionnez Derby et cliquez sur Suivant. La boîte de dialogue Création du profil de connexion s'ouvre.
Dans le champ Nom, tapez DerbyDB, sélectionnez Connexion automatique au démarrage, puis cliquez sur Suivant.
Dans le champ Pilotes, sélectionnez Derby 10.2 - Pilote JDBC intégré par défaut.
Dans le champ Emplacement de la base de données, cliquez sur Parcourir et sélectionnez <emplacement_espace_de_travail>\ClassifiedsTutorial\WebContent\database, où <emplacement_espace_de_travail> est le répertoire de votre espace de travail actuel. Cliquez sur OK.
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.
Conseil : N'importe quel ID utilisateur convient.
Dans l'assistant Nouveau profil de connexion Derby, cliquez sur Terminer.
Dans la boîte de dialogue Parcourir les profils, cliquez sur DerbyDB puis cliquez sur OK.

Vous pouvez parcourir les fichiers qui composent le projet Web du tutoriel. Pour ouvrir un fichier, double-cliquez sur celui-ci dans la vue Explorateur Enterprise. Pour afficher une représentation sous forme de carte des liaisons entre les pages, double-cliquez sur l'icône Navigation sur le site Web dans la vue Explorateur Enterprise.

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.