Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Bekerja Dengan IndexedDB - Bagian 2

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Shylchemist (you can also view the original English article)

Selamat datang di bagian kedua artikel IndexedDB saya. Saya sangat merekomendasikan membaca artikel pertama dalam seri ini, karena saya akan menganggap Anda sudah familiar dengan semua konsep yang tercakup sejauh ini. Dalam artikel ini, kita akan menyelesaikan aspek CRUD yang tidak kita selesaikan sebelumnya (secara khusus memperbarui dan menghapus konten), dan kemudian menunjukkan aplikasi dunia nyata yang akan kita gunakan untuk mendemonstrasikan konsep lain dalam artikel terakhir.


Memperbarui Records

Mari kita mulai dengan membahas cara memperbarui catatan dengan IndexedDB. Jika Anda ingat, menambahkan data cukup sederhana:

Memperbarui record hanya sederhana. Dengan asumsi bahwa Anda telah mendefinisikan properti yang disebut id sebagai kunci untuk penyimpanan objek Anda, Anda dapat menggunakan metode put daripada add.

Seperti metode add, Anda dapat menetapkan metode untuk menangani hasil operasi asynchronous.


Menghapus Records

Menghapus records dilakukan melalui delete method. (Kejutan besar di sana.) Anda cukup meneruskan pengenal unik dari rekaman yang ingin Anda hapus. Berikut ini contoh sederhana:

Dan seperti setiap aspek lain dari IndexedDB, Anda dapat menambahkan pegangan Anda untuk hasil asynchronous.

Jadi, seperti saya katakan, tidak sangat menarik, mungkin baik. Anda ingin API Anda sederhana, membosankan, dan tidak mengejutkan. Sekarang mari kita mengambil apa yang telah kita pelajari dan menyatukannya untuk menciptakan aplikasi yang nyata, if simple.


Note App

Ok, akhirnya kita memiliki semua (baik, sebagian) dari bagian-bagian yang kita butuhkan untuk membangun aplikasi nyata. Karena belum pernah dilakukan sebelumnya (ahem), kita akan membuat aplikasi pencatatan sederhana. Mari kita lihat beberapa cuplikan layar dan kemudian saya akan menunjukkan kode di belakangnya. Saat diluncurkan, aplikasi menginisialisasi IndexedDB untuk aplikasi dan membuat tabel kosong. Awalnya, yang bisa Anda lakukan dengan aplikasi ini adalah menambahkan catatan baru. (Kita bisa membuat ini lebih ramah pengguna.)

Note App

Mengeklik tombol Add Note membuka formulir:

Note App - Add Form

Setelah memasukkan beberapa data dalam formulir, Anda kemudian dapat menyimpan catatan:

Note App - Saved Note

Seperti yang Anda lihat, Anda memiliki opsi untuk mengedit dan menghapus catatan. Akhirnya, jika Anda mengklik baris itu sendiri, Anda dapat membaca catatan:

Note App - Note View

Jadi bukan ilmu roket, tapi contoh lengkap dari spesifikasi IndexedDB. Catatan yang ditulis di sini akan tetap ada. Anda dapat menutup browser Anda, menghidupkan ulang mesin Anda, mengambil beberapa tahun untuk merenungkan kehidupan dan puisi, dan ketika Anda membuka browser lagi data Anda akan tetap ada. Mari kita lihat kode sekarang.

Pertama - disclaimer. Aplikasi ini akan menjadi kandidat yang sempurna untuk salah satu dari banyak JavaScript framework. Saya yakin Anda yang menggunakan Backbone atau Sudut sudah bisa membayangkan bagaimana Anda akan mengatur ini. Namun - saya membuat keputusan yang berani di sini untuk tidak menggunakan framework. Saya khawatir baik tentang orang-orang yang mungkin menggunakan kerangka kerja yang berbeda dan mereka yang tidak menggunakan. Saya ingin fokus kami di sini untuk berada di aspek IndexedDB saja. Saya sepenuhnya berharap beberapa orang tidak setuju dengan keputusan itu, tetapi mari kita hilangkan dalam komentar.

