TP JAVASCRIPT OMI4 TP5 SRC

Transcription

1 TP JAVASCRIPT OMI4 TP5 SRC FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE Ci-dessous un exemple de formulaire de contact De part sa nature Javascript est incapable d envoyer un , seul un programme de messagerie sur la machine cliente est capable de réalisée cette opération. Dans ce cas c est le classique mailto d HTML qui appel le logiciel de messagerie implanté sur la machine. Cette solution impose la présence d un logiciel de messagerie. En cas d absence de ce logiciel l utilisateur ne pourra pas vous envoyer de mail.

2 Pour s affranchir de ce problème, la seule solution est de reporter le traitement d envoi de mail sur le serveur web. Le langage php possède la fonction () assurant l envoi d un mail. Il faut passer en paramètre une adresse destinataire, un objet, le contenu et un entête. Attention certains hébergeurs n autorisent pas le protocole smtp, dans ce cas la fonction () est inactive. 1) CREATION DU FORMULAIRE Nous souhaitons construire une page HTML contenant le formulaire de saisie de coordonnées du client et de son message. Le bouton [Envoi] (submit) appellera le fichier PHP de gestion d envoi de mail. Ce fichier est implanté sur deux serveurs autorisant le protocole smtp aux adresses suivantes : Serveur IUT : Serveur OVH : Attention : pour pouvoir utiliser un de ses serveurs votre adresse mail doit être enregistrée sur le bon serveur. Voici donc le début du code de notre formulaire : <form action=" " method="post"> Ajoutez les champs de saisie Nom, Prénom, Adress et message Nom <br/><input type="text" name="nom" size="30" id="nom"> </input><br/> Prénom <br/><input name="prenom" type="text" size="30" id="prenom"></input><br/> <br/><input name='expediteur' id='expediteur' type="text" size="30" ></input><br/> Pour le champ message nous utiliserons une zone de texte : Message<br/> <textarea name='messagetext' cols="50" rows="5" id='messagetext'></textarea> <br/> Pour envoyer un mail les informations récupérées dans les champs ci-dessus ne sont pas suffisantes. Nous avons besoin d autres informations telle que l adresse du destinataire du mail (ici votre adresse mail), le format du mail : texte ou html, l objet du mail. Nous allons donc ajouter des champs invisibles sur la page mais contenant des informations nécessaires à l envoi du mail. Nous ajouterons également deux paramètres supplémentaires concernant les pages de retour après l envoi du mail par le fichier PHP. Nous avons une page de retour correspondant à un envoi du mail correct et une autre page de retour correspondant à une erreur d envoi de mail. Si ces champs ne sont pas initialisés le script php affichera alors des messages de substitution. Pour ce TP vous pouvez tester le bon fonctionnent de ces renvoi en paramétrant par exemple l adresse de google.fr sur le retourok et un autre site sur le retourko. champ description valeur Votre adresse mail toto@wanadoo.fr mode Mode texte ou html du mail text ou html pageretourok url de la page de retour ok mailok.html pageretourko url de la page de retour ko mailko.html objet Texte de l objet du mail Formulaire de contact portfolio messagehtml Champ urilisé si format html

3 Schéma de principe de l envoi du mail Poste client ( Navigateur ) Serveur WEB ( Hébergement ) FORMULAIRE DE CONTACT Nom Dupond Prénom Jean Dupon.jean@orange.fr Message Blabla A+ RESET ENVOI Page retour Ok Mail envoyé, Remerciement. Page retour en erreur Mail pas envoyé, Fichier envoimail.php Mail envoyé Erreur pas de mail envoyé Ci-dessous le code HTML des champs à ajouter au formulaire. Concernant les champs en rouge vous devez les adapter à votre adresse mail et à votre portfolio. Pour le TP seule l adresse mail doit être modifiée. <!-- Champ destinataire --> <input type="hidden" name=' ' value='nom.prenom@fai.com'/> <!-- Mode d'envoi du mail : mode text = "text" ou mode html = "HTML" --> <input type="hidden" name='mode' value='text'> <!-- Insertion de l'adresse de la page de retour si mail envoyé --> <input type="hidden" name='pageretourok' value='retourok.html'> <!-- Insertion de l'adresse de la page de retour si mail envoyé --> <input type="hidden" name='pageretourko' value='retourko.html'> <!-- Objet du mail --> <input type="hidden" name='objet' value="demande d'informations"> <!-- Champ utiliser pour passer le message au format HTML --> <input type="hidden" name='messagehtml' id='messagehtml' value=' '> Pour finir vous devez ajouter les boutons du formulaire <input type="reset" value="reset" ></input> <input type="submit" value="envoyer" ></input> </form> Testez maintenant l envoi de mail sur votre boite mail, que constatez-vous?

