Guide d'utilisation Annuler

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

 

 

Remarque :

L’interface utilisateur a été simplifiée sous Dreamweaver et versions ultérieures. Par conséquent, il se peut que vous ne trouviez pas certaines options décrites dans cet article sous Dreamweaver et versions ultérieures. Pour plus d’informations, voir cet article.

À propos des pages de mise à jour d’enregistrements

Votre application peut contenir un ensemble de pages permettant à l’utilisateur de mettre à jour les enregistrements existants d’une table de base de données. L’ensemble de pages se compose normalement d’une page de recherche, d’une page de résultats et d’une page de mise à jour. La page de recherche et la page de résultats permettent aux utilisateurs de récupérer un enregistrement et la page de mise à jour de le modifier.

Recherche de l’enregistrement à mettre à jour

Lorsqu’un utilisateur veut mettre à jour un enregistrement, il doit d’abord localiser celui-ci dans la base de données. Vous devez donc créer une page de recherche et de résultats qui fonctionnera en tandem avec la page de mise à jour. L’utilisateur entre des critères de recherche dans la page de recherche et sélectionne l’enregistrement dans la page de résultats. Lorsqu’il clique sur l’enregistrement sur la page de résultats, la page de mise à jour s’ouvre et affiche l’enregistrement dans un formulaire HTML.

Après avoir créé les pages de recherche et de résultats, vous devez ajouter des liens à la page de résultats afin d’ouvrir la page de mise à jour. Vous devez ensuite modifier les liens de manière à transmettre les ID des enregistrements sélectionnés par l’utilisateur. La page de mise à jour utilise cet ID pour rechercher l’enregistrement demandé dans la base de données et l’afficher.

Le processus destiné à ouvrir la page de mise à jour et à la transmission d’un ID d’enregistrement est identique à celui d’ouverture d’une page de détails et à la transmission d’un ID d’enregistrement. Pour plus d'informations, consultez la section Création de liens vers la page de détails.

Récupération de l’enregistrement à mettre à jour

Lorsque la page de résultats a transmis un ID d’enregistrement à la page de mise à jour, de manière à identifier l’enregistrement à mettre à jour, la page de mise à jour doit lire le paramètre, récupérer l’enregistrement dans la table de base de données, puis le stocker temporairement dans un jeu d’enregistrements.

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

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

  2. 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.

  3. Nommez le jeu d’enregistrements et indiquez où se trouvent les données à mettre à jour à l’aide des menus déroulants Connexion et Table.
  4. 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.
  5. 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 :

    Surface de filtration

  6. 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é.

Finalisation de la page d’actualisation élément par élément

Une page de mise à jour est constituée de trois éléments :

  • un jeu d’enregistrements filtré permettant de récupérer l’enregistrement à partir d’une table de base de données ;
  • un formulaire HTML permettant aux utilisateurs de modifier les données de l’enregistrement ;
  • un comportement de serveur Mettre à jour l’enregistrement permettant de mettre à jour la base de données.

    Vous pouvez insérer séparément les deux derniers éléments de base d’une page de mise à jour à l’aide des outils de formulaire et du panneau Comportements de serveur.

Ajout d’un formulaire HTML dans une page d’actualisation

  1. Créez une page (Fichier > Nouveau > Page vierge). Cette page devient la page de mise à jour.
  2. Mettez la page en forme à l’aide des outils de conception de Dreamweaver.
  3. 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.

  4. 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.

  5. 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.

  6. 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.

Affichage de l’enregistrement dans le formulaire

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

Ajout d’un comportement de serveur destiné à la mise à jour de la base de données

  1. 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.

  2. Dans le menu déroulant Envoyer les valeurs à partir de, sélectionnez un formulaire.
  3. Dans le menu déroulant Source de données ou Connexion, sélectionnez une connexion à la base de données.
  4. Tapez votre nom d’utilisateur et votre mot de passe, le cas échéant.
  5. Dans le menu déroulant Mettre à jour la table, sélectionnez la table de base de données qui contient l’enregistrement à mettre à jour.
  6. (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.

  7. (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.
  8. 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.
  9. (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.
  10. 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.

Finalisation de la page de mise à jour en une seule opération

Une page de mise à jour est constituée de trois éléments :

  • un jeu d’enregistrements filtré permettant de récupérer l’enregistrement à partir d’une table de base de données ;

  • un formulaire HTML permettant aux utilisateurs de modifier les données de l’enregistrement ;

  • un comportement de serveur Mettre à jour l’enregistrement permettant de mettre à jour la base de données.

Vous pouvez insérer les deux derniers éléments d’une page de mise à jour en une seule étape à l’aide de l’objet de données 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 de données, 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.

Après avoir inséré les éléments sur la page au moyen de l’objet de données, 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.

Remarque :

la page de mise à jour ne peut pas contenir plus d’un comportement de serveur de modification d’enregistrement à la fois. Par exemple, vous ne pouvez pas y inclure également un comportement de serveur Insérer un enregistrement ou Supprimer l’enregistrement.

  1. 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.

  2. 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.

  3. Dans le menu déroulant Table à mettre à jour, sélectionnez la table de base de données qui contient l’enregistrement à mettre à jour.
  4. Dans le menu déroulant Sélectionner un enregistrement dans, indiquez le jeu contenant l’enregistrement affiché dans le formulaire HTML.
  5. 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.

  6. Dans la zone Après la mise à jour, aller à, indiquez la page à ouvrir après la mise à jour de l’enregistrement dans la table.
  7. 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.

  8. 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é.

    Remarque :

    les champs masqués sont insérés à la fin du formulaire.

    • 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.  
  9. 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é.

  10. 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.

Options des propriétés d’élément de formulaire

La boîte de dialogue Propriétés d’élément de formulaire a pour fonction de définir les options des éléments de formulaire figurant sur des pages qui permettent aux utilisateurs de mettre à jour les enregistrements d’une base de données.

  1. Choisissez Manuellement ou Depuis la base de données selon la manière dont vous envisagez de créer l’élément de formulaire.
  2. Cliquez sur le bouton Plus (+) pour ajouter un élément.
  3. Saisissez l’étiquette et la valeur de l’élément.
  4. 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.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?