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 automatique de carte de site



    Générateur automatique de carte de site



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

    Il arrive souvent qu'en développant lentement votre site Web, il devienne assez difficile pour un webmaster de "suivre" toutes les pages de son site Web. En conséquence, 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, l'utilisation de Plan du site est une page de site spéciale sur laquelle (généralement sous la forme d'un arbre hiérarchique), toutes les pages du site sont présentées. Toutefois, si le site contient plus de cent pages, la maintenance manuelle de la “Carte du site” est une tâche plutôt fastidieuse.


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


    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 du disque vers les fichiers du site (par défaut, tout le site est indexé).
    • $ exceptionFileList - noms de fichiers qui ne seront pas indexés et inclus dans l’arborescence de la carte du site.
    • $ exceptionDirList - les noms des dossiers qui ne seront pas indexés et inclus dans l’arborescence de la carte du site.
    • $ outFile - le nom du fichier et le chemin où sera écrit le résultat de la génération de la carte du site.
    • $ headerFile - le nom du fichier et son chemin, dont le contenu sera ajouté au fichier résultant devant l’arbre.
    • $ footerFile - le nom du fichier et son chemin d'accès, dont le contenu sera ajouté au fichier résultant après l'arborescence.


    En fait, vous devez uniquement ajouter des dossiers et des fichiers à $ exceptionFileList, $ exceptionDirList, qui ne doivent 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ù le fichier sitemap.html obtenu sera situé.


    Copiez le fichier makesitemap.php vers n’importe quel emplacement.


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


    Veillez à définir les autorisations du CHMOD 777 sur le fichier sitemap.html .


    Initialement, le fichier sitemap.html est vide, mais après l'exécution du script, il est rempli du contenu des fichiers $ headerFile, $ footerFile et de 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 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

    Ceci est 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 en fonction 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 de la souris sur les nœuds.

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

    Configuration:

    Construire un arbre

    Le menu est basé sur HTML. Vous créez l'arborescence en créant une liste imbriquée <UL> <LI> .
    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 que vous identifiiez votre / vos arbre (s). 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 assignée à la classe CSS
    dhtmlgoodies_tree Exemple:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Configuration javascript

    Vous devez créer une référence à votre (vos) arbre (s) à l'aide de Javascript. Ceci est fait en créant un tableau des identifiants de vos arbres. Exemple:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; Dans la démo, j'ai deux arbres de dossiers. L'identifiant du premier est
    dhtmlgoodies_tree alors que mon deuxième arbre a l'identifiant
    dhtmlgoodies_tree2 Vous trouverez l'ID dans la balise principale <UL>. 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 l’icône définie dans la variable Javascript folderImage par défaut. 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 d'accès à 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 = Utilisez AJAX pour charger les sous-nœuds de manière dynamique?
  • ajaxRequestFile = Nom du fichier côté serveur, c’est-à-dire le fichier que Ajax envoie aux demandes
  • 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 en tant qu'argument pour 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 noeuds 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 ensuite les noeuds pour lesquels parent ID = 1. Il sera renvoyé au script et le script remplacera le "chargement .." <LI> par le nouveau contenu du serveur.

    Le fichier "writeNodes.php" n'émet que du HTML pur. 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>
    Pour plus d'informations, reportez-vous au fichier writeNodes.php. 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>";

    }
    ?>

    Biscuits

    Les cookies sont utilisés pour se souvenir de l'état des nœuds. Cela signifie que lorsque vous revisiterez la page, le script développera les nœuds qui ont été développés lors de votre dernière sortie de la page.

    Ajouter / supprimer des nœuds de manière dynamique

    De nouveaux noeuds 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 actuellement dans les commentaires). Vous devez également ajouter un support sur votre serveur pour la sauvegarde de nouveaux nœuds. Lorsqu'un noeud est créé, une demande est envoyée au fichier défini dans la variable ajaxRequestFile. Les variables envoyées à ce fichier sont:

  • newNode = Titre du nouveau noeud
  • parentID = ID du noeud 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 du support pour l'ajout et la suppression dynamique de nœuds