0

0

0

share

0 Reaksi

0 Komentar

Membuat Aplikasi Web ToDo Menggunakan IndexedDB

Profile
Aep Saeful Hidayat•

29 Agustus 2016

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 ada beberapa database lokal terdapat didalamnya salah satunya adalah IndexedDB. Coba kamu tekan kemudian pilih , nanti akan ada menu yang tampil seperti dibawah ini.
1_1
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 yang telah didownload sebelumnya, kemudian buka dengan maka hasilnya akan seperti ini.
2_1

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 jika berhasil hasilnya akan seperti ini.
3_1
Fungsi diatas sudah menyertakan validasi, jika NIM yang diinputkan sama maka akan tampil sebuah peringatan seperti di bawah ini.
4_1
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 dan membuat sebuah dengan nya. Pemanggilan IndexedDB API selalu bersifat asynchronous sehingga kita harus memakai event handler. Sebagai contoh 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.
5_1
Untuk menampilkan seperti diatas tekan tombol kemudian pilih .

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. 6_1 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. 7_1
  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

0

0

0

share