Mengubah struktur materi menampilkan file dalam folder berdasarkan guideline

[mnindrazaka]

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

1. Permasalahan

Sebelumnya, kita sudah bisa membuat server yang dapat menerima sebuah file dan menyimpannya ke hardisk. Namun apabila file tersebut dicoba dibuka di browser, maka tidak akan muncul, malah muncul pesan bahwa rute tidak ditemukan.

2. Penjelasan Materi Sebagai Solusi

Agar file tersebut dapat ditampilkan, kita butuh membuat rute khusus yang digunakan untuk menampilkan file2 yang ada pada suatu folder. Pada express, kita bisa membuatnya dengan mudah menggunakan middleware express.static()

3. Penjelasan Detail Materi

• penjelasan express.static
• cara menampilkan file yang ada pada suatu folder menggunakan express.static

4. Contoh Kasus

Diberikan langkah - langkah untuk menampilkan file yang sudah terupload pada server yang sudah dibuat pada materi sebelumnya menggunakan express.static

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

const express = require('express')
const app = express()
const multer = require('multer')
const upload = multer({ dest: 'public/upload/' })

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)
app.use(express.json())

// menampilkan semua file atau folder yang ada pada folder public
app.use(express.static('public'))

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

app.post("/contact", function (req, res) {
  contacts.push({ name: req.body.name, phone: req.body.phone })
  res.send({ success: true })
})

app.put("/contact", function (req, res) {
  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.put("/contact/upload", upload.single('photo'), function (req, res) {
  contacts[req.query.index].photo = req.file.path
  res.send({ success: true })
})

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