TP JAVASCRIPT IntegWeb SERIE 3 Suite MMI 2014-2015 GESTION D UN FORMULAIRE DE CONTACT Objectif : 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 IUT St DIE MMI-1 IntegWEB 2014-2015 1
1) Ajouter un champ Email et son contrôle Nous souhaitons maintenant ajouter un champ Email. Comme pour les champs précédents nous devons vérifier que l adresse mail est saisie par l utilisateur. Nous devons également vérifier que cette adresse est valide et quelle correspond au format standard des adresses mail. Ajoutez le champ Email dans le formulaire et complétez les différentes fonctions afin de vérifier la présence d une saisie dans le champ Email. Complétez la fonction ControleFormulaire() avec la vérification de la validité de l adresse mail. Utilisez la fonction ci-dessous qui vérifie la conformité d une adresse mail : //fonction de vérification de l'adresse email function ismail(chainemail) { var syntax = /^[\w.-_]+@[\w.-_]+\.[a-za-z]{2,6$/; // /^ au début de chaine // [\w.-_] toutes les lettres et le. et le - // +@ l'@ obligatoire // +[\w.-_] puis toutes les lettres et le. ou le - // +\. le. obligatoire // [a-za-z]{2,6 2 à 6 caractères de a à z (majuscule ou minuscule) // $/ fin de la chaine return syntax.test(chainemail); Exemple d affichage IUT St DIE MMI-1 IntegWEB 2014-2015 2
2) Ajouter une zone de texte Nous souhaitons ajouter une zone de texte sur plusieurs lignes afin de permettre à l utilisateur de saisir un message. Ajoutez le code html nécessaire à la création de cette zone de texte. Pour mémoire Syntaxe de la balise zone de texte <textarea> <textearea cols=30 rows=5 name= Contenu id= Contenu ></textarea> Cette zone de texte comprend 5 lignes de 30 caractères Ajoutez ensuite le code JavaScript assurant le contrôle de la saisie d un message, et comme pour les questions précédentes, la mise en évidence de l absence de saisie d un message. Testez votre formulaire avec le script php lecturepost.php, que constatez-vous Exemple d affichage : IUT St DIE MMI-1 IntegWEB 2014-2015 3
3) Gestion des passages à la ligne dans le message et mise en forme Vous avez probablement constaté lors des tests de votre formulaire sur le script testformulaire.php que le retour à la ligne dans la zone de texte de saisie n était pas visible dans le tableau affichant les différents champs. Les retours à la ligne dans la zone de texte sont codés avec le code \n. Si on envoi le mail en mode texte ce code de retour à la ligne sera interprété correctement et le message dans le mail respectera les passages à la ligne du message d origine. Si on envoi le mail en mode html les retours à la ligne \n ne seront pas interprétés. Nous devons donc dans ce cas convertir le \n en <br>. Modifiez la fonction ControleFormulaire() afin de modifier le contenu du champ "Contenu" de façon à interpréter correctement les passages à la ligne. Ci-dessous exemple de code assurant le remplacement des "\n" par des "<br />". // on récupère dans une chaine de caractères le contenu var ChaineMessage = _$('Contenu').value; ChaineMessage = ChaineMessage.replace( /\n/g,"<br />") ; // on remplace les \n par des <br /> // La chaine est ensuite transférer dans le champ Contenu qui sera récupérer par le script d'envoi de mail _$(Contenu).value = ChaineMessage; Testez voter formulaire de contact avec le script testformulaire.php et vérifiez que la conversion des \n en <br> fonctionne. 4) Etape finale : envoi de mails Après validation du contenu des paramètres, modifiez le code du formulaire pour appeler le script d envoi de mail proposé en annexe. Testez alors votre formulaire de contact avec l envoi de mail. Le script envoimail.php est disponible en annexe. Attention vous devez modifier l adresse de destinataire afin d envoyer les mails vers votre boite mail. Modifier également les noms des fichiers de retours du script. Deux cas possibles : le mail est bien envoyé ou il y a une erreur et le mail n'a pas été envoyé. Vous devez ensuite placer le fichier envoimail.php sur votre compte étudiant sur le serveur de l iut. Attention le script attend un Objet pour le mail. Vous devez ajouter un champ objet qui sera initialisé avec le texte de votre choix, voir exemple ci-dessous. <input type="hidden" name="objet" id="objet" value="message de mon Portfolio" /> Le script d envoi de mail réalise également une mise en forme des informations passées en mode POST. Vous pouvez évidement modifier le code php si vous souhaitez changer la mise en forme du mail. IUT St DIE MMI-1 IntegWEB 2014-2015 4
Format : Prénom Nom Contenu du message Exemple : Didier RAOULT Bonjour, Voici mon message. 1) Ajout d'un éditeur de texte Nous souhaitons proposer à l'utilisateur un outil de saisie du message permettant d'enrichir le texte avec des options de mise en forme, comparable à un éditeur de texte tel que Word. Ci-dessous la copie d'écran du formulaire contenant cet éditeur. IUT St DIE MMI-1 IntegWEB 2014-2015 5
Pour réaliser cette fonction nous allons utiliser le plugin JavaScript CKEDITOR s'appuyant sur jquery. Voici le site de référence de ce plugin : http://ckeditor.com Comment implanter ce plugin? Etape 1 : Téléchargement du plugin Se rendre sur le site de ckeditor dans la rubrique Download. Sélectionner la version complète : Full Package puis Download CKEditor si vous souhaitez la version standard. Il est possible de choisir les options du plugin en cochant la case Or let me customize CKEditor Poursuivre en cliquant sur Customize & Download CKEditor IUT St DIE MMI-1 IntegWEB 2014-2015 6
Vous pouvez alors configurer votre Package CKEditor : 1.1 - Sélection de la configuration initiale : Basic / Standard / Full 1.2 - Vous avez ensuite la possibilité d'ajouter des plugins : 1.3 - Vous pouvez ensuite choisir un skin (peau) : 1.4 - Pour finir vous pouvez ajouter les langues : 1.5 - Pour finir Download CKEditor 4.4.7 IUT St DIE MMI-1 IntegWEB 2014-2015 7
Etape 2 : Implanter l'éditeur dans le formulaire Le principe est simple, il faut décompresser le fichier obtenu dans votre dossier contenant votre fichier HTML contenant le formulaire. Vous devez alors obtenir un dossier ckeditor dans votre répertoire. Ce dossier contient plusieurs sous-répertoires. Ensuite vous devez compléter le code de votre fichier HTML. 1.6 Appeler le fichier ckeditor.js pour intégrer la bibliothèque JavaScript du plugin dans votre page html Exemple de code : <script src="ckeditor/ckeditor.js"> </script> 1.7 Appliquer le plugin à la zone de texte Exemple de code CKEDITOR.replace("Contenu"); Ce code est à placer soit dans une fonction d'initialisation exécutée sur l'événement onload ou entre des balises <script> implanté après les balises <body> </body>. Cette instruction ne peut pas fonctionnée si l'objet <textearea> n'est pas en mémoire. Vous pouvez alors tester votre page avec votre formulaire, la zone de texte est alors remplacée par l'éditeur de texte. Vous avez alors une version par défaut avec probablement beaucoup de boutons inutiles pour votre formulaire de contact. Voir ci-après comment configurer l'éditeur. Vous avez normalement constaté que votre formulaire de contact de peu pas être envoyé car le contenu de la zone de texte est vide lors de l'exécution de la fonction controleformulaire(). Nous devons modifier le code de la fonction controleformulaire(). Il faut remplacer le code de test sur le champ de saisie "Contenu" : ( _$("Contenu").value == "" ) par le test du contenu de l'éditeur. Code à implanter pour corriger le test sur le champ "Contenu" // test du contenu de l'éditeur var ContenuEditeur = CKEDITOR.instances.Contenu.getData(); if (ContenuEditeur == "" ) { FormOK = false; ChaineMessage += " Message vide! </br>"; IUT St DIE MMI-1 IntegWEB 2014-2015 8
Etape 3 Comment modifier l'éditeur : Sélection des boutons, dimensions de l'éditeur, couleur de la bordure, couleur de fond. Il est possible d'agir sur certains paramètres afin de modifier l'apparence de l'éditeur. Deux fichiers config.js et contents.css sont présent dans le dossier ckeditor. Ces deux fichiers sont utilisés par le plugin pour initialiser l'éditeur. Il est donc possible de modifier ces fichiers pour configurer l'éditeur. Ajuster les dimensions de l'éditeur, la langue et la couleur de la bordure: Fichier config.js CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'fr'; // choix de la langue config.uicolor = '#6EAADC'; // choix de la couleur de bordure config.width = "700px"; // choix de la largeur config.height = "300px"; // choix de la hauteur IUT St DIE MMI-1 IntegWEB 2014-2015 9
Ajuster les boutons On peut aussi gérer la présence des boutons dans la barre d'outils. Exemple de code donnant la barre d'outils suivante config.toolbargroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ], { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], { name: 'links', { name: 'insert', { name: 'forms', { name: 'tools', { name: 'document', groups: [ 'mode', 'document', 'doctools' ], { name: 'others', '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], { name: 'styles', { name: 'colors', { name: 'about' ]; Autre exemple plus adapté au formulaire de contact config.toolbargroups = [ { name: 'tools', { name: 'clipboard', groups: [ 'clipboard', 'undo' ], { name: 'links', { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ], '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], { name: 'styles', { name: 'colors' ]; IUT St DIE MMI-1 IntegWEB 2014-2015 10
Changer la couleur de fond de la zone d'édition On peut changer la couleur de fond de l'éditeur en modifiant le fichier contents.css. Extrait du fichier contents.css /* Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.md or http://ckeditor.com/license */ body { /* Font */ font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; font-size: 12px; /* Text color */ color: #333; /* Remove the background color to make it transparent */ background-color: #FFF; margin: 20px; IUT St DIE MMI-1 IntegWEB 2014-2015 11
ANNEXES Fichier complet config.js /** * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'fr-ca'; config.uicolor = '#6EAADC'; config.width = "700px"; config.height = "200px"; //config.toolbar = 'Basic'; /* config.toolbargroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ], { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], { name: 'links', { name: 'insert', { name: 'forms', { name: 'tools', { name: 'document', groups: [ 'mode', 'document', 'doctools' ], { name: 'others', '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], { name: 'styles', { name: 'colors', { name: 'about' ]; */ // The toolbar groups arrangement, optimized for two toolbar rows. config.toolbargroups = [ { name: 'tools', { name: 'clipboard', groups: [ 'clipboard', 'undo' ], { name: 'links', { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ], '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], { name: 'styles', { name: 'colors' ]; /* { name: 'insert', { name: 'forms', { name: 'about' { name: 'others', { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], IUT St DIE MMI-1 IntegWEB 2014-2015 12
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], { name: 'document', groups: [ 'mode', 'document', 'doctools' ], */ // Remove some buttons provided by the standard plugins, which are // not needed in the Standard(s) toolbar. //config.removebuttons = 'Underline,Subscript,Superscript'; // Set the most common block elements. config.format_tags = 'p;h1;h2;h3;pre'; // Simplify the dialog windows. config.removedialogtabs = 'image:advanced;link:advanced'; ; config.extraplugins = 'colorbutton,panelbutton,floatpanel'; Script envoimail.php Script php d envoi d un mail Implantez ce fichier sur votre hébergement en modifiant l adresse mail du destinataire et les url des fichiers de retour après l envoi du mail. <?php // envoimail.php : // Auteur : D.Raoult // Date création :03/2010 // Maj : 03/2015 // // // Objectif : Gestion des envois de mail depuis le formulaire de contact du portfolio // // Infos récupéré dans le POST // objet : du mail // Nom : expéditeur // Prénom : expéditeur // Email : adresse mail de l'expediteur // Contenu : le message // // Le destinataire du mail : titulaire du portfolio $destinataire = "monadressemail@gmail.com"; // <<<<<======= A MODIFIER // Récupération des paramètres if (isset($_post['objet'])){ $Objet = stripcslashes($_post['objet']); else{ $Objet = "Objet : vide"; IUT St DIE MMI-1 IntegWEB 2014-2015 13
if (isset($_post['nom'])){ $Nom = stripcslashes($_post['nom']); else{ $Nom = "pas de nom"; if (isset($_post['prenom'])){ $Prenom = stripcslashes($_post['prenom']); else{ $Prenom = "pas de Prenom"; if (isset($_post['email'])){ $expediteur = stripcslashes($_post['email']); else{ $expediteur = "pas d'expediteur"; if (isset($_post['contenu'])){ $Contenu = stripcslashes($_post['contenu']); else{ $Contenu = "Pas de message!!!"; // Mise en forme du message on insère au début du message le nom et le prénom en gras // et on encadre le message avec deux lignes horizontales $Contenu = "<b>".$prenom." ".$Nom."</b> a écrit :<hr>".$contenu."<hr>"; // Construction de l'entête du mail au format html $headers = 'From: "'.$Prenom." ".$Nom.'"<'.$expediteur.'>'."\n"; $headers.= 'Reply-To: '.$expediteur."\n"; $headers.= 'Content-type: text/html; charset="utf-8"'."\n"; $headers.= 'Content-Transfer-Encoding: 8bit'; // envoi du mail if (mail ($destinataire, $Objet, $Contenu, $headers) ) { //header( "location:retourok.html"); // <<<<< A MODIFIER AVEC VOTRE PAGE OK // ou echo "Mail envoyé avec succès!!"; else{ //header( "location:retourko.html"); // <<<<< A MODIFIER AVEC VOTRE PAGE KO // ou echo "Erreur pas de mail envoyé!";?> IUT St DIE MMI-1 IntegWEB 2014-2015 14