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



  • [1] Automatic Site Map Generator
  • [2] Static list based folder tree


  • Automatic Site Map Generator



    Automatic Site Map Generator



    Automatic Site Map Generator [ Automatic Site Map Generator ] [ Automatic Site Map Generator ] [ Automatic Site Map Generator ]

    It often happens that slowly developing a website, it becomes quite difficult for a webmaster to "follow" all the pages of his website. As a result, a user who visits the site may search for the information he needs for a long time or not find it at all (although, in fact, it is present on the site).


    To avoid such "incidents", as a rule, on sites that have several dozen pages or more, use of the Sitemap is practiced - a special page of the site, on which (usually in the form of a hierarchical tree) all pages of the site are presented. But, if the site contains more than a hundred pages, then manually maintaining the “in working condition” site map is quite troublesome.


    The free script "Site Map Generator" is designed to automatically create on the site a page "Site Map", on which, in the form of a structured tree, html-pages are displayed that are present on the site.


    ATTENTION! Not to be confused with SiteMap, which is designed for search engines to index the site!


    Download and unzip the archive to your computer.


    Make your settings in the files siteite.php :

    • $ workDir - specifies the path on disk to the site files (by default, the entire site is indexed).
    • $ exceptionFileList - names of files that will not be indexed and included in the site map tree.
    • $ exceptionDirList - names of folders that will not be indexed and included in the site map tree.
    • $ outFile - the file name and the path where the result of the site map generation will be recorded.
    • $ headerFile is the file name and path to it, the contents of which will be added to the resulting file in front of the tree.
    • $ footerFile - the file name and path to it, the contents of which will be added to the resulting file after the tree.


    As a matter of fact, you just need to add folders and files to $ exceptionFileList, $ exceptionDirList , which should not be included in the final sitemap file.


    Copy the files dtree.css, dtree.js and the img_sm directory to the directory where the resulting sitemap.html will be located.


    Copy the file makesitemap.php to any place.


    Not to be confused, I recommend uploading all the files and the img_sm directory to the root of the site.


    Be sure to install the CHMOD 777 permissions on the sitemap.html file.


    Initially, the sitemap.html file is empty, but after launching the script it is filled with the contents of the files $ headerFile, $ footerFile and the directory tree itself.


    To generate a sitemap, launch the makesitemap.php script file (to do this, type the path to this file in the browser's string, for example: http: //mysite/makesitemap.php ).


    The resulting sitemap file will be in sitemap.html .


    There are the following limitations:

    • Only static html pages are indexed.
    • ATTENTION! In order for any folder to be indexed, it must contain the index.html file.


    It seems everything. Use! :)






    Static list based folder tree

    This is a list based folder tree. <UL> <LI> list. The script will then create the tree based on this list. The script uses cookies to remember the state of nodes. It also includes functions for expanding / collapsing all nodes. You can add and delete nodes.

    Static list based folder tre [ Static list based folder tre ] [ Static list based folder tre ] [ Static list based folder tre ]

    Configuration:

    Building a tree

    The menu is HTML based. You can create a list of <UL> <LI> list.
    Example:

    <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>
    your ID is. In the code above, you will see that
    dhtmlgoodies_tree assigned to the CSS class
    dhtmlgoodies_tree Example:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Javascript configuration

    You have to use your javascript. This is done by creating an array of your IDs (s) of your trees. Example:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; In the demo, I have two folder trees. The id of the first one is
    dhtmlgoodies_tree while my second tree got the id
    dhtmlgoodies_tree2 You will find the ID in the main <UL> tag. Example:
    <ul id="dhtmlgoodies_tree"> You will find this section of the <SCRIPT type = "text / javascript"> section.

    Icons

    The javascript variable folderImage as default. However, you may need to decipher it by your <LI>. example:
    <li class="dhtmlgoodies_sheet.gif"> Here, the image "dhtmlgoodies_sheet.gif" will be used instead of the default icon.

    Javascript variables and functions

    You have these variables available at the top of your <SCRIPT> section:
    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 = An array of your trees
  • imageFolder = Path to your image folder
  • folderImage = Name of folder image file
  • plusImage = Name of file - plus icon
  • minusImage = Name of file - minus icon
  • useAjaxToLoadNodesDynamically = Use AJAX to load sub nodes dynamically?
  • ajaxRequestFile = Name of the server
  • You can also call or expand all nodes. The "expandAll ()" function expands all nodes, while the "collapseAll ()" function collapses all nodes. If you want to collapse Examples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    If you use AJAX

    If you use to get the nodes dynamically from the server, you can follow this recipe:
    Insert nodes in your tree like this:
    <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>
    Notice that I have created an <LI> with a "parentId" parameter. The value of this parameter is sent to your server (writeNodes.php). This will be the case where your ID will be sent to the script.

    The file "writeNodes.php" is only outputting plain HTML. Example:

    <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>
    Look inside the writeNodes.php file for more information. I'm not using a database in this demo. If you use a database, you could look like this:

    <?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>";

    }
    ?>

    Cookies

    Cookies are used to remember the state of the nodes. The script will expand the nodes.

    Add / Delete nodes dynamically

    New nodes can be added and deleted dynamically from a context menu. You can disable the contextMenuActive from the tree-static.js.

    When a new node is added, a function called saveNewNode () is called. You will find this function inside folder tree-static.js. You need to enable the ajax part of this function. You also need to add new nodes. The ajaxRequestFile. Variables sent to this file are:

  • newNode = Title of new node
  • parentID = ID of parent node
  • An insert query which has been added to your database.

    The same also applies to you delete a node. You have to enable the ajax part of the function deleteNodeOnServer. This will send a request to the server.

    Update log

    June, 11th, 2006 - Added support for deleting nodes dynamically