This page has been robot translated, sorry for typos if any. Original content here.



  • [1] Générateur automatique de plan de site
  • [2] Arborescence de dossiers basée sur une liste statique


  • Générateur de plan de site automatique



    Générateur de plan de site automatique



    Générateur de plan de site automatique [ Générateur de plan de site automatique ] [ Générateur de plan de site automatique ] [ Générateur de plan de site automatique ]

    Il arrive souvent que tout en développant lentement votre site, il devienne assez difficile pour le webmaster de "garder une trace" de toutes les pages de son site. Par conséquent, un utilisateur qui visite le site peut rechercher les informations dont il a besoin pendant longtemps ou ne pas les trouver du tout (même si, en fait, elles sont présentes sur le site).


    Pour éviter de tels "incidents", en règle générale, sur des sites de plusieurs dizaines de pages ou plus, la pratique de l'utilisation de Site Map est une page spéciale d'un site sur laquelle (généralement sous la forme d'une arborescence hiérarchique) toutes les pages du site sont présentées. Mais, si le site contient plus d'une centaine de pages, la maintenance manuelle de la «Carte du site» est une tâche plutôt gênante.


    Le script gratuit "Générateur de plan de site" est conçu pour créer automatiquement une page de plan de site sur un site, sur laquelle, sous la forme d'une arborescence structurée, les pages html présentes sur le site sont affichées.


    ATTENTION! À ne pas confondre avec SiteMap, qui est conçu pour que les moteurs de recherche indexent le site!


    Téléchargez et décompressez l'archive sur votre ordinateur.


    Définissez vos paramètres dans le fichier makesitemap.php :

    • $ workDir - indique le chemin d'accès sur le disque aux fichiers du site (par défaut, le site entier est indexé).
    • $ exceptionFileList - noms de fichiers qui ne seront pas indexés et inclus dans l'arborescence du plan du site.
    • $ exceptionDirList - les noms des dossiers qui ne seront pas indexés et inclus dans l'arborescence du plan du site.
    • $ outFile - le nom du fichier et le chemin où sera écrit le résultat de la génération du plan du site.
    • $ headerFile - le nom du fichier et son chemin, dont le contenu sera ajouté au fichier résultant devant l'arborescence.
    • $ footerFile - le nom du fichier et son chemin, dont le contenu sera ajouté au fichier résultant après l'arborescence.


    En fait, vous n'avez qu'à ajouter des dossiers et des fichiers à $ exceptionFileList, $ exceptionDirList qui ne devraient pas être inclus dans le fichier final de la carte du site.


    Copiez les fichiers dtree.css, dtree.js et le répertoire img_sm dans le répertoire où se trouvera le fichier sitemap.html résultant.


    Copiez le fichier makesitemap.php à n'importe quel emplacement.


    Afin de ne pas être confus, je recommande de télécharger tous les fichiers et le répertoire img_sm à la racine du site.


    Assurez-vous de définir les autorisations du CHMOD 777 sur le fichier sitemap.html .


    Initialement, le fichier sitemap.html est vide, mais après avoir exécuté le script, il est rempli avec le contenu des fichiers $ headerFile, $ footerFile et l'arborescence de répertoires elle-même.


    Pour générer un plan de site, exécutez le fichier de script makesitemap.php (pour cela, tapez le chemin d'accès à ce fichier dans la ligne du navigateur, par exemple: http: //mysite/makesitemap.php ).


    Le fichier sitemap résultant sera situé dans le fichier sitemap.html .


    Cependant, les restrictions suivantes s'appliquent:

    • Seules les pages html statiques sont indexées.
    • ATTENTION! Pour qu'un dossier soit indexé, il doit contenir le fichier index.html.


    Tout semble être. Utilisez-le! :)






    Arborescence de dossiers basée sur une liste statique

    Il s'agit d'une arborescence de dossiers basée sur une liste. Ce que vous devez faire est de créer une liste <UL> <LI> . Le script créera ensuite l'arborescence sur la base de cette liste. Le script utilise des cookies pour mémoriser l'état des nœuds. Il comprend également des fonctions pour développer / réduire tous les nœuds. Vous pouvez ajouter et supprimer des nœuds de manière dynamique en cliquant avec le bouton droit sur les nœuds.

    Dossier basé sur une liste statique tre [ Dossier basé sur une liste statique tre ] [ Dossier basé sur une liste statique tre ] [ Dossier basé sur une liste statique tre ]

    Configuration:

    Construire un arbre

    Le menu est basé sur HTML. Vous créez l'arborescence en créant une liste <UL> <LI> imbriquée.
    Exemple:

    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    Il est important de donner un identifiant à vos arbres. Dans le code ci-dessus, vous verrez que je lui ai donné l'identifiant
    dhtmlgoodies_tree Vous devriez également remarquer que l'arborescence doit être affectée à la classe CSS
    dhtmlgoodies_tree Exemple:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Configuration Javascript

    Vous devez créer une référence à vos arbres en utilisant Javascript. Cela se fait en créant un tableau des ID de vos arbres. Exemple:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; Dans la démo, j'ai deux arborescences de dossiers. L'identifiant du premier est
    dhtmlgoodies_tree tandis que mon deuxième arbre a obtenu l'id
    dhtmlgoodies_tree2 Vous trouverez l'ID dans la balise <UL> principale. Exemple:
    <ul id="dhtmlgoodies_tree"> Vous trouverez ce code de tableau en haut de la section <SCRIPT type = "text / javascript">.

    Icônes

    L'arbre utilisera par défaut l'icône définie dans le dossier de variables JavascriptImage. Cependant, vous pouvez le remplacer en déclarant une classe dans votre <LI>. exemple:
    <li class="dhtmlgoodies_sheet.gif"> Ici, l'image "dhtmlgoodies_sheet.gif" sera utilisée à la place de l'icône par défaut.

    Variables et fonctions Javascript

    Vous avez ces variables disponibles en haut de votre section <SCRIPT>:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; var imageFolder = 'images/'; // Path to images
    var folderImage = 'dhtmlgoodies_folder.gif'; // Default folder image
    var plusImage = 'dhtmlgoodies_plus.gif'; // [+] icon
    var minusImage = 'dhtmlgoodies_minus.gif'; // [-] icon
    var useAjaxToLoadNodesDynamically = true;
    var ajaxRequestFile = 'writeNodes.php';
  • idOfFolderTrees = Un tableau des arbres sur votre page
  • imageFolder = Chemin vers votre dossier d'images
  • folderImage = Nom du fichier image du dossier
  • plusImage = Nom du fichier - icône plus
  • minusImage = Nom du fichier - icône moins
  • useAjaxToLoadNodesDynamically = Utiliser AJAX pour charger dynamiquement les sous-nœuds?
  • ajaxRequestFile = Nom du fichier côté serveur, c'est-à-dire que le fichier Ajax envoie des requêtes à
  • Il existe également deux fonctions que vous pouvez appeler pour développer ou réduire tous les nœuds. La fonction "expandAll ()" développe tous les nœuds, tandis que la fonction "collapseAll ()" réduit tous les nœuds. Envoyez l'ID de l'arborescence que vous souhaitez réduire ou développer comme argument à ces fonctions. Exemples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Si vous utilisez AJAX

    Si vous utilisez Ajax pour obtenir des nœuds de manière dynamique à partir du serveur, vous pouvez suivre cette recette:
    Insérez des nœuds dans votre arbre comme ceci:
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    Notez que j'ai créé un <LI> avec un paramètre "parentId". La valeur de ce paramètre est envoyée au fichier sur votre serveur (writeNodes.php). Le fichier sur le serveur affichera alors les nœuds où l'ID parent = 1. Celui-ci sera renvoyé au script, et le script remplacera le "chargement .." <LI> par le nouveau contenu du serveur.

    Le fichier "writeNodes.php" ne produit que du HTML brut. Exemple:

    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    Regardez dans le fichier writeNodes.php pour plus d'informations. Je n'utilise pas de base de données dans cette démo. Si vous utilisez une base de données, le fichier writeNodes.php pourrait généralement ressembler à ceci:

    <?php
    if(isset($_GET['parentId'])){

    $res = mysql_query("select * from category where parentId='".$_GET['parentId']."'");
    while($inf = mysql_fetch_array($res)){
    echo "<li><a href=\"#\">".$inf["categoryName"]."</a>";

    $resSub = mysql_query("select ID from category where parentId='".$inf["ID"]."'");
    if($infSub = mysql_fetch_array($resSub)){
    echo "<ul><li parentId=\"".$inf["ID"]."\"><a href=\"#\">Loading...</a></li></ul>";
    }

    echo "</li>";

    }
    ?>

    Les cookies

    Les cookies sont utilisés pour mémoriser l'état des nœuds. Cela signifie que lorsque vous revisitez la page, le script étendra les nœuds qui ont été développés lorsque vous avez quitté la page pour la dernière fois.

    Ajouter / supprimer des nœuds dynamiquement

    De nouveaux nœuds peuvent être ajoutés et supprimés dynamiquement à partir d'un menu contextuel. Vous pouvez désactiver cette fonctionnalité en définissant la variable JS contextMenuActive sur false en haut de folder-tree-static.js.

    Lorsqu'un nouveau nœud est ajouté, une fonction appelée saveNewNode () est appelée. Vous trouverez cette fonction dans folder-tree-static.js. Vous devez activer la partie ajax de cette fonction (elle est en ce moment dans les commentaires). Vous devez également ajouter une prise en charge sur votre serveur pour enregistrer de nouveaux nœuds. Lorsqu'un noeud est créé, une requête est envoyée au fichier défini dans la variable ajaxRequestFile. Les variables envoyées à ce fichier sont:

  • newNode = Titre du nouveau nœud
  • parentID = ID du nœud parent
  • Tout ce que vous avez à faire est d'avoir une requête d'insertion qui insère ce nouveau nœud dans votre base de données.

    La même chose s'applique également à ce qui se passe lorsque vous supprimez un nœud. Vous devez activer la partie ajax de la fonction deleteNodeOnServer. Cela enverra une demande au serveur où le nœud à supprimer est défini dans la variable deleteNodeId

    Journal de mise à jour

    11 juin 2006 - Ajout de la prise en charge de l'ajout et de la suppression dynamiques de nœuds