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.
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.
Vous avez peut être manqué ces articles :
.
