Mengenal HTTP, JSON, dan REST API untuk Pemula

Halo, Gabuters!

Pada artikel sebelumnya, kita sudah membahas apa itu backend dan API.

Kita memahami bahwa frontend dan backend dapat berkomunikasi menggunakan mekanisme request dan response.

Namun, ada beberapa pertanyaan yang belum kita bahas secara mendalam.

Bagaimana browser mengirim permintaan ke server?

Mengapa ada request menggunakan GET, sedangkan yang lain menggunakan POST?

Apa arti status 200, 404, dan 500?

Dan mengapa API sering mengembalikan data dalam format JSON?

Untuk menjawabnya, kita perlu memahami tiga konsep penting: HTTP, JSON, dan REST API.

Ketiganya akan sering kita temui ketika mulai membuat backend menggunakan JavaScript.

Pada artikel ini, kita akan mempelajari konsepnya terlebih dahulu sebelum membuat HTTP server sendiri pada artikel berikutnya.

1. Apa Itu HTTP?#

HTTP merupakan singkatan dari Hypertext Transfer Protocol.

HTTP adalah protokol komunikasi yang digunakan untuk bertukar pesan antara client dan server.

Ketika kita membuka website, browser dapat mengirim HTTP request untuk meminta halaman, gambar, file CSS, JavaScript, atau data API.

Server kemudian mengirim HTTP response.

Secara sederhana, alurnya seperti ini:

1
Browser / Client
2
       |
3
       | HTTP Request
4
       v
5
     Server
6
       |
7
       | HTTP Response
8
       v
9
Browser / Client

HTTP menentukan bagaimana pesan request dan response disusun serta bagaimana maknanya dipahami oleh kedua pihak.

Contohnya, ketika browser meminta daftar artikel:

1
GET /api/artikel HTTP/1.1
2
Host: localhost:3000

Server dapat mengembalikan:

1
HTTP/1.1 200 OK
2
Content-Type: application/json
3

4
[
5
  {
6
    "id": 1,
7
    "judul": "Belajar HTML"
8
  },
9
  {
10
    "id": 2,
11
    "judul": "Belajar CSS"
12
  }
13
]

Contoh tersebut menggambarkan bentuk pesan HTTP/1.1 secara sederhana.

Baris pertama request menunjukkan method, path, dan versi HTTP.

Sedangkan baris pertama response menunjukkan versi HTTP, status code, dan status text.

Pada HTTP/2 dan HTTP/3, representasi pesan di jaringan berbeda dari format teks HTTP/1.1 tersebut, tetapi konsep method, header, status, dan body tetap relevan.

2. Mengenal HTTP Request#

HTTP request adalah pesan permintaan yang dikirim client kepada server.

Sebuah request dapat memiliki beberapa komponen penting:

HTTP method.
Target atau alamat resource.
Header.
Body, jika diperlukan.

Mari kita bahas satu per satu.

HTTP method#

Method menjelaskan tindakan yang diminta client.

Contohnya:

1
GET /api/artikel HTTP/1.1

Method GET biasanya digunakan untuk meminta representasi data.

Target request#

Target menunjukkan resource yang ingin diakses.

Pada contoh:

1
/api/artikel

Path tersebut mengarah ke resource artikel pada API.

Header membawa informasi tambahan mengenai request.

Contohnya:

1
Accept: application/json

Header tersebut menunjukkan bahwa client dapat menerima respons berformat JSON.

Body#

Body berisi data yang dikirim bersama request jika diperlukan.

Misalnya, ketika client ingin membuat artikel baru:

1
POST /api/artikel HTTP/1.1
2
Host: localhost:3000
3
Content-Type: application/json
4

5
{
6
  "judul": "Belajar Backend",
7
  "kategori": "Programming"
8
}

Pada contoh ini, body berisi data artikel dalam format JSON.

Tidak semua request membutuhkan body.

Request GET biasanya tidak menggunakan body.

3. Mengenal HTTP Response#

HTTP response adalah jawaban server atas request yang diterima.

