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

Créez une page dans 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 contient une zone de texte pour saisir des instructions SQL ; la version simple n'en contient pas.

Nommez le jeu d'enregistrements et spécifiez l'emplacement des données que vous souhaitez mettre à jour à l'aide des menus contextuels Connexion et Table.

Cliquez sur Sélectionnées, puis sélectionnez une colonne clé (généralement la colonne d'identifiant d'enregistrement) et les colonnes qui contiennent les données à mettre à jour.

Configurez la zone Filtre de sorte que la Valeur de votre colonne clé soit égale à la Valeur du paramètre d'URL correspondant transmis par la page de résultats.

Ce type de filtre crée un jeu d'enregistrements qui ne contient que l'enregistrement spécifié par la page de résultats. Par exemple, si votre colonne clé contient des informations d'identifiant d'enregistrement et s'appelle PRID, et si la page de résultats transmet les informations d'identifiant d'enregistrement correspondantes dans le paramètre d'URL appelé id, la zone Filtre devrait ressembler à l'exemple 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.

Composez votre page à l'aide des outils de conception Dreamweaver.

Ajoutez un formulaire HTML en plaçant le point d'insertion à l'endroit où vous souhaitez que le formulaire apparaisse et en sélectionnant Insertion > Formulaire > Formulaire.

Un formulaire vierge est créé sur la page. Vous devrez peut-être activer les éléments invisibles (Affichage > Aide visuelle > Éléments invisibles) pour voir les limites du formulaire, qui sont représentées par des lignes rouges fines.

Nommez le formulaire HTML en cliquant sur la balise <form> en bas de la fenêtre de document pour sélectionner le formulaire, en ouvrant l'inspecteur de propriétés (Fenêtre > Propriétés) et en saisissant un nom dans la zone Nom du formulaire.

Vous n'avez pas besoin de spécifier un attribut action ou method pour le 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 l'enregistrement définit ces attributs pour vous.

Ajoutez un objet de formulaire tel qu'un champ de texte (Insertion > Formulaire > Champ de texte) pour chaque colonne que vous souhaitez mettre à jour dans la table de base de données.

Les objets de formulaire sont destinés à la saisie de données. Les champs de texte sont courants à cette fin, mais vous pouvez également utiliser des menus, des options et des cases d'option.

Chaque objet de formulaire doit avoir une colonne correspondante dans le jeu d'enregistrements que vous avez défini précédemment.La seule exception est la colonne de clé unique, qui ne doit avoir aucun objet de formulaire correspondant.

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

Vous pouvez modifier le libellé du bouton Envoyer en sélectionnant le bouton, en ouvrant l'inspecteur de propriétés (Fenêtre > Propriétés) et en saisissant une nouvelle valeur dans la zone Libellé.

Assurez-vous d'avoir défini un jeu d'enregistrements pour conserver l'enregistrement que l'utilisateur souhaite mettre à jour.

Voir Récupérer l'enregistrement à mettre à jour.

Liez chaque objet de formulaire aux données du jeu d'enregistrements, comme décrit dans les rubriques suivantes :

• Afficher du contenu dynamique dans les champs de texte HTML

• Présélectionner dynamiquement une case à cocher HTML

• Présélectionner dynamiquement une case d'option HTML

• Insérer ou modifier un menu de formulaire HTML dynamique

• Rendre dynamiques les menus de formulaire HTML existants

Dans le panneau Comportements de serveur (Fenêtre > Comportements de serveur), cliquez sur le bouton Plus (+) et sélectionnez Mettre à jour l'enregistrement dans le menu contextuel.

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 contextuel 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 contextuel Mettre à jour la table, sélectionnez la table de base de données qui contient l'enregistrement que vous mettez à jour.

(ColdFusion, PHP) Spécifiez une colonne de base de données à mettre à jour, sélectionnez l'objet de formulaire qui mettra à jour la colonne dans le menu contextuel Valeur, sélectionnez un type de données pour l'objet de formulaire dans le menu contextuel Envoyer sous et sélectionnez Clé Principal si vous souhaitez identifier cette colonne comme clé principal.

