orgChart with PHP Database MySQL

#Download Extrax Librarynya

https://www.jqueryscript.net/download/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin.zip

#databasenya

CREATE TABLE IF NOT EXISTS `organisasi` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `parent` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data untuk tabel `organisasi`
--

INSERT INTO `organisasi` (`id`, `name`, `parent`) VALUES
(1, 'My Organization', 0),
(2, 'CEO Office', 1),
(3, 'Division 1', 1),
(4, 'Division 2', 1);


#data.php

<?php
error_reporting(0);

$mysql_host	= 'localhost';
$mysql_user = 'root';
$mysql_pass	= '';
$mysql_db	= 'private2_organisasi';


$db = mysqli_connect( $mysql_host,$mysql_user,$mysql_pass,$mysql_db );
if (mysqli_connect_errno()) die('Maaf database tidak ditemukan');

$query = mysqli_query($db,"SELECT * FROM organisasi");

$data = array();

if( mysqli_num_rows($query) > 0){
	while($r = mysqli_fetch_array($query) ){

		$array_push['id'] = (int)$r['id'];
		$array_push['name'] = $r['name'];
		$array_push['parent'] = (int)$r['parent'];

		array_push($data, $array_push);
	}
}else{
	$data = null;
}

header('Content-type: application/json; charset=utf-8');
echo json_encode($data);

?>


#index.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery orgChart Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="jquery.orgchart.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
#orgChart{
    width: auto;
    height: auto;
}

#orgChartContainer{
    width: 1000px;
    height: 500px;
    overflow: auto;
    background: #eeeeee;
}

    </style>
</head>
<body>
    <div id="orgChartContainer">
      <div id="orgChart"></div>
    </div>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.orgchart.js"></script>
    <script type="text/javascript">


		$("document").ready(function(){

		$.ajax({
			url: 'data.php',
			dataType: 'json',
			success: function(data) {

				$('#orgChart').orgChart({
					data: data
				});
			}
		});

		});

    </script>
</body>
</html>