Organization Chart

<?php
/*********************************
FILENAME  : orgchart.php
CREATE BY  : cahya dsn
PURPOSE   : display organization chart report
CREATE DATE : 2012-12-28
**********************************
#table creation

USE `test`;

DROP TABLE IF EXISTS `tbl_personel`;
CREATE TABLE IF NOT EXISTS `tbl_personel` (
 `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 'primary key untuk table tbl_personel',
 `nama` varchar(30) NOT NULL COMMENT 'nama personel',
 `id_parent` bigint(20) unsigned NOT NULL DEFAULT 0,
 PRIMARY KEY(`id`)
) ENGINE=MyISAM COMMENT='tabel untuk menyimpan data personel';

INSERT INTO `tbl_personel`(`id`,`nama`,`id_parent`) VALUES
(NULL,'Food',NULL),
(NULL,'Beer',1),
(NULL,'Vegetables',1),
(NULL,'Fruit',1),
(NULL,'Bread',1),
(NULL,'Chocolate',1),
(NULL,'Pumpkin',3),
(NULL,'Aubergine',3),
(NULL,'Apple',4),
(NULL,'Berries',4),
(NULL,'Granny Smith',9),
(NULL,'Blueberry',10),
(NULL,'Redberry',10),
(NULL,'Cucumber',10);
*/
//database configuration
$dbhost='localhost';
$dbuser='root';
$dbpass='';
$dbname='test';
//database connection
$db=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
//query to get organization datas from database
$sql="SELECT * FROM tbl_personel ORDER BY id_parent,id ASC";
$result=$db->query($sql);
//variables initialization
$data=array();
$i=0;
//generate organization datas from database
// 1. Fetch data from database
while($records=$result->fetch_assoc()){
  $data[$i]=$records;
  $i++;
}
//--------------------------------
// 2. Generate Data array from database data
function GenerateDataArray($arr, $parent = 0)
{
  $pages = Array();
  foreach($arr as $page)
  {
    if($page['id_parent'] == $parent)
    {
      $page['sub'] = isset($page['sub']) ? $page['sub'] : GenerateDataArray($arr, $page['id']);
      $pages[] = $page;
    }
  }
  return $pages;
}
$dataarray = GenerateDataArray($data);
//-----------------------------------
//3. loop the multidimensional array recursively to generate the HTML code
function GenerateDataHTML($data,$top='true')
{
  $html = '';
  foreach($data as $page)
  {
    if(is_array($page['sub']) && !empty($page['sub'])) {
      $html .= "<li>\n";
      $html .= "<a href=\"".$page['id']."\">". $page['nama']."</a>";
      $html .= "<ul>".GenerateDataHTML($page['sub'],false)."</ul>\n";
      $html .= "</li>\n";
    }else{
      $html.="<li><a href=\"".$page['id']."\">".$page['nama']."</a></li>";
    }
  }
  return $html;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Organization Chart</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/4151695/html/jOrgChart/example/jquery.jOrgChart.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/4151695/html/jOrgChart/example/css/jquery.jOrgChart.css"/>
<script>
  jQuery(document).ready(function() {
     $("#org").jOrgChart({
            dragAndDrop  : true
        });
  });
</script>
</head>
<body>
<ul id="org" style="display:none">
<?php echo GenerateDataHTML($dataarray);?>
</ul>
</body>
</html>