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 website (frontend) dan server (backend) yang terjadi terus-menerus. Komunikasi inilah yang disebut API.

API (Application Programming Interface) bisa dipahami sebagai jembatan yang menghubungkan website dengan server. Ketika sebuah website ingin mengambil data atau mengirim data, dia tidak bisa melakukannya langsung ke database. Website harus “berbicara” melalui API. Cara berbicara ini biasanya menggunakan HTTP request, seperti GET untuk mengambil data dan POST untuk mengirim data.

Kalau kita sederhanakan, GET itu seperti kita membaca informasi dari server, sedangkan POST adalah ketika kita mengirimkan sesuatu ke server, misalnya form, pesan, atau input dari user. Di tutorial ini kita akan fokus pada POST karena kita akan membuat website sederhana yang bisa mengirim data dari input user ke server.


Untuk praktiknya, kita menggunakan dua tools yang sangat membantu untuk belajar API, yaitu JScroot dan webhook.cool. JScroot adalah library JavaScript ringan yang dibuat untuk menyederhanakan proses request API. Biasanya kalau kita menggunakan fetch secara langsung, kita perlu menulis banyak konfigurasi seperti headers, body, dan parsing response. 

Daripada pusing di teori mari kita coba praktek, copy text dibawah dan namakan 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>
       
        <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>

Sudah copy text diatas dan paste ke index.html? kalau sudah buka website https://webhook.cool/

Dari webhook.cool ini kita bisa mendapatkan link webhook kita yang bisa dipakai, copy link tersebut dan copy paste ke index.html seperti foto dibawah ini:

Sudah ganti link diatas dengan webhook punya kamu? Kalau sudah kamu sudah siap untuk penjelasan...

Sebelum mulai, coba kita bayangkan alurnya. User membuka website, lalu mengetik sesuatu di dalam input. Setelah itu user menekan tombol submit. Saat tombol ditekan, JavaScript akan mengambil isi input tersebut, lalu mengirimkannya ke API menggunakan metode POST. Data tersebut dikirim dalam bentuk JSON, misalnya { message: "halo dunia" }. Setelah dikirim, webhook.cool akan menerima data tersebut dan menampilkannya.


Di sisi kode, kita hanya perlu membuat input dan tombol sederhana di HTML. Input ini berfungsi untuk menangkap teks dari user. Ketika tombol diklik, kita ambil nilai dari input menggunakan JavaScript. Setelah itu kita kirim menggunakan fungsi postJSON dari JScroot. Di dalam fungsi ini, kita hanya perlu memberikan URL endpoint dan data JSON yang ingin dikirim. 

Berikut adalah hasil POST ketika klik tombol "Send POST":


Di balik layar, coding ini menggunakan fungsi postJSON(..) yang berasal dari API JScroot `https://cdn.jsdelivr.net/gh/jscroot/lib@0.2.8/api.js`. Fungsi ini menambahkan header seperti Content-Type: application/json, kemudian mengubah data JavaScript menjadi JSON string, lalu mengirimkannya ke server menggunakan metode POST. Setelah server merespon, hasilnya akan dikembalikan lagi dalam bentuk JSON dan bisa kita gunakan jika diperlukan.


Hal menarik dari proses ini adalah kita bisa melihat bagaimana konsep frontend dan backend bekerja bersama. Frontend bertugas mengambil input dari user, lalu backend (dalam hal ini webhook.cool) menerima dan memproses data tersebut. Walaupun sederhana, ini adalah konsep dasar yang sama seperti aplikasi besar seperti Instagram, TikTok, atau e-commerce.

Jika semua berjalan dengan benar, setiap kali kita mengetik sesuatu di input lalu menekan tombol, data tersebut akan langsung terkirim ke webhook dan muncul di dashboard. Dari sini kita sudah berhasil membuat implementasi API POST pertama kita tanpa perlu backend yang kompleks.

Dari tutorial sederhana ini, kita sebenarnya sedang belajar fondasi penting dalam web development. API bukanlah sesuatu yang rumit, tapi hanya cara website berkomunikasi dengan server. Dengan memahami POST, GET, dan cara kerja request, kita sudah selangkah lebih dekat untuk membuat aplikasi web yang lebih kompleks seperti CRUD system, login system, hingga full-stack application.

Ini baru pelajaran dasar, semoga dengan ini bisa menjadi pengetahuan awal yang berguna untuk kamu yang ingin melanjutkan ke tahap berikutnya dalam memahami cara kerja API di web development.


Untuk demo praktek bisa juga di coba di https://learn-api-dengan-mudah.github.io/

Sekian dan Semangat Belajar!


Komentar

Posting Komentar

Postingan populer dari blog ini

TUTORIAL MENGGUNAKAN CROOTJS untuk LOGIN PAGE

Gambar
Di zaman yang serba canggih ini teknologi semakin berkembang, hampir semua orang fokus terhadap perkembangan teknologi hingga hari ini, hampir seluruh manusia pasti pernah merasakan kebermanfaatan perkembangan teknologi yang serba canggih pada zaman ini. Semua orang berlomba-lomba untuk menciptakan platform-platform digital demi bisa mempermudah pekerjaan manusia, salah satu platform nya yaitu C rootJS . CrootJS adalah library JavaScript ringan yang dirancang untuk memudahkan pembuatan website interaktif tanpa kerumitan framework besar seperti React atau Vue. Dengan konsep yang ringan dan berbasis Vanilla JavaScript, CrootJS memungkinkan developer mengelola event, manipulasi DOM, serta logika aplikasi. Kali ini kita akan bahas contoh penggunaan CrootJS untuk Login page. Ikuti langkah-langkah ini ya: 1. Pertama kamu bisa akses CrootJS di browser kesayangan kalian, cari pada menu search lalu ketik "croot js" atau kamu bisa klik link croot.js.org 2. Setelah itu kamu pilih websit...
Baca selengkapnya

membuat organisasi di github untuk projek ATsGengg

Gambar
 1. buka github.com dan login, jika belum mempunyai akun pilih create an account, jika sudah maka tampilan homepage awal nya akan muncul 2. tekan logo profile di ujung atas kanan dan pilih menu organizations 3. pilih new organizations, lalu pilih yang free dan  isi nama organisasi dengan nama yang kalian inginkan, dan ubah privasinya menjadi publik agar bisa diakses oleh siapapun 4. jika sudah pilih menu repositories dan pilih new repository, isi dengan nama yang diinginkan, contoh ATsAPI karena saya ingin membuat api untuk organisasi tersebut 5. klik logo + dan pilih create new file lalu isi nama filenya dengan index.html, untuk contoh seperti di dalam gambar 6. lalu buat file style.css untuk gaya tampilan dari index tersebut 7. setelah membuat file css nya, berikutnya buat file main.js untuk menghubungkan ke api yang kita pilih 8. pilih settings pada repository tersebut dan pilih menu pages lalu ubah branch menjadi main, agar kita mendapatkan link dari repository tersebut 9....
Baca selengkapnya