Voir la source des pages de son site en ligne

Introduction du cours

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 !

Listage des dossiers

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.

Listage des sous-dossiers

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

Affichage des 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. ;)

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : PHP Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.