спецтеми

Війна Україна Росія

[1] Автоматичний Генератор Карти Сайту

Автоматичний Генератор Карти Сайту

Автоматичний Генератор Карти Сайту [ ] [ ] [ ]

Часто буває так, що потихеньку розвиваючи свій сайт, веб-майстру стає досить непросто "встежити" за всіма сторінками свого сайту. В результаті - користувач, що зайшов на сайт, може довго шукати потрібну йому інформацію або взагалі не знайти її (хоча, фактично, вона присутня на сайті).

Щоб уникнути подібних "казусів", як правило, на сайтах, що мають кілька десятків сторінок і більше, практикується використання Карти сайту - спеціальної сторінки сайту, на якій (зазвичай у вигляді ієрархічного дерева) представлені всі сторінки сайту. Але, якщо сайт містить більше сотні сторінок, то підтримувати вручну "в робочому стані" Карту сайту досить клопітка справа.

Безкоштовний скрипт "Генератор карти сайту" призначений для автоматичного створення на сайті сторінки "Карта сайту", на якій, у вигляді структурованого дерева, зображуються html-сторінки, присутні на сайті.

УВАГА! Не плутати з SiteMap, яка призначена для пошукових систем з метою індексації сайту!

Скачайте і розпакуйте архів на свій комп'ютер.

Внесіть свої настройки в файл makesitemap.php:

$ workDir - вказується шлях на диску до файлів сайту (за замовчуванням індексується весь сайт).
$ exceptionFileList - назви файлів, які не будуть індексуватися і включатися в дерево карти сайту.
$ exceptionDirList - назви папок, які не будуть індексуватися і включатися в дерево карти сайту.
$ outFile - ім'я файлу і шлях куди буде записаний результат генерації карти сайту.
$ headerFile - ім'я файлу і шлях до нього, вміст якого буде додано в результуючий файл перед деревом.
$ footerFile - ім'я файлу і шлях до нього, вміст якого буде додано в результуючий файл після дерева.

По суті справи, треба тільки внести в $ exceptionFileList, $ exceptionDirList папки і файли, які не слід включати в підсумковий файл карти сайту.

Передайте файли dtree.css, dtree.js і дірікторію img_sm в директорію де буде розташований результуючий файл sitemap.html.

Скопіюйте файл makesitemap.php в будь-яке місце.

Щоб не плутатися, рекомендую завантажити всі файли і директорію img_sm в корінь сайту.

Обов'язково встановіть на файл sitemap.html права доступу CHMOD 777.

Спочатку файл sitemap.html порожній, але після запуску скрипта він заповнюється вмістом файлів $ headerFile, $ footerFile і власне деревом каталогів.

Для генерації карти сайту запустіть на виконання файл скрипта makesitemap.php (для цього наберіть в рядку бразуер шлях до цього файлу, наприклад: http: //mysite/makesitemap.php).

Результуючий файл карти сайту буде перебувати в файлі sitemap.html.

При цьому існують наступні обмеження:

Індексуються тільки статичні html-сторінки.
УВАГА! Щоб проіндексувалася якась папка вона обов'язково повинна містити файл index.html.

Здається, все. Користуйтеся!

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 [

] [

]

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, ie 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

Сподобалося? Підпишись на RSS новини!
Ви також можете підтримати shram.kiev.ua, тисніть:

Не зайвим буде і твоїм друзям дізнатися цю інформацію, поділися з ними статтею!

Розгорнути / згорнути

Коментарі

Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.

Кредитка безкоштовно з лімітом в 15000 грн.