INIT1

Initiation à Ajax avec Jquery (partie 1)

Avec Ajax et le framework Jquery, ce tutoriel va consister à supprimer une ligne d’une table MySQL sans raffraîchir votre page. Vous allez pouvoir découvrir un aperçu du fonctionnement d’Ajax.

 

Qu’est-ce qu’ AJAX?

Ajax est apparu il y’a déjà quelques années et est un ensemble de technologies comme Javascript, l’objet XMLHTTPRequest, XML,… qui permettent d’envoyer des requêtes à votre serveur et de récupérer ses réponses sans raffraîchir votre page. On l’utilise souvent pour raffraichir des petits bouts de HTML, dans le but d’éviter des temps de chargement longs et des requêtes vers les serveurs trop lourdes à gérer.

Et Qu’est-ce que Jquery?

Jquery est un framework Javascript, c’est à dire une sorte de librairie de fonctions qui vous simplifient énormément la tâche. Jquery est (avec d’autres…) devenu quasiment incontournable si l’on manipule un peu AJAX (on peut diviser par 5 le nombre de lignes de code). De plus, ce genre de framework est optimisé pour fonctionner sur quasiment tous les navigateurs récents. Biensûr il existe d’autres alternatives à Jquery comme Mootools, les fonctionnalités sont à peu de choses près les mêmes. Je n’ai pas fait de tutoriels pour apprendre à manipuler Jquery mais de très bons sites le font très bien.

Ce premier tutorial va consister à supprimer une ligne dans une table SQL sans recharger la page. Nous allons utiliser aussi quelques effets d’animation Jquery pour rendre la page un peu plus jolie!

Etape 1 : Page principale

Il faut tout d’abord afficher la liste des commentaires dans un tableau HTML dynamiquement avec PHP.


    		Tuto Ajax - 1ere partie

		<script src="jquery-1.3.1.min.js" type="text/javascript"><!--mce:0--></script>
		<script src="jquery.color.js" type="text/javascript"><!--mce:1--></script>

				include('config.php');
				$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects');
				mysql_select_db(MYDB) or die ('Base de données incorrecte');
				$requete = 'SELECT id,nom,texte FROM commentaires LIMIT 0,10';
				$result = mysql_query($requete);
				while($com_courant = mysql_fetch_assoc($result)){
					echo '

';
				}
                         mysql_close();
			?>
<table id="listecommentaires">
<caption>Liste des commentaires</caption>
<tbody>
<tr>
<th>Nom</th>
<th>Commentaire</th>
<th></th>
</tr>
<!--?php<br /-->
<tr id="commentaire'.$com_courant['id'].'">
<td>'.$com_courant['nom'].'</td>
<td>'.$com_courant['texte'].'</td>
<td><a class="supprimer" href="javascript:supprimer('.$com_courant['id'].')"><span>Supprimer</span></a></td>
</tr>
</tbody>
</table>

Voici notre document PHP de base sur lequel nous allons pouvoir travailler. La version de Jquery utilisée pour ce tuto sera la version 1.3.1 . Pour nous connecter à la base de données, j’utilise un fichier de configuration config.php qui contient mes identifiants et qui ressemble pour moi à ceci:

<!--?php define("MYHOST","localhost");   define("MYUSER","root");   define("MYPASS","");   define("MYDB","snoupix_tutoriaux"); ?-->

Pour recréer la table SQL des commentaires, piquez dans le code source le code SQL nécéssaire.

Dans le tableau HTML généré, vous remarquerez la spécification d’un identifiant sur la balise tr. Celle-ci servira à sélectionner la ligne pour la supprimer graphiquement avec Jquery. Enfin le lien pour supprimer une ligne est en fait lié à une fonction javascript que l’on complètera plus tard.

Pour rendre tout ça plus agréable voici un peu de code CSS :

body{
	font-family:tahoma,'sans serif';
}
table{
	margin:auto;
	width:50%;
	border-collapse:collapse;
	border:1px solid #eee;
}
table caption{
	margin:10px;
	font-size:3em;
	font-family:georgia;
	color:#888;
}
table tr th{
	text-align:left;
	background-color:#eee;
	padding:10px;
}
table tr td{
	margin:0;
	padding:7px;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ccc;
	background:url('backgroundtd.png') repeat-x bottom;
}
.supprimer{
	display:block;
	width:16px;
	height:16px;
	margin:0;
	padding:0;
	background-image:url('supcom-icone.png');
}
.supprimer span{
	display:none;
}