4 2) FONCTION DE CONTROLE DES CHAMPS A) Contrôle des champs vides Ecrire une fonction Controle() de vérification du contenu des champs avant l envoi vers la page envoimail.php. Cette fonction sera associée à l événement onsubmit du formulaire. Elle contrôle si tous les champs sont non vides. Si une de ces conditions n est pas remplie, une boite de dialogue de type alert() indique le champ vide et la fonction retourne false. Dans ce cas l envoi est annulé. Code de la fonction ci-dessous function Controle() // Recherche des champs vide et construction de la chaine Info en prévision de l affichage d un // message d erreur var ChaineInfo = ""; if ($("NOM").value == "") ChaineInfo += " - > Nom \n"; if ($("PRENOM").value == "") ChaineInfo += " - > Prenom \n"; if ($("expediteur").value == "") ChaineInfo += " - > \n"; if ($("messagetext").value == "") ChaineInfo += " - >Message \n"; // Construction de la chaine d information sur les sur les champs vides s il y a des erreurs if (ChaineInfo.length > 0 ) ChaineInfo = "les champs suivants sont vide \n" + ChaineInfo ; // Affichage des erreurs s'il y en if (ChaineInfo.length > 0 ) ChaineInfo +="Veuillez corriger..."; alert(chaineinfo); return false else return true; Pour que cette fonction soit exécutée avant l envoi du formulaire il faut associer cette fonction à l événement onsubmit du formulaire.

5 Ci-dessous le code modifié du formulaire en rouge : < FORM METHOD=POST ACTION=" onsubmit="return Controle()" > Testez le formulaire avec des champs vides. B) Contrôle de l adresse Mail Il est important que l adresse mail de l internaute utilisant votre formulaire soit valide. Nous devons contrôler si elle respecte bien les règles de construction d une adresse mail. Ci-dessous une fonction qui assure le contrôle d une adresse mail en utilisant une expression régulière. function is (chaine) // Définition de l'expression régulière var reg = new RegExp('^[0-9a-z._-]+@1[0-9a-z]2,[.]1[a-z]2,5$','i'); return reg .test(chaine); Ajoutez cette fonction dans votre page et complétez la fonction controle() afin quelle vérifie si l adresse mail est correcte. Code à ajouter dans la fonction controle() : // Vérification du format de l'adresse mail if (!is ($("expediteur").value) ) ChaineInfo += "Attention erreur de format dans le champ \n"; 3) MISE EN FORME DU MAIL Lors de vos tests, vous avez constatez que le non, le prénom et l adresse mail n apparaissent pas dans le message seul le texte du champ message apparait. Nous devons modifier le contenu du champ message en lui ajoutant le contenu des champs Nom, prénom et adresse mail afin qu ils apparaissent dans le mail. Nous devons faire de même avec le champ messagehtml dans le cas d un mail en mode html. Ci-dessous le code de la fonction de mise à jour des champs messagetext et messagehtml. Cette fonction est une base de travail, il est par exemple possible de modifier la structure du code HTML afin d obtenir une mise en page du mail différente. function FormatageMessage() // on formate le message au format html var Lemessage = $('messagetext').value; // On remplace le passe à la ligne \n par des balises <BR> // utilisation d'une expression régulière pour la fonction replace

