🌐
Miniclass Web
  • Miniclass Web
  • 1. Pengenalan Pemrograman Web
    • Cara Kerja Website
    • Pengenalan Backend dan Frontend
    • HTTP Request dan HTTP Response
  • 2. HTML
    • Pengenalan HTML
    • Text Formatting
    • Link
    • Media
    • List
    • Table
    • Form
    • Grouping
  • 3. CSS
    • Pengenalan CSS
    • Selector CSS
    • Text Formatting
    • Background
    • Border
    • Height dan Width
    • Spacing
    • Layouting
    • Responsive Design
    • Membuat Template Web Responsive
  • 4. Javascript
    • Pengenalan JavaScript
    • Javascript for Java developer
    • Array
    • Fungsi
    • Manipulasi DOM
    • Event
    • Fetch API
    • Object JavaScript
    • UI Component Lanjutan
  • 5. Node.js
    • Pengenalan Node.js
    • Membuat Server HTTP
    • Routing
    • Import Export
    • Node Package Manager
    • Nodemon
  • 6. Express.js
    • Pengenalan Express.js
    • HTTP Method
    • Menerima Data dari URL
    • Middleware
    • Menerima Data dari Body
    • Mengunggah File
    • Menampilkan File dalam Folder
    • Menyimpan Data ke Database MySQL
  • 7. Modern Frontend Development
    • ECMAScript
    • Transpiler
    • Module Bundler
  • 8. React Fundamental
    • Pengenalan React JS
    • Props
    • Event
    • State
    • Conditional Rendering
    • Component Mapping
    • Side Effect
    • Custom Hook
  • 9. React State Management
    • Lifting State Up
    • Context
    • Reducer
  • 10. React Performance
    • Debounce
    • Throttling
    • Memoization
    • Profiling
  • 11. React Testing
    • Component Testing
    • Hook Testing
    • Mocking
    • End to End Testing
  • 12. Object Relational Mapping
    • Pengenalan Object Relational Mapping
  • 13. Document Oriented Database
    • Document Oriented Database
    • Object Document Mapping
  • 14. Web Service
    • REST
    • GraphQL
  • 15. Autentikasi
    • JSON Web Token
    • Membuat Web Service Sederhana
  • 16. Microservices
    • Microservices
    • Microservices Gateway
    • Message Queue
    • Remote Procedure Call
    • Membuat Micro Service Sederhana
  • 18. Caching
Powered by GitBook
On this page
  • 1. Permasalahan
  • 2. Solusi
  • 3. Penjelasan HTTP Method
  • 4. Membuat Rute dengan HTTP Method Menggunakan Express
  • 4. Contoh Kasus
  • 4.1. Mengubah kode untuk menambahkan kontak baru
  • 4.2. Mengubah kode untuk mengubah kontak pada index 0
  • 4.3. mengubah kode untuk menghapus kontak pada index 0
  • 4.4. Hasil akhir

Was this helpful?

  1. 6. Express.js

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

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

PreviousPengenalan Express.jsNextMenerima Data dari URL

Last updated 4 years ago

Was this helpful?

jika ingin mengetahui lebih lengkap dapat klik link berikut

HTTP Method