| |
 Savez-vous bien utiliser les outils de mesure d'audience ?
Effectuez-vous un calcul de ROI (Retour sur investissement) pour savoir comment améliorer vos campagnes emarketing ?
Savez-vous utiliser les bons outils pour booster votre taux de transformation ?
La formation Web Analytics de Ranking Metrics, présentée par un expert reconnu officiellement par Google Analytics, vous apportera les réponses à toutes vos questions !
===> Informations et inscriptions.
|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
 Posté le : Mer Déc 13, 2006 19:43 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
Bonjour à tous,
Dans la lignée du post d'Olivier sur la programmation en AJAX pour les titres des sujets d'un forum, je vous soumets un exemple basique de dév d'un formulaire en AJAX:
en 3 fichiers...
le fichier contact_forum.php
| Code: |
<script type="text/javascript">
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
var ajax_get_error = false;
function ajax_do (url) {
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;
document.body.appendChild (jsel);
return true;
}
function ajax_get (url, el) {
if (typeof(el) == 'string') {
el = document.getElementById(el);
}
if (el == null) { return false; }
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id);
ajax_do (getfile_url);
return true;
}
function submit_form() {
// on set les variables
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var comment = document.getElementById('comment').value;
//on envoie vers le fichier contact_forum-check.php
url = 'contact_forum-check.php?name=' + escape(name) + '&email=' + escape(email) + '&comment=' + escape(comment);
// on renvoie les résultats dans le div id result
ajax_get (url, 'result');
}
</script>
<dl>
<dt>Votre nom :</dt>
<dd><input type="text" name="name" id="name" value="" size="60" /></dd>
<dt>Votre email :</dt>
<dd><input type="text" name="email" id="email" value="" size="60" /></dd>
<dt>Votre message :</dt>
<dd><textarea name="comment" id="comment" cols="90" rows="8" /></textarea></dd>
<dd><input type="button" name="Envoyer" value=" Envoyer votre message " onClick="submit_form();"><br />
<div id="result"> </div>
</dd>
</dl>
|
le fichier getfile.php (ne rien modifier dans ce fichier)
| Code: |
<?php
// Get URL and div
if (!isset($_GET['url'])) { die(); } else { $url = $_GET['url']; }
if (!isset($_GET['el'])) { die(); } else { $el = $_GET['el']; }
// Make sure url starts with http
if (substr($url, 0, 4) != 'http') {
// Set error
echo 'alert(\'Security error; incorrect URL!\');';
die();
}
// Try and get contents
$data = @file_get_contents($url);
if ($data === false) {
// Set error
echo 'alert(\'Unable to retrieve "' . $url . '"\');';
die();
}
// Escape data
$data = str_replace("'", "\'", $data);
$data = str_replace('"', "'+String.fromCharCode(34)+'", $data);
$data = str_replace ("\r\n", '\n', $data);
$data = str_replace ("\r", '\n', $data);
$data = str_replace ("\n", '\n', $data);
?>
el = document.getElementById('<?php echo $el; ?>');
el.innerHTML = '<?php echo $data; ?>';
|
le fichier contact_forum_check.php
| Code: |
<?php
// date du jour
$date = date("d M Y à H:i:s");
// fonction verif format email
function CheckEmail($email_auteur){
$motif1 = "^[[:alnum:]]([[:alnum:]\._-]{0,})[[:alnum:]]";
$motif1 .= "@";
$motif1 .= "[[:alnum:]]([[:alnum:]\._-]{0,})[\.]{1}([[:alpha:]]{2,})$";
$motif2 = "[\.]{2,}";
return (ereg($motif1, $email_auteur) && !ereg($motif2, $email));
}
if (empty($_GET['name'])) { // SI PAS DE NOM
die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre nom...</font><br/>");
}
if (empty($_GET['email'])) { // SI PAS D'EMAIL
die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre email...</font><br/>");
}
if(!CheckEmail($_GET['email'])&&($_GET['email'])){ // VERFIFE LE FORMAT DE l'EMAIL
die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Le format de votre adresse e-mail n'est pas valide...</font><br/>");
}
if (empty($_GET['comment'])) { // SI PAS COMMENTAIRE
die ("<br/><font style=\"color:#cc0000\"><img src='no.gif' alt='' /> Veuillez entrer votre message...</font><br/>");
}
// SI TOUT EST BON
echo "<br><font style=\"color:#1A7917\"><img src='yes.gif' alt='' /> Votre email a été envoyé avec succès...<br>Nous prendrons contact avec vous dans les meilleurs délais.</font><br/>";
$recipient = "votreemail@toto.fr";
$subject = "Formulaire de contact";
$mailheaders = "From: <".$_GET['email']."> \r\n";
$mailheaders .= "Reply-To: <".$_GET['email']."> \r\n";
$mailheaders .= "Bcc: ".$adminemail2." \r\n";
$mailheaders .= "Return-Path: <votreemail@toto.fr> \n";
$mailheaders .= "X-Sender: <votreemail@toto.fr> \n";
$mailheaders .= "X-Mailer: PHP \n";
$mailheaders .= "X-Priority: 1 \n";
$mailheaders .= "MIME-Version: 1.0 \n";
$mailheaders .= "Content-Type: text/html; charset=iso-8859-1 \n";
$msg = "<br>\n";
$msg .= "$date | ".stripslashes($_GET['name'])." <br>\n";
$msg .= " <br>\n";
$msg .= stripslashes($_GET['comment'])." <br>\n";
$msg .= "<br>\n";
$msg .= "<br>\n";
mail($recipient, $subject, $msg, $mailheaders) or die("Impossible d'envoyer le mail...");
?>
|
Le résultat:
-http://www.compta-online.com/contact_forum.php (sans les bulles "tooltips" que je n'ai pas ajouté pour ne pas compliquer le script)....
Voilà, ca peut servir à certains.
Ca peut sembler basique à d'autres
Mais aussi ca peut pousser d'autres membres à poster des scripts tout fait en AJAX...
Xp |
|
| |
|
 |