Response umumnya memiliki:

Status code.
Header.
Body, jika ada.

Contohnya:

1
HTTP/1.1 200 OK
2
Content-Type: application/json
3

4
{
5
  "id": 1,
6
  "judul": "Belajar Backend"
7
}

Mari kita pahami komponennya.

Status code#

Angka 200 menunjukkan bahwa request berhasil diproses.

Header#

Bagian berikut:

1
Content-Type: application/json

Memberi tahu client bahwa body response menggunakan format JSON.

Body#

Bagian:

1
{
2
  "id": 1,
3
  "judul": "Belajar Backend"
4
}

Merupakan data yang dikirim oleh server.

Body tidak selalu berupa JSON.

Server juga dapat mengirim HTML, teks biasa, gambar, atau format lainnya.

4. Mengenal HTTP Method#

HTTP menyediakan beberapa method yang mempunyai makna berbeda.

Dalam pengembangan REST API, empat method yang paling sering diperkenalkan kepada pemula adalah:

GET
POST
PUT
DELETE

Ada pula method lain seperti PATCH, HEAD, dan OPTIONS.

Kita mulai dari empat method utama.

GET: Mengambil data#

Method GET digunakan untuk meminta representasi resource.

Contohnya:

1
GET /api/artikel HTTP/1.1

Tujuannya mengambil daftar artikel.

Contoh respons:

1
[
2
  {
3
    "id": 1,
4
    "judul": "Belajar HTML"
5
  },
6
  {
7
    "id": 2,
8
    "judul": "Belajar CSS"
9
  }
10
]

Dalam desain HTTP yang benar, request GET tidak dimaksudkan untuk mengubah keadaan resource di server.

Karena itu, jangan merancang endpoint seperti berikut untuk menghapus artikel:

1
GET /api/hapus-artikel/1

Walaupun secara teknis server dapat diprogram untuk melakukan tindakan tersebut, pendekatan ini bertentangan dengan semantik GET.

POST: Mengirim data untuk diproses#

Method POST digunakan untuk meminta server memproses data yang dikirim sesuai aturan resource tujuan.

Salah satu penggunaan yang umum adalah membuat data baru.

Contohnya:

1
POST /api/artikel HTTP/1.1
2
Host: localhost:3000
3
Content-Type: application/json
4

5
{
6
  "judul": "Belajar JavaScript",
7
  "kategori": "Programming"
8
}

Server dapat membuat artikel baru dan mengembalikan respons:

1
HTTP/1.1 201 Created
2
Content-Type: application/json
3
Location: /api/artikel/3
4

5
{
6
  "id": 3,
7
  "judul": "Belajar JavaScript",
8
  "kategori": "Programming"
9
}

Status 201 Created menunjukkan bahwa request menghasilkan resource baru.

PUT: Membuat atau mengganti representasi resource#

Method PUT digunakan untuk membuat atau mengganti keadaan resource target menggunakan representasi yang dikirim client, sesuai aturan API.

Misalnya, kita ingin mengganti data artikel dengan ID 3.

1
PUT /api/artikel/3 HTTP/1.1
2
Host: localhost:3000
3
Content-Type: application/json
4

5
{
6
  "judul": "Belajar JavaScript Dasar",
7
  "kategori": "Programming"
8
}

Pada API sederhana yang akan kita buat nanti, PUT digunakan untuk mengganti data artikel yang sudah ada.

Perlu diingat bahwa secara semantik HTTP, PUT juga dapat digunakan untuk membuat resource pada URI tertentu jika server mengizinkannya.

DELETE: Menghapus resource#

Method DELETE digunakan untuk meminta server menghapus hubungan resource dengan URI target.

Contohnya:

1
DELETE /api/artikel/3 HTTP/1.1

Server dapat mengembalikan:

1
HTTP/1.1 204 No Content

Status 204 berarti request berhasil dan response tidak mempunyai body.

Tidak semua operasi penghapusan harus menggunakan status 204, tetapi status ini umum digunakan ketika tidak ada data yang perlu dikembalikan.

