Ajax, jQuery, PHP, MySQL – Mettre à jour une base de données MySQL à l’aide d’Ajax, jQuery et PHP

by Posted on


Dans cet article, on va voir très rapidement comment permettre d’envoyer en 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 :

  1. Toutes les données sont envoyées et stockées en 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.
  2. Il y dans le script jQuery que très peu de vérification sur la présence de champs vides. C’est surtout l’envoie des données qui nous intéressent.

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

Beginning Javascript and CSS Development With jQuery

Beginning Javascript and CSS Development With jQuery

Un aperçu très complet des potentialités de jQuery en combinaison avec de la CSS pour créer des interfaces riches et interactives multi-plateformes.

Genre(s) : , , , , , , , ,
Auteur(s) :
Edition(s) :
+ d'infos

Mettre en place les fichiers

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
Ajax, jQuery, PHP, MySQL - Mettre à jour une base de données MySQL à l'aide d'Ajax, jQuery et PHP

Le formulaire vide
Ajax, jQuery, PHP, MySQL - Mettre à jour une base de données MySQL à l'aide d'Ajax, jQuery et PHP

La légère détection de champs vides sur le formulaire nom=='' || prenom==''
Ajax, jQuery, PHP, MySQL - Mettre à jour une base de données MySQL à l'aide d'Ajax, jQuery et PHP

Le formulaire validé
Ajax, jQuery, PHP, MySQL - Mettre à jour une base de données MySQL à l'aide d'Ajax, jQuery et PHP

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");
Ajax, jQuery, PHP, MySQL - Mettre à jour une base de données MySQL à l'aide d'Ajax, jQuery et PHP

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';

Le formulaire

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&Eacute;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&eacute;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&eacute;l&eacute;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>&nbsp;</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();
				}
 
		?>

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts