← Level 4 – Data pro

Pelajaran 5 dari 6 ⏱ 55 menit Premium

Buku tamu yang bertahan selamanya

Tulis ulang API sehingga pesan tetap ada di SQLite. Restart server tidak akan menghapus apa pun lagi.

Apa yang sedang kami bangun

API yang sama seperti di Level 3 – GET /api/vzkazy dan POST /api/vzkazy – namun alih-alih menggunakan array di memori, kita membaca dan menulis ke SQLite. Frontend React bisa tetap hampir sama.

Tunjukkan pada saya: server dengan database

const express = require("express");
const cors = require("cors");
const Database = require("better-sqlite3");

const aplikace = express();
const db = new Database("web.db");

db.exec(`
  CREATE TABLE IF NOT EXISTS vzkazy (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    jmeno TEXT NOT NULL,
    text TEXT NOT NULL,
    vytvoreno TEXT DEFAULT CURRENT_TIMESTAMP
  )
`);

aplikace.use(cors());
aplikace.use(express.json());

// GET – all messages from the database
aplikace.get("/api/vzkazy", (pozadavek, odpoved) => {
  const radky = db.prepare(
    "SELECT id, jmeno, text, vytvoreno FROM vzkazy ORDER BY id DESC"
  ).all();
  odpoved.json(radky);
});

// POST – a new message into the database
aplikace.post("/api/vzkazy", (pozadavek, odpoved) => {
  const { jmeno, text } = pozadavek.body;

  if (!jmeno || !text || jmeno.length > 50 || text.length > 500) {
    return odpoved.status(400).json({ chyba: "Invalid message." });
  }

  const vloz = db.prepare("INSERT INTO vzkazy (jmeno, text) VALUES (?, ?)");
  const vysledek = vloz.run(jmeno, text);

  odpoved.json({ ulozeno: true, id: vysledek.lastInsertRowid });
});

aplikace.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Tunjukkan pada saya: bagian depan

Komponen React dari Level 3 berfungsi tanpa perubahan – server mengembalikan JSON yang sama, hanya dengan kolom id dan vytvoreno tambahan. kamu dapat menampilkannya di bawah pesan dalam teks kecil berwarna abu-abu.

Giliran kamu 💪

  1. Ganti array vzkazy di server.js dengan kode di atas (atau lakukan secara bertahap – GET dulu, lalu POST).
  2. Mulai server dan kirim 2 pesan dari React.
  3. Hentikan server, mulai lagi, segarkan halaman – pesan harus tetap ada.
  4. Komit perubahan ke Git dan dorong ke GitHub (tanpa web.db – ada di .gitignore).
⚠️

Di Render/Railway, disk terkadang sementaraweb.db mungkin terhapus setelah penerapan ulang. Dalam produksi, gunakan database yang dihosting nanti (Render menawarkan PostgreSQL gratis). Untuk pembelajaran dan localhost, SQLite sangat cocok.

Periksa: Buku tamu dapat bertahan jika dimulai ulang. Validasi terjadi di server. kamu menggunakan SQL berparametri.

Apa yang bisa diambil dari pelajaran ini