Jika Anda mencari tutorial tentang cara membuat treeview dinamis untuk menu atau kategori menggunakan php mysql, maka Anda adalah tempat yang tepat. Dalam contoh ini kita akan membangun tampilan hierarki dinamis langkah demi langkah dari basis data di php.
Jika Anda ingin membuat treeview di aplikasi situs web Anda, maka Anda harus menggunakan plugin Bootstrap Treeview untuk menu tampilan dalam struktur hierarki treeview dengan php. dalam contoh ini kita akan membuat tabel 'item' dengan 'id', 'name' dan 'parent_id'. Kemudian kita cukup membuat file index.php dengan menulis kode ajax jquery untuk treeview dinamis. Kemudian setelah itu kita akan membuat file ajax dan menulis logika database di sana.
Jadi, cukup ikuti beberapa langkah dan Anda akan dapat melihat layar di bawah ini.
Pratinjau:
Langkah 1: Buat tabel item
Pada langkah pertama, kami membuat tabel baru "item" dalam database. Anda bisa menggunakan SQL Query berikut untuk membuat tabel "item". Jadi mari kita buat menggunakan query sql di bawah ini:
tabel item:
CREATE TABLE IF NOT EXISTS `item` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`parent_id` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2Langkah 2: Buat File index.php
Pada langkah ini, kita akan menggunakan plugin Bootstrap Treeview untuk menu tampilan dalam struktur hierarki pohon dengan php dan menulis kode ajax:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Create Dynamic Treeview Example with PHP MySQL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Create Dynamic Treeview Example with PHP MySQL - Medikre.com</h1>
</div>
<div class="panel-body">
<div class="col-md-8" id="treeview_json">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var treeData;
$.ajax({
type: "GET",
url: "/ajaxpro.php",
dataType: "json",
success: function(response)
{
initTree(response)
}
});
function initTree(treeData) {
$('#treeview_json').treeview({data: treeData});
}
});
</script>
</body>
</html>Langkah 3: Buat File ajaxpro.php dan db_config.php
Pada langkah ini, kita akan membuat ajaxpro.php dan menulis kode untuk mengambil data dari database mysql. Jadi, kami akan menulis kode untuk logika basis data. Kami juga akan membuat file konfigurasi database:
db_config.php
<?php
$hostName = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$mysqli = new mysqli($hostName, $username, $password, $dbname);
?> ajaxpro.php
<?php
require 'db_config.php';
$parentKey = '0';
$sql = "SELECT * FROM item";
$result = $mysqli->query($sql);
if(mysqli_num_rows($result) > 0)
{
$data = membersTree($parentKey);
}else{
$data=["id"=>"0","name"=>"No Members present in list","text"=>"No Members is present in list","nodes"=>[]];
}
function membersTree($parentKey)
{
require 'db_config.php';
$sql = 'SELECT id, name from item WHERE parent_id="'.$parentKey.'"';
$result = $mysqli->query($sql);
while($value = mysqli_fetch_assoc($result)){
$id = $value['id'];
$row1[$id]['id'] = $value['id'];
$row1[$id]['name'] = $value['name'];
$row1[$id]['text'] = $value['name'];
$row1[$id]['nodes'] = array_values(membersTree($value['id']));
}
return $row1;
}
echo json_encode(array_values($data));
?>Sekarang Anda siap menjalankan contoh ini.
Saya harap ini dapat membantu Anda ...
tree view mysql jquery ajax php
andriajah