Pada bagian pertama artikel ini, kita belajar menerapkan script Kanban Board pada aplikasi kita.

Selanjutnya di artikel ini kita modifikasi script tersebut untuk terhubung dengan database agar bisa merekam posisi tiap-tiap item.

Lima artikel (item) dan tiga kolom progress (status).

02 Koneksi ke database

Kerana ini adalah Javascript, terhubung dengan database adalah melalui mekanisme AJAX.

Kita perlu merekam posisi setiap artikel (atau item) saat berada di kolom yang mana, ke database.

Saat sebuah artikel (atau item) dipindahkan ke kolom yang lain (dengan cara drag and drop), event drop dari fungsi Javascript akan bekerja, perhatikan potongan source code di bawah.

Perhatikan bahagian yang ditandai dengan /* START: Modifikasi oleh HW */ dan /* END: Modifikasi oleh HW */. Itu adalah tambahan dari saya untuk Javascript kita.

$('.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();
    });

Kita menangkap informasi artikel (atau item) yang mana yang dipindahkan posisinya melalui:

var pID = $('#'+elementId).data('pid')

Sedangkan menangkap informasi kolom status (progress) dimana artikel (atau item) dijatuhkan, melalui:

var progressID = $('#'+targetId).data('progress-id')

Dengan mendapatkan kedua informasi tersebut melalui dua variabel, tinggal dikirimkan ke database melalui mekanisme Javascript AJAX yang memanggil controller Project, fungsi progress.

$.post(
     'project/progress',
     { pID: pID, progressID: progressID }
)

Bagaimana isi dari fungsi progress di dalam controller Project? sederhana, berikut adalah source code-nya dalam bahasa PHP dengan framework CodeIgniter.

public function progress() {
         $this->db->set('progress', $this->input->post('progressID'));
         $this->db->where('id', $this->input->post('pID'));
         $this->db->update('project');
}

Karena sederhana sekali, demi efisiensi dan kemudahan, saya agak tidak mengikuti pakem MVC yang baik, akses ke database saya langsung tuliskan di controller, seharusnya di model ?.

Demikianlah artikel kanban board berbasis Javascript ini, semoga dapat membantu.

Salam.