TUTORIAL

JavaScript

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

19-07-2020 20:15:40 BY Alfikri Read 5752x 2 min read

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...


About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.



Comments

Scroll to Top