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 un 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 réalité, 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 du plan Sitemap est pratiquée - une page spéciale du site sur laquelle (généralement sous forme d'arborescence) toutes les pages du site sont présentées. Toutefois, si le site contient plus de cent pages, le maintien manuel de la carte du site "en état de fonctionnement" est assez gênant.


    Le script gratuit "Site Map Generator" est conçu pour créer automatiquement sur le site une page "Plan du site" sur laquelle, sous la forme d'un arbre structuré, sont affichées des 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.


    Faites vos réglages dans les fichiers siteite.php :

    • $ workDir - spécifie le chemin sur le disque des fichiers du site (par défaut, tout le site est indexé).
    • $ exceptionFileList - noms des fichiers qui ne seront pas indexés et inclus dans l'arborescence de la carte du site.
    • $ exceptionDirList - 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ù le résultat de la génération de la carte du site sera enregistré.
    • $ headerFile est 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 d'accès, dont le contenu sera ajouté au fichier résultant après l'arborescence.


    En fait, il vous suffit d’ajouter des dossiers et des fichiers à $ exceptionFileList, $ exceptionDirList , qui ne doivent pas être inclus dans le fichier sitemap final.


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


    Copiez le fichier makesitemap.php à n’importe quel endroit.


    Ne pas confondre, je recommande de télécharger tous les fichiers et le répertoire img_sm à la racine du site.


    Assurez-vous d'installer les autorisations CHMOD 777 sur le fichier sitemap.html .


    Initialement, le fichier sitemap.html est vide, mais après le lancement 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 sitemap, lancez le fichier de script makesitemap.php (pour ce faire, tapez le chemin d'accès à ce fichier dans la chaîne du navigateur, par exemple: http: //mysite/makesitemap.php ).


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


    Il y a les limitations suivantes:

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


    Il semble que tout. Utilisez! :)






    Arborescence de dossiers basée sur une liste statique

    Ceci est une arborescence de dossiers basée sur une liste. <UL> <LI> liste. 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.

    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 pouvez créer une liste de la liste <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>
    votre identifiant est. Dans le code ci-dessus, vous verrez que
    dhtmlgoodies_tree affecté à la classe CSS
    dhtmlgoodies_tree Exemple:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Configuration javascript

    Vous devez utiliser votre javascript. Ceci est fait en créant un tableau de vos 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 pendant 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 cette section de la section <SCRIPT type = "text / javascript">.

    Les icônes

    La variable javascript folderImage par défaut. Cependant, vous devrez peut-être déchiffrer 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 de vos arbres
  • 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 serveur
  • Vous pouvez également appeler ou développer tous les nœuds. La fonction "expandAll ()" développe tous les nœuds, tandis que la fonction "collapseAll ()" réduit tous les nœuds. Si vous voulez vous effondrer Exemples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Si vous utilisez AJAX

    Si vous utilisez pour obtenir les 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 à votre serveur (writeNodes.php). Ce sera le cas où votre identifiant sera envoyé au script.

    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>
    Consultez 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, vous pourriez 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 mémoriser l'état des nœuds. Le script développera les nœuds.

    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 le contextMenuActive à partir de tree-static.js.

    Lorsqu'un nouveau nœud est ajouté, une fonction appelée saveNewNode () est appelée. Vous trouverez cette fonction dans le dossier tree-static.js. Vous devez activer la partie ajax de cette fonction. Vous devez également ajouter de nouveaux nœuds. Le ajaxRequestFile. Les variables envoyées dans ce fichier sont:

  • newNode = Titre du nouveau noeud
  • parentID = ID du noeud parent
  • Une requête d'insertion qui a été ajoutée à votre base de données.

    La même chose s'applique également à vous supprimez un nœud. Vous devez activer la partie ajax de la fonction deleteNodeOnServer. Cela enverra une demande au serveur.

    Journal de mise à jour

    11 juin 2006 - Ajout du support pour la suppression dynamique des noeuds