Le type de données correspond au type de données que la colonne de votre table de base de données attend (texte, numérique, valeurs d'option Booléen).

Répétez la procédure pour chaque objet de formulaire de votre formulaire.

(ASP) Dans le menu contextuel Sélectionner l'enregistrement dans, spécifiez le jeu d'enregistrements qui contient l'enregistrement affiché dans le formulaire HTML. Dans le menu contextuel Colonne de clé unique, sélectionnez une colonne de clé (généralement la colonne ID d'enregistrement) pour identifier l'enregistrement dans la table de base de données. Si la valeur est un nombre, sélectionnez l’option Numérique. Une colonne de clé accepte généralement uniquement des valeurs numériques, mais accepte parfois des valeurs texte.

Dans la zone Après mise à jour ou En cas de réussite, accéder à, saisissez la page à ouvrir après la mise à jour de l'enregistrement dans la table ou cliquez sur le bouton parcourir pour parcourir jusqu'au fichier.

(ASP) Spécifiez une colonne de base de données à mettre à jour, sélectionnez l'objet de formulaire qui mettra à jour la colonne dans le menu contextuel Valeur, puis sélectionnez un type de données pour l'objet de formulaire dans le menu contextuel Envoyer sous. Le type de données correspond au type de données que la colonne de votre table de base de données attend (texte, numérique, valeurs d'option Booléen). Répétez cette procédure pour chaque objet du formulaire.

Cliquez sur OK.

Dreamweaver ajoute un comportement de serveur à la page qui permet aux utilisateurs de mettre à jour des enregistrements dans une table de base de données en modifiant les informations affichées dans le formulaire HTML et en cliquant sur le bouton Envoyer.

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

Ouvrez la page en mode Création et sélectionnez Insertion > Objets de données > Mettre à jour l'enregistrement > Assistant Formulaire de mise à jour d'enregistrement.

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

Dans le menu contextuel 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 contextuel Table à mettre à jour, sélectionnez la table de base de données qui contient l'enregistrement à mettre à jour.

Dans le menu contextuel Sélectionner l'enregistrement dans, spécifiez le jeu d'enregistrements qui contient l'enregistrement affiché dans le formulaire HTML.

Dans le menu contextuel Colonne de clé unique, sélectionnez une colonne de clé (généralement la colonne ID d'enregistrement) pour 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 de clé accepte généralement uniquement des valeurs numériques, mais parfois elle accepte des valeurs de texte.

Dans la zone Après mise à jour, accéder à, entrez la page à ouvrir après la mise à jour de l'enregistrement dans la table.

Dans la zone Champs de formulaire, spécifiez 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 des ID de clés uniques pour chaque nouvel enregistrement créé, supprimez l'objet de formulaire correspondant à la colonne de clé en le sélectionnant dans la liste et en cliquant sur le bouton Moins (-). Cela élimine le risque que l'utilisateur du formulaire entre une valeur d'ID qui existe déjà.

Vous pouvez également modifier l'ordre des objets de formulaire sur le formulaire HTML en sélectionnant un objet de formulaire dans la liste et en cliquant sur la flèche vers le haut ou vers le bas située à droite de la boîte de dialogue.

Spécifiez comment chaque champ de saisie de données doit apparaître sur le formulaire HTML en cliquant sur une ligne du tableau Champs de formulaire et en entrant les informations suivantes dans les zones situées sous le tableau :

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

• 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 d'autres objets de formulaire en sélectionnant une autre ligne dans Champs de formulaire et en entrant un libellé, une valeur Afficher comme et une valeur Envoyer comme.

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 de l'enregistrement actuel pour l'option et une valeur donnée pour déterminer si l'option est cochée lorsque l'enregistrement s'affiche.

Cliquez sur OK.

Dreamweaver ajoute à la fois un formulaire HTML et un comportement de serveur de mise à jour d'enregistrement à votre page.

L'objet de données ajoute à la fois un formulaire HTML et un comportement de serveur de mise à jour d'enregistrement à votre page.Les objets de formulaire sont disposés dans un tableau de base, que vous pouvez personnaliser à l'aide des outils de conception de page de Dreamweaver. (Assurez-vous que tous les objets de formulaire restent dans 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.

Sélectionnez Manuellement ou À partir de la base de données, selon la façon dont vous prévoyez 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.

Dans la zone Valeur sélectionnée égale à, si vous voulez qu'un élément particulier soit sélectionné lorsque la page s'ouvre dans un navigateur ou lorsqu'un enregistrement s'affiche dans le formulaire, entrez une valeur égale à la valeur de l'élément.

Vous pouvez entrer une valeur statique ou spécifier une valeur dynamique en cliquant sur l'icône d'éclair et en sélectionnant une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur que vous spécifiez doit correspondre à l'une des valeurs de l'élément.