5. Bagaimana dengan PATCH?#

Selain PUT, ada method PATCH.

PATCH digunakan untuk meminta perubahan sebagian pada resource berdasarkan dokumen perubahan yang dikirim.

Misalnya, sebuah artikel mempunyai data:

1
{
2
  "id": 3,
3
  "judul": "Belajar JavaScript",
4
  "kategori": "Programming",
5
  "sudahTerbit": false
6
}

Kita hanya ingin mengubah status publikasinya.

Pada API yang mendukung format patch tertentu, request dapat dirancang seperti:

1
PATCH /api/artikel/3 HTTP/1.1
2
Host: localhost:3000
3
Content-Type: application/merge-patch+json
4

5
{
6
  "sudahTerbit": true
7
}

Contoh tersebut menggunakan format JSON Merge Patch.

Server harus memang mendukung format tersebut agar request dapat diproses sesuai harapan.

Perbedaan sederhananya:

PUT digunakan untuk mengganti representasi resource target.
PATCH digunakan untuk menerapkan perubahan sebagian.

Namun, perilaku detailnya tetap bergantung pada kontrak API yang digunakan.

Pada praktik awal nanti, kita akan berfokus pada GET, POST, PUT, dan DELETE terlebih dahulu.

6. Mengenal CRUD#

Ketika mempelajari backend, kita sering menemukan istilah CRUD.

CRUD merupakan singkatan dari:

Create
Read
Update
Delete

CRUD menggambarkan empat operasi dasar pengelolaan data.

Contohnya, untuk aplikasi artikel:

Operasi CRUD	Contoh HTTP method	Tujuan
Create	POST	Membuat artikel
Read	GET	Membaca artikel
Update	PUT atau PATCH	Mengubah artikel
Delete	DELETE	Menghapus artikel

Perlu diingat bahwa CRUD adalah konsep pengelolaan data, sedangkan HTTP method mempunyai semantik protokol tersendiri.

Keduanya sering dipetakan seperti tabel di atas, tetapi tidak selalu memiliki hubungan satu banding satu.

Pada artikel praktik nanti, kita akan menggunakan pola tersebut untuk membangun API sederhana.

7. Mengenal HTTP Status Code#

Setelah server menerima request, server mengirim status code untuk menunjukkan hasil pemrosesan.

Status code HTTP dibagi menjadi lima kelompok utama.

Kelompok	Arti umum
1xx	Informational
2xx	Successful
3xx	Redirection
4xx	Client Error
5xx	Server Error

Untuk pemula, kita tidak perlu menghafal seluruh status code.

Cukup pahami beberapa yang paling sering ditemui.

200 OK#

Request berhasil.

Contohnya, mengambil daftar artikel:

1
HTTP/1.1 200 OK

201 Created#

Request berhasil dan menghasilkan resource baru.

Biasanya digunakan setelah operasi pembuatan data berhasil.

204 No Content#

Request berhasil, tetapi tidak ada body response.

Sering digunakan setelah operasi penghapusan berhasil.

400 Bad Request#

Server tidak dapat atau tidak akan memproses request karena masalah pada request tersebut.

Misalnya, body JSON tidak valid atau format request tidak sesuai aturan yang diharapkan.

401 Unauthorized#

Request membutuhkan kredensial autentikasi yang valid.

Nama status ini memang Unauthorized, tetapi secara praktik berkaitan dengan autentikasi.

403 Forbidden#

Server memahami request, tetapi menolak memenuhinya.

Contohnya, pengguna sudah dikenali tetapi tidak mempunyai izin untuk melakukan operasi tertentu.

404 Not Found#

Resource yang diminta tidak ditemukan, atau server tidak bersedia mengungkap keberadaannya.

Contohnya:

1
GET /api/artikel/999 HTTP/1.1

Jika artikel tersebut tidak tersedia, API dapat mengembalikan status 404.

405 Method Not Allowed#

