> ## Content Index
> Fetch the complete content index at: https://lintar.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.
# Belajar SQL.js Step-by-Step: SQLite Langsung di Browser
- URL: https://lintar.my.id/belajar-sql-js-step-by-step-sqlite-langsung-di-browser/
- Published: 2025-09-10T07:13:52.000Z
- Updated: 2025-09-10T07:13:52.000Z
- Author: dev
- Tags: #Import 2026-08-27 23:08
Pernah kepikiran gak, kalau kita bisa main database **SQLite** langsung di browser?
Nah, jawabannya ada di **SQL.js**.
SQL.js itu adalah **SQLite yang ditranslate jadi WebAssembly**, jadi bisa jalan langsung di browser. Serius, kita bisa bikin semacam **SQL Client** sendiri pakai HTML + JavaScript doang.
Di artikel ini, kita bakal bikin project sederhana:
✅ Upload file database SQLite (`.db`, `.sqlite`)
✅ Jalankan query langsung di browser
✅ Lihat hasil query dalam bentuk tabel
✅ Bikin sample data (biar gampang coba-coba)
✅ Download lagi database setelah diedit
## 1\. Inisialisasi SQL.js
Pertama, kita perlu load library **SQL.js** dari CDN. Caranya gampang, cukup tambahin ini di `` file HTML:
```html
```
Lalu inisialisasi:
```html
async function initSQLJS() {
const sqlPromise = initSqlJs({
locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}`
});
const SQL = await sqlPromise;
const db = new SQL.Database(); // bikin DB kosong di memori
console.log("SQL.js siap dipakai di browser!");
}
```
atau jika pakai Node.js / Bundler
Kalau kamu pakai project dengan Node.js (misalnya pakai Webpack, Vite, atau Next.js), install dulu package-nya:
```bash
npm install sql.js
```
Lalu import di kode JavaScript:
```javascript
const initSqlJs = require('sql.js');
const SQL = await initSqlJs({
locateFile: file => `https://sql.js.org/dist/${file}`
});
const db = new SQL.Database();
```
### Kenapa ada `locateFile`?
SQL.js itu **JavaScript + WebAssembly (WASM)**.
- File `**sql-wasm.js**`
kode JS buat API (supaya kita bisa pakai `db.run()`, `db.exec()`, dll).
- File **`sql-wasm.wasm`**
mesin SQLite yang udah di-compile ke WebAssembly.
`locateFile` buat kasih tau “file `.wasm` ada di mana”.
### Contoh
**Pakai dari Website Resmi (sql.js.org)**
Kalau ngikut dokumentasi bawaan, biasanya diarahkan ke
```html
const sqlPromise = initSqlJs({
locateFile: file => `https://sql.js.org/dist/${file}`
});
```
**Atau pakai CDN**
```cdn
https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}
```
**Pakai File Lokal**
Kalau kamu download `sql-wasm.wasm` dan taruh di folder `libs/`, cukup kasih path lokal:
## 2\. Jalankan query (executeQuery)
```javascript
const results = db.exec(queryText);
displayResults(results);
```
Penjelasan praktis:
- `db.exec(sql)` mengembalikan **array hasil** untuk statement yang menghasilkan rows (SELECT).
- Untuk statement non-SELECT (`CREATE`, `INSERT`, `UPDATE`, `DELETE`) `db.exec` tetap mengeksekusi tapi tidak mengembalikan rows → results kosong. Kode kamu sudah menangani ini dengan menampilkan "Query executed, no data returned."
## 3\. Upload file .db
```Javascript
const reader = new FileReader();
reader.onload = function(e) {
const uint8Array = new Uint8Array(e.target.result);
db = new SQL.Database(uint8Array);
};
reader.readAsArrayBuffer(file);
```
### Penjelasannya
1. `**FileReader**`
dipakai untuk membaca file yang dipilih user (misalnya file `.db` SQLite).
2. **`reader.onload`**
fungsi callback yang dijalankan setelah file selesai dibaca.
3. `**new Uint8Array(e.target.result)**`
hasil pembacaan file (ArrayBuffer) diubah menjadi `Uint8Array` supaya bisa diproses dalam bentuk biner.
4. `**new SQL.Database(uint8Array)**`
membuat instance database SQLite di browser menggunakan `sql.js`, dengan data dari file `.db`.
5. **`reader.readAsArrayBuffer(file)`**
memberitahu browser:
"Baca file ini, tapi jangan diperlakukan sebagai teks atau gambar, melainkan kasih saya **isi mentah binernya**."
6. Hasilnya nanti berupa `**ArrayBuffer**` yang bisa diakses di `e.target.result` ketika `onload` dipanggil.
### Kenapa pakai `ArrayBuffer` di sini?
File `.db` (SQLite) bukan file teks, tapi **file biner**.
Kalau dibaca pakai `readAsText()`, hasilnya bakal rusak (karena dianggap string).
Dengan `readAsArrayBuffer()`, kita dapat isi asli file dalam bentuk byte-by-byte.
## 4\. Download atau Export .db
```javascript
if (!db) {
showStatus('Database belum dimuat!', 'error');
return;
}
// Export database ke bentuk Uint8Array
const data = db.export();
// Buat Blob dari data biner
const blob = new Blob([data], { type: "application/octet-stream" });
// Buat link download
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "database.db"; // nama file hasil download
a.click();
// Hapus URL object untuk menghemat memory
URL.revokeObjectURL(url);
```
### Penjelasan
1. `**db.export()**`
fungsi bawaan `sql.js` untuk mengubah database ke `Uint8Array` (isi file biner `.db`).
2. `**new Blob([...])**`
bikin file virtual dari data biner, dengan MIME type `application/octet-stream` (umum untuk file biner).
3. **`URL.createObjectURL(blob)`**
bikin link sementara untuk file virtual tadi.
4. **`a.download = "database.db"`**
kasih nama file saat diunduh.
5. **`a.click()`**
otomatis trigger download.
6. **`URL.revokeObjectURL(url)`**
bersihkan URL setelah dipakai
## contoh lengkapnya :
```html
SQL.js Client