Kanban board berbasis Javascript, fungsional dan gratis

Kali ini saya ingin membagikan komponen Kanban Board Javascript untuk memperkaya UI dan UX situs kita.

Di internet banyak dijumpai komponen Kanban Board berbasis Javascript namun tidak semuanya gratis.

Saya menggunakan komponen papan Kanban yang menarik, sederhana dan gratis di laman Bootstrap Snippet Kanban Board.

Walaupun tidak kaya akan fitur, tapi papan Kanban ini memiliki penampilan yang menarik, script yang tidak rumit dan mudah diterapkan karena berbasiskan Bootstrap dan JQuery.

Pada artikel ini, saya ingin memperkaya komponen papan Kanban ini dengan integrasi ke database untuk merekam posisi setiap item saat berpindah-pindah kolom.

Untuk produk saya yang menggunakan Kanban Board Javascript ini, saya menggunakan bahasa pemrograman PHP dengan framework Code Igniter dan database MariaDB.

Namun saya merasa optimal bahwa cara yang sama dapat diterapkan untuk bahasa pemrograman, framework dan database yang lain selama mendukung Bootstrap dan JQuery.

Instalasi

Kanban Board Javascript yang dibagikan oleh bbilginn di laman Bootsnip relatif mudah untuk diterapkan.

Anda tinggal copy-paste script HTML, CSS dan JS pada situs Anda. Jangan lupa untuk menyertakan Boostrap dan JQuery terlebih dahulu.

Modifikasi

Tampak pada ilustrasi di atas, Kanban Board Javascript tersebut penerapannya pada aplikasi saya.

Ada 3 kolom sebagai perwakilan dari status (Lead, Contacted, Qualified) dan 5 buah item yang mewakili sebuah proyek.

Komponen ini memungkinkan pengguna untuk melakukan drag n drop setiap item ke kolom mana pun.

Di belakang layar, kita akan rekam posisi kolom baru dari item yang baru saja dipindahkan.

01 Modifikasi Javascript

Kanban Board Javascript ini benar-benar dibangun dengan kekuatan Javascript (dan JQuery) dan Bootstrap, jadi langsung saja kita menuju ke kode Javascript-nya.

Cari fungsi function draggableInit().

function draggableInit() {
    var sourceId;

    $('[draggable=true]').bind('dragstart', function (event) {
        sourceId = $(this).parent().attr('id');
        event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    });

    $('.panel-body').bind('dragover', function (event) {
        event.preventDefault();
    });

    $('.panel-body').bind('drop', function (event) {
        var children = $(this).children();
        var targetId = children.attr('id');

        if (sourceId != targetId) {
            var elementId = event.originalEvent.dataTransfer.getData("text/plain");

            $('#processing-modal').modal('toggle'); //before post

            /* START: Modifikasi oleh HW */
            /* Identifikasi item apa di pindah ke mana, utk disimpan di basis 
               data via ajax */
            var pID = $('#'+elementId).data('pid')
            var progressID = $('#'+targetId).data('progress-id')
            
            $.post(
                'project/progress',
                { pID: pID, progressID: progressID }
            )
            /* END: Modifikasi oleh HW */

            // Post data 
            setTimeout(function () {
                var element = document.getElementById(elementId);
                children.prepend(element);
                $('#processing-modal').modal('toggle'); // after post
            }, 1000);

        }

        event.preventDefault();
    });

Perhatikan dua variabel di atas, pID dan progressID.

pID saya gunakan untuk mengidentifikasi masing-masing dan progressID untuk mengindentifkasi kolom status yang mana.

Setelah kedua informasi tersebut kita dapatkan saat event drop, tinggal kita kirim informasi tersebut ke database via Javascript AJAX.

Sebelumnya, mari kita lirik dulu source HTML-nya, dimana source ini tentunya bisa dibentuk dengan PHP.

<!--sütun başlangıç-->
<div class="panel panel-primary kanban-col">
     <div class="panel-heading">DOING
          <i class="fa fa-2x fa-plus-circle pull-right"></i>
     </div>
     <div class="panel-body">
          <div id="DOING" class="kanban-centered" data-progress-id="2">

          <article class="kanban-entry grab" id="item5" draggable="true" data-pid="11">
          <div class="kanban-entry-inner">
               <div class="kanban-label">
                  <h2><a href="#">Art Ramadani</a> <span>posted a status update</span></h2>
                                                                    <p>Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial two promise. Greatly who affixed suppose but enquire compact prepare all put. Added forth chief trees but rooms think may.</p>
               </div>
          </div>
          </article>
          </div>
     </div>
</div>

Pada source di atas, temukan dan perhatikan attribute data-progress-id=”2″, id=”item5″ dan data-pid=”11″.

data-progress-id=”2″ saya gunakan untuk identifikasi kolom, attribute di samping ini adalah contoh untuk identifikasi kolom ke-2. Kolom ke-1 akan memiliki attribute data-progress-id=”1″.

Di dalam kolom ada banyak item (atau article) dan setiap item diidentifikasi dengan id=”item5″ yang mana ini adalah contoh untuk item nomor 5. Item nomor 1 tentunya menjadi id=”item1″, item nomor 19 memiliki attribute id=”item19″.

Ada juga attribute data-pid=”11″ yang saya tambahkan. Ini adalah attribute yang sangat penting dan direkam ke database sebagai pengenal dari setiap artikel (item) yang ada di papan kanban. Ini adalah contoh untuk artikel (item) yang kebetulan mendapatkan nomor ID 11.

Tiap artikel (item) akan memiliki data-pid=”…” yang berbeda-beda alias unik yang diberikan saat pertama kali artikel (item) dibuat.

Selanjutnya kita akan modifikasi sedikit Javascript-nya agar setiap item yang dipindah-pindahkan, posisinya dapat direkam ke database.

Untuk itu kita akan gunakan AJAX.

Di mana kita melakukan modifikasinya? lanjutkan ke bagian 02 Koneksi ke database.