Mengubah struktur materi menerima data dari body berdasarkan guideline

[mnindrazaka]

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Pada web server yang sudah dibuat sebelumnya, kita sudah dapat menginputkan index dan data yang akan dimanipulasi dari client. Namun data tersebut dikirim melalui URL. Dimana bisa saja ada beberapa data yang tidak ingin dilihat oleh user lain, misalnya data nama dan nomor telepon. Sehingga tidak baik mengirimkan semua data melalui URL.

2. Penjelasan Materi Sebagai Solusi

Selain mengirim data melalui URL, client juga dapat mengirimkan data melalui body, artinya, data tersebut tidak akan terlihat pada URL, sehingga lebih aman.

3. Penjelasan Detail Materi

• penjelasan plain text
  • cara mengirim plain text dari frontend javascript
  • cara parsing plain text ke req.body menggunakan middleware express.json()
• penjelasan url encoded
  • cara mengirim url encoded dari frontend javascript menggunakan URLSearchParams
  • cara parsing url encoded ke req.body menggunakan express.urlencoded()

referensi :
https://dev.to/sidthesloth92/understanding-html-form-encoding-url-encoded-and-multipart-forms-3lpa
https://pastebin.com/DfgVxfFB

4. Contoh Kasus

Diberikan langkah - langkah untuk mengubah input dari URL ke Body pada web server yang sudah dibuat sebelumnya (pada materi middleware)

source code akhir contoh kasus (pastikan berikan langkah - langkah saat menjelaskan) :

const express = require('express')
const app = express()

const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
]

function validateIndex(req, res, next) {
  if (req.query.index !== undefined && contacts[req.query.index] === undefined) {
    res.send({ success: false })
  } else {
    next()
  }
}

app.use(validateIndex)
// terapkan middleware express.json ke semua rute
app.use(express.json())

app.get("/contact", function (req, res) {
  res.send(contacts)
})

app.post("/contact", function (req, res) {
  // setelah middleware express.json diterapkan, kita bisa mendapatkan data name dan phone dari req.body
  contacts.push({ name: req.body.name, phone: req.body.phone })
  res.send({ success: true })
})

app.put("/contact", function (req, res) {
  // setelah middleware express.json diterapkan, kita bisa mendapatkan data name dan phone dari req.body
  contacts[req.query.index] = { name: req.body.name, phone: req.body.phone }
  res.send({ success: true })
})

app.delete("/contact", function (req, res) {
  contacts.splice(req.query.index, 1)
  res.send({ success: true })
})

app.listen(3000, function () {
  console.log("server running")
})

file terkait :
https://github.com/wrideveloper/miniclass-web/blob/master/dasar/express-js/handle-data-body.md