Ajax
via jQuery
des données vers une base de données (BDD) MySQL
à l’aide de PHP
.Il existe une pléthore d’articles qui détaillent plus ou moins bien ce procédé et il est certain que c’est assez facile, le plus amusant est de voir comment tirer profit de la console sous Chrome afin de s’assurer que le script jQuery
réagit et que les données sont bien envoyées.
Notre formulaire et nos différents fichiers sont très basiques et ce qu’il faut retenir, à lecture des fichiers, sont les points suivants :
utf-8
pour éviter des problèmes de character encoding
et éviter ainsi que la lettre é
par exemple soit stockée sous cette forme ées
dans la BDD.L’ensemble des fichiers que nous détaillons dans l’artcile sont disponibles en téléchargement via ce lien hecube_ajax_jquery_php.zip
Il vous faut créer une BDD de données, puis ensuite créer la table. Cela peut-être fait via phpMyAdmin
. Cette BDD ne va contenir qu’une seule table nommé people
.
Notre BDD hecube_demo
Le formulaire vide
La légère détection de champs vides sur le formulaire nom=='' || prenom==''
Le formulaire validé
Via la console javascript de Chrome, on peut voir si les données sont envoyés en décommandant console.log (dataString); console.log ("AJAX DONE");
La structure de la table people
de notre BDD hecube_demo
. Attention, les données vont être stockées en utf8
CREATE TABLE `people` ( `person_id` int(10) NOT NULL AUTO_INCREMENT, `nom` varchar(255) DEFAULT NULL, `prenom` varchar(255) DEFAULT NULL, `adresse` varchar(255) DEFAULT NULL, `zip` varchar(255) DEFAULT NULL, `ville` varchar(255) DEFAULT NULL, `telephone` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `created_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', `updated_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`person_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='demo for ajax, jquery, mysql'; |
Bien s’assurer que les données sont en utf-8
<!-- Meta Tags --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
Le script jQuery qui permet l’envoie des données en Ajax
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".submit").click(function() { /* VALUES */ var nom = $("#nom").val(); var prenom = $("#prenom").val(); var adresse = $("#adresse").val(); var zip = $("#zip").val(); var ville = $("#ville").val(); var telephone = $("#telephone").val(); var email = $("#email").val(); /* DATASTRING */ var dataString = 'nom='+ nom+'&prenom='+ prenom +'&adresse='+ adresse +'&zip='+ zip +'&ville='+ ville +'&telephone='+ telephone +'&email='+ email; if(nom=='' || prenom=='') { $('.success').fadeOut(200).hide(); $('.error').fadeOut(200).show(); /* UNCOMMNENT TO SEND TO CONSOLE */ /* console.log ("SOMETHING HAPPENS"); */ } else { $.ajax({ type: "POST", url: "join.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); /* UNCOMMNENT TO SEND TO CONSOLE */ /* console.log (dataString); console.log ("AJAX DONE"); */ } }); }//EOC return false; }); //EOF }); </script> |
Le fichier CSS
pour “habiller” le formulaire
<style type="text/css"> body { background-color:#ffffff; width: 60%; height: 60%; margin: 0 auto; padding: 12px 0 39px 0; color: #000; font-family: Arial, sans-serif; font-size: 14px; line-height: 24px; } .error{ color:#ff0000; font-size:12px; } .success{ color:#61B329; font-size:12px; } /* FORM */ .formLayout table { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; } .formLayout label, .formLayout input { display: block; width: 120px; float: left; margin-bottom: 10px; } .formLayout label { text-align: right; padding-right: 20px; } br { clear: left; } .submit { border: 1px solid #006; background: #ccf; } .submit:hover { border: 1px solid #006; background: #eef; } </style> |
Le formulaire qui récolte les données
<div id="container"> <form autocomplete="off" enctype="multipart/form-data" method="post" name="form"> <div class="info"> <span class="error" style="display:none"><h2>DONNÉES INVALIDE</h2></span> <span class="success" style="display:none"><h2>ENREGISTREMENT FAIT</h2></span> </div> <div class="formLayout"> <table cellpadding="2" cellspacing="2" border="0"> <!-- INPUTS --> <tr> <td valign="top"><label>Nom</label></td> <td valign="top"><input id="nom" name="nom" type="text" maxlength="255" tabindex="1" size="60"/></td> </tr> <tr> <td valign="top"><label>Prénom</label></td> <td valign="top"><input id="prenom" name="prenom" type="text" maxlength="255" tabindex="1" size="60"/></td> </tr> <tr> <td valign="top"><label>Adresse</label></td> <td valign="top"><textarea rows="4" cols="50" name="adresse" id="adresse"></textarea></td> </tr> <tr> <td valign="top"><label>Ville</label></td> <td valign="top"><input id="ville" name="ville" type="text" maxlength="255" tabindex="1" size="60"/></td> </tr> <tr> <td valign="top"><label>Code postal</label></td> <td valign="top"><input id="zip" name="zip" type="text" maxlength="255" tabindex="1" size="20"/></td> </tr> <tr> <td valign="top"><label>Téléphone</label></td> <td valign="top"><input id="telephone" name="telephone" type="text" maxlength="255" tabindex="1" size="20"/></td> </tr> <tr> <td valign="top"><label>Email</label></td> <td valign="top"><input id="email" name="email" type="text" maxlength="255" tabindex="1" size="60"/></td> </tr> <!-- BTN --> <tr> <td> </td> <td valign="top"> <input type="submit" value="ENVOYER" class="submit"/> </td> </tr> </table> </div> </form> </div><!--container--> |
Le fichier config.php
pour se connecter à la BDD hecube_demo
<?php ########## MySql details (Replace with yours) ############# $username = "root"; //mysql username $password = "root"; //mysql password $hostname = "localhost"; //hostname $databasename = 'hecube_demo'; //databasename $connecDB = mysql_connect($hostname, $username, $password); // Check connection if (!$connecDB) { die('Could not connect: ' . mysql_error()); } $db_selected = mysql_select_db($databasename,$connecDB); // Check DB if (!$db_selected) { die ('Can't use : ' . mysql_error()); } mysql_close($connecDB); ?> |
Le fichier join.php
qui permet l’insertion en BDD
<?php /* join.php */ //include db configuration file include_once("config.php"); if($_POST) { /* VALUES */ $nom=$_POST['nom']; $prenom=$_POST['prenom']; $adresse=$_POST['adresse']; $zip=$_POST['zip']; $ville=$_POST['ville']; $telephone=$_POST['telephone']; $email=$_POST['email']; $datetime = date('Y-m-d H:i:s'); mysql_query("INSERT INTO people (nom, prenom, adresse, zip, ville, telephone, email, created_on, updated_on) VALUES ( '".utf8_decode($nom)."', '".utf8_decode($prenom)."', '".utf8_decode($adresse)."', '".utf8_decode($zip)."', '".utf8_decode($ville)."', '".utf8_decode($telephone)."', '".utf8_decode($email)."', '".$datetime."','".$datetime."')"); } else { header('HTTP/1.1 500 Looks like mysql error, could not insert record!'); exit(); } ?> |