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 💪
- Ganti array
vzkazydiserver.jsdengan kode di atas (atau lakukan secara bertahap – GET dulu, lalu POST). - Mulai server dan kirim 2 pesan dari React.
- Hentikan server, mulai lagi, segarkan halaman – pesan harus tetap ada.
- Komit perubahan ke Git dan dorong ke GitHub (tanpa
web.db– ada di.gitignore).
Di Render/Railway, disk terkadang sementara – web.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
- API + SQLite = data permanen.
prepare+?untuk INSERT yang aman.web.dbtidak termasuk dalam Git; gunakan PostgreSQL di cloud nanti.
© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten