· 6 years ago · May 17, 2019, 05:24 AM
1#Download Extrax Librarynya
2
3https://www.jqueryscript.net/download/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin.zip
4
5#databasenya
6
7CREATE TABLE IF NOT EXISTS `organisasi` (
8 `id` int(11) NOT NULL AUTO_INCREMENT,
9 `name` varchar(30) NOT NULL,
10 `parent` int(11) NOT NULL,
11 PRIMARY KEY (`id`)
12) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
13
14--
15-- Dumping data untuk tabel `organisasi`
16--
17
18INSERT INTO `organisasi` (`id`, `name`, `parent`) VALUES
19(1, 'My Organization', 0),
20(2, 'CEO Office', 1),
21(3, 'Division 1', 1),
22(4, 'Division 2', 1);
23
24
25
26#data.php
27
28<?php
29error_reporting(0);
30
31$mysql_host = 'localhost';
32$mysql_user = 'root';
33$mysql_pass = '';
34$mysql_db = 'private2_organisasi';
35
36
37$db = mysqli_connect( $mysql_host,$mysql_user,$mysql_pass,$mysql_db );
38if (mysqli_connect_errno()) die('Maaf database tidak ditemukan');
39
40$query = mysqli_query($db,"SELECT * FROM organisasi");
41
42$data = array();
43
44if( mysqli_num_rows($query) > 0){
45 while($r = mysqli_fetch_array($query) ){
46
47 $array_push['id'] = (int)$r['id'];
48 $array_push['name'] = $r['name'];
49 $array_push['parent'] = (int)$r['parent'];
50
51 array_push($data, $array_push);
52 }
53}else{
54 $data = null;
55}
56
57header('Content-type: application/json; charset=utf-8');
58echo json_encode($data);
59
60?>
61
62
63
64#index.html
65
66<!DOCTYPE html>
67<html>
68<head>
69<title>jQuery orgChart Plugin Demo</title>
70<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
71<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
72<link href="jquery.orgchart.css" media="all" rel="stylesheet" type="text/css" />
73<style type="text/css">
74#orgChart{
75 width: auto;
76 height: auto;
77}
78
79#orgChartContainer{
80 width: 1000px;
81 height: 500px;
82 overflow: auto;
83 background: #eeeeee;
84}
85
86 </style>
87</head>
88<body>
89 <div id="orgChartContainer">
90 <div id="orgChart"></div>
91 </div>
92 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
93 <script type="text/javascript" src="jquery.orgchart.js"></script>
94 <script type="text/javascript">
95
96
97 $("document").ready(function(){
98
99 $.ajax({
100 url: 'data.php',
101 dataType: 'json',
102 success: function(data) {
103
104 $('#orgChart').orgChart({
105 data: data
106 });
107 }
108 });
109
110 });
111
112 </script>
113</body>
114</html>