Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:inscription_mailing_list_ajax

Inscription mailing list AJAX

Archive avec le code de départ.

Le code pour le formulaire :

<form id="mail-ajax" action="mail-ajax.php" method="post" accept-charset="utf-8">
    <input type="text" name="mail">
    <input type="submit" value="Sign Up">
</form>

Rien de spécial dans le code HTML du formulaire. Envoyé avec la méthode ”post” à un fichier PHP.

Le code PHP :

<?php
    error_reporting(E_ALL ^ E_NOTICE); // cache les erreurs de php
 
    //inclusion des fichiers pour la connexion a la bdd
    // A compléter
 
    //création de noms abrégés pour les variables
    $mail = $_POST['mail'];
 
    // Réponse
    //  status: "error" ou "success"
    //  message: message d'explication
    $response_array = array();
 
    // email valide ?
    if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {
        // test si mail existant
        $results = mysql_query("select mail from newsletter where mail='".mysql_real_escape_string($mail)."'");
        if (mysql_num_rows($results) > 0) {
            $response_array['status'] = 'error';
            $response_array['message']= 'Email déjà utilisé. ';
        } else {
            // insertion email
            mysql_query("insert into newsletter (mail) values ('".mysql_real_escape_string($mail)."')");
            $response_array['status'] = 'success';
            $response_array['message']= 'votre Email à bien été enregistré. ';
        }
    } else {
        $response_array['status'] = 'error';
        $response_array['message']= 'Email invalide. ';
    }
 
    // retourne la réponse
 
    if (strpos($_SERVER['HTTP_ACCEPT'], 'json')) {
        // Répondre AJAX ?
        header('Content-type: application/json');
        echo json_encode($response_array);
    } else {
        // un template serait bien...
        include('mail-reponse.html.php');
    }
    // Pas de fermeture PHP

À signaler dans le code PHP :

  • Vous devez ajouter le code pour la connexion à la base de données.
    • Celle-ci doit avoir une table newsletter qui à un champ mail qui peut recevoir du texte.
  • Le code HTML de la réponse et déporté dans un ”include” à la fin.
  • La réponse est construite dans un tableau $response_array :
    • status: "error" ou "success" pour indiquer comment s'est déroulé l'ajout du mail
    • message : message d'explication
  • À la fin, le code :
    if (strpos($_SERVER['HTTP_ACCEPT'], 'json')) {
        // Répondre AJAX ?
    } else {
        // Répondre HTML ?
    }
  • Ce code test si l'on demande du “json”
    • Dans ce cas :
      • On fixe l'en-tête ”Content-type” à ”application/json” :
header('Content-type: application/json');
  • On encode le tableau en “json” :
 echo json_encode($response_array);
  • Et c'est tout, c'est même plus simple que de taper du code HTML pour formater la réponse !
  • Sinon on retourne de l'HTML (ici dans un fichier en “include”).

Travail

Mise en place

L'ensemble fourni doit fonctionner après :

  • Création de la table newsletter avec un champ mail(texte).
  • Ajout des instructions de connexion à la base de données.

Mettez en place le code sur le serveur et testez son bon fonctionnement.

Envoyer le formulaire par AJAX

  • Ajouter la librairie jQuery
  • Un fichier javascript avec le code suivant :
jQuery(function($) {
    "use strict";
 
    $('#mail-ajax').submit(function (event) {
        // ne pas envoyer le formulaire "normalement"
        event.preventDefault();
        // execute la requête même URL, mêmes données, mais demande du json
        var reqAjax = $.post($(this).attr("action"),$(this).serialize(),null,"json");
 
        // ici viendra le code pour afficher le résultat
    });
 
});
  • Tester :
    • La page reste affichée.
    • Le mail doit être ajouté à la base de données (si valide et non déjà présent).

Rappel, les seules adaptations faites dans le PHP sont :

  • De tester si on à demandé du “json”
  • Dans ce cas, d'encoder les résultats en “json”

Remarque : On utilise du “json” car c'est plus simple pour lire les données à afficher (avec JavaScript).

Lire les données reçues

Ajouter :

        // Si la requête réseaux à réussi :
        reqAjax.done(function (data) {
            console.log(data);
        });

Tester :

  • Vous devez voir dans la console les données reçues.

Afficher les données

On va ajouter une DIV après le formulaire :

        $('#mail-ajax').after($("<div>",{
            class:"ajax-msg "+data.status,
            text:data.message
        }));

Explication :

  • La DIV reçoit une classe CSS qui est “status” ainsi vous pouvez utiliser des styles pour le rendre visuel (.error {…} .success {…})
    • Ajoutez ces styles dans une feuille de style (ex: rouge ou vert suivant le résultat).
  • Le texte de la DIV est simplement le contenu de “message”

Cacher le formulaire si "success"

if (data.status === "success") {...}

Vous devriez y arriver tout seul.

Afficher un message si le serveur n'a pas répondu

        reqAjax.fail(function() {
            // ici afficher un message d'erreur
        });

Pour tester le code, changer l'adresse du formulaire.

Astuce :

  • Mettez le code qui affiche le résultat dans une fonction afficheResultat :
    • Si le serveur répond on affiche ”data” : afficheResultat(data)
    • Sinon on compose un message :
            afficheResultat({
                result:"error",
                message:"Probléme de connexion !"
            });

Améliorer la mise en forme

Si vous faites des pages contenant des formulaires, je vous recommande fortement d'utiliser Twitter bootstrap.

C'est aussi utile pour :

  • Les mises en page basées sur une grille
  • Les éléments standard d'interface (boutons, message, …)
  • En bref, si vous ne savez pas (faire), utilisez Twitter bootstrap. C'est plein de bonnes pratiques : vous ne pouvez vous tromper.

Pour démarrer, il y a la documentation, mais aussi ce tutoriel : w3resource : Twitter Bootstrap tutorial.

Travail : refaire le formulaire et le message en utilisant Twitter bootstrap.

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/inscription_mailing_list_ajax.txt · Dernière modification: 2012/05/26 22:00 (modification externe)