Mise en place d’un catalogue de produits avec Dreamweaver [1]

• Créer une base de données pour un magasin en ligne.
• Créer une table de produits pour stocker les informations sur les produits.
• Se connecter à une base de données à partir d'une page serveur
• Utiliser des scripts serveur pour ajouter de nouveaux produits à la base de données
• Utiliser des scripts serveur pour modifier les informations existantes sur les produits

Dans ce chapitre, vous allez aborder la mise en place de votre magasin en ligne. Vous verrez comment créer et gérer une gamme de produits à 1'aide de scripts serveur, et apprendrez quelques techniques très utiles dans le contexte de la gestion d'une base de données.

La première étape de la création d’un magasin en ligne est la création d'une base de données qui stockera toutes les informations concernant vos produits. Dans ce cours, nous ferons appel à des bases de données Access et MySQL, mais les scripts serveur de ce chapitre et des chapitres suivants de ce cours devraient fonctionner avec d'autres bases de données; il vous suffira le cas échéant d'y apporter quelques modifications mineures. Vous pourrez par exemple les faire fonctionner très facilement avec des bases de données SQL Server ou Oracle.

Microsoft Access n'est pas une base de données appropriée que pour tester un site ou pour un site a faible fréquentation. Si vous pensez que votre site sera très fréquenté vous devriez sans doute envisager de passer à Microsoft SQL Server ou à MySQL.

La transformation d'une base de données Access en base de données SQL Server se fait très facilement avec les outils de mise a jour fournis par Microsoft. Ceux-ci sont livrés avec Access 2000. Si vous utilisez Access 97, vous pouvez les télécharger à partir de I’adresse http://officeupdate.microsoft.com/France /downloadcatalog/dtdaccess.asp (faites défiler la page jusqu'en bas pour trouver le fichier).

Suivez les étapes ci-dessous pour créer une nouvelle base de données Access

1.         Lancez Access en choisissant Démarrer, Programmes, Microsoft Access.

2.         Dans la boite de dialogue qui apparaît, choisissez 1'option Nouvelle base de données Access (voir Figure 5.1).

Figure 5.1 - Création d'une nouvelle base de données.

3.         Dans la boite de dialogue Fichier Nouvelle base de données, nommez votre base de données shopDB et enregistrez votre nouvelle base de données sur votre disque dur (mémorisez l'endroit où vous l'avez enregistrée !).

Une fois ces étapes effectuées, vous disposez sur votre disque dur d'un nouveau fichier nommé shopDB.mdb. Cette base de données vous servira à stocker des informations sur vos produits, vos utilisateurs et vos commandes.

La collection EasyPhp vient avec un programme écrit en php qui permet de gérer les bases de données en ligne. Le programme s’appelle phpMyAdmin et il est utilisé par le service de gestion de bases de données disponible sur Internet chez free.fr.

Vous lancez ce programme avec le navigateur web en tapant : http://localhost/mysql/ pour l’installation locale et http://sql.free.fr/ pour le service disponible chez free.fr.

Figure 5.2 - Création d'une nouvelle base de données MySQL

Assurer l’accès à un service de bases de données accessible par des pages serveur est ce qui distingue actuellement les fournisseurs d’applications (ASP – Application Service Providers) des simples fournisseurs de services Internet (ISP – Internet Service Providers)

Les ASP comme free.fr offrent une base de données à chaque utilisateur qui fait la demande, la base portera le nom de l’utilisateur tel qu’enregistré avec le fournisseur d’accès.

Si vous avez suivi les paragraphes précédents, vous avez créé une nouvelle base de données Access et MySQL. Cependant, une base de données seule n’est pas d'une grande utilité. Avant de pouvoir stocker des informations dans une base de données, vous devez y ajouter une ou plusieurs tables de base de données.

Une table de base de données est structurée de la même façon qu'une feuille de calcul ou qu'un livre de comptes. Elle contient une ou plusieurs lignes divisées en une ou plusieurs donnes. Chaque colonne ou champ a un nom et sert à enregistrer un type particulier d'information. Chaque ligne représente un enregistrement de base de données.

Si les informations sur les produits du magasin en ligne étaient stockées dans une table de base données nommée produits, cette table comprendra les huit colonnes suivantes:

