IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Evènement sur 2 boutons


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut Evènement sur 2 boutons
    Bonjour à tous,
    Novice en Java Script je voudrais régler un problème d'évènement sur deux boutons sur une page html. Ce qui marche :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <script>
            function soumettreFormulaire(bouton) {
                // Met à jour l'action du formulaire avec la valeur du bouton cliqué
                document.getElementById("monFormulaire").action = "conn.asp?bouton=" + bouton.value;
                // Soumet le formulaire
                document.getElementById("monFormulaire").submit();
    		}
    </script>
    Modification de votre mot de passe :
    <form id="monFormulaire" method="post" action="conn.asp">
    Saisissez votre mail : <input name="Mail" type = "text"">
    <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)"><BR>
    <%
    ' Vérifie si le paramètre "bouton" est présent dans l'URL
    If Request.QueryString("bouton") <> "" Then
        ' Récupère la valeur du bouton
    	Response.Write("L47") & ("<BR>")
        Dim valeurBouton
        valeurBouton = Request.QueryString("bouton")
     
        ' Exécution d'une logique en fonction de la valeur du bouton
        If valeurBouton = "Validez" Then
            ' Ajouter le code pour traiter l'envoi
    		if RechMail() then%> 
              Saisissez votre nouveau mot de passe : <input name="Pass" type = "text"">
              <input id="Button2" type="button" value="Validez" onclick="soumettreFormulaire2(this)"><BR>
    mais après pour gérer l'évènement sur le deuxième bouton(Button2) je n'y arrive pas j'ai codé comme ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <script>
            function soumettreFormulaire(bouton) {
                // Met à jour l'action du formulaire avec la valeur du bouton cliqué
                document.getElementById("monFormulaire").action = "conn.asp?bouton=" + bouton.value;
                // Soumet le formulaire
                document.getElementById("monFormulaire").submit();
    		}
    		function soumettreFormulaire2(bouton1) {
                // Met à jour l'action du formulaire avec la valeur du bouton cliqué
                document.getElementById("monFormulaire").action = "conn.asp?bouton1=" + bouton1.value;
                // Soumet le formulaire
                document.getElementById("monFormulaire").submit();
    		}
     
    </script>
    Modification de votre mot de passe :
    <form id="monFormulaire" method="post" action="conn.asp">
    Saisissez votre mail : <input name="Mail" type = "text"">
    <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)"><BR>
    <%
    ' Vérifie si le paramètre "bouton" est présent dans l'URL
    If Request.QueryString("bouton") <> "" Then
        ' Récupère la valeur du bouton
    	Response.Write("L47") & ("<BR>")
        Dim valeurBouton
        valeurBouton = Request.QueryString("bouton")
     
        ' Exécution d'une logique en fonction de la valeur du bouton
        If valeurBouton = "Validez" Then
            ' Ajouter le code pour traiter l'envoi
    		if RechMail() then%> 
              Saisissez votre nouveau mot de passe : <input name="Pass" type = "text"">
              <input id="Button2" type="button" value="Validez" onclick="soumettreFormulaire2(this)"><BR>
    		  <%If Request.QueryString("bouton1") <> "" Then
    		      Response.Write("L58") & ("<BR>")
                ' Récupère la valeur du bouton
                  'Dim valeurBouton
     
    			  valeurBouton= Request.QueryString("bouton1")
                  Response.Write("valeur bouton =") & valeurBouton &  ("<BR>")
                 ' Exécution d'une logique en fonction de la valeur du bouton
                 If valeurBouton = "Validez" Then
    			   changePass()
    			 end if
    		    end if
            end if
        End If
    End If
    %>
    Mais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Request.QueryString("bouton1")
    renvoie aucune valeur.
    Si quelqu'un a une idée. MERCI

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 640
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 640
    Par défaut
    il y a 2 étapes là
    • la 1re étape en javascript est qu'un clic sur le bouton envoie à l'url "conn.asp?bouton1=abc"
    • la 2e étape en asp est de faire le code qui lit la donnée dans l'url

    quelle est l'étape qui ne fonctionne pas chez vous ?


    je vois dans votre code que vous mélangez javascript, html et asp. ça serait peut-être plus clair pour vous si vous mettiez chacune de ces 3 parties dans un fichier à part.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut
    Citation Envoyé par mathieu Voir le message
    il y a 2 étapes là
    • la 1re étape en javascript est qu'un clic sur le bouton envoie à l'url "conn.asp?bouton1=abc"
    • la 2e étape en asp est de faire le code qui lit la donnée dans l'url

    quelle est l'étape qui ne fonctionne pas chez vous ?
    Bjr et merci pour votre réponse, c'est la deuxième étape qui ne marche pas
    je vois dans votre code que vous mélangez javascript, html et asp. ça serait peut-être plus clair pour vous si vous mettiez chacune de ces 3 parties dans un fichier à part.
    Je n'ai pas réussi avec cet éditeur à rendre la même lisibilité que j'ai avec Notepad++

  4. #4
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 640
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 640
    Par défaut
    Citation Envoyé par xeron33 Voir le message
    c'est la deuxième étape qui ne marche pas
    donc vous n'êtes pas sur le bon forum. quand vous allez poser la question sur le forum asp, réduisez le code à la partie qui ne fonctionne pas pour que les personnes qui souhaitent vous aider puissent tester chez eux.

    Citation Envoyé par xeron33 Voir le message
    Je n'ai pas réussi avec cet éditeur à rendre la même lisibilité que j'ai avec Notepad++
    je ne pensais pas au message ici mais plutot à rendre le code plus clair pour vous quand vous travaillez dessus.
    au fur et à mesure des ajouts, votre fichier va grandir et vous allez prendre de plus en plus de temps à retrouver ce que vous cherchez.

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut
    Citation Envoyé par mathieu Voir le message
    donc vous n'êtes pas sur le bon forum. quand vous allez poser la question sur le forum asp, réduisez le code à la partie qui ne fonctionne pas pour que les personnes qui souhaitent vous aider puissent tester chez eux.
    Difficiile quand même de repondre en ayant qu'une partie du problème... Merci quand même

  6. #6
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    Bonsoir,

    Quand tu développes une application web, il est super important de respecter les rôles des différentes technologies pour que ton code reste propre, facile à comprendre et performant. Voici pourquoi :
    1. HTML pour la structure et les balises principales

    • Le HTML est la base de toute page web. Il sert à définir la structure de ton formulaire, tes champs de saisie, tes boutons et tes textes.
    • Par exemple, dans ce code, les balises comme <form>, <input> et <label> définissent ce que l'utilisateur voit et comment il peut interagir avec la page.
    • Si ton script côté serveur (ASP) ou côté client (JavaScript) plante, le HTML reste visible et assure un minimum de fonctionnalité.

    2. ASP pour rendre le HTML dynamique


    • L'ASP s'exécute côté serveur et te permet de générer un contenu personnalisé ou dynamique avant que la page ne soit envoyée au navigateur.
    • Dans cet exemple :
      • Les blocs <% ... %> contiennent la logique en ASP pour vérifier l'email ou pour afficher des messages dynamiques.
      • L'instruction <%= Request.Form("Mail") %> te permet de réinsérer la valeur du champ e-mail déjà saisie, au cas où l'utilisateur devrait corriger une erreur.

    3. JavaScript pour la gestion côté client


    • Le JavaScript s'exécute directement dans le navigateur de l'utilisateur. Il te permet de rendre ta page interactive sans la recharger à chaque fois.
    • Ici, JavaScript est utilisé pour soumettre le formulaire en fonction du bouton cliqué :
      • Les fonctions soumettreFormulaire et soumettreFormulaire2 modifient dynamiquement l’attribut action du formulaire et l’envoient au serveur.
      • Cela rend l’application plus fluide et agréable pour l’utilisateur.

    4. Pourquoi bien séparer ces rôles est important


    • Lisibilité et simplicité : Chacune des technologies fait son travail. Le HTML s’occupe de l’affichage, l’ASP du traitement côté serveur, et le JavaScript de l’interactivité.
    • Sécurité : Les validations importantes (comme la vérification d’un email ou le changement de mot de passe) se font côté serveur avec ASP, là où les données sensibles sont protégées.
    • Performance : Avec JavaScript, tu évites des rechargements inutiles de la page, ce qui améliore l’expérience utilisateur.

    5. Un exemple pratique

    Dans ce code, cette organisation permet de :

    • Utiliser le HTML pour construire un formulaire simple et accessible.
    • Ajouter des blocs dynamiques avec ASP, comme le champ pour saisir le mot de passe une fois l’e-mail validé.
    • Optimiser l’interaction grâce au JavaScript, en soumettant le formulaire au bon moment avec les bonnes données.

    Conclusion


    1. JavaScript : Validation côté client

    Le JavaScript est utilisé pour gérer la soumission du formulaire sans recharger toute la page immédiatement.
    Fonction 1 : soumettreFormulaire

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function soumettreFormulaire(bouton) {
        document.getElementById("monFormulaire").action = "default.Asp?bouton=" + bouton.value;
        document.getElementById("monFormulaire").submit();
    }

    • Objectif : Cette fonction est appelée lorsque l'utilisateur clique sur le premier bouton "Validez".
    • Action :
      • Elle met à jour l'attribut action du formulaire avec une URL contenant le paramètre bouton et sa valeur (Validez dans ce cas).
      • Elle soumet le formulaire vers cette nouvelle URL.

    Fonction 2 : soumettreFormulaire2

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function soumettreFormulaire2(bouton1) {
        document.getElementById("monFormulaire").action = "default.Asp?bouton1=" + bouton1.value;
        document.getElementById("monFormulaire").submit();
    }

    • Objectif : Elle est similaire à la première, mais s'exécute lors de la deuxième étape (validation du mot de passe).
    • Action :
      • Met à jour l'URL avec un paramètre bouton1 au lieu de bouton.
      • Soumet le formulaire.


    2. HTML : La structure du formulaire

    Le formulaire affiche les champs nécessaires pour saisir l'e-mail et, selon les étapes, un mot de passe.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <h3>Modification de votre mot de passe :</h3>
    <form id="monFormulaire" method="post" action="default.Asp">
        Saisissez votre mail : <input name="Mail" type="text" value="<%= Request.Form("Mail") %>"><br>
        <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)"><br>
    
    
    
    • Champ e-mail : L'utilisateur saisit son e-mail ici. Si un e-mail a déjà été soumis, il est réinséré grâce à <%= Request.Form("Mail") %>.
    • Premier bouton "Validez" :
      • En cliquant dessus, l'utilisateur soumet son e-mail pour validation via la fonction soumettreFormulaire.


    3. ASP : Traitement côté serveur

    L'ASP rend le formulaire dynamique et exécute la logique métier.
    Étape 1 : Validation de l'e-mail

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <% If Request.QueryString("bouton") <> "" Then %>
        <% If Request.QueryString("bouton") = "Validez" And RechMail() Then %>
            <label>Saisissez votre nouveau mot de passe :</label>
            <input name="Pass" type="text"><br>
            <input id="Button2" type="button" value="Validez" onclick="soumettreFormulaire2(this)"><br>
        <% ElseIf Request.QueryString("bouton") = "Validez" Then %>
            <span>Adresse e-mail invalide.<br></span>
        <% End If %>
    <% End If %>

    1. Vérification : Si le paramètre bouton est présent dans l'URL :
      • Si la valeur est "Validez" et que la fonction RechMail() retourne vrai :
        • Affiche un champ pour que l'utilisateur saisisse son nouveau mot de passe.

      • Si l'e-mail est invalide :
        • Affiche un message d'erreur.

    Étape 2 : Validation du mot de passe

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <% If Request.QueryString("bouton1") <> "" Then %>
        <% If Request.QueryString("bouton1") = "Validez" Then %>
            <p>Le mot de passe pour l'email <%= Request.Form("Mail") %> a &eacute;t&eacute; mis &agrave; jour avec succ&egrave;s.</p>
        <% End If %>
    <% End If %>

    • Si le paramètre bouton1 est présent et sa valeur est "Validez" :
      • Affiche un message confirmant la mise à jour du mot de passe.


    4. Fonction côté serveur

    Fonction RechMail

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    Function RechMail()
        Dim email
        email = Request.Form("Mail")
        RechMail = (email = "thumb.down@developpez.com")
    End Function

    • Objectif : Vérifie si l'e-mail saisi correspond à une valeur prédéfinie (thumb.down@developpez.com).
    • Retourne :
      • True si l'e-mail correspond.
      • False sinon.


    Résumé du fonctionnement


    1. L'utilisateur saisit son e-mail et clique sur "Validez".
      • Si l'e-mail est valide, un champ pour le mot de passe apparaît.
      • Sinon, un message d'erreur s'affiche.

    2. L'utilisateur saisit un nouveau mot de passe et clique sur "Validez".
      • Le mot de passe est alors enregistré, et un message de confirmation s'affiche.


    Pourquoi structurer le code ainsi ?


    1. Séparation des responsabilités :
      • Le JavaScript gère la soumission des formulaires côté client.
      • L'ASP traite les données et affiche dynamiquement les étapes suivantes.

    2. Dynamisme :
      • Les balises HTML sont mises à jour en fonction des données ASP.
      • Les valeurs pré-remplies (comme l'e-mail) améliorent l'expérience utilisateur.

    3. Simplicité de l'interface utilisateur :
      • L'utilisateur ne voit que les étapes pertinentes, pas tout en une seule fois.

    En respectant cette séparation des rôles, tu construis une application web robuste, facile à maintenir et agréable à utiliser. C’est une bonne pratique qui te servira dans n’importe quel projet.

    Code default.asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <script>
      // Fonction pour soumettre le formulaire après la première validation (e-mail)
      function soumettreFormulaire(bouton) {
          document.getElementById("monFormulaire").action = "default.Asp?bouton=" + bouton.value;
          document.getElementById("monFormulaire").submit();
      }
    
      // Fonction pour soumettre le formulaire après la deuxième validation (mot de passe)
      function soumettreFormulaire2(bouton1) {
          document.getElementById("monFormulaire").action = "default.Asp?bouton1=" + bouton1.value;
          document.getElementById("monFormulaire").submit();
      }
    </script>
    
    <h3>Modification de votre mot de passe :</h3>
    <form id="monFormulaire" method="post" action="default.Asp">
        <!-- Champ de saisie de l'e-mail -->
        Saisissez votre mail : <input name="Mail" type="text" value="<%= Request.Form("Mail") %>"><br>
        <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)"><br>
    
        <% If Request.QueryString("bouton") <> "" Then %>
            <% If Request.QueryString("bouton") = "Validez" And RechMail() Then %>
                <label>Saisissez votre nouveau mot de passe :</label>
                <input name="Pass" type="text"><br>
                <input id="Button2" type="button" value="Validez" onclick="soumettreFormulaire2(this)"><br>
            <% ElseIf Request.QueryString("bouton") = "Validez" Then %>
                <span>Adresse e-mail invalide.<br></span>
            <% End If %>
        <% End If %>
    
        <% If Request.QueryString("bouton1") <> "" Then %>
            <% If Request.QueryString("bouton1") = "Validez" Then %>
                <p>Le mot de passe pour l'email <%= Request.Form("Mail") %> a &eacute;t&eacute; mis &agrave; jour avec succ&egrave;s.</p>
            <% End If %>
        <% End If %>
    </form>
    
    <%
    Function RechMail()
        Dim email
        email = Request.Form("Mail")
        RechMail = (email = "thumb.down@developpez.com")
    End Function
    %>

  7. #7
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    Bonjour,
    Avant de t'engager dans de asp3, je t'invites a créer tes pages HTML en statique. Je veux dire écrire tes pages ASP sans code ASP.

    Ensuite tu implantes ton JavaScript pour qualifier tes données ainsi que la redirection vers les autres pages.

    Après et seulement après tu implantes ton code ASP.

    Notes qu'un site web est relativement lent, il fait des alés retour entre le serveur et le client. On s'affranchit de vérifier les termes un par un mais on s'assure via JavaScript que tous les termes du formulaire sont présents.

    Dans ton cas tu saisie l'adresse mail, tu valide, tu saisie le password et tu valide une dernière fois. C'est une perte de temps car tu recharge la pages à chaque fois.

    Tu peux même par JavaScript vérifier si la structure de l'adresse mail est conforme.

    Notes également qu'Asp3 étant obsolète, tu pourrais passer directement à ASP.net tu trouveras plus de compétences pour t'accompagner.

    Sauf si tu veux devenir Indiana Jones du développement web.

    Voici une version de ton code en ASP.NET Web Forms (ASPX), qui conserve le même fonctionnement, mais adaptée au framework moderne ASP.NET :
    Fichier ASPX

    Code aspx : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <%@ Page Language="VB" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="YourNamespace.Default" %>
     
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Modification de votre mot de passe</title>
        <script type="text/javascript">
            // Fonction pour soumettre le formulaire après la première validation (e-mail)
            function soumettreFormulaire(bouton) {
                document.getElementById("monFormulaire").action = "Default.aspx?bouton=" + bouton.value;
                document.getElementById("monFormulaire").submit();
            }
     
            // Fonction pour soumettre le formulaire après la deuxième validation (mot de passe)
            function soumettreFormulaire2(bouton1) {
                document.getElementById("monFormulaire").action = "Default.aspx?bouton1=" + bouton1.value;
                document.getElementById("monFormulaire").submit();
            }
        </script>
    </head>
    <body>
        <form id="monFormulaire" runat="server">
            <h3>Modification de votre mot de passe :</h3>
     
            <!-- Champ de saisie de l'e-mail -->
            Saisissez votre mail :
            <asp:TextBox ID="Mail" runat="server" Text='<%# Request.Form("Mail") %>'></asp:TextBox><br />
            <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)" /><br />
     
            <asp:PlaceHolder ID="EmailValidation" runat="server"></asp:PlaceHolder>
            <asp:PlaceHolder ID="PasswordUpdate" runat="server"></asp:PlaceHolder>
        </form>
    </body>
    </html>





    Code-behind (Default.aspx.vb)

    Voici le fichier VB associé :
    Code vb : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    Imports System
     
    Namespace YourNamespace
        Partial Class [Default]
            Inherits System.Web.UI.Page
     
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
                ' Charger les étapes dynamiques en fonction des paramètres de la requête
                If Not String.IsNullOrEmpty(Request.QueryString("bouton")) Then
                    HandleEmailValidation(Request.QueryString("bouton"))
                ElseIf Not String.IsNullOrEmpty(Request.QueryString("bouton1")) Then
                    HandlePasswordUpdate(Request.QueryString("bouton1"))
                End If
            End Sub
     
            ' Gestion de la validation de l'e-mail
            Private Sub HandleEmailValidation(bouton As String)
                If bouton = "Validez" Then
                    If RechMail(Request.Form("Mail")) Then
                        ' Ajouter les champs pour le mot de passe
                        PasswordUpdate.Controls.Add(New LiteralControl("
                            <label>Saisissez votre nouveau mot de passe :</label>
                            <input name='Pass' type='text'><br />
                            <input id='Button2' type='button' value='Validez' onclick='soumettreFormulaire2(this)'><br />
                        "))
                    Else
                        ' Ajouter un message d'erreur
                        EmailValidation.Controls.Add(New LiteralControl("<span>Adresse e-mail invalide.<br /></span>"))
                    End If
                End If
            End Sub
     
            ' Gestion de la validation du mot de passe
            Private Sub HandlePasswordUpdate(bouton1 As String)
                If bouton1 = "Validez" Then
                    ' Ajouter un message de confirmation
                    PasswordUpdate.Controls.Add(New LiteralControl("
                        <p>Le mot de passe pour l'email " & Request.Form("Mail") & " a &eacute;t&eacute; mis &agrave; jour avec succ&egrave;s.</p>
                    "))
                End If
            End Sub
     
            ' Fonction pour vérifier l'adresse e-mail
            Private Function RechMail(email As String) As Boolean
                Return email = "thumb.down@developpez.com"
            End Function
        End Class
    End Namespace



    Explication des changements

    1. Structure ASP.NET :

      • Le fichier Default.aspx contient uniquement la partie présentation (HTML + contrôles).
      • La logique métier est déplacée dans le code-behind Default.aspx.vb.

    2. Utilisation de contrôles ASP.NET :

      • Les champs de formulaire (comme le champ e-mail) sont remplacés par des contrôles (<asp:TextBox>).
      • Des PlaceHolder sont utilisés pour insérer dynamiquement des messages ou des champs en fonction des étapes.

    3. Traitement dynamique côté serveur :

      • La logique pour afficher les messages ou champs supplémentaires est gérée dans les méthodes HandleEmailValidation et HandlePasswordUpdate.

    4. Séparation des responsabilités :

      • Le JavaScript s'occupe de soumettre le formulaire et de rediriger avec les paramètres nécessaires.
      • Le code-behind gère la validation côté serveur et les étapes dynamiques.


    Avantages de cette version

    • Maintenabilité : Le code est structuré et facile à comprendre grâce à la séparation entre présentation et logique métier.
    • Flexibilité : Il est plus simple d'ajouter ou de modifier des étapes.
    • Puissance d'ASP.NET : L'utilisation des contrôles ASP.NET offre plus de fonctionnalités et d'options que le HTML brut.

  8. #8
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut
    Bjr et merci pour toutes tes infos ! Je vais en tenir compte, j'ai revu mon code asp il n'y avait pas d'erreur de code mais apparement le fait de tout coder d'un seul coup sans mettre de balise à chaque action posait problème, j'ai les ait maintenant décortiquées une à une en balisant et là j'ai ce que je voulais :
    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    Modification de votre mot de passe :
    <form id="monFormulaire" method="post" action="conn.asp">
    Saisissez votre mail : <input name="Mail" type = "text"">
    <input id="Button1" type="button" value="Validez" onclick="soumettreFormulaire(this)"><BR>
    <!-- Vérifie si le paramètre "bouton" est présent dans l'URL MA VERSION--> 
    <%If Request.QueryString("bouton") <> "" Then%>
        <!-- Récupère la valeur du bouton-->
    	<%Response.Write("L47") & ("<BR>")
        Dim valeurBouton
        valeurBouton = Request.QueryString("bouton")
    	'Dim MailSaisi
    	'MailSaisi=Request.QueryString(
    end if%>
    <!--  Exécution d'une logique en fonction de la valeur du bouton-->
        <%If valeurBouton = "Validez" Then
             'Ajouter le code pour traiter l'envoi
    		if RechMail() then%> 
                <label>Saisissez votre nouveau mot de passe :</label>
                <input name="Pass" type = "text"">          	
    	        <input id="Button2" type="button" value="Validez" onclick="soumettreFormulaire2(this)"><BR>
    		<%end if%>
    	<%end if%>
    		  <%If Request.QueryString("bouton1") <> "" Then
    		      Response.Write("L58") & ("<BR>")%>	   
                <!-- Récupère la valeur du bouton
                  'Dim valeurBouton-->             
    			  <%valeurBouton= Request.QueryString("bouton1")
                  Response.Write("valeur bouton1 =") & valeurBouton &  ("<BR>")
    			  %>
                 <!-- Exécution d'une logique en fonction de la valeur du bouton-->
                 <%If valeurBouton= "Validez" Then
    			   changePass()
    			 end if%>
    		    <%end if%>
    Code vb : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    Function RechMail() 'Recordset filtré
        Dim rs
    	Dim sql
    	Mail=Request.form("Mail")
    	'Response.Write Mail & ("<BR>")
    	'sql = "Select Mail from T_Comptes"
    	sql = "SELECT Mail FROM T_Comptes where T_Comptes.Mail='" & Mail & "'" & ""
    	Set rs = OpenRecordset(sql)
    	'Response.Write "ok mail" & ("<BR>")
    	If rs.EOF Then
    	   Response.Write "pas ok mail" & ("<BR>")
             Else
          Response.Write("OK Mail") & ("<BR>")
    	  set RechMail=true
        End If    
     
    end Function 
     
    Sub ChangePass() 'Modifie Mot de passe
        Dim rs
    	Dim sql
    	'Dim MailR
    	'MailR=Mail
    	Response.Write("Mail reçu function ChangePass= ") & Mail & ("<BR>")
    end sub
    Tu dis :
    Tu peux même par JavaScript vérifier si la structure de l'adresse mail est conforme.
    Quand tu parles de structure vérifier dans la base ? ce qui m'étonnerait car Java traite les données coté client mais sait on jamais...
    Merci A+

  9. #9
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 310
    Par défaut
    Citation Envoyé par xeron33 Voir le message
    Quand tu parles de structure vérifier dans la base ? ce qui m'étonnerait car Java traite les données coté client mais sait on jamais...
    Merci A+
    Il fait sans aucun doute référence au faites que tu peux contrôler ta data avant de l'envoyer au serveur
    , ce qui est quasiment toujours fait côté client et côté serveur ...

  10. #10
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    Bonjour,
    Oui ce que je veux dire, qu'il faut valider côté client ce que tu veux envoyer côté serveur pour ne pas faire des allers retours inutile.

    TOTO par exemple n'est pas une adresse mail valide. Tu pourrais demander à JavaScript de vérifier si la structure est bien identifiant_utilisateur@domaine.extension_domaine
    Toto@developpez.com.
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script>
    function validateEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    </script>
    Si la structure de ton adresse mail n'est pas conforme ça n'est pas pertinent de la soumettre au serveur qui te reverra ta copie.

    Tu peux évidemment implanté l'ancien et le nouveau mot de passe pour ne pas interrogé en plusieurs fois ton serveur ce qui est relativement lent.

    Bien sur en verifi la présence de te toutes les informations avant de soumettre le formulaire au serveur.

  11. #11
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut
    Ok bien reçu, sais tu comment fait-on pour déplacer une discussion sur ce forum ?

  12. #12
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    bonjour,
    à ma connaissance seul un modérateur le peut

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,

    @Thumb down merci pour tes brillantes interventions qui mériteraient de faire partie d'un blog.



    Citation Envoyé par xeron33
    sais tu comment fait-on pour déplacer une discussion sur ce forum ?
    Il suffit effectivement d'en faire la demande, argumentée/justifiée, à un modérateur, concernant cette discussion elle a tout à fait sa place sur ce forum même si elle aurait également sa place sur d'autres

  14. #14
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    Et vu que sur le forum ASP nous étions que deux,xeron33 et moi,J'en conclu qu'ici tu touches plus de personnes.

  15. #15
    Membre Expert Avatar de Thumb down
    Homme Profil pro
    Retraité
    Inscrit en
    Juin 2019
    Messages
    1 562
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Juin 2019
    Messages : 1 562
    Par défaut
    Bonjour,
    Pour développer une application en ASP Classic (ASP3), voici le vocabulaire minimal que vous devriez maîtriser :

    1. Concepts de base d'ASP Classic


    • ASP (Active Server Pages) : Une technologie côté serveur de Microsoft permettant de générer des pages web dynamiques.
    • VBScript : Langage de script utilisé par défaut dans ASP Classic.
    • IIS (Internet Information Services) : Serveur web de Microsoft nécessaire pour exécuter ASP Classic.


    2. Objets ASP essentiels


    1. Request
      Permet de récupérer les données envoyées par le client (formulaires, requêtes, cookies).
      • Request.QueryString("param") : Récupère un paramètre dans l'URL.
      • Request.Form("champ") : Récupère les données d'un formulaire POST.
      • Request.Cookies("nom") : Récupère la valeur d'un cookie.

    2. Response
      Permet d'envoyer des données au client.
      • Response.Write("Texte") : Affiche du texte dans la page.
      • Response.Redirect("url") : Redirige vers une autre page.
      • Response.Cookies("nom") : Crée ou modifie un cookie.

    3. Session
      Stocke des données spécifiques à un utilisateur pendant la durée de la session.
      • Session("nom") = valeur : Définit une variable de session.
      • Session.Abandon : Termine la session.

    4. Application
      Permet de stocker des données globales pour l'application entière.
      • Application("nom") = valeur : Définit une variable globale.

    5. Server
      Fournit des utilitaires côté serveur.
      • Server.MapPath("chemin") : Retourne le chemin physique correspondant à un chemin virtuel.
      • Server.CreateObject("ProgID") : Crée une instance d'un objet COM.


    3. Contrôle de flux et structures


    • If ... Then ... Else ... End If : Conditions.
    • For ... Next / For Each ... Next : Boucles.
    • Do ... Loop / While ... Wend : Boucles conditionnelles.
    • Select Case ... End Select : Structure de contrôle conditionnelle.


    4. Gestion des bases de données


    1. Connexion à une base de données

    2. Requêtes SQL

    3. Déconnexion
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
       
      Conn.Close
      Set Conn = Nothing


    5. Méthodes utilitaires courantes


    • Encodage HTML : Server.HTMLEncode("Texte")
    • Décodage URL : Server.URLDecode("Texte")
    • Gestion des erreurs :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      7
       
      On Error Resume Next
      ' Code susceptible de provoquer une erreur
      If Err.Number <> 0 Then
          Response.Write "Erreur : " & Err.Description
      End If
      On Error GoTo 0


    6. Bonnes pratiques minimales


    • Utiliser des commentaires : ' Ceci est un commentaire.
    • Vérifier les entrées utilisateur pour éviter les injections SQL.
    • Fermer toujours les connexions aux bases de données après usage.
    • Préférer les paramètres de requête préparée (Command) pour exécuter du SQL.


    Avec ces notions, vous pouvez commencer à développer des applications simples en ASP Classic. Pour des projets plus complexes, vous devrez approfondir des concepts comme l'intégration d'objets COM ou la gestion avancée des sessions et de la sécurité.



    Pour aller plus loin dans le développement ASP Classic, voici des concepts et techniques avancées qui vous permettront de créer des applications plus robustes et performantes :

    1. Gestion avancée des bases de données


    1. Requêtes paramétrées avec ADO Les requêtes SQL paramétrées sont essentielles pour éviter les injections SQL :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
       
      Set cmd = Server.CreateObject("ADODB.Command")
      cmd.ActiveConnection = Conn
      cmd.CommandText = "SELECT * FROM utilisateurs WHERE id = ?"
      cmd.Parameters.Append cmd.CreateParameter("@id", 3, 1, , Request("id"))
      Set rs = cmd.Execute()
    2. Transactions dans ADO
      Utilisez des transactions pour garantir l'intégrité des données :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
       
      Conn.BeginTrans
      On Error Resume Next
      Conn.Execute("INSERT INTO table (colonne) VALUES ('valeur')")
      If Err.Number = 0 Then
          Conn.CommitTrans
      Else
          Conn.RollbackTrans
      End If
      On Error GoTo 0


    2. Optimisation des performances


    1. Mise en cache Utilisez des variables Application ou Session pour éviter des requêtes inutiles à la base de données :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
       
      If IsEmpty(Application("cacheTable")) Then
          Set RS = Conn.Execute("SELECT * FROM table")
          Application("cacheTable") = RS.GetRows() ' Stocke les données sous forme de tableau
          RS.Close
      End If
    2. Compresser les réponses Compressez les pages pour accélérer leur chargement :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      Response.AddHeader "Content-Encoding", "gzip"
    3. Inclure des fichiers dynamiques
      Réutilisez le code en séparant les parties communes dans des fichiers inclus :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      <!-- #include file="header.asp" -->


    3. Gestion avancée des erreurs


    1. Rediriger en cas d'erreur
      Configurez une page dédiée aux erreurs dans IIS ou directement dans le code :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      7
       
      On Error Resume Next
      ' Code
      If Err.Number <> 0 Then
          Response.Redirect "error.asp?err=" & Server.URLEncode(Err.Description)
      End If
      On Error GoTo 0
    2. Logger les erreurs Créez un fichier de log pour enregistrer les erreurs serveur :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
       
      Set fso = Server.CreateObject("Scripting.FileSystemObject")
      Set file = fso.OpenTextFile(Server.MapPath("log.txt"), 8, True)
      file.WriteLine Now() & " - " & Err.Description
      file.Close


    4. Sécurité


    1. Protéger contre les injections SQL
      • Toujours utiliser des requêtes paramétrées (comme vu plus haut).
      • Validez et nettoyez les entrées utilisateur :
        Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
        1
        2
        3
        4
         
        Function Nettoyer(chaine)
            Nettoyer = Replace(chaine, "'", "''")
        End Function

    2. Protéger les sessions

    3. Limiter l'accès à certaines pages Implémentez une vérification d'authentification :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
       
      If Session("userId") = "" Then
          Response.Redirect "login.asp"
      End If


    5. Intégration avec des composants COM/COM+


    1. Créer et utiliser des objets COM Vous pouvez créer des composants en VB6 ou C++ et les appeler dans votre code ASP :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
       
      Set obj = Server.CreateObject("MonComposant.Classe")
      Response.Write obj.Methode()
    2. Appel d'API externes Utilisez des objets comme MSXML pour consommer des API REST ou SOAP :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
       
      Set http = Server.CreateObject("MSXML2.XMLHTTP")
      http.Open "GET", "https://api.example.com", False
      http.Send
      Response.Write http.ResponseText


    6. Internationalisation et gestion des langues


    1. Détection de la langue du navigateur
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      lang = Request.ServerVariables("HTTP_ACCEPT_LANGUAGE")
    2. Fichiers de ressources Créez un fichier par langue et chargez le contenu dynamiquement :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
       
      Function GetResource(lang, key)
          Dim dico
          Set dico = Server.CreateObject("Scripting.Dictionary")
          If lang = "fr" Then
              dico.Add "welcome", "Bienvenue"
          Else
              dico.Add "welcome", "Welcome"
          End If
          GetResource = dico(key)
      End Function
      Response.Write GetResource("fr", "welcome")


    7. Conception modulaire


    1. Séparer le code en couches
      • Couches de présentation : HTML/ASP.
      • Couches métier : Incluez des fonctions dans des fichiers séparés.
      • Couches de données : Centralisez l'accès aux bases dans un module.

    2. Utiliser des fonctions réutilisables Placez les fonctions dans un fichier utilitaire inclus dans toutes les pages :
      Code vbscript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      <!-- #include file="utils.asp" -->


    8. Migration et modernisation

    Si possible, commencez à envisager une migration vers une technologie plus récente comme ASP.NET, tout en conservant une base solide en ASP Classic pour maintenir les applications existantes.
    Ces concepts et techniques vous permettent d’optimiser et de sécuriser vos applications ASP3 tout en les rendant plus professionnelles et évolutives.



    En ASP Classic, l'intégration des balises HTML comme <table>, <div>, etc., est une pratique courante pour générer des pages web dynamiques. Voici comment combiner efficacement ASP et HTML pour créer des interfaces dynamiques :

    1. Mélange de HTML et ASP

    ASP vous permet d’insérer du code serveur (VBScript) directement dans une page HTML pour générer du contenu dynamique.
    Exemple de base :
    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <% 
        Dim message
        message = "Bonjour, utilisateur !"
    %>
    <html>
        <head><title>Exemple ASP</title></head>
        <body>
            <h1><%= message %></h1> <!-- Insère la variable dans le HTML -->
        </body>
    </html>



    2. Génération dynamique de tableaux

    Les balises <table> sont souvent utilisées pour afficher des données structurées récupérées depuis une base de données.
    Exemple : Tableau statique

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <table border="1">
        <tr>
            <th>Nom</th>
            <th>Âge</th>
        </tr>
        <tr>
            <td>Jean</td>
            <td>30</td>
        </tr>
    </table>


    Exemple : Tableau dynamique avec ASP

    Génération de lignes et colonnes en fonction des données.
    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Email</th>
        </tr>
        <% 
            Dim Conn, RS
            Set Conn = Server.CreateObject("ADODB.Connection")
            Conn.Open "DSN=MaBase"
            Set RS = Conn.Execute("SELECT id, nom, email FROM utilisateurs")
     
            Do Until RS.EOF
        %>
        <tr>
            <td><%= RS("id") %></td>
            <td><%= RS("nom") %></td>
            <td><%= RS("email") %></td>
        </tr>
        <%
                RS.MoveNext
            Loop
            RS.Close
            Conn.Close
        %>
    </table>



    3. Incorporation conditionnelle d'éléments HTML

    Utilisez des conditions pour afficher dynamiquement certains contenus :
    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <% 
        Dim isLoggedIn
        isLoggedIn = True
    %>
    <div>
        <% If isLoggedIn Then %>
            <p>Bienvenue, utilisateur connecté !</p>
        <% Else %>
            <p>Veuillez vous connecter pour accéder à cette page.</p>
        <% End If %>
    </div>



    4. Boucles pour générer du contenu HTML

    Les boucles sont utiles pour afficher des listes ou des tableaux.
    Exemple : Génération d’une liste

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <ul>
        <% 
            Dim fruits, i
            fruits = Array("Pomme", "Banane", "Cerise")
            For i = LBound(fruits) To UBound(fruits)
        %>
        <li><%= fruits(i) %></li>
        <% Next %>
    </ul>



    5. Utilisation d'autres balises HTML

    ASP peut générer n'importe quel type de balise HTML, comme des formulaires, des divisions (<div>), ou des boutons.
    Exemple : Formulaire dynamique

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <form method="POST" action="traitement.asp">
        <label for="nom">Nom :</label>
        <input type="text" name="nom" id="nom" value="<%= Request.Form("nom") %>">
        <br>
        <label for="email">Email :</label>
        <input type="email" name="email" id="email">
        <br>
        <input type="submit" value="Envoyer">
    </form>


    Traitement côté serveur (traitement.asp)

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <%
    Dim nom, email
    nom = Request.Form("nom")
    email = Request.Form("email")
     
    Response.Write "Nom : " & nom & "<br>"
    Response.Write "Email : " & email
    %>





    6. Combinaison CSS et ASP

    Vous pouvez appliquer du CSS pour améliorer l'apparence de vos pages générées en ASP.
    Exemple : Génération d’une liste stylisée

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <style>
        .utilisateur {
            font-weight: bold;
            color: blue;
        }
    </style>
     
    <ul>
        <% 
            Dim utilisateurs, i
            utilisateurs = Array("Alice", "Bob", "Charlie")
            For i = LBound(utilisateurs) To UBound(utilisateurs)
        %>
        <li class="utilisateur"><%= utilisateurs(i) %></li>
        <% Next %>
    </ul>



    7. Bonnes pratiques


    1. Séparer le code HTML et ASP : Essayez de limiter le mélange en créant des fonctions ou des fichiers inclus.
      Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      <!-- #include file="fonctions.asp" -->
    2. Éviter les injections HTML : Utilisez Server.HTMLEncode pour éviter que des entrées utilisateur ne perturbent votre mise en page.
      Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
       
      Response.Write Server.HTMLEncode(Request("parametre"))


    8. Exemple complet : Page avec formulaire et tableau dynamique

    Formulaire HTML

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <form method="GET" action="resultat.asp">
        <label for="recherche">Rechercher :</label>
        <input type="text" name="recherche" id="recherche">
        <input type="submit" value="Chercher">
    </form>




    Résultat avec ASP

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Email</th>
        </tr>
        <% 
            Dim recherche, Conn, RS
            recherche = Request.QueryString("recherche")
            Set Conn = Server.CreateObject("ADODB.Connection")
            Conn.Open "DSN=MaBase"
     
            Set RS = Conn.Execute("SELECT id, nom, email FROM utilisateurs WHERE nom LIKE '%" & recherche & "%'")
     
            Do Until RS.EOF
        %>
        <tr>
            <td><%= RS("id") %></td>
            <td><%= RS("nom") %></td>
            <td><%= RS("email") %></td>
        </tr>
        <%
                RS.MoveNext
            Loop
            RS.Close
            Conn.Close
        %>
    </table>


    Avec ces exemples, vous pouvez générer des interfaces HTML dynamiques avec ASP Classic, tout en exploitant les balises HTML comme <table>, <form>, et d'autres composants pour structurer vos pages.


    L'intégration d'ASP Classic avec JavaScript permet de créer des applications web dynamiques et interactives. ASP est exécuté côté serveur, tandis que JavaScript s'exécute côté client. Voici un guide pour exploiter leur synergie efficacement.

    1. Comprendre le rôle d'ASP et de JavaScript


    • ASP génère du contenu HTML et JavaScript sur le serveur, puis l'envoie au navigateur.
    • JavaScript manipule ce contenu côté client sans nécessiter un nouveau chargement de page.


    2. Générer du JavaScript avec ASP

    ASP peut inclure des variables ou des données directement dans le code JavaScript pour que le client puisse les utiliser.
    Exemple : Passer une variable ASP à JavaScript

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <%
        Dim utilisateur
        utilisateur = "Jean Dupont"
    %>
    <script>
        var nomUtilisateur = "<%= utilisateur %>";
        alert("Bienvenue, " + nomUtilisateur);
    </script>




    Exemple : Générer un tableau JavaScript depuis une base de données

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    <%
        Dim Conn, RS
        Set Conn = Server.CreateObject("ADODB.Connection")
        Conn.Open "DSN=MaBase"
        Set RS = Conn.Execute("SELECT nom FROM utilisateurs")
    %>
    <script>
        var utilisateurs = [];
        <% Do Until RS.EOF %>
            utilisateurs.push("<%= RS("nom") %>");
            <% RS.MoveNext %>
        <% Loop %>
        alert(utilisateurs.join(", "));
    </script>
    <%
        RS.Close
        Conn.Close
    %>



    3. Communiquer entre JavaScript et ASP avec AJAX

    AJAX (Asynchronous JavaScript and XML) permet d’envoyer des requêtes au serveur sans recharger la page.
    Exemple : Utiliser AJAX avec ASP

    JavaScript (client)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <script>
        function chargerUtilisateur() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "utilisateur.asp", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("resultat").innerText = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
    <button onclick="chargerUtilisateur()">Charger Utilisateur</button>
    <div id="resultat"></div>




    ASP (serveur)

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <%
        Dim utilisateur
        utilisateur = "Jean Dupont"
        Response.Write utilisateur
    %>





    4. Intégrer des données dynamiques dans JavaScript

    Utilisez ASP pour générer des balises <script> contenant des données JavaScript.
    Exemple : Graphiques dynamiques avec Chart.js

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
     
    <%
        Dim Conn, RS, valeurs
        valeurs = ""
        Set Conn = Server.CreateObject("ADODB.Connection")
        Conn.Open "DSN=MaBase"
        Set RS = Conn.Execute("SELECT valeur FROM statistiques")
     
        Do Until RS.EOF
            valeurs = valeurs & RS("valeur") & ","
            RS.MoveNext
        Loop
        valeurs = Left(valeurs, Len(valeurs) - 1)
    %>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="monGraphique"></canvas>
    <script>
        var ctx = document.getElementById('monGraphique').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Janvier', 'Février', 'Mars'],
                datasets: [{
                    label: 'Statistiques',
                    data: [<%= valeurs %>],
                    backgroundColor: ['red', 'blue', 'green']
                }]
            }
        });
    </script>





    5. Appeler des fonctions ASP depuis JavaScript

    Utilisez des requêtes AJAX ou des redirections.
    Exemple : Envoi de données à ASP avec JavaScript

    Formulaire JavaScript (client)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <script>
        function envoyerDonnees() {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "sauvegarde.asp", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert("Données sauvegardées : " + xhr.responseText);
                }
            };
            xhr.send("nom=Jean&age=30");
        }
    </script>
    <button onclick="envoyerDonnees()">Envoyer</button>




    ASP (serveur)

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <%
        Dim nom, age
        nom = Request.Form("nom")
        age = Request.Form("age")
        ' Traitez les données ici, par ex. les insérer dans une base de données
        Response.Write "Nom: " & nom & ", Âge: " & age
    %>





    6. Valider des données avec JavaScript et ASP


    1. JavaScript : Effectuez une validation rapide côté client pour améliorer l'expérience utilisateur.
    2. ASP : Vérifiez les données côté serveur pour garantir leur sécurité.

    Exemple : Validation combinée

    JavaScript

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <script>
        function validerFormulaire() {
            var nom = document.getElementById("nom").value;
            if (nom.trim() === "") {
                alert("Le nom est obligatoire !");
                return false;
            }
            return true;
        }
    </script>
    <form method="POST" action="traitement.asp" onsubmit="return validerFormulaire()">
        <input type="text" id="nom" name="nom" placeholder="Votre nom">
        <input type="submit" value="Envoyer">
    </form>


    ASP

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <%
        Dim nom
        nom = Request.Form("nom")
        If nom = "" Then
            Response.Write "Erreur : le nom est obligatoire."
        Else
            Response.Write "Données reçues : " & nom
        End If
    %>





    7. Utiliser JavaScript pour manipuler des éléments ASP

    ASP peut générer des éléments HTML que JavaScript manipule ensuite.
    Exemple : Modifier un tableau généré par ASP

    ASP

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    <table id="utilisateurs" border="1">
        <tr>
            <th>Nom</th>
            <th>Email</th>
        </tr>
        <%
            Dim Conn, RS
            Set Conn = Server.CreateObject("ADODB.Connection")
            Conn.Open "DSN=MaBase"
            Set RS = Conn.Execute("SELECT nom, email FROM utilisateurs")
     
            Do Until RS.EOF
        %>
        <tr>
            <td><%= RS("nom") %></td>
            <td><%= RS("email") %></td>
        </tr>
        <%
                RS.MoveNext
            Loop
            RS.Close
            Conn.Close
        %>
    </table>


    JavaScript

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <script>
        var table = document.getElementById("utilisateurs");
        for (var i = 1; i < table.rows.length; i++) {
            table.rows[i].style.backgroundColor = i % 2 === 0 ? "lightblue" : "lightgray";
        }
    </script>





    8. Combiner ASP, JavaScript et CSS

    Intégrez le tout pour créer des interfaces utilisateur modernes.
    Exemple

    Code asp : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    <style>
        .ligne-paire { background-color: lightblue; }
        .ligne-impaire { background-color: lightgray; }
    </style>
    <table id="utilisateurs" border="1">
        <% 
            Dim Conn, RS, ligne
            ligne = 1
            Set Conn = Server.CreateObject("ADODB.Connection")
            Conn.Open "DSN=MaBase"
            Set RS = Conn.Execute("SELECT nom, email FROM utilisateurs")
     
            Do Until RS.EOF
        %>
        <tr class="<%= IIf(ligne Mod 2 = 0, "ligne-paire", "ligne-impaire") %>">
            <td><%= RS("nom") %></td>
            <td><%= RS("email") %></td>
        </tr>
        <% 
                RS.MoveNext
                ligne = ligne + 1
            Loop
            RS.Close
            Conn.Close
        %>
    </table>



    Avec ces outils et exemples, vous pouvez tirer parti des forces d'ASP Classic et de JavaScript pour créer des applications web dynamiques et interactives.






    Pour développer des sites en ASP Classic, plusieurs outils gratuits sont disponibles. Voici une liste des logiciels et environnements adaptés, ainsi que leurs principales caractéristiques :






    1. Visual Studio Code (VS Code)


    • Description : Un éditeur de code moderne, léger et extensible de Microsoft.
    • Caractéristiques :
      • Prend en charge ASP Classic via des extensions (ex. Classic ASP for Visual Studio Code).
      • Intégration avec Git.
      • Support des fichiers HTML, CSS, JavaScript et VBScript.

    • Lien : Visual Studio Code


    2. Sublime Text (Version gratuite avec limitations)


    • Description : Un éditeur de texte rapide avec de nombreuses fonctionnalités utiles.
    • Caractéristiques :
      • Supporte le codage en ASP Classic.
      • Nombreux plugins pour faciliter le développement web.
      • Fonctionnalité d'autocomplétion et coloration syntaxique.

    • Lien : Sublime Text


    3. Notepad++


    • Description : Un éditeur de texte léger et rapide pour les développeurs.
    • Caractéristiques :
      • Coloration syntaxique pour HTML, JavaScript, VBScript et ASP.
      • Compatible avec Windows uniquement.
      • Idéal pour des projets légers.

    • Lien : Notepad++


    4. Apache NetBeans


    • Description : Environnement de développement intégré (IDE) gratuit et open source.
    • Caractéristiques :
      • Support de HTML, CSS et JavaScript pour les projets ASP.
      • Plugins disponibles pour personnaliser l'expérience.
      • Fonctionnalité de débogage intégré.

    • Lien : Apache NetBeans


    5. Brackets


    • Description : Un éditeur de code open source principalement orienté vers le développement web.
    • Caractéristiques :
      • Parfait pour éditer HTML, CSS, JavaScript et ASP Classic.
      • Aperçu en direct dans un navigateur (Live Preview).
      • Extensions pour améliorer l'édition de code.

    • Lien : Brackets


    6. Dev-C++ (pour débutants en ASP)


    • Description : Bien qu'orienté C++, il permet d’éditer des fichiers ASP en mode texte brut.
    • Caractéristiques :
      • Léger et rapide.
      • Coloration syntaxique configurable.
      • Simple pour débuter.

    • Lien : Dev-C++


    7. WampServer


    • Description : Un environnement de développement web sous Windows.
    • Caractéristiques :
      • Inclut Apache, MySQL, et PHP, mais peut aussi exécuter des scripts ASP Classic via l’installation de modules IIS.
      • Utilisé pour tester les applications ASP localement.

    • Lien : WampServer


    8. IIS (Internet Information Services)


    • Description : Serveur web intégré à Windows pour exécuter des scripts ASP Classic.
    • Caractéristiques :
      • Nécessaire pour tester les applications ASP localement.
      • Permet l’hébergement local des fichiers ASP.

    • Installation : Peut être activé via les fonctionnalités Windows.


    9. Atom


    • Description : Un éditeur de texte moderne, open source, et très personnalisable.
    • Caractéristiques :
      • Extensions disponibles pour prendre en charge ASP Classic.
      • Fonctionnalité d’édition collaborative en temps réel (Teletype).
      • Support multiplateforme (Windows, macOS, Linux).

    • Lien : Atom


    10. Bluefish


    • Description : Un éditeur pour les développeurs web avec support pour plusieurs langages.
    • Caractéristiques :
      • Léger et rapide pour éditer des fichiers ASP Classic.
      • Autocomplétion et coloration syntaxique.
      • Multiplateforme (Windows, macOS, Linux).

    • Lien : Bluefish


    Environnement de test

    Pour tester vos scripts ASP, voici des outils indispensables :

    • Serveur IIS : Test local pour les fichiers ASP sur Windows.
    • Bases de données :
      • Microsoft Access ou SQL Server Express pour connecter vos scripts ASP à une base de données.


    Avec ces outils, vous avez tout le nécessaire pour développer, tester et déployer des sites en ASP Classic gratuitement.

    Conclusion:
    Le développement de sites web en ASP Classic reste une discipline intemporelle pour les développeurs désireux de maîtriser un environnement léger, mais robuste, pour créer des applications dynamiques. Malgré l'évolution constante des technologies et l'apparition de frameworks modernes comme ASP.NET, ASP Classic conserve sa pertinence dans certains contextes, notamment pour la maintenance de projets existants ou pour des déploiements rapides et simples.
    Grâce à un éventail d'outils gratuits, les développeurs disposent aujourd'hui d'un arsenal varié pour explorer et perfectionner leurs compétences dans cet environnement. Des éditeurs de texte minimalistes comme Notepad++ aux IDE sophistiqués comme Visual Studio Code ou NetBeans, chaque développeur peut trouver un outil adapté à son niveau de compétence et à ses besoins spécifiques. Les serveurs locaux comme IIS ou WampServer simplifient également le test et le débogage des scripts ASP, créant un environnement propice à l'apprentissage et au développement.
    Par ailleurs, la richesse des langages intégrés tels que HTML, JavaScript, et VBScript permet une flexibilité créative et technique, idéale pour concevoir des interfaces interactives et dynamiques. Ce mélange harmonieux de simplicité et de puissance constitue l'une des forces principales d'ASP Classic.
    Au-delà des outils et des technologies, le développement en ASP Classic est aussi une formidable opportunité d'explorer les fondements de la programmation web. Il pousse les développeurs à comprendre les interactions entre le front-end (HTML, CSS, JavaScript) et le back-end (ASP), favorisant une vision complète et équilibrée des projets web.
    Ainsi, qu’il s’agisse de revisiter un site hérité, d'acquérir une nouvelle compétence ou de créer une application fonctionnelle rapidement, le choix d’ASP Classic associé aux outils modernes disponibles reste une voie pertinente. Cette démarche témoigne d’un équilibre entre respect des technologies établies et adaptation aux besoins actuels du web. Avec de la passion, les bons logiciels, et un peu d’imagination, ASP Classic peut encore briller dans vos projets, prouvant que même les technologies plus anciennes ont une place précieuse dans l’écosystème numérique.
    En somme, ASP Classic, enrichi par des outils gratuits et performants, devient un allié pour les développeurs qui souhaitent se plonger dans un voyage technique captivant, tout en honorant la simplicité et la robustesse des fondations du web dynamique.



  16. #16
    Membre éclairé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    896
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 896
    Par défaut Bravo !
    Quoi dire à part bravo et merci à toi pour toute ton énergie à communiquer et partager ton immense savoir...tu devrais effectivement publier un blog !!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. click sur le bouton + de jdbnavtoolbar
    Par hamido dans le forum JBuilder
    Réponses: 4
    Dernier message: 28/05/2004, 00h10
  2. mousepressed sur un bouton
    Par bibx dans le forum Composants
    Réponses: 8
    Dernier message: 11/05/2004, 11h53
  3. [MFC] Boucle sur un bouton
    Par karl3i dans le forum MFC
    Réponses: 6
    Dernier message: 17/02/2004, 11h37
  4. Gérer les clics sur les boutons
    Par cyberlewis dans le forum Windows
    Réponses: 4
    Dernier message: 08/02/2004, 15h34
  5. [Flash MX] Action sur un bouton
    Par WriteLN dans le forum Flash
    Réponses: 9
    Dernier message: 20/10/2003, 14h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo