Tutoriel : Voir la source des pages de son site en ligne

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 ceci :

<?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."&amp;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 :

<?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");

<?php
while (false !== ($file = readdir($handle))) {

On lit le contenu du dossier aussi longtemps qu'il reste des fichiers/dossiers à lister.

<?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 de 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 :

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 maintenant plus qu'à faire le fichier PHP qui parsera les données. Le fichier sera nommé voirdossier.php.

Voici le code :

<?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."&amp;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); 
 
?>

Il 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'aurez installé, nous pourrons 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 :

<?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 :

<?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.

Pour des questions, des demandes d'améliorations : me contacter par MP, merci.

Bon surf sur le Site du Zér0. ;)