[tuto jQuery] navigation en ajax non-intrusif (1/2)
Publié par Guiral antoine sur avril 20, 2008
Ca y est, il arrive. Le tutoriel sur la navigation en ajax non-intrusif débarque sur vos écrans! Le but est donc de proposer une navigation en ajax (on ne rechergera que le contenu de la page) qui soit non-intrusive. Cela veut dire que si le javascript n’est pas activé le site fonctionnera toujours. Un petit exemple 
Nous allons commencer par faire notre site de manière classique, celle qui sera affichée quand le javascript sera désactivé. Afin de factoriser le code je vais utiliser du php pour afficher le contenu, mais le fonctionnement serait le même en utilisant différent fichiers.
-
Le XHTML
Notre fichier html portera l’extension .php parce que nous allons utiliser le même fichier de base (index.php). Grâce au php nous allons factoriser le code. Cela complique un poil le tuto mais qui peut le plus peut le moins! Donc nous aurons un titre une liste, pour les articles, imbriquée dans une liste pour les pages.
<html>
<head>
<title>tuto navigation ajax non-intrusif</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”all”/>
</head>
<body>
<h1>Tuto navig ajax non-intrusif</h1>
<p>
Pour tester pleinement ce tuto, testez la navigation puis désactivez le javascript et testez la à nouveau 
</p>
<div id=”menu”>
<ul>
<li>
<a href=”index.php?page=1″>page 1</a>
</li>
<li>
<a href=”index.php?page=2″>page 2</a>
</li>
<li>
<a href=”index.php?page=3″>page 3</a>
<ul>
<li>
<a href=”index.php?page=3&article=1″>article 1</a>
</li>
<li>
<a href=”index.php?page=3&article=2″>article 2</a>
</li>
</ul>
</li>
</ul>
</div>
<div id=”contenu”>
<?php
//ici nous appelons notre fichier traitement.php qui affichera nos pages/articles
include(’page.php’);
?>
</div>
</body>
</html>
-
Le php
Rien de très tordu ici : je récupère le numéro de la page que je veux afficher et le numéro de l’article le cas échéant et je l’affiche. Plus d’explications dans les commentaires du code du fichier traitement.php
<?php
//j’affecte une chaine nulle si mes variables ne sont pas utilisées afin d’éviter les warnings
if(!isset($_REQUEST['page'])){
$_REQUEST['page']=”;
}
if(!isset($_REQUEST['article'])){
$_REQUEST['article']=”;
}
//Ici j’effectue mes traitements suivant les cas, d’où la structure switch/case
switch($_REQUEST['page']){
//cas ou je veux afficher la page 1
case 1:
//ici on pourrais très bien faire un include d’un autre fichier
echo’<p>Ma page 1</p>’;
break;
//idem
case 2:
echo’<p>Ma page 2</p>’;
break;
//idem avec un deuxième switch imbriqué pour les articles
case 3:
echo’<p>Ma page 3</p>’;
switch($_REQUEST['article']){
case 1:
echo’<p>Mon article 1</p>’;
break;
case 2:
echo’<p>Mon article 2</p>’;
break;
}
break;
//dans le cas ou la variable $_REQUEST['page'] ne correspondent à aucun des cas
default:
echo’<p>Ma page par defaut</p>’;
break;
}
Normalement ça devrait marcher! Mais ce n’est pas très beau…
-
Le CSS
Un rapide fichier de styles pour avoir quelque chose de moins brut.
h1{
text-align:center;
}
#menu{
border:1px solid black;
width:180px;
float:left
}
#menu ul{
list-style:none;
}
#contenu{
width:800px;
margin-left:200px
}
Hop là! Un titre centré, un coup d’anti-puces (facile celle là…) et un menu qui flotte à gauche du contenu.
La prochaine fois nous grefferons nos scripts jQuery afin de transformer la navigation actuelle en une belle navigation en ajax.
