Belajar Web API Jadi Gampang: Contoh POST Sederhana pakai JScroot & webhook.cool
💻 Belajar Web API Sederhana: Kirim Data dari Website dengan POST (JScroot + webhook.cool)
Dalam dunia web development modern, hampir semua website yang kita gunakan tidak berdiri sendiri. Di balik tampilan yang kita lihat, ada proses komunikasi antara frontend (tampilan) dan backend (server) yang terjadi terus-menerus. Komunikasi inilah yang disebut API.
Apa itu API?
API (Application Programming Interface) adalah jembatan yang menghubungkan website dengan server. Website tidak bisa langsung mengakses database, jadi harus “berbicara” melalui API menggunakan HTTP request seperti GET dan POST.
GET vs POST
- GET → mengambil data dari server
- POST → mengirim data ke server
Pada tutorial ini, kita akan fokus ke POST dengan membuat website sederhana yang bisa mengirim input user ke server.
Tools yang Digunakan:
- JScroot → library JavaScript untuk mempermudah API HTTP request (seperti GET dan POST) langsung dari browser tanpa perlu menulis kode fetch atau XMLHttpRequest secara manual.
- Webhook.cool → endpoint untuk menerima data (tanpa backend)
Daripada terlalu banyak teori, langsung saja praktik. Copy kode berikut dan simpan sebagai index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>API Demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container d-flex flex-column justify-content-center align-items-center" style="height: 100vh;"> <div class="w-50"> <input id="textInput" type="text" class="form-control" placeholder="Ketik Pesan Disini..."> <button id="submitBtn" class="btn btn-primary mt-3 w-100"> Send POST </button>Zz <script type="module"> import * as api from "https://cdn.jsdelivr.net/gh/jscroot/lib@0.2.8/api.js"; const URL = "https://rapid-sparrow-05.webhook.cool"; // GANTI LINK DISINI document.getElementById("submitBtn").addEventListener("click", () => { const text = document.getElementById("textInput").value; api.postJSON( URL, { message: text } ); }); </script> </div> </div> </body> </html>
Langkah Selanjutnya:
- Buka https://webhook.cool/
- Buat webhook endpoint
- Copy URL yang diberikan
- Paste ke bagian
const URLdi kode
Alur Kerja Program:
- User mengetik pesan di input
- User klik tombol Send POST
- JavaScript mengambil nilai input
- Data dikirim ke API dalam bentuk JSON
- Webhook menerima dan menampilkan data
Contoh data yang dikirim:
{
"message": "halo dunia"
}
Di Balik Layar:
Fungsi postJSON() akan otomatis menambahkan header Content-Type: application/json, mengubah data menjadi JSON string, lalu mengirimkannya ke server menggunakan metode POST.
Kenapa Ini Penting?
- Memahami komunikasi frontend ↔ backend
- Dasar dari aplikasi modern (login, CRUD, dll)
- Konsep yang sama dipakai di aplikasi besar seperti Instagram, TikTok, dan e-commerce
Hasil Akhir:
Penutup:
Dengan memahami konsep GET, POST, dan API, kamu sudah selangkah lebih dekat untuk membuat aplikasi web yang lebih kompleks seperti CRUD system, login system, hingga full-stack application.
Untuk demo praktek bisa juga di coba di :
https://learn-api-dengan-mudah.github.io/
Sekian dan Semangat Belajar! 🚀
Komentar
Posting Komentar