Création de la mise à jour d’une page d’enregistrement sous Dreamweaver

Créez une page sous Dreamweaver et enregistrez-la.

Cette page est alors utilisée comme page de mise à jour.

Dans le panneau Liaisons (Fenêtre > Liaisons), cliquez sur le bouton Plus (+) et sélectionnez Jeu d’enregistrements.

Si la boîte de dialogue avancée s’affiche, cliquez sur Simple. La boîte de dialogue avancée comporte une zone de texte qui permet la saisie d’instructions SQL, contrairement à la boîte de dialogue simplifiée.

Nommez le jeu d’enregistrements et indiquez où se trouvent les données à mettre à jour à l’aide des menus déroulants Connexion et Table.

Cliquez sur l’option Sélectionnées et choisissez une colonne à clé (généralement la colonne ID de l’enregistrement), ainsi que les colonnes contenant les données devant être mises à jour.

Configurez la zone Filtre de manière à ce que la valeur de votre colonne à clé soit égale à celle du paramètre d’URL correspondant transmis par la page de résultats.

Ce type de filtre crée un jeu d’enregistrements ne contenant que l’enregistrement spécifié par la page de résultats. Par exemple, si votre colonne à clé contient des informations d’ID d’enregistrement et s’appelle PRID et si la page principale transmet les informations d’ID d’enregistrement correspondantes dans le paramètre d’URL appelé id, votre zone Filtre doit avoir l’aspect suivant :

Cliquez sur OK.

Lorsque l’utilisateur sélectionne un enregistrement sur la page de résultats, la page de mise à jour génère un jeu d’enregistrements contenant uniquement l’enregistrement sélectionné.

Créez une page (Fichier > Nouveau > Page vierge). Cette page devient la page de mise à jour.

Mettez la page en forme à l’aide des outils de conception de Dreamweaver.

Pour ajouter le formulaire HTML, placez le point d’insertion à l’endroit où le formulaire doit apparaître, puis sélectionnez Insertion > Formulaire > Formulaire.

Un formulaire vierge est créé sur la page. Il est parfois nécessaire d’activer les éléments invisibles (Affichage > Assistances visuelles > Eléments invisibles) pour afficher les contours du formulaire, représentés par de fines lignes rouges.

Pour nommer le formulaire HTML, commencez par le sélectionner en cliquant sur la balise <form> au bas de la fenêtre de document, ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés), puis entrez un nom dans la zone Nom du formulaire.

Vous n’avez pas besoin de définir l’attribut action ou method du formulaire pour lui indiquer où et comment envoyer les données d’enregistrement lorsque l’utilisateur clique sur le bouton Envoyer. Le comportement de serveur Mettre à jour un enregistrement définit automatiquement ces attributs.

Insérez un objet de formulaire tel qu’un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne à mettre à jour dans la table de base de données.

Les objets de formulaire sont destinés à la saisie de données. On utilise souvent des champs de texte dans ce but, mais rien ne vous empêche d’utiliser des menus, des options et des boutons radio.

A chaque objet de formulaire doit correspondre une colonne dans le jeu d’enregistrements défini précédemment. La seule exception est la colonne à clé unique, qui ne doit pas avoir d’objet de formulaire correspondant.

Ajoutez un bouton Envoyer au formulaire (Insertion > Formulaire > Bouton).

Vous pouvez modifier l’étiquette du bouton Envoyer ; pour ce faire, sélectionnez ce bouton, ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés) et entrez une nouvelle valeur dans la zone Etiquette.

Assurez-vous que vous avez défini au préalable un jeu d'enregistrements pour stocker l'enregistrement à mettre à jour.

Consultez la section Récupération de l'enregistrement à mettre à jour.

Liez chaque objet du formulaire à des données du jeu d'enregistrements, comme décrit dans les sections suivantes :

• Affichage de contenu dynamique dans des champs de texte HTML

• Activation dynamique d’une case à cocher HTML

• Activation dynamique d’un bouton radio HTML

• Insertion ou modification d’un menu de formulaire HTML dynamique

• Ajout de la fonctionnalité dynamique à des menus de formulaire HTML existants

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et choisissez Mettre à jour l’enregistrement dans le menu déroulant.

La boîte de dialogue Mettre à jour l’enregistrement s’affiche.

Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire.

Dans le menu déroulant Source de données ou Connexion, sélectionnez une connexion à la base de données.

Tapez votre nom d’utilisateur et votre mot de passe, le cas échéant.

Dans le menu déroulant Mettre à jour la table, sélectionnez la table de base de données qui contient l’enregistrement à mettre à jour.

(ColdFusion, PHP) Indiquez la colonne de base de données à mettre à jour. Dans le menu déroulant Valeur, sélectionnez l’objet de formulaire devant mettre à jour la colonne. Dans le menu déroulant Envoyer en tant que, sélectionnez le type de données de l’objet de formulaire, puis choisissez Clé primaire si vous souhaitez définir cette colonne comme étant la clé primaire.

Le type de données est celui qu’attend la colonne de la table de base de données (texte, numérique, valeurs d’option booléennes).

Répétez cette procédure pour chaque objet du formulaire.

(ASP) Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l’enregistrement affiché dans le formulaire HTML. Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d’ID de l’enregistrement) devant identifier l’enregistrement dans la table de la base de données. Si la valeur est un nombre, sélectionnez l’option Numérique. Une colonne à clé n’accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.

