Quand on est développeur web, il arrive qu’on travaille sur plusieurs projets en même temps et qu’on conserve d’anciens projets sans les supprimer.

En utilisant MAMP sous MAC OS X, il faut accéder à l’url exacte du dossier pour pouvoir accéder au site web, il n’existe pas par défaut une page qui indexe les dossiers contenus dans le dossier de développement.

C’est là que j’ai eu l’idée de développer un petit portail en php qui listerait les dossiers contenus dans mon dossier de développement, cela éviterait de devoir se rappeler du nom du projet ainsi que du chemin exacte pour y accéder.

 

Des idées au code:

J’ai rajouté quelques idées à ce projet:

  • taille des dossiers (approximative en octets)
  • date dernière modification du dossier
  • lien d’accès aux projets
  • ajouter un dossier pour un projet
  • supprimer un dossier (seulement s’il est vide)

Design du projet:

J’ai utilisé le framework css Bootstrap de Twitter pour le design. Ce petit framework permet d’avoir un design rapidement, il est facile à adapter ainsi qu’à intégrer. Il intègre des modules jquery pour une gestion de popup, de formulaire, ainsi que d’autres fonctionnalités bien utiles pour le prototype que je cherchais.

Pour plus d’informations sur Bootstrap : http://twitter.github.com/bootstrap/

Structure du projet:

J’ai découpé mon projet en 3 parties:

  • le design : le dossier bootstrap contient le framework css
  • le traitement: les pages “addFolder.php” “deleteFolder.php” et “config.php” gère la plupart des fonctions 
  • l’interface : la page “index.php” gère l’interaction avec l’utilisateur.

Contenu:

La page de configuration est composé de variables globales du portail ainsi qu’une fonction pour le calcul de la taille d’un dossier. En voici un extrait:

<?php
// on définie des variables globales

define('PATH_URL', 'http://localhost:8888/iDevWeb/');
define('MAMP_URL','http://localhost:8888/MAMP/?language=French');
define('PATH_FOLDER', '/Users/monUtilisateur/Sites/iDevWeb/');

// on définie la variable pour le module de connexion
define('AUTHENTICATION', true);

// on définie le couple login / mot de passe pour le module de connexion
define('LOGIN', 'user');
define('PASSWORD', 'password');

?>

Il suffit de remplacer les chemins et le login/mot de passe pour l’adapter à son environnement.

J’ai intégré le css du framework bootstrap de twitter et je l’ai completé directement dans la page d’index car je n’ai qu’une page d’affichage.

J’ai ajouté un module simple d’authentification qui permet d’éviter des visites et des accès à notre liste de projets sans permission. La valeur de la variable AUTHENTICATION détermine si on demande ou pas une authentification.

Téléchargement:

Vous pourrez trouver l’archive ici : iDevWeb.zip

Conclusion:

Ce petit portail a permis de mettre de l’ordre dans mes projets de développement. J’ai quelques idées d’amélioration à commencer par la qualité du code mais avant de le corriger, je le mets en ligne pour avoir quelques retours et savoir si ça en a aidé d’autres.