Template pertama kami adalah file HTML. Kami hanya punya satu dan sebagian besar adalah Bootstrap boilerplate:

Seperti disebutkan di atas, sebagian ukuran file ini adalah kode template untuk Bootstrap. Bagian yang kita pedulikan adalah noteList div, noteDetail div, dan noteForm. Anda mungkin bisa menebak bahwa ini adalah DIV yang akan kami perbarui saat pengguna mengklik di dalam aplikasi.

Coding File Core Aplikasi 

Sekarang mari kita lihat app.js, file inti yang menangani logika untuk aplikasi kita.

Anda dapat mengabaikan fungsi pertama karena ini hanyalah utilitas format untuk tanggal. Mari kita langsung beralih ke jQuery document ready block

Memeriksa dukungan Browser

Tindakan pertama kami adalah memeriksa dukungan IndexedDB. Jika browser pengguna tidak kompatibel, kami menggunakan peringatan dan membatalkan fungsi. Mungkin akan lebih baik untuk memindahkan mereka ke halaman yang sepenuhnya menjelaskan mengapa mereka tidak dapat menggunakan aplikasi. (Dan untuk lebih jelasnya, kita juga bisa membuat aplikasi yang menggunakan WebSQL sebagai cadangan. Tetapi sekali lagi - fokus saya di sini adalah pada kesederhanaan.)

Setelah melakukan cache beberapa pemilih jQuery, yang akan kami gunakan di seluruh aplikasi, kami kemudian membuka database IndexedDB kami. Basis data cukup sederhana. Dalam handler onupgradeneeded Anda dapat melihat satu toko objek yang disebut notes sedang dibuat. Setelah semuanya selesai, handler yang onsuccess akan mengaktifkan panggilan untuk displayNotes.

DisplayNotes Function

Fungsi displayNotes melakukan apa yang Anda harapkan - dapatkan semua data dan menampilkannya. Kami membahas cara mendapatkan semua baris data di entri sebelumnya, tetapi saya ingin menunjukkan sesuatu yang sedikit berbeda tentang contoh ini. Perhatikan bahwa kami memiliki pengendali event baru, oncomplete, bahwa kami telah terikat dengan transaksi itu sendiri. Sebelumnya, kami telah menggunakan acara hanya dalam tindakan, di dalam transaksi, tetapi IndexedDB memungkinkan kami melakukannya di level teratas juga. Ini menjadi sangat berguna dalam kasus seperti ini. Kami memiliki string raksasa, tabel HTML kami, yang kami bangun di atas setiap iterasi data kami. Kita dapat menggunakan penangan oncomplete transaksi untuk membungkus bagian tampilan dan menuliskannya menggunakan jQuery call sederhana.

Delete, Edit, dan Add fungsi

Dua metode kami berikutnya (delete dan edit) adalah contoh lain dari prinsip yang sama ini. Karena tidak ada panggilan IndexedDB di sini yang baru, kami tidak akan repot-repot memikirkannya. Sebagian besar "meat" di sini berakhir dengan manipulasi DOM yang sederhana untuk menangani tindakan-tindakan tertentu. Pawang untuk mengklik tombol tambah adalah persis seperti itu, jadi kita akan melewatkannya juga.

Save Function

Berita gembira berikutnya yang menarik adalah metode save. Itu harus menggunakan sedikit logika untuk menentukan apakah kita menambahkan atau memperbarui, tetapi bahkan itu agak sederhana. Dan itu dia! Lengkap, if simple, aplikasi IndexedDB. Anda dapat bermain-main dengan demo ini sendiri dengan mengunduh source code.


Kesimpulannya

Itu untuk bagian dua! Artikel ketiga akan mengambil aplikasi ini dan mulai menambahkan fitur tambahan termasuk properti berbasis search dan array.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.