Membuat Struktur Organisasi Menggunakan JQuery Studi Kasus Struktur Organisasi Sekolah

Selamat sore sahabat IT Sasak,

Pada kesempatan kali ini IT Sasak akan berbagi Tutorial Cara Membuat Struktur Organisasi Menggunakan JQuery.

Cukup menarik untuk di bahas karena menurut saya sangat membantu dan mudah di gunakan, dibandingkan dengan membuat struktur organisasi dengan tools lain atau di jadikan gambar dan kemudian di upload di halaman website tentu akan lebih simpel bila menggunakan cara ini.

Bagi yang udah mastah atau udah tau cara ini di simak aja yah,,, ^_^

Okeh, langsung saja kita bahas tutorialnya:

Langkah pertama tentu saja anda harus menyiapkan perlengkapan dulu. Berikut ini yang perlu anda sediakan:

jquery-ui-1.10.2.custom.css
jquery-1.9.1.js
jquery-ui-1.10.2.custom.min.js
primitives.min.js
primitives.latest.css
primitives.min.js

Nah, jadi jika semua perlengkapan sudah di siapkan langkah selanjutnya adalah membuat struktur organisasinya ^_^

Misalkan disini kita akan membuat struktur organisasi dengan ketentuan sebagai berikut:

Kepala Sekolah -> (Kesiswaan, Humas)

Kesiswaan -> (Pembina Osis, Pembina Ekstra)

Humas -> (UKS, Koperasi)

Untuk contoh kita buat yang sederhana saja ^_^

Nanti sobat tinggal kembangin lagi deh, gak terlalu rumit kok kalau sudah paham alur kerjanya...

Sekarang buat file index.html atau index.php terserah sobat mau yang mana

Jangan lupa includekan perlengkapan tersebut di halaman yang sobat buat sesuai dengan nama folder tempat sobat menyimpan script tersebut.

Untuk script memanggil javascript dan css seperti biasa :

<link rel="stylesheet" href="js/jquery/ui-lightness/jquery-ui-1.10.2.custom.css" />
<script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="js/primitives.min.js"></script>
<link href="css/primitives.latest.css" media="screen" rel="stylesheet" type="text/css" />

Nah sekarang script untuk membuat Struktur Organisasinya adalah sebagai berikut:

<script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            var options = new primitives.orgdiagram.Config();

            var items = [
                new primitives.orgdiagram.ItemConfig({
                    id: 0,
                    parent: null,
                    title: "Kepala Sekolah",
                    description: "Nama Kepala Sekolah",
                    image: "images/photos/a.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 1,
                    parent: 0,
                    title: "Kesiswaan",
                    description: "Nama Kesiswaan",
                    image: "images/photos/b.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 2,
                    parent: 0,
                    title: "Humas",
                    description: "Nama Humas",
                    image: "images/photos/b.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 3,
                    parent: 1,
                    title: "Pembina Osis",
                    description: "Nama Pembina Osis",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 4,
                    parent: 1,
                    title: "Pembina Ekstra",
                    description: "Pembina Ekstra",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 5,
                    parent: 2,
                    title: "UKS",
                    description: "Nama UKS",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 6,
                    parent: 2,
                    title: "Koperasi",
                    description: "Nama Koperasi",
                    image: "images/photos/c.png"
                })
            ];

            options.items = items;
            options.cursorItem = 0;
            options.hasSelectorCheckbox = primitives.common.Enabled.True;

            jQuery("#strukturorganisasi").orgDiagram(options);
        });//]]>  

</script>

Dari script di atas, yang perlu diperhatikan adalah bagian yang ini:

var items = [
new primitives.orgdiagram.ItemConfig({
id: 0,
parent: null,
title: "Kepala Sekolah",
description: "Nama Kepala Sekolah",
image: "images/photos/a.png" })
];

var items adalah script untuk mendeklarasikan variabel dengan nama items yang nanti datanya akan ditampung dalam bentuk array.
id merupakan kode unik setiap data yang nanti digunakan untuk menentukan sub bagiannya
parent merupakan perintah untuk menentukan bagian diatas subnya, untuk jabatan tertinggi set nilai parentnya dengan nilai null. Sedangkan jika merupakan sub bagian maka set parentnya dengan id bagiannya seperti contoh diatas karena Humas berada di bawah bagian Kepala Sekolah makan parentnya diset dengan id Kepala Sekolah yaitu nilai 0.
title adalah judul item
description merupakan desripsi dari item
image adalah lokasi gambar yang akan ditampilkan

options.items = items;
options.cursorItem = 0;
options.hasSelectorCheckbox = primitives.common.Enabled.True;
jQuery("#strukturorganisasi").orgDiagram(options);

options.items -> Mengambil value dari item dan di tempatkan pada variabel options
options.cursorItem -> Ini masih belum tau apa fungsinya karena saya set dengan angka 1 atau 0 hasilnya masih tetap sama... ^_^ Cari sendiri aja dah yach...
jQuery("#strukturorganisasi").orgDiagram(options) -> Perintah untuk membuat diagram dan di tempatkan di bagian div dengan id="strukturorganisasi".
Sehinggal lengkapnya akan menjadi seperti ini:

<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Struktur Organisasi Sekolah</title>

    <link rel="stylesheet" href="js/jquery/ui-lightness/jquery-ui-1.10.2.custom.css" />
    <script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui-1.10.2.custom.min.js"></script>

    <script type="text/javascript" src="js/primitives.min.js"></script>
    <link href="css/primitives.latest.css" media="screen" rel="stylesheet" type="text/css" />

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            var options = new primitives.orgdiagram.Config();

            var items = [
                new primitives.orgdiagram.ItemConfig({
                    id: 0,
                    parent: null,
                    title: "Kepala Sekolah",
                    description: "Nama Kepala Sekolah",
                    image: "images/photos/a.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 1,
                    parent: 0,
                    title: "Kesiswaan",
                    description: "Nama Kesiswaan",
                    image: "images/photos/b.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 2,
                    parent: 0,
                    title: "Humas",
                    description: "Nama Humas",
                    image: "images/photos/b.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 3,
                    parent: 1,
                    title: "Pembina Osis",
                    description: "Nama Pembina Osis",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 4,
                    parent: 1,
                    title: "Pembina Ekstra",
                    description: "Pembina Ekstra",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 5,
                    parent: 2,
                    title: "UKS",
                    description: "Nama UKS",
                    image: "images/photos/c.png"
                }),
                new primitives.orgdiagram.ItemConfig({
                    id: 6,
                    parent: 2,
                    title: "Koperasi",
                    description: "Nama Koperasi",
                    image: "images/photos/c.png"
                })
            ];

            options.items = items;
            options.cursorItem = 0;
            options.hasSelectorCheckbox = primitives.common.Enabled.True;

            jQuery("#strukturorganisasi").orgDiagram(options);
        });//]]>  

    </script>
</head>
<body>
    <div id="strukturorganisasi" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;" />
</body>
</html>