2.
4 Studi Kasus / Contoh Implementasi REST API
Pada contoh sederhana ini, kita akan membuat aplikasi kecil menggunakan Python Flask
sebagai server REST API, dan HTML dengan jQuery AJAX sebagai client untuk melakukan
operasi CRUD (Create, Read, Update, Delete) menggunakan metode HTTP: GET, POST, PUT,
DELETE.
Aplikasi ini adalah contoh sederhana pengelolaan daftar tugas (to-do list). Kita akan melihat
bagaimana client mengirim permintaan ke server dan server merespon dengan data dalam
format JSON.
Kode Python Flask (Backend):
from flask import Flask, jsonify, request
app = Flask(__name__)
# Data tugas awal
tasks = [
{"id": 1, "task": "Belajar REST API"},
{"id": 2, "task": "Mengerjakan tugas pemrograman"},
]
# Mendapatkan semua tugas (GET)
@[Link]('/tasks', methods=['GET'])
def get_tasks():
return jsonify(tasks)
# Menambah tugas baru (POST)
@[Link]('/tasks', methods=['POST'])
def add_task():
new_task = request.get_json()
[Link](new_task)
return jsonify(new_task), 201
# Mengubah tugas yang sudah ada (PUT)
@[Link]('/tasks/<int:task_id>', methods=['PUT'])
def update_task(task_id):
updated_task = request.get_json()
for task in tasks:
if task['id'] == task_id:
task['task'] = updated_task.get('task', task['task'])
return jsonify(task)
return jsonify({"error": "Task tidak ditemukan"}), 404
# Menghapus tugas (DELETE)
@[Link]('/tasks/<int:task_id>', methods=['DELETE'])
def delete_task(task_id):
global tasks
tasks = [task for task in tasks if task['id'] != task_id]
return jsonify({"message": "Task dihapus"})
Penjelasan:
- Kita membuat aplikasi Flask sederhana.
- Data tugas disimpan di list 'tasks'.
- Route '/tasks' dengan metode GET mengembalikan semua tugas dalam format JSON.
- Route '/tasks' dengan metode POST menambahkan tugas baru yang dikirim client.
- Route '/tasks/<task_id>' dengan metode PUT mengubah tugas berdasarkan ID.
- Route '/tasks/<task_id>' dengan metode DELETE menghapus tugas berdasarkan ID.
Kode HTML + jQuery AJAX (Frontend):
<!DOCTYPE html>
<html>
<head>
<title>REST API To-Do List</title>
<script src="[Link]
</head>
<body>
<h2>Daftar Tugas</h2>
<ul id="task-list"></ul>
<input type="text" id="new-task" placeholder="Tugas baru">
<button onclick="addTask()">Tambah</button>
<script>
// Fungsi untuk mengambil dan menampilkan semua tugas
function loadTasks() {
$.get('/tasks', function(data) {
$('#task-list').empty();
[Link](function(task) {
$('#task-list').append('<li>' + [Link] +
' <button onclick="deleteTask(' + [Link] +
')">Hapus</button></li>');
});
});
}
// Fungsi untuk menambah tugas baru
function addTask() {
const taskText = $('#new-task').val();
if (taskText) {
$.ajax({
url: '/tasks',
type: 'POST',
contentType: 'application/json',
data: [Link]({id: [Link](), task:
taskText}),
success: function() {
$('#new-task').val('');
loadTasks();
}
});
}
}
// Fungsi untuk menghapus tugas
function deleteTask(id) {
$.ajax({
url: '/tasks/' + id,
type: 'DELETE',
success: function() {
loadTasks();
}
});
}
// Muat tugas saat halaman dibuka
$(document).ready(function() {
loadTasks();
});
</script>
</body>
</html>
Penjelasan:
- HTML sederhana menampilkan daftar tugas dalam <ul>.
- jQuery AJAX digunakan untuk mengirim permintaan GET, POST, DELETE ke server.
- Fungsi loadTasks() mengambil data tugas dan menampilkannya.
- Fungsi addTask() mengirim tugas baru dengan metode POST.
- Fungsi deleteTask() menghapus tugas dengan metode DELETE.
- Saat halaman dibuka, fungsi loadTasks() langsung dipanggil untuk menampilkan data.