Etape 2: Exécuter un script avec Ajax

Nous allons donc commencer à coder la fonction Javascript supprimer(), prenant en paramètre l’identifiant du commentaire. Il existe quelques fonctions destinées à réaliser des requêtes Ajax avec Jquery, que vous retrouverez dans la documentation. La fonction utilisée dans ce tuto sera get(), prenant en paramètre l’url de votre script PHP, un tableau de variables qui seront transmises avec la méthode GET, et enfin la fonction a éxécuter quand la réponse du script sera entièrement chargée avec en paramètre de cette fonction, une chaine de caractère que votre script appelé aura retourné.

Voici la fonction supprimer() à insérer dans la balise :

<script type="text/javascript"><!--mce:2--></script>

Si vous avez bien suivi jusqu’ici, vous aurez certainement compris que la prochaine étape va consister à programmer notre document ‘script.php‘.

Etape 3: Supprimer une ligne

<!--?php 	include('config.php'); 	$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects'); 	mysql_select_db(MYDB) or die ('Base de données incorrecte'); 	$requete = 'DELETE FROM commentaires WHERE id='.mysql_real_escape_string($_GET['idsup']).''; 	if(mysql_query($requete)) 		echo '1'; 	else 		echo '0';        mysql_close(); ?-->

On effectue donc ici une simple requête DELETE FROM sur la ligne qui contient l’identifiant passé dans notre variable superglobale $_GET et l’on écrit ’1′ si la requête s’est bien passée.

Voici un petit schéma récapitulatif vous montrant comment fonctionne notre script.

schéma d'explication AJAX

Etape 4: Quelques effets de transitions

Nous allons maintenant, exprimer graphiquement cette suppression à l’aide de quelques fonctionnalités de Jquery. Pour effectuer des dégradés de couleurs sur une ligne de mon tableau, nous aurons besoin d’un plugin Jquery qui le gère. Ce plugin s’apelle Colors Animations. Une fois téléchargé vous pourrez l’inclure juste après Jquery.

Maintenant, nous allons compléter la fonction de rappel de notre fonction get et nous allons tester si la valeur en paramètre est bien égale à « 1″, sinon, il s’agit d’une erreur.

La selection d’une ligne d’un tableau s’effectue avec Jquery comme une simple selection CSS et correspond dans notre exemple à ceci:

Enfin voici le code Javascript avec les fonctions d’animations:

		<script src="jquery-1.3.1.min.js" type="text/javascript"><!--mce:3--></script>
		<script src="jquery.color.js" type="text/javascript"><!--mce:4--></script>
		<script type="text/javascript"><!--mce:5--></script>

Voilà cette première partie touche à sa fin, dans le prochain tuto j’expliquerais comment réaliser un module de tchat.

41 commentaires