Resource target dikenali, tetapi HTTP method yang digunakan tidak didukung untuk resource tersebut.

Contohnya, endpoint hanya mendukung GET, tetapi client mengirim DELETE.

500 Internal Server Error#

Server mengalami kondisi yang tidak diharapkan sehingga tidak dapat memenuhi request.

Contohnya, terjadi error internal yang belum ditangani dengan benar.

Dalam aplikasi nyata, detail teknis error internal sebaiknya dicatat pada log server, bukan dibocorkan seluruhnya kepada pengguna API.

8. Mengapa Status Code Penting?#

Bayangkan frontend mengirim request untuk mengambil artikel.

Jika berhasil, server mengembalikan:

1
HTTP/1.1 200 OK

Jika artikel tidak ditemukan:

1
HTTP/1.1 404 Not Found

Jika server mengalami error internal:

1
HTTP/1.1 500 Internal Server Error

Frontend dapat menggunakan status tersebut untuk menentukan tindakan.

Misalnya:

Menampilkan artikel ketika request berhasil.
Menampilkan pesan tidak ditemukan ketika status 404.
Menampilkan pesan gangguan layanan ketika status 500.

Karena itu, jangan selalu mengembalikan status 200 untuk setiap kondisi.

Respons yang konsisten membantu client memahami hasil operasi.

9. Mengenal HTTP Header#

HTTP header merupakan field yang membawa informasi tambahan tentang request atau response.

Beberapa header yang sering digunakan dalam pengembangan API adalah:

Content-Type#

Menunjukkan jenis media dari representasi yang dikirim.

Contohnya:

1
Content-Type: application/json

Artinya body berisi data berformat JSON.

Accept#

Menunjukkan format respons yang dapat diterima client.

Contohnya:

1
Accept: application/json

Authorization#

Dapat digunakan untuk membawa kredensial autentikasi.

Contohnya:

1
Authorization: Bearer contoh-token

Nilai tersebut hanya ilustrasi, bukan token sungguhan.

Jangan membagikan token autentikasi asli secara sembarangan.

Location#

Dapat digunakan untuk menunjukkan URI resource yang baru dibuat atau lokasi tujuan tertentu, tergantung konteks status response.

Contohnya:

1
Location: /api/artikel/3

Header bukan sekadar pelengkap.

Header membantu client dan server memahami bagaimana request serta response harus diproses.

10. Apa Itu JSON?#

JSON merupakan singkatan dari JavaScript Object Notation.

JSON adalah format pertukaran data berbasis teks.

Format ini banyak digunakan pada Web API karena relatif sederhana dan dapat digunakan oleh berbagai bahasa pemrograman.

Contoh JSON:

1
{
2
  "id": 1,
3
  "judul": "Belajar Backend",
4
  "kategori": "Programming",
5
  "sudahTerbit": true
6
}

Walaupun namanya mengandung JavaScript, JSON tidak hanya digunakan oleh JavaScript.

Aplikasi Python, PHP, Java, Go, dan bahasa lainnya juga dapat membaca serta menghasilkan JSON.

11. Tipe Data dalam JSON#

JSON mendukung beberapa jenis nilai.

Jenis nilai	Contoh
String	`"BapakGabut"`
Number	`100`
Boolean	`true`
Null	`null`
Array	`["HTML", "CSS"]`
Object	`{"judul": "Belajar HTML"}`

Contoh gabungannya:

1
{
2
  "namaWebsite": "BapakGabut",
3
  "jumlahArtikel": 3,
4
  "aktif": true,
5
  "deskripsi": null,
6
  "kategori": ["HTML", "CSS", "JavaScript"],
7
  "artikelTerbaru": {
8
    "id": 3,
9
    "judul": "Belajar JavaScript"
10
  }
11
}

JSON tidak mendukung nilai seperti undefined, function, atau komentar.

JSON juga mempunyai aturan sintaks yang harus dipatuhi.

Contohnya, nama properti harus menggunakan tanda kutip ganda.

Benar:

1
{
2
  "judul": "Belajar HTML"
3
}

