Cara Menampilkan Data Dari Database Sqlite Dengan Svelte Kit

mrfdn.com - Sveltekit lagi-lagi menjadi pilihan saya untuk belajar javascript.

Kali ini saya ingin belajar menampilkan data dari sebuah sqlite database menggunakan Svelte dan Svelte Kit.

Buat yang belum tahu, Svelte adalah mesinnya sedangkan Svelte Kit untuk membuat tampilannya.

Kenapa harus capek-capek menampilkan data dari database?

Karena saya ingin membuat sebuah aplikasi soal-soal pilihan ganda. Dimana soal dan jawabannya disimpan pada sebuah database.

Tanpa berlama-lama lagi, begini cara load data dari database dengan sveltekit.

1. Setup sebuah svelte app npm create svelte@latest my-app.
2. Setelah itu buatlah sebuah sqlite database. Bisa menggunakan file csv lalu convert menjadi sqlite.db. Lalu simpan file databasenya pada folder root sveltekit.
3. Setelah itu buat folder dan file /src/api/+server.js.
4. Pada file +server.js ini isi dengan kode berikut:

import { error, json } from '@sveltejs/kit';

import Database from "better-sqlite3";
import fs from "node:fs";

let db = new Database(fs.readFileSync("mydatabase.db"));

export function GET() {
  const items = db.prepare("select * from mytable");
  return json(items.all());
}

5. Edit file /src/routes/+page.svelte menjadi seprti ini.

<script>
// untuk bisa load data, pastikan menggunakan onMount
import { onMount } from 'svelte';
let items = [];

onMount (async () => {
        const response = await fetch('./api');
        items = await response.json();
})
</script>

<main>
<ol>
  {#each items as item}
    <li>
       {item.id}
       {item.nama}
    </li>
  {/each}
</ol>
</main>

6. Sekarang coba jalankan aplikasi dengan perintah npm run dev di terminal.

Semestinya data sudah tampil pada layar.

Semoga bermanfaat.