S'abonner au RSS des commentaires
  1. Michel VOISIN
    Posté le 13/10/2011 à 22h41

    pas mal, beaux effets… le souci est que ça ne supprime pas effectivement les enregistrements dans la base (quand on lance un rafraichissement de la page, toutes les lignes s’affichent à nouveau), rien ne se passe dans la base. Comment on fait ?

  2. Momo31
    Posté le 17/09/2011 à 22h28

    Bonjour très interessant !! Si l’on veut rajouter a coté une fonction modifier quelqu’un pourrait il m’indiquer la procédure à suivre?

    Merci (jeune programmateur en php)

  3. omar24
    Posté le 21/02/2011 à 11h35

    Merci pour ce tutoriel,simple, précis, clair et fonctionne en plus smile

    • Melissa
      Posté le 10/07/2011 à 18h39

      I found just what I was needed, and it was entraetiinng!

  4. Indien
    Posté le 06/11/2010 à 18h27

    Excellent

  5. titotof
    Posté le 07/07/2010 à 20h46

    Salut a tous le problème chez moi alors que tout est en UTF8 vient d’un espace qui s’insère avant le 1 soit un if(data ==’ 1′) et non if(data==’1′) merci super tuto

  6. François
    Posté le 17/03/2010 à 2h54

    data c’est ce que ta page PHP appelée en Ajax retourne… du coup dans ta fonction tu fais un echo ’1′; return true; ou un echo ’0′ ; return false;
    …Enfin si j’ai bien compris ton problème..
    A+

  7. BaLiSTiK
    Posté le 09/03/2010 à 22h51

    Bonjour,

    Déjà un grand merci pour le code, c est tes bien expliqué et tes simple d’utilisation.
    Par contre, j ai un soucis, ma ligne ne se masque pas (mais la ligne est bien supprimé dans ma base de données), car ma variable data contient tout le code HTML de ma page.

    Pour mon cas, il s’agit de supprimer des utilisateurs.
    Mon script appelé est situé sur la même page que mon tableau, mais ma fonction delUser() est dans une classe (car mon code PHP est Orienté Objet).

    Je suis sur la page http://www.monsite.fr/administration/utilisateurs/liste.html
    qui correspond à une page administration_user.php (je fais de l’URL rewritting via htacces :
    RewriteRule ^administration/utilisateurs/([A-Za-z_-]+).html app/administration_user&type=$1 [L]

    Ainsi si $1 == ‘liste’ j affiche la liste

    Pour supprimer, j appelle la fonction que j ai écrite comme ça :
    function supprimerUser(id, login){

    var zUrlDelUser = ‘<?php echo BASEURL . DS; ?>administration/utilisateurs/supprimer-’ + id + ‘-’ + login + ‘.html’;
    if(id > 0){
    //Exécution du script PHP avec Ajax
    $.get(zUrlDelUser, {
    //iduser:id,

    //loginuser:login
    }, function(data){
    if(data == 1){
    $(‘#tablisteuser tr[id="user' + id + '"] td’).fadeTo("slow", 0, function(){
    $(this).hide();

    });

    }//fin if
    });
    }//fin if
    }//fin fonction

    Et ma fonction supprimer est comme ceci :

    $i == ‘supprimer’
    $idUser = $_GET['iduser'];
    $login = $_GET['loginuser'];
    $oUser = new User();
    $oUser->__setIdUser($idUser);
    $oUser->__setLogin($login);
    $oUser->Del = $oUser->delUser();

    Avec ma fonction delUser() qui retourne true ou false.
    Je pense que la variable data ne sait pas recuperer le retour de ma fonction delUser()…et moi non plus big_smile.

    Si l’und e vous a une solution je suis preneur smile.

    Merci beaucoup.
    Cordialement

  8. Thom
    Posté le 19/02/2010 à 14h33

    Bonjour,

    Je suivi ton tuto a la lettre, le seul souci c’est que j’ai du traitement a faire avant en fonction des table que je doit supprimer. quand je ne fait aucun traitement un simple delete sa marche mais si je commence a faire du traitement il me fait toujours problème de connexion a la BDD et pourtant il me supprime bien l’enregistrement voici mon code source :

    function supprimer(id,table){
    if (id > 0) {
    $.get(‘fonction/supprimer.php’, {
    idsup:id ,
    nametable:table//variable de type GET (on récupérera la variable avec $_GET['idsup'])

    }, function(data){
    //si la requéte s’est bien déroulée
    if (data == ’1′) {
    $(‘#tabresultat tr[id="' + id + '"] td’).fadeTo("slow", 0, function(){
    $(this).hide();

    });
    } else{
    alert(‘Problème de connexion à la base de donnée’);
    }

    });

    }
    }

    et voici mon code php

    include "function.php";
    include "../conf/sql.conf.php";

    sql_connect($host,$user,$passwd,$bdd);

    if($_GET['nametable'] == "1"){
    $nametable = "annuaire";
    }else{

    $nametable = "site404";
    }

    $requete = ‘DELETE FROM ‘.$nametable.’ WHERE id=’.mysql_real_escape_string($_GET['idsup']). »;
    if(mysql_query($requete)){
    echo ’1′;

    }else{
    echo ’0′;
    }
    mysql_close();

    Merci d’avance

  9. stéphane
    Posté le 05/02/2010 à 13h02

    Bonjour, quelqu’un aurait 1 idée pour faire fonctionner ce script sur Ie (7 et 8).
    Merci

  10. stephane
    Posté le 03/02/2010 à 18h18

    Bonjour. Tout d’abord merci pour ce tutoriel super pratique.
    J’aimerai effectuer ce script sur autre chose qu’une table avec <tr> et <td>.

    J’ai essayé de modifier cela dans le javascript, mais sans succes.

    J’aimerai par exemple supprimer :
    <div id="listecommentaires">
    <img></img>
    <p class="essai">jquery forever</p>

    <a class="supprimer" href="javascript:supprimer(<?php echo $com_courant['id']; ?>)"><span>Supprimer</span></a>
    </div>

    merci beaucoup de votre aide par avance

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>