Moi, PHP et AJAX

Primo, je tiens à préciser que ce post est destiné spécialement à un public newbie avec l’univers PHP… je fais là que fournir une petite synthèse de ma modeste expérience…

Enfin bref, je vais juste essayer d’expliquer une approche du PHP un peu comme j’aurais aimé qu’on me l’explique quand j’était encore un analphabète… c’est juste une question d’organisation et je sais que chacun a ça méthode dans laquelle il se sent à l’aise…

Le verdict final revient donc à vous (si vous avez bien entendu vos 18 ans … si non, je m’en fous de ce que vous pensez, je vous impose ma méthode ! )

Ok ok !  3ala machiat allah on commence !

Et je pense qu’avant de vous dire quoi faire, je vais d’abord commencer par vous dire quoi éviter… prenons ce bout de code PHP :



<?php

require ("sys/connect.php");

mysql_connect($server,$user,$pass);

mysql_select_db($base);

$query =mysql_query("select * from table")  or die ("error: ".mysql_error());

echo "<h2>Liste</h2>";

if (mysql_num_rows($query))

{

            echo "<center class='Intro'>Intro quoi !</center><br>";

            echo "<table>";

            while($row = mysql_fetch_assoc($query)) {

                        $id = $row['id'];

                        $from = $row['from'];

                        $date = $row['date'];

                        $comment = $row['comment'];

                        echo "<tr>

                                     <td >from: $from </td>

                                     <td><a href='profil.php?id=$id'>Profil</a></td>

                                     <td>$date</td>

                                     <td>$comment</td>

                                    </tr>";

            }

            echo "</table>";

}

mysql_close();

?>



J’avoue que ce code est tiré d’un de mes propres vieux projets… à cette époque, il faut le dire, j’en étais super fière. A présent, je me dis plutôt : « Mais c’est qui le con qu’a écrit cette camelote ? C’est de n’importe quoi comme code quoi !!! »        

Pourquoi ?

Certes, ç’a affiche bel et bien le résultat voulu… mais c’est pas vraiment la bonne façon de faire… la raison ? Y en a beaucoup :

· Tout est mélangé ici, du PHP à l’intérieur du html et du html à l’intérieur du php…ça flippe ça !

· Si vous êtes des fainéants comme moi et que vous faites souvent recours à un éditeur WYSIWYG tel Dreamweaver pour les petites/grandes modifications rapides, soyez sûr qu’avec une telle organisation, vous serez dans tous les cas obligés de tout taper à la main

· A part la traditionnelle technique du copier-coller, ce code n’est pas vraiment réutilisable

· Cette méthode ne permet pas une éventuelle prise en charge de AJAX

Ce qu’il faut faire :