TOMHTML
WRInaute accro
Inscrit le: 25 Aoû 2004
Messages: 3128
Localisation: http://www.vrai-nom.com
|
| Posté le : Mer Déc 13, 2006 23:01 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
Pas mal 
Allez va pour ma reco, surtout que j'ai tenté de faire la même chose par moi-même et à ma grande surprise (sic) ça ne fonctionnait pas avec IE...
merci |
|
| |
|
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
| Posté le : Mer Déc 13, 2006 23:10 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
Il arrive que sur certains scripts AJAX, IE mette en cache.
Donc tu dois ajouter (par exemple dans le fichier contact_forum_check.php de mon exemple) :
| Code: |
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date du passé
|
Si d'autres personnes postent des scripts en AJAX, je rajouterais un script pour un formulaire d'inscription d'un forum (plus complexe) puis aussi un script intéressant qui permet de tracker online qui navigue sur son site (avec un refresh en AJAX toutes les 3 secondes - AJAX PHP MySQL)...
Xp |
|
| |
|
|
xgamer
WRInaute occasionnel
Inscrit le: 29 Nov 2006
Messages: 163
Localisation: cevennes
|
| Posté le : Mer Déc 13, 2006 23:44 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
| xperienss a écrit: |
puis aussi un script intéressant qui permet de tracker online qui navigue sur son site (avec un refresh en AJAX toutes les 3 secondes - AJAX PHP MySQL)...
Xp |
la ce script m'intéresse vraiment !!!
j'etait en train de penser a un truc du genre , mais ca fesait que pour les referer. |
|
| |
|
|
netsys
WRInaute accro
Inscrit le: 17 Juil 2004
Messages: 1097
|
| Posté le : Jeu Déc 14, 2006 0:30 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
J'ai pas le js activé, je fais comment pour t'écrire ?  |
|
| |
|
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
| Posté le : Jeu Déc 14, 2006 0:51 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
| netsys a écrit: |
| J'ai pas le js activé, je fais comment pour t'écrire ? |
Bien... tu fais pareil que si tu installes pas acrobat reader pour lire des pdf en ligne, ou voir des animations flash sans le plugin player soit installé...
donc tu fais PAS !
Plus sérieusement, en plein "Web 2", désactivé js, c'est se tirer une balle dans le pied.
Pour le script du "tracker online", je le posterai demain car il faut que je fasse le ménage dans le code...
En gros cela me permet d'afficher qui est en ligne, a quelle heure, sur quelle page, et avec quel environnement ($_SERVER["HTTP_USER_AGENT"])... tout cela en AJAX qui reload la page en GET toutes les 5 secondes (setTimeout('loop();',5000).
Xp |
|
| |
|
|
xgamer
WRInaute occasionnel
Inscrit le: 29 Nov 2006
Messages: 163
Localisation: cevennes
|
| Posté le : Jeu Déc 14, 2006 1:03 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
trop bien,
je languit ! |
|
| |
|
|
Bacteries
WRInaute accro
Inscrit le: 27 Mai 2004
Messages: 1048
Localisation: France - Nantes
|
| Posté le : Jeu Déc 14, 2006 10:17 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
| Bon script pour l'exemple, par contre tout ça tu pouvais le faire en javascript sans pour autant passer par ajax (je vois plus l'utilité d'ajax pour mettre à jour une partie de la page via interrogation d'un webservice, d'une BDD, ...). Mais le script reste de toute façon valable pour ce genre d'utilisation. |
|
| |
|
|
netsys
WRInaute accro
Inscrit le: 17 Juil 2004
Messages: 1097
|
| Posté le : Jeu Déc 14, 2006 10:54 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
| xperienss a écrit: |
Plus sérieusement, en plein "Web 2", désactivé js, c'est se tirer une balle dans le pied. |
Et s'il y'avait que moi ca ne serait pas bien grave, mais les stats sont formelles, entre 10 et 15 % des Internautes n'ont pas je js activé !
Ajax doit permettre un meilleur confort d'utilisation mais ne doit pas être nécessaire pour utiliser ton site. Il faut donc penser à developper des solutions alternatives... |
|
| |
|
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
| Posté le : Ven Déc 15, 2006 0:14 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
@Bacteries
Je voulais simplement montrer le principe d'un formulaire en AJAX, évidement dans mon exemple un bout de code en javascript avec des fenêtres d'alerte toutes moches auraient fait l'affaire...
Je voulais aussi faire passer l'idée qu'AJAX c'est pas aussi complexe que cela.
Dans le fichier contact_forum_check.php, on peut passer les vérifications que l'on veut (et des requètes sur une BDD si nécessaire).
@netsys
D'accord avec toi sur le principe d'utilisation d'AJAX.
Pour exemple sur mon forum, j'ai un formulaire d'inscription en AJAX et pour ceux chez qui cela ne marche pas (js désactivé), un formulaire tout bête en PHP.
Résultat sur les derniers mois, personne n'a utilisé celui en PHP... donc... pour mon site, AJAX ca marche bien car j'ai entre 50 / 70 inscrits /jour.
Xp |
|
| |
|
|
zim''
WRInaute occasionnel
Inscrit le: 24 Oct 2006
Messages: 152
|
| Posté le : Ven Déc 15, 2006 4:57 Sujet du message: [AJAX] Script d'un formulaire de contact de base |
|
|
Salut,
Merci pour ta contribution,
Par contre, ce que j'attend d'un poste comme celui-ci, c'est surtout les commentaires du code javascript... car le php ici, je pense que tout le monde maitrise... et c'est bien la le probleme avec l'ajax.
En tout cas merci de ta contrib' si qqun ou toi pouvais commenter un peu le js... serais bien utile  |
|
| |
|
|
Monty973
WRInaute accro
Inscrit le: 21 Mar 2006
Messages: 1537
|
|
| |
|
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
|
| |
|
|
xperienss
WRInaute occasionnel
Inscrit le: 01 Jan 2005
Messages: 225
Localisation: Genève - Suisse
|
|
| |
|
|
Sventovit
Nouveau WRInaute
Inscrit le: 06 Jan 2007
Messages: 4
|
| Posté le : Sam Jan 06, 2007 17:01 Sujet du message: Une petite question SVP Monsieur |
|
|
Bonjour
Le PHP ainsi que le Javascript étant pour moi Terrae Incognitae je me pose ces questions :
- si on veut rajouter des champs à ce formulaire ce sont les lignes seules
| Code: |
// on set les variables
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var comment = document.getElementById('comment').value; |
qu'il faut renseigner ?
- il y a des balises <br> et d'autres <br/> : c'est à cause du PHP ?
Si je veux les mettre en conformité avec la page que suis en train de réaliser (XHTML 1.1) puis je les passer en <br /> ? Et dois je prendre des précautions ?
J'espère sincèrement vous avoir bien fait rire avec mes questions.
Un bon rire valant un bon bifteck dit-on vous n'aurez rien perdu. |
|
| |
|
|
| |
|
|
|
|
Autres sujets de discussion :
|
|
