Home » Tutorial JQuery » Membuat Struktur Organisasi Menggunakan JQuery Studi Kasus Struktur Organisasi Sekolah

Membuat Struktur Organisasi Menggunakan JQuery Studi Kasus Struktur Organisasi Sekolah

Posted by Viperkill Friday, April 4, 2014 1 comment
Membuat Struktur Organisasi Menggunakan JQuery Studi Kasus Struktur Organisasi Sekolah
Pada kesempatan kali ini kita 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:
    1. jquery-ui-1.10.2.custom.css
    2. jquery-1.9.1.js
    3. jquery-ui-1.10.2.custom.min.js
    4. primitives.min.js
    5. primitives.latest.css
    6. 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>

    Hasilnya adalah sebagai berikut:


    Untuk dicoba jika masih bingung silahkan di download saja Source Code tutorial ini pada link yang saya sediakan di bawah postingan.
    DOWNLOAD SOURCE 
    Categories: icon
    Pin It

    Related Post:



    1 comments:

    Copyright © 2012 Dunia Maya. All rights reserved.

    Super SEO created by Blogger Tuts | Published by GalleryBloggerTemplates.com