I. Avant-propos▲
S'adressant à tous ceux qui maîtrisent la « programmation permettant de gérer un site Web », cet article a pour but d'aller encore plus loin dans l'utilisation du module AJAX.
Developpez.com possède déjà un grand nombre de tutoriels et d'articles sur AJAX. Le but du présent article reste donc de mettre en évidence la multiple utilisation d'un seul et simple module AJAX.
II. Prérequis▲
Bon programmeur comme vous l'êtes, vous maîtrisez le HTML, les feuilles de style et les bases du JavaScript.
Vous avez lu un des deux articles AJAX en Clair le ChatAJAX en Clair le Chat ou AJAX en Clair le TableauAJAX en Clair le Tableau ainsi le Moteur AJAX de base est considéré comme acquis !
III. Découverte de l'article▲
Le code de l'exemple décrit dans cet article étant téléchargeable, nous n'affichons dans cet article que les parties de code justifiant des commentaires. Aussi, nous vous conseillons de télécharger et d'installer l'exemple, puis de le tester.
Ainsi, vous serez en possession du code complet et la lecture de l'article s'en trouvera facilitée.
Téléchargez l'ensemble de la photothèque exemple ZIP de la photothèqueZIP de la photothèque .
Attention ce zip comprend toute une photothèque soit 23 Mo (4 minutes de téléchargement)
Apparence de l'exemple photothèque :
Que vous pouvez tester ici : Testez la PhotothèquePhotothèque AJAX .
Cette fois vous avez tout en main et il nous reste à regarder et expliquer le mécanisme général du code.
IV. Organisation et explication du code▲
Un PHP unique et son correspondant appelé par AJAX, donc deux PHP, index.php et phototheque_ajax.php (PHP appelé par AJAX),Plusieurs fonctions sont utilisées avec chacune leurs quatre phases faciles à isoler :
- dans index.php,un ou des éléments HTML appelant une fonction JavaScript ;
- la fonction JavaScript va en partie analyser les éléments reçus du HTML puis appeler le moteur AJAX ;
- le moteur AJAX ne fait que passer (ici en POST Asynchrone, voir AJAX en clair (1)AJAX en clair (1) ) les éléments à traiter au PHP phototheque_ajax.php ;
- le PHP phototheque_ajax.php contient lui aussi un code spécifique pour chaque action, et la partie commune qui va renvoyer le pavé de vignettes photo correspondant à la page en cours.
La page HTML telle que représentée (voir image plus haut) est décrite dans index.php jusqu'aux images cliquables du menu. Le pavé de vignettes étant généré par phototheque_ajax.php. La fonction AJAX est appelée sans action précisée et donc renvoie la totalité du pavé de vignette en cours. AJAX l'envoyant dans le DIV id='LePave2'.
IV-A. Actions communes aux deux PHP▲
Les deux PHP vont lister les répertoires, et noter pour chacun des répertoires le nombre de photos contenues. Chaque répertoire est une catégorie.
Un outil vous est donné également (phototheque_genere.php). Il vous servira à chaque fois que vous ajouterez des photos ou répertoires dans « albums », à générer les répertoires et vignettes dans « albumsv », Toutes les vignettes portent le nom de la photo suivi de « v ».
Le code commun des PHP index.php et phototheque_ajax.php :
<?php
/* ================LISTTE DES CATEGORIES================ */
/* ==1 liste des categories donc repertoires de albums== */
$chemin = 'albums/';
$repertoire = opendir($chemin);
while($element = readdir($repertoire)) { $liste[] = $element; }
natsort($liste);
$liste = array_values($liste);
$nombre = count($liste);
$Categorie = array();
$Categorie[0]="";
$nbrx=1;
for ($i=0; $i<$nombre; $i++)
{
if ($liste[$i] != "." && $liste[$i] != ".." && is_dir($chemin.$liste[$i]))
{
$Categorie[$nbrx]=$liste[$i];
$nbrx++;
}
}
closedir($repertoire);
/* ==============NBR PHOTOS PAR CATEGORIE============== */
$CategorieNbr = array();
$CategorieNbr[0]="";
for ($i=1; $i<$nbrx; $i++)
{
$chemin = 'albums/'.$Categorie[$i].'/';
$repertoire = opendir($chemin);
unset($liste);
while($element = readdir($repertoire)) { $liste[] = $element; }
natsort($liste);
$liste = array_values($liste);
$nombre = count($liste);
$nombreOK =1 ;
for ($i2=0; $i2<$nombre; $i2++)
{
$pos = strpos($liste[$i2], ".jpg");
if ($liste[$i2] != "." && $liste[$i2] != ".." && !is_dir($chemin.$liste[$i2]) && $pos>3)
{ $nombreOK++ ; }
}
$CategorieNbr[$i]=$nombreOK;
closedir($repertoire);
}
?>Quelques remarques : afin de simplifier la lecture du code, les tables des répertoires (catégories) et photos sont en base '1', La première catégorie est donc en [1].
Par ailleurs le nombre d'éléments est égal au nombre d'éléments +1 pour le rendre directement utilisable dans les boucles FOR, etc.
Gardez à l'esprit que le code permet d'utiliser plusieurs catégories sans avoir à modifier aucun code ! Cependant limitez-vous à dix maximum… le menu restera géré automatiquement comme ceci :
function menu()
{
var LeMenu=" <a onclick='recul();' href='#' class='LesA14' ><img src='logos/fleche_gauche.gif' id='Xx' alt='Retour' /></a> <img src='logos/pave.gif' id='Zz' alt='phototheque' /> <a onclick='avance();' href='#' class='LesA14' ><img src='logos/fleche_droite.gif' id='Yy' alt='Suite' /></a><br />";
LeMenu=LeMenu+"<div class='centrePF1'><span class='LaFonte_3_Coul1' >";
for (i=1; i<nbcateg; i++)
{
if(i==4 || i==7 || i==10) LeMenu=LeMenu+"<br />";
if(i>1 && i!=4 && i!=7 && i!=10) LeMenu=LeMenu+" - ";
if (i!=categorie) { LeMenu=LeMenu+"<a href='#' onclick='ChangeCatego(100,"+i+",1,1);' class='LesA12Phot'> "+nom_categorie[i]+" </a>";}
if (i==categorie) { LeMenu=LeMenu+"<a href='#' class='LesA12Phota'> "+nom_categorie[i]+" </a>";}
}
document.getElementById('LePave1').innerHTML = LeMenu+"</span></div>";
}En effet les deux PHP possèdent le nombre et les libellés des catégories, ainsi que le nombre de photos de chaque catégorie (comme nous l'avons mentionné plus haut), mais dans le cas particulier de index.php toutes ces données sont présentes en PHP, mais également en JavaScript. En effet AJAX lui également a besoin de ces données.
Occasion de rappeler que souvent AJAX utilise des données communes avec PHP, vous pouvez voir la facilitée de gérer cette double information.
IV-B. Le ZOOM sur image▲
Ce mécanisme connu, et apprécié d'un zoom sur image, est presque toujours utilisé sur les sites en chargeant le jQuery qui contient ce mécanisme. Fidèle à ma série « En Clair », j'ai construit ce zoom sur image en associant la feuille de style et le JavaScript. Pour cette partie AJAX n'est pas sollicité, puisque le JavaScript et la feuille de style sont déjà dans index.php.
Chaque vignette est décrite ainsi :
<a href='#' class='photo'><img src='albumsv/diversv/montmartre-nuitv.jpg' alt='albums/divers/montmartre-nuit,jpg' class='photo' width='150' height='150' onclick='voir('albums/divers/montmartre-nuit.jpg');' /></a>Donc lors du clic, la fonction voir() ; contenue dans phototheque.js et celles de ce fichier JavaScript vont mettre l'image grand format dans une imbrication de trois DIV qui sont ceux-ci :
<div id="DivVisualisation" class="DivVisualisation"></div>
<div id="DivGeneral" class="DivGeneral">
<div id="Divimage" class=Divimage" onclick="fermeture()"> </div>
<div id="DivTitre" class="DivTitre"> </div>
</div>Avec en premier un DIV situé sous les trois DIV mais couvrant tout le reste de la page, enfin grâce au CSS qui permet d'opacifier la page. Ce qui donne donc pour la feuille de style :
div.DivVisualisation
{
display: none; position: fixed; top: 0%; left: 0%;
width: 100%; height: 100%; background-color: #3a3a3a;
z-index:10; opacity:0.6; filter: alpha(opacity=60);
}
div.DivGeneral
{
display: none; position: fixed; padding: 0; margin:0;
border: 1px solid black; background-color: white;
z-index:11; top: 10%; left: 20%; overflow: auto;
}
div.Divimage
{
left:0; right:0; bottom:0; margin:0; padding: 8px; overflow: auto;
width:100%; height:100%;
}
div.DivTitre
{
left:0%; width:100%; height:20px; padding:0; margin:0;
color:black; text-align:center;
}Dont l'analyse vous sera familière. 
Alors le JavaScript peut s'exécuter pour donner le zoom sur la vignette cliquée.
var coeff=4;
var largeur=600;var hauteur=600;
function voir(CheminNomImage)
{
var work = new Image();
work.src=CheminNomImage;
work.onload= function ()
{
largeur = this.width;
hauteur = this.height;
var DivGeneral = document.getElementById('DivGeneral');
document.getElementById('DivVisualisation').style.display='block';
var Titre = document.getElementById('DivTitre');
Titre.innerHTML = CheminNomImage;
var content = document.getElementById('Divimage');
content.style.padding="0";
coeff=4;
content.innerHTML = "<img src=" + CheminNomImage + " id='image' />";
document.getElementById('image').width=Math.round(largeur/coeff);
document.getElementById('image').height = Math.round(hauteur/coeff);
DivGeneral.style.display='block';
LeZoom();
};
}
function fermeture()
{
document.getElementById('DivGeneral').style.display='none';
document.getElementById('DivVisualisation').style.display='none';
}
function LeZoom()
{
if (document.getElementById('image').width < largeur)
{
coeff = coeff-0.2;
document.getElementById('image').width = Math.round(largeur/coeff);
document.getElementById('image').height = Math.round(hauteur/coeff);
zz=window.setTimeout('LeZoom();',60);
}
else {window.clearTimeout(zz);}
}IV-C. Conclusion▲
La simplicité à utiliser AJAX est mise en évidence dans le cas de cette photothèque, lorsque nous considérons les énormes codes diffusés sur le NET pour un résultat similaire.
Bonne découverte.
V. Remerciements▲
Je remercie zoom61zoom61 pour sa relecture attentive, ainsi que verminevermine. Je remercie également ceux qui m'ont aidé pour cet article.