Tout d’abord, séparer les traitements de l’affichage… je parle pas d’utiliser un moteur de template, mais seulement commencer par faire un petit ménage déjà coté code PHP (si vous tenez tout de même aux templates, je pense qu’il y a pas mieux pour un newbie que le lien suivant [http://www.tinybutstrong.com/examples.php])

Il faut donc organiser notre code en fonctions et surtout mettre du PHP à l’intérieur du html plutôt que l’inverse ;



<h2>List</h2>

<?php

//Une fonction qui ne contient pas la moindre balise html.

//Elle se charge de récupérer les données et les renvoyer dans un tableau

function LoadData() {

Connect();

$SQL  = "select * from table";

$query  = mysql_query($sql);

if ( !mysql_num_rows($query) ) {

            return false;

} else {

            while ( $row = mysql_fetch_assoc($query) ) {

                        $return[] = array(

                                                           'id'       => $row['id'],

                                                           'from'     => $row['from'],

                                                           'date'     => $row['date'],

                                                           'comment'  => $row['comment']

                                                           );

            }

            mysql_close();

            return $return;

}



//Une fonction qui ne contient pas la moindre requête SQL ou commande MYSQL

//Elle se charge seulement d'afficher le tableau récupéré par LoadData()

function DisplayData() {

$rows = LoadData();

?>

<table>

<?php

foreach ($row as $rows){

?>

<tr>

<td >from: <?php echo $row['from']; ?> </td>

<td><a href='profil.php?id=<?php echo $row['id']; ?>'>Profil</a></td>

<td><?php echo $row['date']; ?></td>

<td><?php echo $row['comment']; ?></td>

</tr>

<?php

}

?>

</table>

<?php

}

?>



En plus, le fait de mettre du PHP à l’intérieur du HTML( <td >from: <?php echo $row['from']; ?> </td> Plutôt que echo “<td >from: $row['from'] </td>”;), vous permettra de profiter à max de l’édition avec la souris de votre éditeur WYSIWYG



Le bénéfice majeur  de la deuxième fonction qui retourne que le HTML reste pour moi la possibilité de passer au Web 2.0 avec le fameux AJAX.

Juste pour rappelle ; AJAX est une technique qui permet de modifier que des parties ciblées de vos pages et donc éviter de recharger toute la page pour des petits changements…

Votre site peut donc avoir l’air plus fluide, plus rapide et plus cool dans sa navigation.

Vous pouvez en voir une petite démonstration  dans le tout dernier site tout frais que j’ai réalisé pour un oncle à moi [http://profay.com/ggsa/ ]

Dans ce cas, toujours pour éviter les usines à gaz,  j’ai utilisé une des plus simples librairies existantes pour le langage PHP : AJAX Agent [http://www.hemmady.com/ajaxagent]



Philosophie de AA :   au lieu d’avoir des liens qui vont appeler des pages PHP (ce qui donc va obliger un rechargement totale de la page), nos liens vont plutôt appeler des fonctions Javascripts qui se chargeront de faire l’aller-retour avec le serveur et affecter le changement à la zone voulue… voila un exemple :

Imaginons qu’on a une page avec deux zones A et B (2 div), en cliquant sur un lien, on veut afficher le résultat dans la zone A et uniquement dans la zone A sans que la page se recharge. Voilà une solution :



<head>

<?php

 require_once('library/agent.php');

 $agent->init();

?>

<SCRIPT language="JavaScript">

function call_ShowDetails() {

               document.getElementById("Zone_A").innerHTML  = '';

               agent.call('','DisplayData','callback_ShowDetails');

             

}

function callback_ShowDetails(html) {

              document.getElementById("Zone_A").innerHTML  = html;

}

</SCRIPT>

</head>



La première fonction call_ShowDetails() va d’abord chercher une balise <div> qu’a l’Id “Zone_A” afin de la vider. Elle appelle après l’agent AJAX avec sa méthode call

agent.call('url','php_function', 'client_handle', param1, param2, ...);

·  ‘url’ est le chemin du fichier ou se trouve notre fonction PHP(Laisser vide si la fonction se trouve dans le même fichier).

·  ‘php_function’ est notre fonction PHP qui va s’exécuter coté serveur en retournant que du HTML

· ‘client_handle’ est la fonction Javascript qui va récupérer le HTML renvoyé par la fonction PHP afin de l’afficher dans la zone voulue.

· Param1, param2… sont les paramètres éventuels de la fonction PHP



Dans notre cas, après avoir vidé la zone A, agent_call va exécuter la fonction PHP DisplayData puis va passer le tableau HTML retourné à la fonction Javascript callback_ShowDetails() qui va à son tour l’afficher dans notre zone A.

Pour le navigateur client, toutes ses opérations s’exécutent via du Javascript ce qui fait que notre application prend l’air d’une application lourde plutôt que d’une application Web qui n’arrête pas de se recharger…

Je vous re-invite à revisiter [http://profay.com/ggsa/ ] et essayer re-imaginer ce concept…



Comme j’ai déjà annoncé, ce post est destiné à des néophytes… Une fois vous avez pris l’habitude de cette première partie, vous pouvez alors passer à des technos plus génériques et plus complexes du PHP que j’ai déjà cité dans le post [Pourquoi ce mépris envers PHP]



Pour conclure, je doute fort que j’étais assez explicite dans mes explications… Je reste néanmoins disponible pour répondre a vos questions et vos remarques… et… VIVE LE PHP !!!