Tidak valid sebagai JSON:

1
{
2
  judul: "Belajar HTML"
3
}

Penulisan kedua dapat menjadi object literal JavaScript, tetapi bukan teks JSON yang valid.

12. JSON.stringify() dan JSON.parse()#

Karena kita menggunakan JavaScript, ada dua method yang perlu dikenal.

JSON.stringify()#

Digunakan untuk mengubah nilai JavaScript menjadi string JSON, jika nilai tersebut dapat direpresentasikan sebagai JSON.

Contohnya:

1
const artikel = {
2
  id: 1,
3
  judul: "Belajar HTML",
4
  sudahTerbit: true
5
};
6

7
const hasil = JSON.stringify(artikel);
8

9
console.log(hasil);

Hasilnya berupa string:

1
{"id":1,"judul":"Belajar HTML","sudahTerbit":true}

JSON.parse()#

Digunakan untuk membaca string JSON yang valid dan mengubahnya menjadi nilai JavaScript.

Contohnya:

1
const teksJSON =
2
  '{"id":1,"judul":"Belajar HTML","sudahTerbit":true}';
3

4
const artikel = JSON.parse(teksJSON);
5

6
console.log(artikel.judul);

Hasilnya:

1
Belajar HTML

Apa yang terjadi jika JSON tidak valid?#

Contohnya:

1
const teksJSON = '{"judul": "Belajar HTML",}';
2

3
JSON.parse(teksJSON);

Kode tersebut menghasilkan SyntaxError karena ada koma tambahan sebelum kurung kurawal penutup.

Karena itu, ketika menerima JSON dari sumber yang belum pasti valid, kita perlu menyiapkan penanganan error.

Contohnya:

1
const teksJSON = '{"judul": "Belajar HTML",}';
2

3
try {
4
  const data = JSON.parse(teksJSON);
5

6
  console.log(data);
7
} catch (error) {
8
  console.log("Format JSON tidak valid.");
9
}

Pada contoh tersebut, error ditangani agar program tidak langsung berhenti akibat exception yang tidak tertangani.

13. Mengenal REST API#

Sekarang kita masuk ke konsep REST API.

REST merupakan singkatan dari Representational State Transfer.

REST adalah gaya arsitektur untuk sistem terdistribusi.

Salah satu prinsip penting REST adalah komunikasi yang bersifat stateless.

Artinya, setiap request harus membawa informasi yang diperlukan agar server dapat memahami dan memproses request tersebut.

Server tidak boleh bergantung pada konteks percakapan tersembunyi dari request sebelumnya untuk memahami request saat ini.

Namun, stateless bukan berarti server tidak boleh menyimpan data.

Server tetap dapat menggunakan database dan menyimpan resource.

Yang dimaksud adalah setiap request harus dapat dipahami secara mandiri sesuai konteks protokol dan informasi yang dibawanya.

REST juga mempunyai batasan arsitektural lain, seperti client-server, cacheability, uniform interface, layered system, dan code-on-demand yang bersifat opsional.

Dalam seri pemula ini, kita akan berfokus pada praktik desain API HTTP berbasis resource.

14. Mendesain Endpoint Berdasarkan Resource#

Salah satu pendekatan yang umum digunakan dalam REST API adalah membuat endpoint berdasarkan resource.

Misalnya, kita mempunyai resource artikel.

Gunakan path:

1
/api/artikel

Untuk kumpulan artikel.

Dan:

1
/api/artikel/1

Untuk satu artikel dengan ID tertentu.

Kemudian gunakan HTTP method untuk menentukan operasi.

Method	Endpoint	Tujuan
GET	`/api/artikel`	Mengambil daftar artikel
GET	`/api/artikel/1`	Mengambil detail artikel
POST	`/api/artikel`	Membuat artikel
PUT	`/api/artikel/1`	Mengganti data artikel
DELETE	`/api/artikel/1`	Menghapus artikel

Bandingkan dengan desain berikut:

