(Article rédigé par un groupe d’étudiants d’IUT dans le cadre d’un projet tutoré)
Dans ce tutoriel nous allons voir comment mettre en œuvre une page avec divers onglets.
Les pages qui seront spécifiques à un seul onglet seront sauvegardées dans une base de données.
Nous verrons les différents fichiers utiles à cette application tel que :
-un fichier CSS pour la mise en forme de la page principale
-un fichier HTML pour la page principale qui contient nos onglets
-un fichier JS pour l’utilisation des technologies Ajax et le chargement du contenu des onglets
-un fichier PHP pour l’accès à la base de données
DEMO .HTML
Voici notre page html :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Onglet</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<!–on fait reference au fichier CSS pour la mise en page –>
<link href=”/ajax/onglet.css” type=”text/css” rel=”stylesheet” media=”all”/>
<!–on fait reference au fichier javascript pour les fonctions –>
<script type=”text/javascript” src=”/ajax/onglet.js”></script>
</head>
<body>
<!—on déclare le cadre qui contiendra les onglets et la page qui sera affichée–>
<div id=”onglet”>
< !–ce cadre contiendra seulement les différents onglets et on leurs associe la fonction loadonglet avec en paramètre le numéro de la page à charger –>
<ul id=”menu_onglet”>
<li><a href=”javascript:loadonglet(1)”>premiere page</a></li>
<li><a href=”javascript:loadonglet(2)”>deuxieme page</a></li>
<li><a href=”javascript:loadonglet(3)”>troisieme page</a></li>
</ul>
<!–le cadre contiendra la page qui sera affichée–>
<div id=”page”></div>
</div>
</body>
</html>
ONGLET .CSS
Le fichier CSS sert à la mise en forme de la page avec : une partie qui contiendra les différents onglets et une partie qui contiendra le contenue de la page qui sera chargé.
body {
font-size:12px;
color:#333;
padding:10px;
}
ul li {
list-style-type:none;
margin-left:10px;
}
/*** Onglets */
div#onglet {}
div#onglet ul#menu_onglet {
list-style-type: none;
margin: 2px 0px;
padding: 0px;
}
/*** Listes des onglet */
div#onglet ul#menu_onglet li {
display: inline;
}
div#onglet ul#menu_onglet li {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background:white;
padding: 4px 12px 2px 12px;
}
div#onglet ul#menu_onglet li:hover {
border-bottom: 1px solid #fff;
cursor:pointer;
}
/*** Contenu des onglet */
div#onglet div#page {
padding: 10px;
width:550;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
Onglet.js
/*
Fonction qui crée un objet XHR.
Cette fonction initialisera la valeur dans la variable globale “requete”
*/
/* On crée une variable qui contiendra l’objet XHR */
var requete = null;
function creerRequete() {
try {
/* On essaye de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
} catch (microsoft) {
/* Si cela ne marche pas, on a peut-être affaire à un navigateur de Microsoft. On tente alors de créer un objet ActiveX */
try {
requete = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(autremicrosoft) {
/* Autre méthode si la première n’a pas marché */
try {
requete = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(echec) {
/* Si aucune méthode ne fonctionne, on laisse l’objet vide*/
requete = null;
}
}
}
if(requete == null) {
alert(‘Votre navigateur ne semble pas supporter les object XMLHttpRequest.’);
}
}
function loadonglet(num) {
/* On crée notre super objet XHR global */
creerRequete();
/* On construit à l’avance notre URL en passant les parmètre en GET. Le paramètre sera le numéro de l’onglet qui est cliqué possédant l’identifiant ‘num’. */
var url = ‘onglet.php?onglet=’+num;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘page’ avec la réponse du serveur */
requete.onreadystatechange= function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
document.getElementById(‘page’).innerHTML = requete.responseText;
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
ONGLET .PHP
Notre base de données contient une table nommée « baseonglet » qui contient deux champs :
Un champ nommé « num » qui est la clé primaire qui correspond au numéro de la page
Un champ nommé valeur qui correspond au contenue de la page qui porte le numéro « num »
Pour cette exemple notre table contenait 3 lignes :
| Num | Valeur |
| 1 | Ceci est la page n°1 |
| 2 | Ceci est la page n°2 |
| 3 | Ceci est la page n°3 |
<?php
//on récupère le numéro de la page à charger qui est passé en paramètre par la méthode GET
$num=$_GET[‘onglet’];
//on se connecte à la base de donnée
$SQL = mysql_connect(‘localhost’,’root’,”) or die (“erreur de connexion”);
//on selectionne notre base qui se trouve dans notre base de données contenant nos pages .
mysql_select_db(‘baseonglet’,$SQL) or die (“erreur de connexion base”);
//on retourne la valeur (qui correspond au contenue de la page numéro ‘num’) contenue dans
//la table liste page
$result=mysql_query(“SELECT valeur FROM listepage where num=”.$num);
$val=mysql_fetch_array($result);
//on affiche le contenue
echo $val[“valeur”];
mysql_close();
?>
Nous avons pu voir dans cet exemple qu’il est très simple de mettre en œuvre un site ou tout simplement une page internet avec plusieurs onglets permettant de rafraichir que le cadre qui contient le texte de nos divers onglets.
Bien évidement il faut pour cela connaitre les langages PHP et JavaScript.