id : Cette colonne contient un identificateur numérique unique pour chaque produit de la table.

nom : Cette colonne contient le nom du produit, par exemple Panier Cadeau.

prix : Cette colonne contient le prix du produit, par exemple 22,5 euros;

image : Cette colonne contient le chemin de l'image du produit.

catégorie : Cette colonne contient la catégorie du produit. Dans le cas d'une librairie en ligne, par exemple, cette colonne pourra contenir des valeurs telles que roman policier ou bande dessinée.

courtedesc : Cette colonne contient une description rapide du produit, par exemple : ce panier cadeau contient une bouteille de sauternes et un foie gras d'oie mi-cuit.

longuedesc : Cette colonne contient une description complète du produit. Il peut s'agir d'une page entière d'informations.

statut : Cette colonne contient des informations sur le statut actuel du produit. Elle pourra par exemple indiquer qu'un produit ne doit pas, provisoirement, être proposé à la vente.

Pour créer la table produits, procédez comme suit

1.         Si Access n'est pas ouvert, lancez-le en choisissant Démarrer, Programmes, Microso-Access. Sélectionnez l'option permettant d'ouvrir un fichier existant, puis sélectionnez la base de données shopDB.

2.         Une fois la base de données shopDB ouverte, double-cliquez sur l'option Créer une table en mode Création. La fenêtre de la Figure 5.3 apparaît.

Figure 5.3 Création d'une table en mode Création

3.         Entrez les informations appropriées dans la table (laissez vide la colonne Description).

Faites de la colonne id la clé primaire en sélectionnant cette colonne dans la grille et en cliquant sur l'icône clé primaire (la clé).

Enregistrez la nouvelle table en cliquant sur l'icône d'enregistrement (la disquette) et en choisissant le nom Produits.

Figure 5.4 - Création de la table produits en ligne sur MySQL (avec phpMyAdmin )