1
/api/getArtikel
2
/api/tambahArtikel
3
/api/updateArtikel
4
/api/hapusArtikel

Pendekatan kedua tidak otomatis membuat API salah atau tidak berfungsi.

Namun, desain berbasis resource dan HTTP method biasanya lebih konsisten dengan pendekatan REST API.

Tujuannya agar endpoint lebih mudah dipahami dan dipelihara.

15. Apa Itu Path Parameter dan Query Parameter?#

Ketika membuat API, kita juga sering menggunakan parameter pada URL.

Path parameter#

Path parameter merupakan bagian dari path yang digunakan untuk menunjukkan nilai tertentu.

Contohnya:

1
/api/artikel/10

Angka 10 dapat diartikan sebagai ID artikel.

Dalam definisi route, kita mungkin menuliskannya sebagai:

1
/api/artikel/:id

Penulisan :id adalah notasi yang sering digunakan dalam dokumentasi atau sistem routing untuk menunjukkan bagian dinamis.

Itu bukan aturan khusus yang harus ditulis secara harfiah pada URL request.

Query parameter#

Query parameter digunakan untuk membawa informasi tambahan dalam URL.

Contohnya:

1
/api/artikel?kategori=JavaScript

Request tersebut dapat digunakan untuk meminta artikel berdasarkan kategori.

Contoh lainnya:

1
/api/artikel?kategori=CSS&halaman=2

Bagian setelah tanda ? merupakan query string.

Tanda & memisahkan beberapa parameter.

Path parameter sering digunakan untuk mengidentifikasi resource tertentu.

Query parameter sering digunakan untuk filter, pencarian, pengurutan, atau pagination.

Namun, penggunaan akhirnya bergantung pada desain API.

16. Studi Kasus: API Artikel BapakGabut#

Sekarang kita gabungkan konsep yang sudah dipelajari.

Bayangkan kita ingin membuat API sederhana untuk mengelola artikel.

Kita mempunyai data:

1
[
2
  {
3
    "id": 1,
4
    "judul": "Belajar HTML",
5
    "kategori": "HTML"
6
  },
7
  {
8
    "id": 2,
9
    "judul": "Belajar CSS",
10
    "kategori": "CSS"
11
  }
12
]

Skenario 1: Mengambil semua artikel#

Client mengirim:

1
GET /api/artikel HTTP/1.1
2
Host: localhost:3000

Server mengembalikan:

1
HTTP/1.1 200 OK
2
Content-Type: application/json
3

4
[
5
  {
6
    "id": 1,
7
    "judul": "Belajar HTML",
8
    "kategori": "HTML"
9
  },
10
  {
11
    "id": 2,
12
    "judul": "Belajar CSS",
13
    "kategori": "CSS"
14
  }
15
]

Skenario 2: Mengambil artikel yang tidak ada#

Client mengirim:

1
GET /api/artikel/999 HTTP/1.1
2
Host: localhost:3000

Server dapat mengembalikan:

1
HTTP/1.1 404 Not Found
2
Content-Type: application/json
3

4
{
5
  "pesan": "Artikel tidak ditemukan."
6
}

Skenario 3: Membuat artikel baru#

Client mengirim:

1
POST /api/artikel HTTP/1.1
2
Host: localhost:3000
3
Content-Type: application/json
4

5
{
6
  "judul": "Belajar JavaScript",
7
  "kategori": "JavaScript"
8
}

Jika berhasil, server dapat mengembalikan:

1
HTTP/1.1 201 Created
2
Content-Type: application/json
3
Location: /api/artikel/3
4

5
{
6
  "id": 3,
7
  "judul": "Belajar JavaScript",
8
  "kategori": "JavaScript"
9
}

Skenario 4: Menghapus artikel#

Client mengirim:

1
DELETE /api/artikel/3 HTTP/1.1
2
Host: localhost:3000

Jika berhasil, server dapat mengembalikan:

1
HTTP/1.1 204 No Content

Keempat skenario tersebut memperlihatkan bagaimana HTTP method, endpoint, status code, dan JSON bekerja bersama.

