TP JAVASCRIPT Série N 4

Dimension: px

Commencer à balayer dès la page:

Download "TP JAVASCRIPT Série N 4"

Marie-Hélène Paradis
il y a 6 ans
Total affichages :

1 TP JAVASCRIPT Série N 4 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 De part sa nature JavaScript est incapable d envoyer un , seul un programme de messagerie sur la machine cliente est capable de réaliser cette opération. Dans ce cas c est le classique mailto d HTML qui appelle 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. 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ètres une IUT St DIE MMI-2 ProgOE

2 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. Afin de vérifier le contenu des champs envoyés par le formulaire à l aide de JavaScript. Nous utiliserons un script php qui assure la visualisation de tous les champs en GET ou en POST. URL : Cette URL sera donc placée sur la propriété action du formulaire et la méthode sera de type post. 1) Création du formulaire Construisez un formulaire présenté ci-dessus comportant trois champ <input> de type texte et un champ zone de texte (<textarea>) Paramètres du formulaire : action =' method = 'post' Ecrire le code html de ce formulaire puis le tester. Ci-dessous un exemple d affichage du formulaire et le résultat envoyé par le script php IUT St DIE MMI-2 ProgOE

2) Implantation d'un éditeur de texte wysiwyg sur le champs message On souhaite proposer à l'utilisateur un éditeur de texte wysiwyg permettant d'ajouter une mise en forme du message.

3 2) Implantation d'un éditeur de texte wysiwyg sur le champs message On souhaite proposer à l'utilisateur un éditeur de texte wysiwyg permettant d'ajouter une mise en forme du message. Nous allons utiliser un plugin JavaScript permettant de transformer une simple zone de saisie textarea en un éditeur de texte. Exemple ci-dessous IUT St DIE MMI-2 ProgOE

4 Nous allons utiliser le plugin CKEditor disponible sur le site sur lequel on retrouve les différentes versions en téléchargement, et des outils de configuration. Plusieurs versions sont disponibles. Nous allons évidement utiliser le version open source. Principe d'implantation du plugin : Etape 1 : Pour faciliter le TP, télécharger sur le blog la bibliothèque CKEditor configuré pour le TP. Etape 2 : Extraire le fichier Zip dans le dossier du TP dossier :ckeditor Etape 3 : Ajouter dans le <head> du fichier contenant le formulaire l'appel au fichier JavaScript du plugin : ckeditor.js <script src="ckeditor/ckeditor.js"></script> Etape 4 : Il faut ajouter le code JavaScript qui implante le plugin sur la zone de saisie ( textarea ) Ajouter une balise <script> à la fin du body afin que se code soit exécuté après le chargement de la page. Dans cette balise il faut faire appel à l'instruction d'initialisation du planning suivante : var MonEditeur = CKEDITOR.replace( 'message' ); "message" et l'identifiant de la balise <texarea> Etape 5 : Tester alors le formulaire. 3) Gestion du reset du formulaire On ajoute une fonction appelée par le bouton de reset du formulaire pour vider la zone de saisie du message. Instruction permettant de modifier le contenu de la zone de texte gérée par le plugin et de la vidée ci-dessous : MonEditeur.setData(""); 4) Lecture du contenu de l'éditeur On souhaite lire le contenu de l'éditeur et l'afficher ensuite dans une <div>. Ajouter une balise <DIV> sous le formulaire et un bouton appelant une fonction assurant la lecture du contenu de l'éditeur dans une variable puis le transfert de cette variable dans la div. Code permettant la lecture du contenu de l'éditeur : var ContenuEditeur = MonEditeur.getData(); IUT St DIE MMI-2 ProgOE

5 5) Afficher le code source HTML contenu dans l'éditeur Pour afficher le code HTML sans l'interpréter il faut copier le code source dans une balise spécifique qui ne décode pas le code HTML. Vous devez utiliser la balise <xmp> qui n'interprète pas les balises HTML. Complétez le fonction de la question précédente avec le code nécessaire pour transférer le contenu de la variable dans la balise <xmp>. 6) Modifier la barre de bouton de l'éditeur Dans la bibliothèque télécharger sur le blog on trouve dans le fichier index.html dans le dossier ckeditor/samples Ouvrir le fichier index, ce fichier présente le plugin et propose par exemple un outils de configuration de la barre d'outils. Il est possible d'utiliser cet outils pour modifier le fichier de configuration du plugin config.js présent dans le dossier ckeditor. Il est également possible de modifier certains paramètres dans le fichier config.js : couleur de la barre d'outils, taille de la zone d'édition. IUT St DIE MMI-2 ProgOE

Documents pareils

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE