Todolist Dengan Bulma!

0
221

Halo teman-teman semua, pada artikel ini saya ingin memberikan tutorial mengenai pembuatan todo list sederhana menggunakan framework CSS yaitu Bulma dan juga Library Javascript yaitu Jquery. Penggunaan Bulma sendiri tidak begitu sulit apabila kamu sudah pernah menggunakan framework CSS populer yaitu Bootstrap. Hanya yang membedakan terdapat pada nama-nama class nya saja.

Oke kita mulai saja, karena kita akan menggunakan source CDN / secara online, kamu disarankan untuk tetap terkoneksi dengan internet.

  1. Sebelumnya silahkan buka dokumentasi Bulma disini : https://bulma.io/documentation/overview/start/ , Cari starter template lalu copy kodenya
  2. Dan kita juga membutuhkan Jquery, tambahkan script berikut sebelum tag </body> :
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
Buka file tersebut, maka tampilan awalnya akan seperti ini :

Langsung saja kita mulai sesi kodingannya. Pertama, ubahlah tulisan Hello World dan tulisan dibawahnya sesuai keinginan. Lalu tambahkan kode berikut di dalam container, tepat dibawah class subtitle :

Penjelasan Kode :

    1. Kita memanggil class=”columns” miliknya Bulma yang mempunyai fungsi sebagai Baris pada grid systemnya. Jika kalian sudah pernah menggunakan bootstrap, class ini mirip dengan classnya “row” milik bootstrap.
    2. Lalu kita memanggil class=”column” yang artinya kolom, didalamnya terdapat tag input untuk judul task kita nanti dan juga kita membuat 1 kolom lagi untuk daftar task yang kita inputkan.

Selanjutnya kita akan membuat script Jquery untuk menangani event tambah dan hapus task. Tambahkan tag <script> sebelum tag <body> atau lebih tepatnya setelah script jquery CDN. Ketikkan kode berikut :

Penjelasan Kode :

    1. $(‘#txtNama’).on(‘keypress’, function(e){ , disini kita membuat sebuah function untuk sebuah komponen dengan id txtNama dan function nya akan berjalan pada saat event keypress.
    2. If(e.which === 13) , ini adalah percabangan pada saat key yang ditekan adalah enter. Kode Enter adalah 13, kamu bisa melihat semua kode keyboard disini http://keycode.info/
    3. Let tugas = this.value , menampung value dari komponen this yang artinya komponen txtNama ke dalam variable tugas.
    4. $(‘#todo_list’).append() , append adalah sebuah function dari Jquery untuk menambahkan sesuatu kedalam komponen tujuan. Disini kita akan menambahkan sebuah komponen message miliknya Bulma ke dalam komponen dengan id todo_list.

Selanjutnya kita akan membuat fungsi hapus pada saat button X di klik, ketikkan kode berikut dibawah kode sebelumnya :

Penjelasan Kode :

    1. Disini kita membuat function untuk komponen dengan id delete dimana delete tersebut berada di dalam komponen todo_list, dengan event onclick.
    2. $(this).parent().parent().remove() , untuk memanggil komponen pembungkusnya / diatasnya. Dimana parent nya tombol delete adalah message-header. Dan parentnya message-header adalah message. Lalu komponen message dihapus dengan function remove() miliknya jquery.

Jalankan melalui browser, lalu coba masukkan task dan tekan Enter seperti gambar dibawah :

Kamu bisa lihat langsung code nya pada codepen dibawah atau langsung klik disini

See the Pen Todo Apps Bulma by Hafiz (@hafizc8) on CodePen.dark

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.