11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Voici mon souci :
Je suis en train de créer un site web en PHP dont chaque page est construite de facon dynamique selon ce modele (avec des include et sous la forme d'un tableau) :
- un header
- une colonne à gauche contenant le menu
- une colonne à droite pour le contenu des pages
- un footer

Voici le code de mon menu (qui est donc appelé à chaque chargement de page) :


<?
//connexion à la BDD
include("connect.php");
 
$url = $_SERVER['REQUEST_URI'];
 
 
//si l'utilisateur est un particulier on se connecte à la table particuliers
if ($_SESSION['APPARTENANCE']=="RAQUETTES"){
	$table = "randosraq";
	echo "<a href='index2.php?appart=PIED'>Voir les randos à pied</a><br/><br/>";
} else {
	$table = "randospied";
	echo "<a href='index2.php?appart=RAQUETTES'>Voir les randos en raquettes</a><br/><br/>";
}
 
 
 
//============== on construit le menu ===========================
//on affiche les randos à themes
$sql = "SELECT URL,TITRE FROM $table WHERE TYPE='theme';";
$resultat = mysql_query($sql);
 
?>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=6; i++) {
			if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
	}
	if (d) {d.style.display='';}
}
</script>
<!-- //====== MENU DEROULANT CSS ========== // !-->
<dl id="menu">
 
 
<?
//randos demi journée
if ($table == "randospied"){
	echo "<dt onclick=\"javascript:montre();\"><a href='demiAccueil.php'><img src='images/menu/demi.png' alt='Randos demi-journée' /></a></dt>\n";
} else {
	echo "<dt onclick=\"javascript:montre();\"><a href='demiAccueilRaq.php'><img src='images/menu/demi.png' alt='Randos demi-journée' /></a></dt>\n";
}
?>
<dt onclick="javascript:montre();"><img src='images/menu/weekends.png' alt='Randos week-ends' /></dt>
 
 
<?
//on affiche les randos en etoile
$sql2 = "SELECT URL,TITRE FROM $table WHERE TYPE='etoile';";
$resultat2 = mysql_query($sql2);
echo "<dt onclick=\"javascript:montre('ssmenu3');\"><img src='images/menu/etoile.png' alt='Randos en étoile' /></dt>\n";
	echo "<dd id='ssmenu3'>\n";
		echo "<ul>\n";
while ($data2 = mysql_fetch_assoc($resultat2)){
	if(is_file($data2['URL'])){
		echo "<li><a href='".$data2['URL']."'>".$data2['TITRE']."</a></li>\n";
	} else {
		echo "<li><a href='../".$data2['URL']."'>".$data2['TITRE']."</a></li>\n";
	}
}
		echo "</ul>\n";
	echo "</dd>\n";
 
echo "<dt onclick=\"javascript:montre('ssmenu4');\"><img src='images/menu/themes.png' alt='Randos à thèmes' /></dt>\n";
echo "<dd id='ssmenu4'>\n";
echo "<ul>";
//randos à themes
while ($data = mysql_fetch_assoc($resultat)){
	if(is_file($data['URL'])){
		echo "<li><a href='".$data['URL']."'>".$data['TITRE']."</a></li>\n";
	} else {
		echo "<li><a href='../".$data['URL']."'>".$data['TITRE']."</a></li>\n";
	}
}
			echo "</ul>\n";
		echo "</dd>\n";
 
 
 
//randos itinerantes
echo "<dt onclick=\"javascript:montre();\"><img src='images/menu/itinerantes.png' alt='Randos itinerantes' /></dt>\n";
 
 
 
//on affiche les categories statiques
echo "<dt onclick=\"javascript:montre('ssmenu6');\"><img src='images/menu/hebergement.png' alt='Hebergement' /></dt>\n";
	echo "<dd id='ssmenu6'>\n";
		echo "<ul>\n";
$sql3 = "SELECT URL,TITRE FROM autres WHERE CATEGORIE='hebergement';";
$resultat3 = mysql_query($sql3);
$data3 = mysql_fetch_assoc($resultat3);
if(is_file($data3['URL'])){
	echo "<li><a href='".$data3['URL']."'>".$data3['TITRE']."</a></li>\n";
} else {
	echo "<li><a href='../".$data3['URL']."'>".$data3['TITRE']."</a></li>\n";
}
?>
 
		</ul>
	</dd>
 
<dt><img src='images/menu/tarifs.png' alt='Tarifs' /></dt>
<dt><a href='contact.php'><img src='images/menu/contact.png' alt='Contact' /></a></dt>
<dt><a href='livor.php'><img src='images/menu/livreor.png' alt='Livre d or' /></a></dt>
 
 
</dl>


Le problème est donc que la navigation sur le site est ralentie par le fait que je fait ces appels à la base de données à chaque chargement de page, pour construire ce menu.

J'aimerais donc pouvoir utiliser AJAX afin de n'interroger la BDD qu'une seule fois pour construire mon menu, et me servir du résultat ensuite sur les autres pages...mais j'ai du mal à voir le schéma que je dois mettre en place...

Ca serait bien si quelqu'un pouvait me mettre sur la piste...

Merci d'avance.
Il faut utiliser ou faire un CMS ( Content Management System ) qui te permet de modifier les pages une fois via une interface d'administration et de les enregistrer.

A part çà les sites en tableaux c'est pas corrects ... surtout sur un forum qui traite des standards web et de l'accessibilité ...
Modifié par CNeo (13 Jan 2007 - 15:04)
Je n'ai pas l'intention d'utiliser un CMS, et je suis même plutôt en train d'en construire un (si modeste soit il...).
Concernant les tableaux, je sais très bien ce n'est pas du tout recommandé mais le problème n'est pas là Smiley smile .

Mon problème réside dans la façon de mettre en place la partie AJAX...

Je continue a chercher...