Perlu diingat bahwa seluruh contoh ini masih berupa ilustrasi protokol.

Kita belum membuat program server yang menjalankannya.

17. Bagaimana Cara Melihat Request dan Response di Browser?#

Kita bisa mulai mengamati komunikasi HTTP tanpa membuat backend sendiri.

Gunakan Developer Tools yang tersedia pada browser modern.

Secara umum, langkahnya:

Buka sebuah website.
Tekan F12 atau buka Developer Tools.
Pilih tab Network.
Muat ulang halaman.
Pilih salah satu request yang muncul.

Biasanya kita dapat melihat informasi seperti:

Request URL.
Request method.
Status code.
Request headers.
Response headers.
Response body atau preview, jika tersedia.

Tidak semua request akan menampilkan informasi yang sama.

Misalnya, request untuk gambar berbeda dari request API JSON.

Untuk belajar, coba perhatikan request dokumen HTML, file CSS, dan file JavaScript.

Lihat method yang digunakan serta status code yang dikembalikan.

Ini akan membantu kita memahami bahwa komunikasi HTTP sebenarnya terjadi setiap kali kita menggunakan website.

18. Kesalahan Umum Saat Belajar HTTP dan API#

Menganggap GET dan POST hanya berbeda karena ada body#

Perbedaannya bukan sekadar ada atau tidaknya body.

HTTP method mempunyai semantik tersendiri.

GET digunakan untuk meminta representasi resource, sedangkan POST meminta server memproses representasi yang dikirim sesuai aturan resource tujuan.

Menganggap semua respons berhasil harus menggunakan 200#

Tidak.

Pembuatan resource dapat menggunakan 201 Created.

Operasi berhasil tanpa body dapat menggunakan 204 No Content.

Pilih status code sesuai hasil operasi.

Menganggap 401 dan 403 sama#

Keduanya berbeda.

401 berkaitan dengan kebutuhan autentikasi yang valid.

403 menunjukkan server menolak memenuhi request.

Menganggap JSON sama persis dengan object JavaScript#

Tidak.

JSON merupakan format teks dengan aturan sintaks tersendiri.

Menganggap REST hanya berarti menggunakan GET, POST, PUT, dan DELETE#

REST mempunyai prinsip arsitektural yang lebih luas.

Penggunaan HTTP method tersebut merupakan bagian dari praktik desain API HTTP, bukan keseluruhan definisi REST.

Menganggap API yang berhasil diakses otomatis aman#

Tidak.

API tetap membutuhkan validasi, autentikasi, otorisasi, dan penanganan error yang sesuai dengan kebutuhannya.

19. Latihan Mandiri#

Sekarang kita coba menguji pemahaman.

Latihan 1: Tentukan HTTP method#

Tentukan method yang paling sesuai untuk operasi berikut:

Mengambil daftar artikel.
Membuat artikel baru.
Mengganti seluruh data artikel berdasarkan ID.
Menghapus artikel.
Mengambil detail artikel berdasarkan ID.

Latihan 2: Tentukan status code#

Pilih status code yang sesuai untuk kondisi berikut:

Data berhasil diambil.
Resource baru berhasil dibuat.
Artikel yang diminta tidak ditemukan.
Request berisi JSON yang tidak valid.
Server mengalami error internal.

Latihan 3: Periksa format JSON#

Perhatikan data berikut:

1
{
2
  judul: "Belajar Backend",
3
  kategori: "Programming",
4
}

Apakah penulisan tersebut valid sebagai JSON?

Jika tidak, coba perbaiki.

Latihan 4: Rancang endpoint#

Bayangkan kita ingin membuat API untuk daftar game.

Tentukan endpoint untuk:

Mengambil seluruh game.
Mengambil game dengan ID 5.
Menambahkan game baru.
Mengubah data game dengan ID 5.
Menghapus game dengan ID 5.

Gunakan pendekatan resource seperti yang sudah kita pelajari.

