Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Vous apprendrez dans ce tutoriel à voir la source de tous vos fichiers (quels que soient les formats).
Cela peut être utile quand l'on travaille en équipe par exemple, à plusieurs sur un même fichier.
Prenez garde ! Ce script ne doit pas être accessible au public sur votre site !
Pour commencer, nous allons afficher le contenu du dossier courant.
Quand vous cliquerez sur un dossier, son contenu s'affichera.
Côté PHP, ça donnera cela :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <?php
$handle = opendir(getcwd());
//On initialise les variables.
$fichiers = '';
$dossiers = '';
while (false !== ($file = readdir($handle))) {
if(substr(strrchr($file, '.') ,1)) { // c'est un fichier car il a une extension
$extension = substr(strrchr($file, '.') ,1);
$fichiers .= "<li><a href='voirfichier.php?f=".$file."&langage=".$extension."'>".$file."</a></li>";
} else { // c'est un dossier
$dossiers .= '<li id="'.$file.'"><img src="folder.png"> <a href="#'.$file.'" onClick="javascript:voirDossier(\''.$file.'\');">'.$file.'</a></li>';
}
}
echo $dossiers;
echo $fichiers;
closedir($handle);
?>
|
Voici une explication détaillée du code :
Code : PHP1
2 | <?php
$handle = opendir(getcwd());
|
Ici, on ouvre un répertoire grâce à la fonction
opendir(). La fonction
getcwd() retourne le répertoire courant. Vous pouvez donc changer le répertoire en mettant :
opendir("votre_repertoire");
Code : PHP1
2 | <?php
while (false !== ($file = readdir($handle))) {
|
On lit le contenu du dossier aussi longtemps qu'il reste des fichiers / dossiers à lister.
Code : PHP1
2 | <?php
$extension = substr(strrchr($file, '.') ,1);
|
On récupère l'extension du fichier (
$file).
Pour le reste, je pense que c'est facilement compréhensible
.
Voilà : maintenant, nous avons le contenu notre dossier sous les yeux.
Il nous faut à présent pouvoir afficher les sous-dossiers et ouvrir les fichiers.
Nous allons ici faire appel à AJAX.
En effet, nous allons exécuter un script PHP, mais sans recharger la page.
Je vous présente le script JS :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 | function voirDossier(dossier) {
if(dejaOuvert == 'non') { // Aucun sous-dossier n'est déjà ouvert
var id = dossier;
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} else {
alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
return;
}
xhr.open('POST','voirdossier.php',true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (document.getElementById) document.getElementById(id).innerHTML += xhr.responseText;
}
}
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var data = 'dossier='+escape(dossier);
xhr.send(data);
dejaOuvert = 'oui'; // On a ouvert un sous-dossier, la valeur de dejaOuvert est donc "oui"
} else {
dejaOuvert = 'non'; // Vu qu'on ferme le dossier, on remet la valeur de dejaOuvert à "non"
var id = dossier;
if (document.getElementById) document.getElementById(id).innerHTML = '<li id="'+id+'"><img src="./style/icons/folder.png"> <a href="#'+id+'" onClick="javascript:voirDossier("'+id+'");">'+id+'</a></li>';
dejaOuvert = 'non';
}
}
|
Pour comprendre ce code, suivez
ce tutoriel.
Il ne reste plus qu'à faire maintenant le fichier PHP qui parsera les données. Le fichier sera nommé
voirdossier.php.
Voici le code :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <?php
header('Content-type: text/html; charset=iso-8859-1');
$dossier = $_POST['dossier'];
$handle = opendir('./'.$dossier);
$fichiers = '';
$dossiers = '';
echo '<ul>';
while (false !== ($file = readdir($handle))) {
if(substr(strrchr($file, '.') ,1)) {
$extension = substr(strrchr($file, '.') ,1);
$fichiers .= "<li><a href='voirfichier.php?f=./".$dossier."/".$file."&langage=".$extension."'>".$file."</a></li>";
} else {
$dossiers .= '<li id="'.$file.'"><img src="folder.png"> <a href="#'.$file.'" onClick="javascript:voirDossier(\''.$file.'\');">'.$file.'</a></li>';
}
}
echo $dossiers;
echo $fichiers;
echo '</ul>';
closedir($handle);
?>
|
Le code est à peu près similaire au premier, sauf qu'on parse les données reçues de Javascript...
Maintenant, la partie pour l'affichage est terminée.
Il ne reste plus qu'à afficher vos fichiers
.
Nous allons voir à présent comment afficher les fichiers en colorant selon le langage.
Nous utiliserons dans cette partie "GeShi" qui est un
colorant de script.
Pour installer GeShi, suivez la
première partie de ce tutoriel.
Une fois que vous l'avez installé, nous allons pouvoir passer au script de la page
voirfichier.php.
On crée d'abord la fonction qui va afficher les couleurs de votre script en utilisant GeShi :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11 | <?php
function color($file,$langage) {
include_once('./includes/geshi/geshi.php');
$arrayExtension = array("js" => "javascript"); // ajouter tous les langages nécessaires
foreach($arrayExtension as $cle => $element) {
$langage = str_replace($cle, $element, $langage);
}
$geshi = new GeSHi($file, $langage);
return $geshi->parse_code();
}
?>
|
Maintenant que la fonction est déclarée, on va passer à la base du fichier.
Voici le script :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11 | <?php
$fichier = $_GET['f'];
$langage = $_GET['langage'];
$handle = fopen($fichier, 'a+') ;
$fichierValue = '';
while($ligne=fgets($handle)) {
$fichierValue .= $ligne;
}
echo color($fichierValue,$langage);
?>
|
Voilà, c'est fini...
Vous avez donc maintenant trois fichiers :
- un qui affichera toute l'arborescence du site,
- un qui affichera les sous-dossiers
- un autre qui affichera la source des fichiers choisis.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
.
400 Zéros connectés |
8 requêtes |
0.0273s (0.017s)
