{"id":3189,"date":"2013-02-27T11:08:35","date_gmt":"2013-02-27T10:08:35","guid":{"rendered":"http:\/\/flaven.fr\/?p=3189"},"modified":"2013-09-24T05:13:29","modified_gmt":"2013-09-24T03:13:29","slug":"ajax-jquery-php-mysql-mettre-a-jour-une-base-de-donnees-mysql-a-laide-dajax-jquery-et-php","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/02\/ajax-jquery-php-mysql-mettre-a-jour-une-base-de-donnees-mysql-a-laide-dajax-jquery-et-php\/","title":{"rendered":"Ajax, jQuery, PHP, MySQL – Mettre \u00e0 jour une base de donn\u00e9es MySQL \u00e0 l’aide d’Ajax, jQuery et PHP"},"content":{"rendered":"


\n\t<\/p>\n

\"\"Dans cet article, on va voir tr\u00e8s rapidement comment permettre d’envoyer en Ajax<\/code> via jQuery<\/code> des donn\u00e9es vers une base de donn\u00e9es (BDD) MySQL<\/code> \u00e0 l’aide de PHP<\/code>.<\/p>\n

Il existe une pl\u00e9thore d’articles qui d\u00e9taillent plus ou moins bien ce proc\u00e9d\u00e9 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<\/code> r\u00e9agit et que les donn\u00e9es sont bien envoy\u00e9es.<\/p>\n

Notre formulaire et nos diff\u00e9rents fichiers sont tr\u00e8s basiques et ce qu’il faut retenir, \u00e0 lecture des fichiers, sont les points suivants :<\/p>\n

    \n
  1. Toutes les donn\u00e9es sont envoy\u00e9es et stock\u00e9es en utf-8<\/code> pour \u00e9viter des probl\u00e8mes de character encoding<\/code> et \u00e9viter ainsi que la lettre \u00e9<\/code> par exemple soit stock\u00e9e sous cette forme \u00c3\u00a9es<\/code> dans la BDD.<\/li>\n
  2. Il y dans le script jQuery que tr\u00e8s peu de v\u00e9rification sur la pr\u00e9sence de champs vides. C’est surtout l’envoie des donn\u00e9es qui nous int\u00e9ressent.<\/li>\n<\/ol>\n

    \tL’ensemble des fichiers que nous d\u00e9taillons dans l’artcile sont disponibles en t\u00e9l\u00e9chargement via ce lien hecube_ajax_jquery_php.zip<\/a><\/p>\n\t\t\t\t\t

    \n\n\t\t\t\t\t
    \n\t\t\t\t\t \"Beginning<\/a>\n\t\t\t\t\t <\/div>\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t

    Beginning Javascript and CSS Development With jQuery<\/a><\/h2>\n\t\t\t\t\t\t\t\n\t\t\t\t\t

    Un aper\u00e7u tr\u00e8s complet des potentialit\u00e9s de jQuery en combinaison avec de la CSS pour cr\u00e9er des interfaces riches et interactives multi-plateformes.<\/p>\n\t\t\t\t\t\t\t\tGenre(s) : Agile<\/a>, Ajax<\/a>, API<\/a>, IHM<\/a>, jQuery<\/a>, jQuery UI<\/a>, Mobile<\/a>, UX<\/a>, Webdesign<\/a>
    Auteur(s) :     Richard York<\/a>
    Edition(s) :     John Wiley & Sons Ltd<\/a>
    \n\t\t\t\t\t

    <\/i>+ d'infos<\/span><\/a><\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n

    Mettre en place les fichiers<\/h4>\n

    Il vous faut cr\u00e9er une BDD de donn\u00e9es, puis ensuite cr\u00e9er la table. Cela peut-\u00eatre fait via phpMyAdmin<\/code>. Cette BDD ne va contenir qu’une seule table nomm\u00e9 people<\/code>.<\/p>\n

    Notre BDD hecube_demo<\/code><\/b>
    \n\"Ajax,<\/p>\n

    Le formulaire vide<\/b>
    \n\t\"Ajax,<\/p>\n

    La l\u00e9g\u00e8re d\u00e9tection de champs vides sur le formulaire nom=='' || prenom==''<\/code><\/b>
    \n\"Ajax,<\/p>\n

    Le formulaire valid\u00e9<\/b>
    \n\"Ajax,<\/p>\n

    Via la console javascript de Chrome, on peut voir si les donn\u00e9es sont envoy\u00e9s en d\u00e9commandant console.log (dataString); console.log (\"AJAX DONE\");<\/code><\/b>
    \n\"Ajax,\t<\/p>\n

    \tLa structure de la table people<\/code> de notre BDD hecube_demo<\/code>. Attention, les donn\u00e9es vont \u00eatre stock\u00e9es en utf8<\/code><\/b><\/p>\n

    \r\n\r\n\t\tCREATE TABLE `people` (\r\n\t\t  `person_id` int(10) NOT NULL AUTO_INCREMENT,\r\n\t\t  `nom` varchar(255) DEFAULT NULL,\r\n\t\t  `prenom` varchar(255) DEFAULT NULL,\r\n\t\t  `adresse` varchar(255) DEFAULT NULL,\r\n\t\t  `zip` varchar(255) DEFAULT NULL,\r\n\t\t  `ville` varchar(255) DEFAULT NULL,\r\n\t\t  `telephone` varchar(255) DEFAULT NULL,\r\n\t\t  `email` varchar(255) DEFAULT NULL,\r\n\t\t  `created_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',\r\n\t\t  `updated_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',\r\n\t\t  PRIMARY KEY (`person_id`)\r\n\t\t) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='demo for ajax, jquery, mysql';\r\n\t<\/pre>\n
    Le formulaire<\/h4>\n
    \tBien s’assurer que les donn\u00e9es sont en utf-8<\/code><\/b><\/p>\n
    \r\n\t\t<!-- Meta Tags -->\r\n\t\t<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\r\n\t<\/pre>\n
    \tLe script jQuery qui permet l’envoie des donn\u00e9es en Ajax<\/b><\/p>\n
    \r\n\r\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.0\/jquery.min.js\"><\/script>\r\n\t\t<script type=\"text\/javascript\">\r\n\r\n\t\t$(function() {\r\n\t\t$(\".submit\").click(function() {\r\n\r\n\t\t\t\/* VALUES *\/\r\n\t\t    var nom = $(\"#nom\").val();\r\n\t\t\tvar prenom = $(\"#prenom\").val();\r\n\t\t\tvar adresse = $(\"#adresse\").val();\r\n\t\t\tvar zip = $(\"#zip\").val();\r\n\t\t\tvar ville = $(\"#ville\").val();\r\n\t\t\tvar telephone = $(\"#telephone\").val();\r\n\t\t\tvar email = $(\"#email\").val();\r\n\r\n\t\t\t\/* DATASTRING *\/\r\n\t\t    var dataString = 'nom='+ nom+'&prenom='+ prenom +'&adresse='+ adresse +'&zip='+ zip +'&ville='+ ville +'&telephone='+ telephone +'&email='+ email;\r\n\r\n\r\n\r\n\t\t\tif(nom=='' || prenom=='') {\r\n\t\t\t$('.success').fadeOut(200).hide();\r\n\t\t    $('.error').fadeOut(200).show();\r\n\t\t\t\/* UNCOMMNENT TO SEND TO CONSOLE *\/\r\n\t\t\t\/* console.log (\"SOMETHING HAPPENS\"); *\/\r\n\t\t\t} else {\r\n\t\t\t$.ajax({\r\n\t\t\ttype: \"POST\",\r\n\t\t    url: \"join.php\",\r\n\t\t    data: dataString,\r\n\t\t    \tsuccess: function(){\r\n\t\t\t\t\t$('.success').fadeIn(200).show();\r\n\t\t    \t\t$('.error').fadeOut(200).hide();\r\n\t\t\t\t\t\/* UNCOMMNENT TO SEND TO CONSOLE *\/\r\n\t\t\t\t\t\/*\r\n\t\t\t\t\tconsole.log (dataString);\t\r\n\t\t\t\t\tconsole.log (\"AJAX DONE\");\r\n\t\t\t\t\t*\/\r\n\t\t   \t\t}\r\n\t\t\t});\r\n\t\t\t\t}\/\/EOC\r\n\t\t   return false;\r\n\t\t\t}); \/\/EOF\r\n\r\n\r\n\r\n\t\t});\r\n\t\t<\/script>\r\n\t<\/pre>\n
    \tLe fichier CSS<\/code> pour “habiller” le formulaire<\/b><\/p>\n
    \r\n\r\n\t\t<style type=\"text\/css\">\r\n\t\tbody {\r\n\t\t\tbackground-color:#ffffff;\r\n\t\t\twidth: 60%;\r\n\t\t\theight: 60%;\r\n\t\t\tmargin: 0 auto;\r\n\t\t\tpadding: 12px 0 39px 0;\r\n\t\t\tcolor: #000;\r\n\t\t\tfont-family: Arial, sans-serif;\r\n\t\t\tfont-size: 14px;\r\n\t\t\tline-height: 24px;\r\n\t\t}\r\n\t\t.error{\r\n\r\n\t\t\tcolor:#ff0000;\r\n\t\t\tfont-size:12px;\r\n\r\n\r\n\t\t\t}\r\n\t\t\t.success{\r\n\r\n\t\t\tcolor:#61B329;\r\n\t\t\tfont-size:12px;\r\n\r\n\r\n\t\t\t}\r\n\t\t\/* FORM *\/\r\n\t\t\t    .formLayout table\r\n\t\t\t    {\r\n\t\t\t        background-color: #f3f3f3;\r\n\t\t\t        border: solid 1px #a1a1a1;\r\n\t\t\t        padding: 10px;\r\n\t\t\t    }\r\n\r\n\t\t\t    .formLayout label, .formLayout input\r\n\t\t\t    {\r\n\t\t\t        display: block;\r\n\t\t\t        width: 120px;\r\n\t\t\t        float: left;\r\n\t\t\t        margin-bottom: 10px;\r\n\t\t\t    }\r\n\r\n\t\t\t    .formLayout label\r\n\t\t\t    {\r\n\t\t\t        text-align: right;\r\n\t\t\t        padding-right: 20px;\r\n\t\t\t    }\r\n\r\n\t\t\t    br\r\n\t\t\t    {\r\n\t\t\t        clear: left;\r\n\t\t\t    }\r\n\t\t\t\t.submit {\r\n\t\t\t\t    border: 1px solid #006;\r\n\t\t\t\t    background: #ccf;\r\n\t\t\t\t}\r\n\t\t\t\t.submit:hover {\r\n\t\t\t\t    border: 1px solid #006;\r\n\t\t\t\t    background: #eef;\r\n\t\t\t\t}\r\n\t\t<\/style>\r\n\r\n\t<\/pre>\n
    \tLe formulaire qui r\u00e9colte les donn\u00e9es<\/b><\/p>\n
    \r\n\t\t<div id=\"container\">\r\n\r\n\r\n\r\n\r\n\t\t<form autocomplete=\"off\" enctype=\"multipart\/form-data\" method=\"post\"  name=\"form\">\r\n\r\n\t\t\t<div class=\"info\">\r\n\t\t\t\t<span class=\"error\" style=\"display:none\"><h2>DONNÉES INVALIDE<\/h2><\/span>\r\n\t\t\t\t<span  class=\"success\" style=\"display:none\"><h2>ENREGISTREMENT FAIT<\/h2><\/span>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div class=\"formLayout\">\r\n\t\t\t<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\">\r\n\t\t\t<!-- INPUTS -->\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Nom<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"nom\" name=\"nom\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"60\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Prénom<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"prenom\" name=\"prenom\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"60\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Adresse<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><textarea rows=\"4\" cols=\"50\" name=\"adresse\" id=\"adresse\"><\/textarea><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Ville<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"ville\" name=\"ville\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"60\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Code postal<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"zip\" name=\"zip\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"20\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Téléphone<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"telephone\" name=\"telephone\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"20\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<tr>\r\n\t\t\t\t<td valign=\"top\"><label>Email<\/label><\/td>\r\n\t\t\t\t<td valign=\"top\"><input id=\"email\" name=\"email\" type=\"text\" maxlength=\"255\" tabindex=\"1\" size=\"60\"\/><\/td>\r\n\t\t\t<\/tr>\r\n\r\n\t\t\t<!-- BTN -->\r\n\t\t\t<tr>\r\n\t\t\t\t<td>&nbsp;<\/td>\r\n\t\t\t\t<td valign=\"top\">\r\n\t\t\t<input  type=\"submit\" value=\"ENVOYER\" class=\"submit\"\/>\r\n\t\t\t\t<\/td>\r\n\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n\t\t\t<\/div>\r\n\r\n\t\t<\/form>\r\n\r\n\r\n\t\t\t<\/div><!--container-->\r\n\r\n\t<\/pre>\n
    Le fichier config.php<\/code> pour se connecter \u00e0 la BDD hecube_demo<\/code><\/b><\/p>\n
    \r\n\r\n\t<?php \r\n\t########## MySql details (Replace with yours) #############\r\n$username = \"root\"; \/\/mysql username\r\n$password = \"root\"; \/\/mysql password\r\n$hostname = \"localhost\"; \/\/hostname\r\n$databasename = 'hecube_demo'; \/\/databasename\r\n\r\n$connecDB = mysql_connect($hostname, $username, $password);\r\n\r\n\/\/ Check connection\r\nif (!$connecDB) {\r\n  \tdie('Could not connect: ' . mysql_error());\r\n  }\r\n\r\n$db_selected = mysql_select_db($databasename,$connecDB);\r\n\r\n\/\/ Check DB\r\nif (!$db_selected) {\r\n  die ('Can't use  : ' . mysql_error());\r\n  }\r\n\r\nmysql_close($connecDB);\r\n\r\n\t?>\r\n\r\n\t<\/pre>\n
    \tLe fichier join.php<\/code> qui permet l’insertion en BDD<\/b><\/p>\n
    \r\n\r\n\t\t<?php \r\n\t\t\/* join.php *\/\r\n\r\n\t\t\/\/include db configuration file\r\n\t\tinclude_once(\"config.php\");\r\n\r\n\r\n\t\t\t\tif($_POST)\r\n\t\t\t\t{\r\n\t\t\t\t\/* VALUES *\/\r\n\t\t\t\t$nom=$_POST['nom'];\r\n\t\t\t\t$prenom=$_POST['prenom'];\r\n\t\t\t\t$adresse=$_POST['adresse'];\r\n\t\t\t\t$zip=$_POST['zip'];\r\n\t\t\t\t$ville=$_POST['ville'];\r\n\t\t\t\t$telephone=$_POST['telephone'];\r\n\t\t\t\t$email=$_POST['email'];\r\n\r\n\t\t\t\t$datetime = date('Y-m-d H:i:s');\r\n\r\n\t\t\t\tmysql_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.\"')\");\r\n\t\t\t\t} else { \r\n\r\n\t\t\t\t\t\theader('HTTP\/1.1 500 Looks like mysql error, could not insert record!');\r\n\t\t\t\t\t\texit();\r\n\t\t\t\t}\r\n\r\n\t\t?>\r\n\r\n\t<\/pre>\n
    En savoir plus<\/h2>\n