HTTP Method
1. Permasalahan
Sebelumnya, kita sudah memiliki rute yang dapat melakukan CRUD yaitu :
/contact
- Menampilkan semua data contact/contact/create
- Menambahkan data contact/contact/edit
- Mengubah data contact pada index 0/contact/delete
- Menghapus data contact pada index 0
namun, muncul masalah baru yaitu rute yang terlalu banyak.
2. Solusi
Kita dapat membedakan rute tidak hanya berdasarkan URL nya saja. Tapi juga bisa berdasarkan methodnya, sehingga pada contoh diatas, bisa jadi seperti berikut :
/contact
method GET - Menampilkan semua data contact/contact
method POST - Menambahkan data contact/contact
method PUT - Mengubah data contact pada index 0/contact
method DELETE - Menghapus data contact pada index 0
3. Penjelasan HTTP Method
HTTP memiliki banyak method, 4 diantaranya adalah :
Method GET - Menampilkan Data
Method POST - Menambahkan Data
Method PUT - Mengubah Data
Method DELETE - Menghapus Data
jika ingin mengetahui lebih lengkap dapat klik link berikut HTTP Method
4. Membuat Rute dengan HTTP Method Menggunakan Express
Cara membuat rute menggunakan method selain GET pada express :
Method POST
app.post('/path', function (req, res) { //Kode disini })
Method PUT
app.put('/path', function (req, res) { //Kode disini })
Method DELETE
app.delete('/path', function (req, res) { //Kode disini })
4. Contoh Kasus
Contoh kasus menggunakan file dari materi sebelumnya,
4.1. Mengubah kode untuk menambahkan kontak baru
Dari `app.get` dan `/contact/create`:
```javascript
// menambahkan kontak baru
app.get("/contact/create", function (req, res) {
contacts.push({ name: "tono", phone: "085637263625" })
res.send({ success: true })
})
```
Menjadi `app.post` dan `/contact`:
```javascript
// menambahkan kontak baru
app.post("/contact", function (req, res) {
contacts.push({ name: "tono", phone: "085637263625" })
res.send({ success: true })
})
```
4.2. Mengubah kode untuk mengubah kontak pada index 0
Dari `app.get` dan `/contact/edit`:
```javascript
// mengubah kontak pada index 0
app.get("/contact/edit", function (req, res) {
if (contacts.length > 0) {
contacts[0] = { name: "siti", phone: "085372638281" }
res.send({ success: true })
} else {
res.send({ success: false })
}
})
```
Menjadi `app.put` dan `/contact`:
```javascript
// mengubah kontak pada index 0
app.put("/contact", function (req, res) {
if (contacts.length > 0) {
contacts[0] = { name: "siti", phone: "085372638281" }
res.send({ success: true })
} else {
res.send({ success: false })
}
})
```
4.3. mengubah kode untuk menghapus kontak pada index 0
Dari `app.get` dan `/contact/delete`:
```javascript
// menghapus kontak pada index 0
app.get("/contact/delete", function (req, res) {
if (contacts.length > 0) {
contacts.splice(0, 1)
res.send({ success: true })
} else {
res.send({ success: false })
}
})
```
Menjadi `app.delete` dan `/contact`:
```javascript
// menghapus kontak pada index 0
app.delete("/contact", function (req, res) {
if (contacts.length > 0) {
contacts.splice(0, 1)
res.send({ success: true })
} else {
res.send({ success: false })
}
})
```
4.4. Hasil akhir
const express = require('express')
const app = express()
const contacts = [
{
name: "amir",
phone: "085482938471"
},
{
name: "budi",
phone: "086452738493"
}
]
// menampilkan semua kontak
app.get("/contact", function (req, res) {
res.send(contacts)
})
// menambahkan kontak baru
app.post("/contact", function (req, res) {
contacts.push({ name: "tono", phone: "085637263625" })
res.send({ success: true })
})
// mengubah kontak pada index 0
app.put("/contact", function (req, res) {
if (contacts.length > 0) {
contacts[0] = { name: "siti", phone: "085372638281" }
res.send({ success: true })
} else {
res.send({ success: false })
}
})
// menghapus kontak pada index 0
app.delete("/contact", function (req, res) {
if (contacts.length > 0) {
contacts.splice(0, 1)
res.send({ success: true })
} else {
res.send({ success: false })
}
})
app.listen(3000, function () {
console.log("server running")
})
untuk melakukan percobaan bisa menggunakan REST Client App seperti postman
Last updated
Was this helpful?