CREATE TABLE `produits` (

`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

`nom` TEXT NOT NULL,

`prix` FLOAT NOT NULL,

`image` TEXT NOT NULL,

`categorie` TEXT NOT NULL,

`courtdesc` BLOB NOT NULL,

`longuedesc` BLOB NOT NULL,

`statut` INT NOT NULL

);

Vous venez de créer une table nommée produits. Chaque ligne de la table représentera un produit particulier du magasin en ligne. Dans le reste de ce chapitre, nous verrons comment utiliser des scripts serveur pour se connecter à la base de données et modifier les informations qui y sont contenues.

Dans cette partie, vous verrez comment ouvrir une connexion avec une base de données l’aide d'un script serveur. Cependant, avant de pouvoir ouvrir cette connexion, vous devez fournir à la page serveur des informations sur l'emplacement physique de la base de données. En d'autres termes, vous devez fournir au script une méthode lui permettant de trouver la base de données sur le disque dur. L'une des méthodes pour y parvenir est de faire appel à DSN (Data Source Name).

Plusieurs types de DSN peuvent être crées. Si vous créez un DSN fichier (File DSN), Les informations de connexion à la base de données seront stockées dans un fichier. Si vous créez un DSN système (System DSN), les informations de connexion seront stockées dans la base de registre de l'ordinateur.

Il n’y a pas de raison particulière d'utiliser un type de DSN plutôt qu'un autre; tous deux fonctionnent parfaitement bien. Dans le cas présent, nous créerons un DSN système.

1.         Ouvrez le panneau de configuration en choisissant Démarrer, Paramètres, Panneau de configuration.

2.         Double-cliquez sur l'icône source de données ODBC.

3.         Sélectionnez 1'onglet DSN système, puis cliquez sur Ajouter

4.         Sélectionnez Microsoft Access Driver et cliquez sur Terminer

5.         Dans la boite de dialogue installation ODBC pour Microsoft Access, cliquez sur le bouton sélectionner et retrouvez la base de données shopDB sur votre disque dur (la base de données que vous avez créée plus haut). Cliquez sur OK.

6.         Dans le champ nom de la source de données, entrez accessShopDSN et cliquez sur OK (voir Figure 5.4).

7.         Cliquez sur OK pour refermer la boite de dialogue Administrateur de source de données ODBC.

Figure 5.5 Creation d’un DSN en Windows.

Une fois ces opérations effectuées, vous avez crée un nouveau DSN système nommé accessShopDSN. Vous n'avez besoin de créer qu'un seul DSN par base de données utilisée dans vos scripts. Une fois le DSN créé, tous vos scripts peuvent utiliser le même DSN pour se connec­ter à la base de données. Cependant, si vous déplacez votre base de données, vous devrez mettre à jour le DSN en répétant la procédure ci-dessus.

La procédure permettant de créer un DSN pour une base do données SQL Server Oracle ressemble beaucoup a celle décrite ci-dessus. Ainsi, pour créer un DSN pour une base de données SQL Server, il vous suffira de choisir SQL Server Driver à l’étape 4. Vous devrez également fournir un login et un mot de passe SQL Server.

Maintenant que vous avez créé un DSN, vous pouvez l'utiliser pour ouvrir une connexion avec la base de données. Pour créer une connexion, vous devez utiliser un objet de données ActiveX ou ADO (ActiveX Data Object). L'ADO est une collection d'objets permettant à des scripts ASP d'interagir avec des bases de données. Il s'agit d'objets ActiveX pouvant être utilisés de la même façon que n'importe quel composant ASP, par exemple le composant File Access.

Dans une page ASP, une connexion à une base de données est représentée par l'objet ADO Connection. Le Listing 5.1 montre comment utiliser l'objet Connection avec le DSN que nous venons de créer pour ouvrir une connexion avec une base de données.

Listing 5.1 Connexion à une base de données

1  <%

2 Set Con = Server.CreateObject("ADODB.Connection")

3 Con.Open "accessShopDSN"

4 %>

Ce script ouvre une connexion avec la base de données Access shopDB en faisant appel au DSN accessShopDSN. Ligne 2, une instance de l'objet Connection est créée. Ligne 3, la connexion à la base de données est ouverte à l'aide de la méthode open de l'objet Connection.

Figure 5.6 – Connexion à une base de données avec Dreamweaver

Ouverture d'une connexion avec une base de données peut être comparée à l'établissement d'une connexion avec un fournisseur d'accès Internet. Une fois la connexion établie, des messages peuvent être envoyés dans les deux sens entre le script ASP et la base de données. Vous pouvez par exemple passer un message du script a la base de données pour lui indiquer d'insérer un nouvel enregistrement ou de mettre à jour une information donnée. Dans les deux sections ci-dessous, vous verrez comment passer ce type de message.

Les bases de données nécessitent d'utiliser un langage spécifique. Pour obtenir quelque chose d'une base de données, vous devez lui parler "dans sa langue". Le langage de la plupart des bases de données modernes, est le SQL (pour Structured Query Language  langage de requête structurée).

Ainsi, pour ajouter un nouvel enregistrement a une table de base de données à partir d'une page serveur, vous devez d'abord ouvrir une connexion avec la base de données, puis envoyer à la base de données une chaîne lui demandant d'insérer un nouvel enregistrement. Pour insérer un nouvel enregistrement dans une base de données, on fait appel a l'instruction SQL INSERT INTO.

Le script du Listing 5.2 insère un nouvel enregistrement dans la table produits.

Listing 5.2: Insertion d'un nouvel enregistrement

Ce script insère un nouveau produit dans la table produits. Les lignes 2 et 3 ouvrent une connexion avec la base de données. Ligne 5, une chaîne contenant l'instruction SQL INSERT INTO est affectée à la variable sqlString. L'instruction SQL est exécutée ligne 7. Ligne 8  enfin, la connexion avec la base de données est refermée.

Ce script insère un nouveau produit dans la table produits. La ligne 2 ouvre une connexion avec la base de données. Ligne 4, une chaîne contenant l'instruction SQL INSERT INTO est affectée à la variable sqlString. L'instruction SQL est exécutée ligne 6.

Ce script insère un nouveau produit dans la table produits. Les lignes 1 et 2 créent une nouvelle instance du pilot jdbc pour mysql. La 3 ouvrent une connexion avec la base de données. Ligne 5, une chaîne contenant l'instruction SQL INSERT INTO est affectée à la variable sqlString. Un objet instruction SQL est crée sur la ligne 7 et exécuté sur la ligne 8. Ligne 9  enfin, la connexion avec la base de données est refermée.

La syntaxe de base de l'instruction SQL INSERT INTO est très simple

INSERT INTO nom_table ( liste_colonnes ) VALUES ( liste_valeurs).

nom_table permet d'indiquer à quelle table le nouvel enregistrement doit être ajouté liste_colonnes permet d'indiquer la ou les colonnes de la table concernées, et liste_valeurs la ou les valeurs à affecter à ces colonnes. Les colonnes et les valeurs doiven­t être indiquées dans le même ordre et séparées par des virgules.

Lorsque vous insérez des chaînes de caractères, des dates ou des heures, les valeurs doivent être placées entre guillemets. Pour des valeurs numériques, n'utilisez pas de guillemets.

Si vous exécutez le script du Listing 5.2, vous pouvez vous assurer que le nouveau produit sera ajouté à la table produits dans Access. Lancez Access, ouvrez la base de données shopDB double-cliquez sur la table Produits. Vous devriez voir s'afficher à l'écran l’enregistrement avec les valeurs prévues au Listing 5.2.

La variable sqlString utilisant une chaîne de caractères comme valeur, celle-ci peut être créée de manière dynamique. Le script du Listing 5.3 effectue exactement la même opération que le précédent, à ceci près que la chaîne y est créée à partir de variables pour les valeurs des colonnes.

Listing 5.3 Insertion d'un nouvel enregistrement a l'aide de variables

Ce script, comme le précédent, insère un nouveau produit dans la table Produits. Cependant, deux variables, nomproduit et prixproduit, servent à stocker les valeurs qui seront ajoutées à la base de données. Ligne 7, la variable sqlString reçoit une chaîne construite avec des variables nomproduit et prixproduit. Ligne 9, enfin, la chaîne sqlString est exécutée, et un nouveau produit est ajoute à la base de données.

Vous avez peut-être remarqué que les valeurs affectées à la colonne nom sont mises entre apostrophes, ce qui n’est pas le cas pour les valeurs affectées a la colonne prix. Access utilise les apostrophes de la même manière que le VBScript ou le HTML utilisent les guillemets. Ils permettent d'indiquer le début et la fin d’une chaîne. Nom étant une colonne de texte, vous devez utiliser des apostrophes pour affecter tine valeur a cette colonne.

L’application catalogue produits devra exécuter les taches suivantes 

• Permettre l’administration du catalogue
• Assurer la présentation du catalogue dans des formats multiples

L’administration du catalogue doit permettre :

• L’ajout de nouveaux produits et
• La mise à jours des informations sur des produits déjà présents dans le catalogue

La présentation pourrait se faire sous forme de :

• Collection de plusieurs produits sur une page de catalogue ou comme
• Fiches de produits où chaque produit occupera une page du catalogue

Toutes les tâches évoquées font partie des tâches les plus fréquentes dans les applications liées à des bases de données et qui pour cette raison sont déjà automatisées dans des logiciels de création d’application web comme Dreamweaver.

Dans Dreamweaver on peut insérer ce que l’on appèle des "objets d’application" qui créent des pages serveur adaptées à chacune des tâches évoquées. Les "objets" disponibles à partir du menu Insérer sont présentés dans la figure 5.7

Figure 5.7 – Objets d’application disponibles en Dreamweaver

Dans cette section, nous verrons comment créer un formulaire qui vous permettra d'ajouter facilement des produits a votre magasin en ligne.

La page nommée addProduits.xxx[2] sera créée. Elle contiendra un formulaire HTML permettant de saisir les informations concernant le produit et ajoute le nouveau produit a la base de données.

Vous pouvez insérer les éléments de base d'une page d'insertion en une seule opération à l'aide de l'objet dynamique Formulaire d'insertion d'enregistrement. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Insérer l'enregistrement.

Vous avez également la possibilité d'insérer ces éléments séparément à l'aide des outils de formulaire et du panneau Comportements de serveur.

Après avoir placé les éléments sur la page, vous pouvez personnaliser le formulaire à votre convenance à l'aide des outils de conception de Dreamweaver ou modifier le comportement Insérer l'enregistrement à l'aide du panneau Comportements de serveur.

Pour créer la page d'insertion à l'aide de l'objet dynamique Formulaire d'insertion d'enregistrement :

1. Ouvrez la page en mode Création, puis choisissez Insertion > Objets d'application > Formulaire d'insertion d'enregistrement.

La boîte de dialogue Insérer le formulaire d'insertion d'enregistrement s'affiche.

Figure 5.8 – Boite de dialogue pour configurer une page d’insertion à l’aide de l'objet dynamique Formulaire d'insertion d'enregistrement

2. Complétez les options de la boîte de dialogue et cliquez sur OK.

Dreamweaver insère dans la page un formulaire HTML et un comportement de serveur Insérer l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme de tableau simple, que vous pouvez ensuite aisément personnaliser à l'aide des outils de conception de page de Dreamweaver (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire).

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Insérer un enregistrement.

La page addProduits.asp qui résulte comprend un formulaire HTML normal avec des champs correspondant aux colonnes de la table Produits.

Figure 5.9 – Page d’insertion des produits au catalogue

Dans cette section, nous verrons comment créer un formulaire qui vous permettra de mettre à jour facilement les produits de votre magasin en ligne.

La page nommée updateProduits.xxx sera créée. Elle contiendra un formulaire HTML permettant de modifier les informations concernant le produit qui a le numéro d’identification (référence) indiqué dans la chaîne de requête.

l'objet dynamique Formulaire de mise à jour des enregistrements. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement.

Pour que vous puissiez utiliser l'objet dynamique, il faut que votre application Web soit capable d'identifier l'enregistrement à mettre à jour et que votre page de mise à jour soit en mesure de le récupérer.

Vous avez également la possibilité d'insérer séparément le formulaire HTML et le comportement de serveur Mettre à jour l'enregistrement dans la page à l'aide des outils de formulaire et du panneau Comportements de serveur.

Après avoir placé les objets dynamiques sur la page, vous pouvez utiliser les outils de conception de Dreamweaver pour personnaliser le formulaire ou le panneau Comportements de serveur pour modifier le comportement de serveur Mettre à jour l'enregistrement.

Pour créer la page de mise à jour à l'aide de l'objet dynamique Formulaire de mise à jour des enregistrements :

1. Ouvrez la page en mode Création, puis choisissez Insertion > Objets d'application > Formulaire de mise à jour des enregistrements.

La boîte de dialogue Insérer le formulaire de mise à jour des enregistrements s'affiche.

Figure 5.10 – Boite de dialogue pour configurer une page de mise à jour à l'aide de l'objet dynamique Formulaire de mise à jour des enregistrements

2. Complétez les options de la boîte de dialogue et cliquez OK.

Cet objet insère dans votre page un formulaire HTML et un comportement de serveur Mettre à jour l'enregistrement. Les objets de formulaire sont disposés sur la page sous forme d'un tableau simple, que vous pouvez ensuite personnaliser à l'aide des outils de conception de page de Dreamweaver (assurez-vous qu'aucun objet de formulaire ne dépasse les limites du formulaire).

Pour modifier le comportement de serveur, ouvrez le panneau Comportements de serveur (Fenêtre > Comportements de serveur) et double-cliquez sur le comportement Mettre à jour l'enregistrement.

La page updateProduits.asp qui résulte comprend un formulaire HTML normal avec des champs corres­pondant aux colonnes de la table Produits.

Figure 5.11 – Page de mise à jour des produits au catalogue

La présentation à l’aide de pages web dynamiques (ou pages serveur) des produits enregistrés dans une table de la base de données peut prendre des formes multiples. Ici on montre deux qui semblent être les plus fréquentes. Il s’agit de la collection de plusieurs produits sur une page de catalogue ou de fiches de produits ou chaque produit occupera une page de la présentation en ligne.

Pour arriver à obtenir ces présentations il existe en Dreamweaver un objet serveur nommé tableau dynamique qui offre un format unique de présentation, qui peut ensuite être modifié afin d’obtenir des présentations variées.

L'objet de serveur Tableau dynamique permet de créer un tableau renfermant un contenu dynamique et d'appliquer le comportement Région répétée à partir d'une seule boîte de dialogue. Cet objet de serveur est particulièrement utile, car il insère le contenu dynamique d'un jeu d'enregistrements dans le tableau et applique simultanément le comportement de serveur Région répétée.

Pour créer un tableau dynamique :

1. Choisissez Insertion > Objets d'application > Tableau dynamique.

La boîte de dialogue Tableau dynamique s'affiche.

5.12 - boîte de dialogue pour configurer un Tableau dynamique

2. Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu d'enregistrements à utiliser.
3. Sélectionnez le nombre d'enregistrements à afficher sur chaque page (un enregistrement à la fois permet à obtenir des fiches avec un enregistrement par page).
4. A ce stade, vous pouvez taper les valeurs des bordures du tableau, de la marge intérieure des cellules et de l'espacement entre les cellules.

La boîte de dialogue Tableau dynamique mémorise les valeurs spécifiées pour les bordures du tableau, la marge intérieure des cellules et l'espacement entre les cellules. Dans le cas de projets qui requièrent plusieurs tableaux dynamiques d'aspect semblable, vous pouvez taper les valeurs de mise en forme du tableau pour simplifier le développement des pages. Une fois le tableau inséré, vous pouvez toutefois ajuster ces valeurs à l'aide de l'inspecteur de propriétés du tableau.

5. Cliquez sur OK.

Un tableau et des espaces réservés destinés au contenu dynamique défini dans le jeu d'enregistrements associé s'insèrent sur la page. Le nom de chaque élément d'enregistrement se place dans la ligne de titre du tableau. Vous pouvez remplacer les titres par tout texte descriptif ou image pertinente.

La deuxième ligne intégrée à une Région répétée contient les champs du jeu d’enregistrements. La région répétée est le comportement serveur qui permet d’afficher dans une page plusieurs enregistrements à fois en provenance du jeu d’enregistrements selon le nombre indiqué dans la boite de dialogue qui défini le Tableau dynamique.

Figure 5.13 – Vue (en mode édition de Dreamweaver) d’une page qui contient un tableau dynamique

Vous pouvez créer en une seule opération une barre de navigation de jeu d'enregistrements à l'aide du comportement de serveur correspondant. Elle permet de naviguer parmi les pages du catalogue en ligne.

Cet objet de serveur ajoute les éléments suivants à la page :

• Un tableau HTML comportant des liens texte ou image.
• Un jeu de comportements de serveur « Déplacer vers ».
• Un jeu de comportements de serveur « Afficher la région ».

La version texte de la barre de navigation du jeu d'enregistrements ressemble à ceci :

La version image de la barre de navigation du jeu d'enregistrements ressemble à ceci :

Avant de placer la barre de navigation dans la page, assurez-vous que la page contient un jeu d'enregistrements dans lequel naviguer et une mise en forme pour afficher les enregistrements.

Après avoir placé la barre de navigation sur la page, vous pouvez utiliser les outils de conception de Dreamweaver pour la personnaliser à votre convenance. Vous pouvez également modifier les comportements de serveur « Déplacer vers » et « Afficher la région » en double-cliquant dessus dans le panneau Comportements de serveur.

Pour créer la barre de navigation de jeu d'enregistrements à l'aide de l'objet de serveur :

1. En mode Création, placez le point d'insertion à l'endroit de la page où vous souhaitez que la barre de navigation apparaisse.
2. Ouvrez la boîte de dialogue Barre de navigation du jeu d'enregistrements (Insertion > Objets d'application > Barre de navigation du jeu d'enregistrements).

La boîte de dialogue Barre de navigation du jeu d'enregistrements s'affiche.

3. Dans le menu déroulant Jeu d'enregistrements, sélectionnez le jeu d'enregistrements dans lequel naviguer.
4. Dans la section Afficher à l'aide de, sélectionnez le format d'affichage des liens de navigation sur la page. L'option Texte place des liens texte sur la page, tandis que l'option Images permet d'utiliser des images graphiques.

Dans la version image de la barre de navigation, Dreamweaver utilise ses propres fichiers d'image. Une fois que la barre se trouve sur la page, vous pouvez néanmoins les remplacer par les vôtres.

5. Cliquez sur OK.

Le tableau qui se crée contient des liens texte ou image permettant à l'utilisateur, lorsqu'il clique dessus, de se déplacer dans le jeu d'enregistrements sélectionné. Lorsque le premier enregistrement du jeu s'affiche, les liens ou images « Premier » et « Précédent » sont masqués. Lorsque le dernier enregistrement du jeu s'affiche, les liens ou images « Suivant » et « Dernier » sont masqués.

Vous pouvez personnaliser la mise en forme de la barre de navigation à l'aide des outils de conception de Dreamweaver.

A l’aide d’un tableau dynamique et d’une barre de navigation du jeu d’enregistrement, en modifiant la mise en forme, on obtient des présentations variées pour les pages d’un catalogue en ligne.

Quand on choisit un tableau dynamique qui affiche plusieurs enregistrements à la fois on obtient une page de catalogue qui présente une collection de plusieurs produits comme dans la figure suivante:

Figure 5.14 – Page catalogue où le tableau dynamique affiche plusieurs enregistrements à la fois

Quand le tableau dynamique choisit, prévoit un seul enregistrement à la fois, on obtient des fiches de produits où chaque produit occupera une page de la présentation en ligne. Voici un exemple :

Figure 5.15 – Page catalogue où tableau dynamique affiche un seul enregistrement à la fois

Dans ce chapitre, vous avez vu comment interagir avec une base de données 1'aide de scripts serveur. Vous avez d'abord appris comment créer une nouvelle base de données et comment établir une connexion avec celle-ci.

Ensuite, vous avez vu comment ajouter des produits à votre magasin en ligne via des pages ASP en faisant appel a' l'instruction SQL INSERT INTO pour ajouter de nouvelles lignes à la table de la base de données. Pour finir, vous avez créé des pages serveur permettant de mettre à jour des informations de produit existantes en utilisant l’instruction SQL UPDATE.

Questions/ Réponses

Lors de la connexion à une base de données à partir d'une page serveur, j'obtiens l'erreur "Source de données non trouvée et nom de pilote non spécifié. D'où provient cette erreur

Vous verrez s'afficher cette erreur si votre DSN n'est pas correctement configuré. A partir de l'icône Sources de données ODBC du panneau de configuration, vérifiez que vous avez bien crée un DSN. Assurez-vous ensuite que vous n'avez pas fait de faute de frappe en saisissant le nom du DSN dans le script.

Y a-t-il une limite au nombre de produits qu^’il est possible de proposer dans mon magasin en ligne?

R  Une table de base de données peut contenir des milliards de lignes. Par conséquent, en théorie, il est possible d'ajouter des milliards de produits à la table Produits.

Q  Pourquoi Access ne peut-il être utilisé pour un site Web dont le nombre de visiteurs est très important?

R  Access est une base de données individuelle, et non une base de données client-serveur De ce fait, il ne peut gérer qu'un nombre limite de connexions simultanées. Si vous prévoyez que le nombre d'utilisateurs se connectant simultanément A votre base de données dépasse 30, vous devriez sérieusement envisager de passer à SQL Server ou à MySQL etc.

Atelier

Les questions et les exercices ci-dessous sont destines à tester vos connaissances concernant les informations traitées dans ce chapitre. Vous trouverez les réponses dans l'Annexe A "Réponses aux questions".

Testez vos connaissances

1.  Si vous déplacez votre base de données Access, quelles mesures devez-vous prendre pour faire en sorte que vos scripts ASP trouvent la base de données à son nouvel emplacement?

2.  Ou se trouve I'erreur dans l'instruction SQL ci-dessous ?

INSERT INTO Products ( productname ) VALUES ( Panier cadeau)

3.  Pourquoi les apostrophes posent-elles problème lors de l'ajout ou de la modification des enregistrements d'une base de données?

4. Pourquoi les guillemets posent-ils problème lors de l'affichage d'une variable A l'aide de l'attribut VALUE dans un formulaire HTML?

Exercice

Comment faire pour ajouter des informations supplémentaires à votre magasin en ligne Supposons par exemple que vous souhaitiez ajouter un champ pour le numéro de référence d'un produit ? Comment modifierez-vous la table de base de données et les pages serveur de ce chapitre pour y inclure ce nouveau champ?

Mise en place d’un catalogue de produits. 1

SOMMAIRE. 1

Création de la base de données du magasin. 1

Création de la table Produits. 3

Connexion à une base de données. 5

Ajout de produits à la table Produits. 8

Création d’une application catalogue produits avec Dreamweaver. 10

Création d’une application pour ajouter des produits au catalogue. 10

Création d’une application pour mettre à jour les produits d’un catalogue  12

Présentation du catalogue en ligne. 14

En résumé. 19