:: CodeThat. Do IT this way! :: Free javascript menu, javascript tree, dhtml menu, dhtml tree, popup menu, outlook bar menu, free scripts, free javascript, calendar

PRODUCTS

JavaScript Projects

PHP Projects

Javascript Tools

SUPPORT

Standard vs PRO

FAQ

Contacts

Site Map

CODETHAT

Downloads

Users Testimonials

Our Customers

STUDIO   GRID   TABLE   MENU   TREE   XPBAR   HINT   EDITOR   TAB   FORM   CALENDAR   SCROLLER   SHOPPINGCART   TREEPHP   PACKER

Information

Introduction   PHP sample   CSS example

Order PRO Now

CODETHATTREEPHP

Introduction

CodeThatTreePhp is a small and fast PHP script for creating DHTML trees dynamically.

To use CodeThatTreePhp you should:

Copy ct_tree_lite.php to your include directory (so it will be visible by other scripts via operator require("ct_tree_lite.php").

Create a table in your database with tree structure.

Usually the table will contain

item id

parent id

item name

item action hyperlink.

You may also store any additional information about tree items.

Here you can see an example for such a table creation:

CREATE TABLE tree_nodes (
	node_id int(11) NOT NULL default '0',
	node_name varchar(30) NOT NULL default '',
	node_parent int(11) NOT NULL default '0',
	PRIMARY KEY (node_id)
);

Fill the table with your data. For example:

INSERT INTO tree_nodes VALUES (0, 'Root', -1);
INSERT INTO tree_nodes VALUES (2, '2_2', 0);
INSERT INTO tree_nodes VALUES (3, '3_3', 2);
INSERT INTO tree_nodes VALUES (4, '4_4', 0);
INSERT INTO tree_nodes VALUES (5, '5_5', 4);
INSERT INTO tree_nodes VALUES (6, '6_6', 0);
INSERT INTO tree_nodes VALUES (7, '7_7', 6);
INSERT INTO tree_nodes VALUES (8, '8_8', 0);
INSERT INTO tree_nodes VALUES (9, '9_9', 8);
INSERT INTO tree_nodes VALUES (10, '10_10', 0);
INSERT INTO tree_nodes VALUES (11, '11_11', 10);
INSERT INTO tree_nodes VALUES (12, '12_12', 0);
INSERT INTO tree_nodes VALUES (13, '13_13', 12);
INSERT INTO tree_nodes VALUES (14, '14_14', 0);
INSERT INTO tree_nodes VALUES (15, '15_15', 14);

Create a php page that will display the tree.

The page will use CodeThatTreePhp script

<?php
require ("ct_tree_lite.php");
?>

The page should include procedure that will connect to your database and loop on your tree structure.

Sample code:

<?php
/* declare some relevant variables */
$hostname = "localhost"; /* This is the hostname on which your MySQL is running */
$dbName = "ct";          /* This is your database name */
$username = "root";      /* This is user name to connect to your database */
$password = "";          /* This is user password */
/* Make connection to database */
mysql_connect($hostname, $username, $password)
OR DIE("Unable to connect to database");
/* Select the database to be processed */
@mysql_select_db( "$dbName") or die( "Unable to select database");
Function ReadLevel($id, $level = 0)
{
	$str = "";
	/* Prepare and execute the SQL query statement */
	$query = "SELECT node_id, node_parent, node_name " .
	"FROM tree_nodes where node_parent=".$id;
	$result = mysql_query($query);
	/* Loop on results */
	while (list($node_id, $node_parent, $node_name) =
	mysql_fetch_row($result))
	{
		$subitems = ReadLevel($node_id, $level + 1);
		$str .= CreateItem(
			$node_id, // Id of the node, used for identification
			$node_name, // Name of the node
			            // (may be some html code),
			            // will be displayed
			"#", // URL
			"", // URL target
			$subitems == "" ? "clsItem" : "clsFolder", // CSS
			$subitems, // subitems string
			$level // level of the item
			       // for proper offset
		);
	}
	return ($str);
}
?>

Please note this is recursive procedure that calls CreateItem function for tree item creation.

Create the page body. The body should include Preface function call. The function writes some needful scripts to destination page.

Call your recursive ReadLevel function at the place you want the tree to appear.

Sample page body:

<html>
<head>
<link href="ctc.css" rel="stylesheet" type="text/css">
<php
echo Preface()
?>
<title>CodeThatTree lite sample</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" 
      marginheight="0" bgcolor="#dbeaf5">

<php
echo ReadLevel(0)
?>

</body>
<html>

For complete page sample see test.php file.

Add some css decoration to your tree. See ctc.css file for example.

See how this example works here.

That is all! You can enjoy the tree in created page.

Limitations

CodeThat Tree is aimed to be fast and lightweight therefore it has some limitation.

The tree works fine with NN 6-7, IE 5-6, Opera 7.
NN4 shows the tree, links are working, but nodes cannot be expanded/collapsed.

The tree items exist as single layer and don't support CodeThatTree Pro decoration features such as borders, shadows, advanced over effects. However it supports CSS and still can be decorated by custom fonts, color, etc.

The tree doesn't support creation from xml.

[ Home ]  [ Contacts ]  [ Site Map ]  [ News ]  [ Links ]  [ Downloads ]

[ Go Top ]

© CodeThat.com, 2003-2009
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.