FINAL PROJECT PEMOGRAMAN WEB
Perkenalkan nama saya Bayza Nawaz Axata dengan NRP 5025221241, pada pertemuan ke 16 yaitu evaluasi akhir semester kita diberika final project yang harus dikerjakan
1. membuat deskripsi studi kasus pemograman web
masalah : mengelola tugas sehari hari dengan efisien, memungkinkan pengguna untuk membuat, mengedit dan menghapus tugas
konteks : aplikasi web untuk digunakan oleh individu atau tim kecil
Tujuan : menciptakan, mengelola dan menyelesaikan tugas
2. membuat rancangan umum arsitektur atau fitur yang ada dalam aplikasi
Arsitektur: Arsitektur berbasis mikroservis dengan lapisan antarmuka pengguna, logika bisnis, dan akses data.
Lapisan Utama: Antarmuka Pengguna (UI), Logika Bisnis (Business Logic), Akses Data (Database).
Interaksi: UI memanggil API Bisnis yang kemudian berinteraksi dengan Database.
3. merancang desain data base
Entitas Utama: User, Task, Category.
Skema Database:
Tabel User: UserID, Username, Password, Email.
Tabel Task: TaskID, UserID, Title, Description, Deadline, Completed.
Tabel Category: CategoryID, CategoryName.
4. membuat desain front end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management App</title>
</head>
<body>
<h1>Task List</h1>
<ul id="taskList"></ul>
<button onclick="fetchTasks()">Fetch Tasks</button>
<script>
function fetchTasks() {
fetch('/tasks')
.then(response => response.json())
.then(tasks => {
const taskListElement = document.getElementById('taskList');
taskListElement.innerHTML = '';
tasks.forEach(task => {
const listItem = document.createElement('li');
listItem.textContent = task.title;
taskListElement.appendChild(listItem);
});
});
}
</script>
</body>
</html>
5. menentukan aksi yang akan menghandle logika back end
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.json());
let tasks = [
{ id: 1, title: 'Task 1', completed: false },
{ id: 2, title: 'Task 2', completed: true }
];
// Endpoint untuk mendapatkan daftar tugas
app.get('/tasks', (req, res) => {
res.json(tasks);
});
// Endpoint untuk menambahkan tugas baru
app.post('/tasks', (req, res) => {
const newTask = req.body;
tasks.push(newTask);
res.json(newTask);
});
// Endpoint untuk mengedit tugas berdasarkan ID
app.put('/tasks/:id', (req, res) => {
const taskId = parseInt(req.params.id);
const updatedTask = req.body;
tasks = tasks.map(task => (task.id === taskId ? updatedTask : task));
res.json(updatedTask);
});
// Endpoint untuk menghapus tugas berdasarkan ID
app.delete('/tasks/:id', (req, res) => {
const taskId = parseInt(req.params.id);
tasks = tasks.filter(task => task.id !== taskId);
res.send('Task deleted successfully');
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
6. mengimplementasikan rancangan yang sudah dibuat
7. link presentasi youtube
Komentar
Posting Komentar