Membuat Aplikasi Web ToDo Menggunakan IndexedDB

Kali ini saya akan membahas tutorial membuat aplikasi web todo menggunakan IndexedDB. IndexedDB adalah salah satu penyimpanan lokal yang biasanya ada pada browser modern seperti Google Chrome dan Mozilla Firefox. Pada Google Chrome ada beberapa database lokal terdapat didalamnya salah satunya adalah IndexedDB. Coba kamu tekan Ctrl + Shift + I kemudian pilih Application, nanti akan ada menu yang tampil seperti dibawah ini. Kelebihan dari menggunakan database ini adalah kita tidak perlu menginstall database tambahan seperti MySQL, hanya cukup menginstall sebuah browser kita sudah bisa melakukan penyimpanan data. Namun, setiap ada kelebihan pasti ada kekurangan yaitu salah satunya penyimpanan yang terbatas tidak seperti MySQL atau yang lainnya. Oke langsung saja simak tutorialnya.

Peralatan yang digunakan

1. Browser Google Chrome kalau belum punya bisa download disini.
2. Text Editor. Rekomendasi menggunakan Atom yang dapat didownload disini.
3. Framework CSS Materialize download disini.

Membuat Layout

Setelah semua peralatan didownload langkah pertama yang dilakukkan adalah membuat layout. Kali ini saya menggunakan framework CSS Materialize. Framework ini sangat populer dikalangan teman – teman saya, jadi kamu harus mencobanya. Ketikan kode berikut pada text editor kalian.

Jika sudah simpan dengan nama indexDB.html masukkan pada folder Materialize yang telah didownload sebelumnya, kemudian buka dengan Google Chrome maka hasilnya akan seperti ini.

Membuat fungsi Input dan Hapus

Setelah layout form dan sebagainya jadi, kita akan membuat fungsi input dan hapus menggunakan javascript. Tambahkan coding berikut, tambahkan didalam body dibawah coding layout yang tadi sudah dibuat.

Reload halaman dan silahkan kamu coba inputkan data jika berhasil hasilnya akan seperti ini. Fungsi diatas sudah menyertakan validasi, jika NIM yang diinputkan sama maka akan tampil sebuah peringatan seperti di bawah ini. Fungsi diatas hanya baru menambahkan data sementara, dan jika ketika browser direload data akan hilang.

Membuat fungsi untuk membuat database pada indexedDB

Tambahkan fungsi berikut dibawah script tadi.

Maksud script diatas adalah kita akan membuat sebuah database bernama latihan dan membuat sebuah tabel bernama mahasiswa dengan nim sebagai primary keynya. Pemanggilan IndexedDB API selalu bersifat asynchronous sehingga kita harus memakai event handler. Sebagai contoh window.indexedDB.open() akan melakukan koneksi ke database. Tapi ia tidak melakukannya saat itu juga. Ia hanya mengembalikan sebuah IDBRequest. Lalu kapan kita tahu bahwa ‘request ‘ kita sudah selesai dikerjakan? Event success untuk IDBRequest menandakan bahwa ‘request’ tersebut sudah selesai dikerjakan. Selanjutnya coba reload kembali halaman maka akan muncul peringatan dan pada database indexedDB akan muncul seperti dibawah ini. Untuk menampilkan seperti diatas tekan tombol Ctrl + Shift + I kemudian pilih Application.

Membuat fungsi input dan hapus pada database

Setelah sudah bisa membuat sebuah database pada IndexedDB kita akan membuat fungsi input dan hapus pada database.

1. Membuat fungsi Input Tambahkan fungsi berikut. Kemudian tambahkan script berikut. letakan pada bagian function buatDatabase(){, didalam request.onsuccess = function(e) { untuk lebih jelasnya lihat dibawah ini. Jika temen – temen kesulitan mencarinya tekan Ctrl + F pada text editor kemudian ketikan buatDatabase() lalu enter. Silahkan Inputkan data kembali dan reload halaman browser jika ada peringatan dan data tetap ada maka kamu berhasil.
2. Membuat fungsi hapus Tambahkan fungsi berikut. Dan tambahkan juga fungsi berikut kedalam function hapusBaris(e){ untuk lebih jelasnya lihat dibawah ini. Silahkan reload browser kemudian hapus beberapa data, kemudian refresh kembali. Jika data yang dihapus hilang setelah direload berarti kamu berhasil.

Penutup

Sekian tutorial dari saya, Semoga bermanfaat. Jika saat mencoba mengalami kegagalan terus - menerus saya sudah sediakan Full Projectnya silahkan download disini.   Referensi: thesolidsnake.wordpress.com