Latihan 5: Amati Network#

Buka Developer Tools pada browser.

Pilih tab Network, lalu muat ulang sebuah website.

Temukan satu request yang berhasil dan catat:

URL.
Method.
Status code.
Content-Type respons, jika tersedia.

Tidak perlu mengubah request atau mengirim data apa pun.

Cukup amati bagaimana browser dan server berkomunikasi.

20. Penutup#

Pada artikel ini, kita sudah mempelajari dasar HTTP, JSON, dan REST API.

Kita memahami bahwa HTTP mengatur komunikasi request dan response antara client dan server.

Kita juga mengenal HTTP method seperti GET, POST, PUT, PATCH, dan DELETE.

Kemudian, kita membahas status code, header, body, serta penggunaan JSON untuk pertukaran data.

Kita juga mengenal desain endpoint berbasis resource dan beberapa prinsip penting REST.

Sekarang kita sudah memahami bagaimana sebuah API seharusnya menerima permintaan dan mengirim respons.

Tetapi sejauh ini, semua contoh request dan response masih berupa ilustrasi.

Bagaimana cara membuat server yang benar-benar menerima request tersebut?

Apakah kita harus langsung menggunakan framework?

Ternyata tidak.

Pada artikel berikutnya, kita akan mulai praktik Membuat HTTP Server dengan JavaScript Tanpa Framework.

Kita akan menggunakan Node.js dan modul bawaan node:http untuk menjalankan server pertama kita.

Tanpa Express dan tanpa dependency tambahan.

Sampai jumpa di artikel berikutnya, Gabuters!

Mengenal HTTP, JSON, dan REST API untuk Pemula

1. Apa Itu HTTP?#

2. Mengenal HTTP Request#

HTTP method#

Target request#

Header#

Body#

3. Mengenal HTTP Response#

Status code#

Header#

Body#

4. Mengenal HTTP Method#

GET: Mengambil data#

POST: Mengirim data untuk diproses#

PUT: Membuat atau mengganti representasi resource#

DELETE: Menghapus resource#

5. Bagaimana dengan PATCH?#

6. Mengenal CRUD#

7. Mengenal HTTP Status Code#

200 OK#

201 Created#

204 No Content#

400 Bad Request#

401 Unauthorized#

403 Forbidden#

404 Not Found#

405 Method Not Allowed#

500 Internal Server Error#

8. Mengapa Status Code Penting?#

9. Mengenal HTTP Header#

Content-Type#

Accept#

Authorization#

Location#

10. Apa Itu JSON?#

11. Tipe Data dalam JSON#

12. JSON.stringify() dan JSON.parse()#

JSON.stringify()#

JSON.parse()#

Apa yang terjadi jika JSON tidak valid?#

13. Mengenal REST API#

14. Mendesain Endpoint Berdasarkan Resource#

15. Apa Itu Path Parameter dan Query Parameter?#

Path parameter#

Query parameter#

16. Studi Kasus: API Artikel BapakGabut#

Skenario 1: Mengambil semua artikel#

Skenario 2: Mengambil artikel yang tidak ada#

Skenario 3: Membuat artikel baru#

Skenario 4: Menghapus artikel#

17. Bagaimana Cara Melihat Request dan Response di Browser?#

18. Kesalahan Umum Saat Belajar HTTP dan API#

Menganggap GET dan POST hanya berbeda karena ada body#

Menganggap semua respons berhasil harus menggunakan 200#

Menganggap 401 dan 403 sama#

Menganggap JSON sama persis dengan object JavaScript#

Menganggap REST hanya berarti menggunakan GET, POST, PUT, dan DELETE#

Menganggap API yang berhasil diakses otomatis aman#

19. Latihan Mandiri#

Latihan 1: Tentukan HTTP method#

Latihan 2: Tentukan status code#

Latihan 3: Periksa format JSON#

Latihan 4: Rancang endpoint#

Latihan 5: Amati Network#

20. Penutup#

Bagikan Artikel

Bacaan terkait

Coba jalur lain