Mengubah struktur materi pengenalan express berdasarkan guideline

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

1. Permasalahan

Kita dapat membuat web server menggunakan node.js, namun syntax yang dibutuhkan lumayan panjang, walaupun yang kita buat hanya web server sederhana dengan routing.

2. Penjelasan Materi Sebagai Solusi

Express merupakan framework node.js yang dapat mempercepat pembuatan web server. Hal tersebut dapat dilakukan karena express telah menyediakan beberapa library untuk melakukan pembuatan web server, salah satunya adalah routing.

3. Penjelasan Detail Materi

1. instalasi express

buat directory untuk menyimpan aplikasi kamu, dan membuatnya sebagai direktori kerja.

$ mkdir nama-aplikasi
$ cd nama-aplikasi

Gunakan perintah npm init untuk membuat file package.json untuk aplikasi kamu yang telah dibuat seperti diatas. Untuk informasi bagaimana cara kerja package.json lihat npm package.json.

$ npm init

Perintah ini menyarankan kamu beberapa hal, seperti nama aplikasi atau nama project yang akan kamu buat, nama version aplikasi/project. Untuk sementara kamu bisa menekan ENTER terus-menerus untuk menerima secara default semuanya, dengan beberapa pengecualian seperti:

entry point: (index.js)

Ketika pesan ini muncul ketikan app.js atau apa saja yang kamu inginkan untuk menjadikan file utama. Jika menginginkan index.js tekan saja ENTER untuk menerima saran nama file secara default. Sekarang install Express didalam direktori nama-aplikasi dan menyimpannya didalam daftar dependencies. Contohnya:

$ npm install express --save

2. hello world express

Pada folder yang telah di install dan inisiasi express, buatlah file baru dengan nama app.js lalu isi dengan kode program dibawah

const express = require("express");

const app = express();

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

app.get("/", function(req, res) {
  res.end("Hello World");
});

lihat hasilnya disini

3. membuat beberapa rute menggunakan express

pada app.js tambahkan kode program sehingga mirip seperti dibawah

const express = require("express");

const app = express();

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

app.get("/", function(req, res) {
  res.end("Hello World");
});

app.get("/satu", function(req, res) {
  res.end("Hello World satu");
});

app.get("/dua", function(req, res) {
  res.end("Hello World dua");
});

lihat hasilnya pada route satu dan route dua

4. menampilkan variable non string sebagai response menggunakan express

variable non string yang digunakan pada contoh kode program dibawah menggunakan array

const express = require("express");

const app = express();
const contacts = [
  {
    name: "amir",
    phone: "085482938471"
  },
  {
    name: "budi",
    phone: "086452738493"
  }
];

app.listen(3000, function() {
  console.log("Server berjalan diport 3000");
});

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

lihat hasilnya disini

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat web server yang memiliki beberapa rute untuk melakukan manipulasi data pada suatu array. Rute - rute tersebut adalah :

/contact - menampilkan semua data contact /contact/create - menambahkan data contact /contact/edit - mengubah data contact pada index 0 /contact/delete - menghapus seluruh data contact pada index 0

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"
  }
]

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

// menambahkan kontak baru
app.get("/contact/create", function (req, res) {
  contacts.push({ name: "tono", phone: "085637263625" })
  res.send({ success: true })
})

// 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 })
  }
})

// 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 })
  }
})

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

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

wrideveloper / miniclass-web