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 your website, it becomes quite difficult for a webmaster to “keep track” of all pages of his website. As a result, a user who visits the site can search for the information he needs for a long time or not find it at all (although, in fact, it is on the site).


    To avoid such "incidents", as a rule, on sites with several tens of pages or more, the practice of using Site Map is a special page of a 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 “Site Map” is a rather troublesome task.


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


    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 makesitemap.php file:

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


    In fact, you only need to add folders and files to $ exceptionFileList, $ exceptionDirList that should not be included in the final file of the site map.


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


    Copy the makesitemap.php file to any location.


    In order not to get confused, I recommend downloading all the files and the img_sm directory to the root of the site.


    Be sure to set the permissions of the CHMOD 777 to the sitemap.html file.


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


    To generate a sitemap, run the makesitemap.php script file (for this, type the path to this file in the browser line, for example: http: //mysite/makesitemap.php ).


    The resulting sitemap file will be in the sitemap.html file.


    However, the following restrictions apply:

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


    Everything seems to be. Use it! :)






    Static list based folder tree

    This is a list based folder tree. What you have to do is to create a <UL> <LI> list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding / collapsing all nodes. You can add and delete nodes dynamically by right clicking on the 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 create the tree by building a nested <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>
    It's important that you give your tree (s) an ID. In the code above, you will see that I have given it the id
    dhtmlgoodies_tree You should also notice that the tree need to be assigned to the CSS class
    dhtmlgoodies_tree Example:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Javascript configuration

    You have to create a reference to your tree (s) by use of Javascript. This is done by creating an array of the ID (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 array code at the top of the <SCRIPT type = "text / javascript"> section.

    Icons

    The tree will use the icon defined in the Javascript variable folderImage as default. However, you may override it by declaring a class in 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 the trees on your page
  • 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 server side file, i.e. the file Ajax sends requests to
  • There's also two function you can call to expand or collapse all nodes. The "expandAll ()" function expands all nodes, while the "collapseAll ()" function collapses all nodes. Send the ID of the tree you want to collapse or expand as argument to these functions. Examples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    If you use AJAX

    If you use Ajax to get 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 the file on your server (writeNodes.php). The file on the server will then output the nodes where parent ID = 1. This will be sent back to the script, and the script will replace the "loading .." <LI> with the new content from the server.

    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, the writeNodes.php file could typically 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 state of the nodes. This means that when you revisit the page, the script will expand the nodes that were expanded when you last time left the page.

    Add / Delete nodes dynamically

    New nodes can be added and deleted dynamically from a context menu. You can disable this feature by setting the JS variable contextMenuActive to false at the top of folder-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 (it's in comments right now). You also need to add support on your server for saving new nodes. When a node is created a request is sent to the file defined in the variable ajaxRequestFile. Variables sent to this file are:

  • newNode = Title of new node
  • parentID = ID of parent node
  • All you have to do is to have an insert query which inserts this new node in your database.

    The same also applies to what's happening when you delete a node. You have to enable the ajax part of the function deleteNodeOnServer. This will send a request to the server where the node to delete is defined in the variable deleteNodeId

    Update log

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