Tutorial sederhana untuk pemula membuat struktur organisasi dinamis menggunakan HTML, library DHTMLX Diagram dan JSON

HTMLDHTMLXDiagramJSONORGStrukturOrganisasi
Banner

Halo Klinik Coders...

Ditutorial kali ini kita akan mempelajari bagaimana membuat tutorial sederhana membuat struktur organisasi menggunakan DHTMLX Diagram

Tahap#1 - Persiapan

Untuk membuat struktur organisasi kita membutuhkan library sebagai berikut :
1. Jquery CDN :
 

https://code.jquery.com/jquery-3.5.1.min.js

2. Library DHTMLX Diagram
3. Contoh data

Tahap#2 - Buat file index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="diagram.css">
</head>

<body>
  <div id="diagram_container"></div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="diagram.js"></script>
  <script src="script.js"></script>
</body>

</html>


Tahap#3 - Buat script.js

let diagram = new dhx.Diagram("diagram_container", {
  type: "org",
  defaultShapeType: "img-card",
  scale: 0.9
});

diagram.data.load('data.json');

 

Tahap#4 - Penjelasan

  1. <div id="diagram_container"></div> Berfungsi untuk merender struktur organisasi
  2. let diagram = new dhx.Diagram("diagram_container", {
      type: "org",
      defaultShapeType: "img-card",
      scale: 0.9
    }); Konfigurasi Diagram dan disimpan di variable diagram
  3. diagram.data.load('data.json'); Ambil contoh data dari data.json

Tahap#5 - Eksekusi

Jika script diatas telah dibuat dengan benar maka akan terlihat outputnya seperti gambar dibawah ini :

Sekian tutorial dari saya, mudah-mudahan bermanfaat. Jika terjadi kendala atau error silahkan berkomentar dibawah ini. Terima kasih

Let's Coding...

Saya adalah seorang Fullstack Web Developer. Saya sangat menyukai hal-hal baru di dunia teknologi

Traktir Saya
profile
ALFIKRI
Fullstack Web Developer