Dans la zone Après la mise à jour, aller à ou En cas de réussite, aller à, indiquez la page à ouvrir après mise à jour de l’enregistrement dans la table ou cliquez sur le bouton Parcourir pour naviguer jusqu’au fichier.

(ASP) Indiquez la colonne de base de données à mettre à jour. Dans le menu déroulant Valeur, sélectionnez l’objet de formulaire devant mettre à jour la colonne. Dans le menu déroulant Envoyer en tant que, sélectionnez ensuite le type de données de l’objet de formulaire. Le type de données est celui qu’attend la colonne de la table de base de données (texte, numérique, valeurs d’option booléennes). Répétez cette procédure pour chaque objet du formulaire.

Cliquez sur OK.

Dreamweaver ajoute à la page un comportement de serveur qui permet aux utilisateurs de mettre à jour les enregistrements d’une table de base de données ; pour ce faire, il leur suffit de modifier les informations affichées dans le formulaire HTML et de cliquer sur le bouton Envoyer.

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.

Ouvrez la page en mode Création, puis choisissez Insertion > Objets de données > Mettre à jour l’enregistrement > Assistant de formulaire de mise à jour des enregistrements.

La boîte de dialogue Formulaire de mise à jour des enregistrements s’affiche.

Dans le menu déroulant Connexion, sélectionnez une connexion à la base de données.

Cliquez sur le bouton Définir si vous devez définir une connexion.

Dans le menu déroulant Table à mettre à jour, sélectionnez la table de base de données qui contient l’enregistrement à mettre à jour.

Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l’enregistrement affiché dans le formulaire HTML.

Dans le menu déroulant Colonne à clé unique, sélectionnez une colonne à clé (généralement le champ d’ID de l’enregistrement) devant identifier l’enregistrement dans la table de la base de données.

Si la valeur est un nombre, sélectionnez l’option Numérique. Une colonne à clé n’accepte généralement que des valeurs numériques, mais dans certains cas, elle accepte également du texte.

Dans la zone Après la mise à jour, aller à, indiquez la page à ouvrir après la mise à jour de l’enregistrement dans la table.

Dans la zone Champs du formulaire, indiquez les colonnes de la table de base de données que chaque objet de formulaire doit mettre à jour.

Par défaut, Dreamweaver crée un objet de formulaire pour chaque colonne de la table de base de données. Si votre base de données génère automatiquement un ID de clé unique pour chaque enregistrement créé, supprimez l’objet de formulaire correspondant à la colonne à clé ; pour ce faire, sélectionnez l’objet dans la liste, puis cliquez sur le bouton Moins (-). Ainsi, l’utilisateur du formulaire ne pourra pas entrer une valeur d’ID qui existe déjà.

Vous pouvez également modifier l’ordre des objets de formulaire dans le formulaire HTML ; il vous suffit de sélectionner un objet dans la liste et de le déplacer dans cette dernière en cliquant sur la flèche vers le haut ou vers le bas située sur la droite de la boîte de dialogue.

Définissez la façon dont chaque champ de saisie de données doit s’afficher sur le formulaire HTML. Pour ce faire, cliquez sur une ligne du tableau Champs de formulaire et indiquez les informations suivantes dans les zones affichées sous la table :

• Dans la zone Etiquette, saisissez la description à afficher à côté du champ de saisie de données. Par défaut, Dreamweaver affiche dans ce champ le nom de la colonne de la table.

• Dans le menu déroulant Afficher comme, sélectionnez l’objet de formulaire à utiliser comme champ de saisie de données. Vous avez le choix entre Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio et Texte. Pour les entrées en lecture seule, choisissez Texte. Vous pouvez également choisir Champ Mot de passe, Champ de fichier et Champ masqué.

• Dans le menu déroulant Envoyer en tant que, sélectionnez le format de données qui sera accepté par cette colonne de la table de base de données. Par exemple, si les données numériques sont les seules admises, choisissez Numérique.

• Définissez les propriétés de l’objet de formulaire. Vous avez le choix entre plusieurs possibilités, en fonction de l’objet de formulaire sélectionné comme champ de saisie de données. Pour les champs de texte, les zones de texte et le texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue afin de définir des propriétés. Pour les options, sélectionnez l’option Cochée ou Non cochée.  

Définissez les propriétés des autres objets de formulaire en sélectionnant une autre ligne Champs du formulaire et en saisissant une étiquette, une valeur Afficher en tant que et une valeur Envoyer en tant que.

Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés. Pour les options, définissez une comparaison entre la valeur actuelle de l’enregistrement pour l’option et une valeur donnée afin de déterminer si l’option doit être activée ou désactivée lorsque l’enregistrement est affiché.

Cliquez sur OK.

Dreamweaver insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l’enregistrement.

L’objet de données insère dans la 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.

Choisissez Manuellement ou Depuis la base de données selon la manière dont vous envisagez de créer l’élément de formulaire.

Cliquez sur le bouton Plus (+) pour ajouter un élément.

Saisissez l’étiquette et la valeur de l’élément.

Pour qu’un élément particulier soit sélectionné à l’ouverture de la page dans un navigateur ou lorsqu’un enregistrement s’affiche dans le formulaire, indiquez une valeur égale à celle de l’élément dans la zone Sélectionner une valeur égale à.

Pour choisir une valeur statique ou dynamique, cliquez sur l’icône en forme d’éclair, puis sélectionnez une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur indiquée doit correspondre à l’une des valeurs de l’élément.