Rendre son site plus attrayant n’est pas qu’une affaire de graphisme. esual Software l’a bien compris et propose un outil d’optimisation de l’ergonomie. Baptisé e.Merchandising Manager, celui-ci est à la fois un IDE (Integrated Development Environment), capable de générer tout type d’applets Java sophistiquées, et un serveur de publication d’ applets, dont le code peut être mis à jour selon une fréquence déterminée. Interactives et très ergonomiques, ces applets autorisent la gestion de menus dynamiques, d’images panoramiques à 360?’, etc. Double avantage : le temps de développement est réduit à sa plus simple expression et, surtout, les informations peuvent provenir d’une base de données relationnelle. La mise à jour des menus ou des listes s’effectue donc automatiquement et le résultat final offre plus de possibilités, en terme d’ergonomie, qu’un simple développement en HTML.Dans cette mise en ?”uvre, le configurateur que vous allez générer permet de saisir, sur une seule page HTML, toutes les caractéristiques du produit recherché.
1. Installez le serveur et l’outil de développement
Lors de la mise en place du produit, un assistant détecte automatiquement la présence des serveurs web installés sur votre machine. Choisissez celui sur lequel il convient d’installer e.Merchandising Manager, puis précisez que les pages doivent être stockées dans le répertoire virtuel “esual”, mappé sur “c:esual”. Pour vérifier la bonne installation du logiciel, appelez la page http://localhost/esual/scripts/Esual ProjectManager.html. L’ensemble de l’interface de développement est en effet développé en HTML et en applets Java.
2. Constituez la base de données
Les informations que vous allez afficher proviennent d’une base de données relationnelle. Utilisez Microsoft Access 2000 pour constituer une base de données “produits” contenant différents champs. Lancez la base de données, sauvegardez les informations dans un fichier nommé “baseproduits” et créez une nouvelle table intitulée “produits” en cliquant sur le lien “Créer une table en mode création”. Ajoutez les champs “Index”, “Mémoire”, “Processeur”, “Réseau”, “Fréquence”, “Prix” et “Stock”. Fermez ensuite la table sans ajouter de clé primaire. Enfin, insérez quelques données de test, ainsi que les en-têtes indispensables au bon fonctionnement de l’applet. Pour cela, 3 lignes sont nécessaires. Elles contiennent respectivement les libellés qui seront utilisés à l’affichage dans le configurateur, les plages de valeur et les identifiants employés par l’entreprise. Pour définir une plage de valeur complexe, le meilleur exemple reste celui du prix : “RANGE:Vals=15000,30000:Strings= Moins de 15000 FF,de 15000 à 30000 FF, 30000 FF et plus:Rvals=1,2,3”. “RANGE” indique au serveur les limites extrêmes de la plage de prix. De son côté, “Strings” affiche des libellés compréhensifs pour l’internaute. Enfin, “Rvals” offre la possibilité de passer les bons paramètres à la page qui affichera la liste détaillée des produits sélectionnés.
3. Créez un objet “SmartSearch”
Revenez dans l’interface de développement d’e.Merchandising Manager et acceptez le chargement de l’applet Java signée si ce n’est déjà fait. Sélectionnez ensuite l’objet “SmartSearch” et créez une nouvelle instance par un clic droit. Appelez l’objet “SearchProduits”, puis acceptez le modèle et la taille de l’applet par défaut. Enfin, sélectionnez le nouvel objet et éditez ses propriétés, toujours par un clic droit.
4. Paramétrez le design de l’objet
Supprimez l’image de fond définie dans le champ “Background Image” et choisissez “White” comme couleur du champ “Background Color”. Procédez de même pour le paramètre “Dispo & Stock String Color”. Traduisez ensuite en français les messages “Disponibility String” et “Out of Stock String”. Vous pouvez également repositionner visuellement les éléments dans la page en cliquant dans le champ “Paramètre” dont l’intitulé finit par “Position”.
5. Liez les données
Cliquez sur l’onglet “Data”, puis cochez les cases “Send ID’s to Server”, “Show Stock on Menu” et “Sort Alphabetically”. Fermez e.Merchandising Manager et lancez Access 2000. Exportez ensuite vos données de la base vers un fichier texte que vous stockerez dans le répertoire “c:esualesualselectool2search produits”. Pour cela, cliquez sur “Exporter” (menu “Fichier”) après avoir sélectionné la table “Produits”. Indiquez “Fichiers Texte” comme format du fichier de destination et “produits.txt” comme nom, puis positionnez-vous dans le répertoire. L’assistant d’exportation apparaît alors. Passez la première étape, sélectionnez “Aucun” dans le champ “Délimiteur de texte” et cliquez sur “Suivant” pour terminer l’exportation. Revenez à la boîte de dialogue d’e.Merchandising Manager et effectuez un clic dans le champ “Parameter Value” de “Data” pour appeler le menu contextuel. Sélectionnez alors le fichier “produits.txt” précédemment créé avec Access 2000 et validez.
6. Passez la sélection à la page suivante
Cliquez ensuite sur l’onglet “Event” et ajoutez le paramètre “Destination Base URL” par un clic droit. Indiquez “ListeProduits.asp? ” comme adresse (URL) et sélectionnez le paramètre “Absolute” pour indiquer que tout le chemin de l’URL devra être passé au serveur.
7. Déployez le menu et véri-fiez son fonctionnement
Lorsque votre configurateur est au point, fermez la fenêtre d’édition de ses propriétés et effectuez un clic droit sur l’objet “SearchProduits” dans l’arborescence. Activez l’item “Generate Instance Package in File”. Indiquez l’emplacement et le nom de la page HTML où figurera le configurateur (“c:intepubwwwrootesualmagasinChoix Produits.asp” dans notre exemple), puis validez la manipulation. Vous pouvez retoucher la page HTML afin de finaliser son design et d’inclure les éléments de navigation, le logo du site…
8. Pour aller plus loin
e.Merchandising Manager permet de lier directement les informations contenues dans la base de données au travers d’une requête SQL standard. Ainsi, plus besoin de mettre à jour le fichier texte contenant les données. Pour être accessible via ODBC (Open Data Base Connectivity), la base devra être liée à un DSN (Database System Name) système. Ce dernier joue le rôle de lien symbolique entre le fichier des données et l’identifiant utilisé dans le code de l’applet Java. À terme, si vous souhaitez stocker vos données dans une base Oracle, par exemple, vous n’aurez pas à retoucher votre code Java ; il suffira de modifier quelques lignes dans le DSN.Autre avantage du produit d’esual Software : un site peut se passer de serveur d’application pour des fonctions simples. Il est par exemple possible de lier un objet “SmartSearch” avec un objet “Active List”. Seule une base de données relationnelle est alors nécessaire pour faire le lien entre les deux éléments.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