6 Lemessage = Lemessage.replace( /\n/g,"<br>") ; // on modifie le contenu du message en ajoutant le nom et le prénom avant le message var nouveaumessage = "<B>Nom: " + $('NOM').value + "<BR>Prénom: " + $('PRENOM').value +"<BR>"; nouveaumessage += "Expéditeur : " + $('expediteur').value + "<BR>"; nouveaumessage += "Message :<BR></B>"; nouveaumessage += " <BR>"; nouveaumessage += Lemessage ; nouveaumessage += "<BR> <BR>"; $('messagehtml').value = nouveaumessage; // on traite le message texte $("messagetext").value = "Nom : " + $("NOM").value + "\n" + "Prénom : " + $("PRENOM").value + "\n" + "Expéditeur : " + $("expediteur").value + "\n" + $("messagetext").value; Nous devons ensuite appeler cette fonction dans la fonction controle() si tous les champs sont corrects. Modification du code de la fonction controle() : function Controle() // Recherche des champs vide var ChaineInfo = ""; // Affichage des erreurs s'il y en if (ChaineInfo.length > 0 ) ChaineInfo +="Veuillez corriger..."; alert(chaineinfo); return false else FormatageMessage(); return true; Testez les envois de messages en mode texte et en mode HTML. Vous pouvez également modifier la fonction de formatage pour modifier la présentation des mails.

7 4) AFFICHAGE D UN MESSAGE D ATTENTE LORS DE L ENVOI Le traitement de l envoi du mail peut parfois prendre un peu de temps. Le serveur retour l affichage de la page suivante après quelques secondes. Nous souhaitons afficher un message d attente avec une image animé style chargement. Implantez une div contenant l image et le texte d attente dans votre code HTML et configurez sa propriété de style visibility à hidden afin de la rendre invisible au chargement de la page. Code html de la div : <DIV id="attente" style="visibility:hidden"> <Center> <img src="loader.gif"><br> <B>Envoi de votre mail en cours</b> </center> </DIV> Exemple d affichage de la boîte d envoi du mail

8 Exemple de CSS de la div afin de la centrée sur la page <STYLE type="text/css" > #Attente position : absolute; top : 20%; margin-top : -25; width : 300; height : 50; background : #909090; left : 50%; width : 300; margin-left : -150; border-width : 2; border-style : solid; border-color : black; </STYLE> Modification du code de la fonction controle() afin d afficher la DIV lors de l envoi : function Controle() // Recherche des champs vide var ChaineInfo = ""; // Affichage des erreurs s'il y en if (ChaineInfo.length > 0 ) ChaineInfo +="Veuillez corriger..."; alert(chaineinfo); return false else FormatageMessage(); $("Attente").style.visibility = "visible"; return true;

9 Evolution du formulaire de contact avec le plugin ckeditor Ce plugin gère la saisie du texte avec la possibilité de modifier la mise en forme du texte, polices de caractères, taille couleur et plus.. Exemple Site officiel de ce plugin : Télécharger sur le blog le fichier zip contenant une version opérationnelle. Il vous suffit d extraire les fichiers du zip dans le répertoire de votre fichier HTML.

10 Implantation de ce plugin dans notre formulaire de contacts Modifications à apporter sur le code de l exercice précédent : Conseil : implantez le plugin sur une copie du fichier de l exercice précédent. 1) renommez la zone de texte messagetext avec le nom messagehtml 2) supprimez le champ caché messagehtml 3) passez en mode html <input type="hidden" name='mode' value='html'> 4) Ajouter le plugin ckeditor Insertion du code javascript dans la section <HEAD> de votre page <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" src="ckeditor/config.js"></script> 5) Ajoutez le script de chargement du plugin sur la zone de texte nommée messagehtml Placez le code Javascript après la zone de texte <textarea name='messagehtml' cols="50" rows="5" id='messagehtml'></textarea> <br/> <script type='text/javascript'> CKEDITOR.replace('messagehtml',toolbar:'Basic',extraPlugins:'autogrow',autogrow_maxHeight : 800,removePlugins:'resize'); </script> Avec ces modification vous pouvez alors envoyer des mails avec la possibilité de modifié la mise en forme du texte