ในโพสต์นี้เรามาดูตัวอย่างกันว่าการใช้ Pocketbase นั้นง่ายขนาดไหน
ตัวอย่างด้านล่าง เป็นการเขียนโปรแกรมประเภท CRUD หรือการอ่านเขียนกับฐานข้อมูลของ Pocketbase
ทุกอย่างสามารถทำได้ด้วยไฟล์ HTML เพียวไฟล์เดียว โดยทำงานร่วมกับ JavaScript ในการเรียกใช้ REST API ของ Pocketbase ซึ่ง REST API นี้ก็มีมาให้อยู่แล้วโดยไม่ต้องเขียนเองเลย
ไฟล์นี้สามารถวางไว้ที่ไหนก็ได้ ไม่จำเป็นต้องมี server ก็สามารถทำงานร่วมกับฐานข้อมูลได้แล้ว
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple PocketBase Todo App</title>
<style>
body { font-family: Arial, sans-serif; max-width: 500px; margin: 50px auto; padding: 20px; }
h1 { text-align: center; color: #333; }
.form { display: flex; gap: 10px; margin-bottom: 20px; }
input { flex: 1; padding: 10px; font-size: 16px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
.todo { display: flex; align-items: center; padding: 10px; border: 1px solid #ddd; margin-bottom: 5px; }
.todo-text.completed { text-decoration: line-through; color: #888; }
.todo-text { flex: 1; }
.delete-btn { background: #ff4444; color: white; border: none; padding: 5px 10px; cursor: pointer; }
.status { padding: 10px; margin-bottom: 20px; text-align: center; }
.loading { color: #666; }
.error { color: red; }
.success { color: green; }
</style>
</head>
<body>
<h1>Todo App</h1>
<div id="status" class="status"></div>
<div class="form">
<input type="text" id="todoInput" placeholder="Enter new todo...">
<button onclick="addTodo()">Add</button>
</div>
<div id="todoList"></div>
<script>
const PB_URL = 'https://YOUR_POCKETBASE_URL';
async function request(endpoint, options = {}) {
const url = PB_URL + '/api/collections/todos/records' + endpoint;
const headers = {
'Content-Type': 'application/json',
...options.headers
};
const response = await fetch(url, { ...options, headers });
const text = await response.text();
if (!text) return {};
const data = JSON.parse(text);
if (!response.ok) {
console.error('API Error:', data);
}
return data;
}
async function loadTodos() {
const result = await request('');
if (result.items) {
renderTodos(result.items);
}
}
async function addTodo() {
const input = document.getElementById('todoInput');
const text = input.value.trim();
if (!text) return;
await request('', {
method: 'POST',
body: JSON.stringify({ title: text, completed: false })
});
input.value = '';
loadTodos();
}
async function toggleComplete(id, completed) {
await request('/' + id, {
method: 'PATCH',
body: JSON.stringify({ completed: !completed })
});
loadTodos();
}
async function deleteTodo(id) {
const result = await request('/' + id, { method: 'DELETE' });
console.log('Delete result:', result);
loadTodos();
}
function renderTodos(todos) {
const container = document.getElementById('todoList');
container.innerHTML = todos.map(todo => `
<div class="todo">
<input type="checkbox" ${todo.completed ? 'checked' : ''}
onchange="toggleComplete('${todo.id}', ${todo.completed})">
<span class="todo-text ${todo.completed ? 'completed' : ''}">${todo.title}</span>
<button class="delete-btn" onclick="deleteTodo('${todo.id}')">Delete</button>
</div>
`).join('');
}
function showStatus(message, type) {
document.getElementById('status').textContent = message;
document.getElementById('status').className = 'status ' + type;
}
loadTodos();
</script>
</body>
</html>ภาพประกอบ: 1
