doctp javascript - Sesamebox.fr
download 
Plainte Transcription
tp javascript - Sesamebox.fr
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 Email, 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 email() assurant l’envoi d’un mail. Il faut passer en paramètres une
IUT St DIE
MMI-2 ProgOE 2016-2017
1
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 email() 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 :” http:\\sesamebox.fr/mmi/LectureFormulaire.php “
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 =' http:\\sesamebox.fr/mmi/LectureFormulaire.php'
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 2016-2017
2
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 2016-2017
3
Nous allons utiliser le plugin CKEditor disponible sur le site http://ckeditor.com/ 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 2016-2017
4
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 2016-2017
5
