JavaScript Academy · Pelajaran

Membuka Basis Data

Buat basis data dan penyimpanan objek.

Membuka Basis Data adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu IndexedDB

IndexedDB adalah basis data transaksional berkapasitas besar yang terpasang di peramban. Berbeda dari localStorage (berukuran kecil, hanya menyimpan teks, dan sinkron), IndexedDB menyimpan objek terstruktur, mendukung indeks, dan bekerja secara asinkron.

Membuka Basis Data

Anda membuka (atau membuat) basis data dengan indexedDB.open(name, version). Ini mengembalikan objek request yang peristiwanya melaporkan keberhasilan atau kegagalan.

const request = indexedDB.open('notes-db', 1);

Peristiwa request

request pembukaan memicu peristiwa yang perlu Anda tangani:

onsuccess — basis data siap
onerror — pembukaan gagal
onupgradeneeded — skema harus dibuat atau ditingkatkan

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

Saat Peningkatan Diperlukan

onupgradeneeded berjalan saat basis data pertama kali dibuat atau nomor versinya meningkat. Ini adalah satu-satunya tempat Anda dapat mengubah skema (membuat atau menghapus penyimpanan objek dan indeks).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Penyimpanan Objek

Penyimpanan objek mirip seperti tabel: sebuah wadah untuk rekaman. Buat penyimpanan ini dengan db.createObjectStore(name, options) di dalam onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

keyPath

keyPath memberi tahu IndexedDB properti mana dari setiap objek yang menjadi kunci utamanya. Objek yang disimpan harus memiliki properti tersebut, dan kuncinya harus unik.

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Kunci yang Bertambah Otomatis

Jika objek Anda tidak memiliki kunci alami, biarkan IndexedDB membuatnya dengan autoIncrement: true. Setiap rekaman baru mendapatkan bilangan bulat berikutnya.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Memeriksa Penyimpanan yang Sudah Ada

Karena onupgradeneeded berjalan setiap kali versi dinaikkan, lindungi pembuatan dengan db.objectStoreNames.contains untuk menghindari kesalahan saat dijalankan ulang.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Menyimpan Referensi Basis Data

Simpan objek basis data dari onsuccess agar operasi berikutnya dapat menggunakannya. Semua pembacaan dan penulisan dilakukan melalui instans basis data ini.

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Menangani Pembukaan yang Terblokir

Jika tab lain masih membuka versi lama, peningkatan dapat mengalami status blocked. Dengarkan onblocked dan minta pengguna menutup tab lain.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

Alur Pembukaan

Untuk membuka IndexedDB: panggil open dengan nama dan versi, buat skema di onupgradeneeded, lalu ambil db di onsuccess. Setelah itu, Anda menjalankan transaction untuk membaca dan menulis data.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pembukaan basis data.

Rangkuman

Anda telah mempelajari cara membuka basis data IndexedDB:

indexedDB.open(name, version) mengembalikan request.
Buat penyimpanan objek hanya di dalam onupgradeneeded.
keyPath menetapkan kunci utama; autoIncrement membuat kunci.
Simpan db dari onsuccess untuk digunakan nanti.
Tangani onerror dan onblocked.

Berikutnya, transaction dan operasi untuk membuat, membaca, memperbarui, serta menghapus data.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuka Basis Data” gratis?

Ya — teks lengkap “Membuka Basis Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuka Basis Data”?

Buat basis data dan penyimpanan objek. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuka Basis Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy