Membangun Aplikasi Web Menggunakan Node.js

Indonesian (Bahasa Indonesia) translation by Meyria (you can also view the original English article)

Pengenalan

Selain membangun API, Node.js sangat bagus untuk membangun aplikasi web standar. Ini memiliki alat yang hebat untuk memenuhi selera pengembang web. Dalam tutorial ini, Anda akan membangun aplikasi web yang bisa berfungsi sebagai perpustakaan lokal.

Sementara membangun Anda akan belajar tentang beberapa jenis middleware, Anda akan melihat bagaimana menangani pengiriman form di Node.js, dan Anda juga bisa merujuk dua model.

Mari memulai.

Memulai

Mulailah dengan memasang generator express pada mesin anda.

1	npm install express-generator -g

Jalankan perintah generator express untuk menghasilkan aplikasi anda.

1	express tutsplus-library --view=pug

   create : tutsplus-library
   create : tutsplus-library/package.json
   create : tutsplus-library/app.js
   create : tutsplus-library/public
   create : tutsplus-library/routes
   create : tutsplus-library/routes/index.js
   create : tutsplus-library/routes/users.js
   create : tutsplus-library/views
   create : tutsplus-library/views/index.pug
   create : tutsplus-library/views/layout.pug
   create : tutsplus-library/views/error.pug
   create : tutsplus-library/bin
   create : tutsplus-library/bin/www
   create : tutsplus-library/public/javascripts
   create : tutsplus-library/public/images
   create : tutsplus-library/public/stylesheets
   create : tutsplus-library/public/stylesheets/style.css

   install dependencies:
     $ cd tutsplus-library && npm install

   run the app:
     $ DEBUG=tutsplus-library:* npm start

Sekarang bermigrasi ke pekerjaan Anda, buka package.json, dan buat dependensi yang sama dengan yang saya miliki di bawah ini.

#package.json

{
  "name": "tutsplus-library",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "connect-flash": "^0.1.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.5",
    "express-validator": "^4.2.1",
    "mongoose": "^4.11.12",
    "morgan": "~1.8.1",
    "pug": "~2.0.0-beta11",
    "serve-favicon": "~2.4.2"
  }
}

Jalankan perintah untuk menginstal paket.

1	npm install

Siapkan file entri

app.js dibuat saat Anda menjalankan perintah generator; Namun, Anda perlu mengatur konfigurasi ekstra. Edit file agar terlihat seperti yang saya miliki di bawah ini.

#app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
const session = require('express-session')
const expressValidator = require('express-validator')
const flash = require('connect-flash')
const mongoose = require('mongoose')

// 1
const genres = require('./routes/genres');
const books = require('./routes/books');

var app = express();

// 2
mongoose.Promise = global.Promise
const mongoDB = process.env.MONGODB_URI || 'mongodb://127.0.0.1/tutsplus-library'
mongoose.connect(mongoDB)

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 3
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}))

// 4
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
    var namespace = param.split('.')
    , root = namespace.shift()
    , formParam = root

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']'
    }
    return {
      param : formParam,
      msg : msg,
      value : value
    }
  }
}))

// 5
app.use(flash())
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')
  next()
})

// 6
app.use('/genres', genres);
app.use('/books', books);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Anda membutuhkan dua route yang akan Anda gunakan dalam membangun aplikasi ini. Anda akan segera membuat route file. Rute yang diperlukan ditetapkan sebagai nilai pada dua variabel berbeda yang digunakan saat menyiapkan middleware untuk route Anda.
Anda menetapkan Mongoose untuk menggunakan global.Promise. Variabel MongoDB ditugaskan MONGODB_URI untuk lingkungan kerja anda atau jalan ke server mongo lokal anda. Variabel ini dilewatkan sebagai argumen untuk terhubung ke server MongoDB yang sedang berjalan.
Anda menyiapkan session middleware menggunakan express-session. Middleware ini penting karena Anda akan menampilkan pesan sekejap di beberapa bagian aplikasi anda.
Anda menyiapkan middleware untuk validasi. Middleware ini akan digunakan untuk memvalidasi form input, memastikan pengguna aplikasi tidak mengirimkan form kosong. Validasi menggunakan paket yang terinstal, express-validator.
Anda menyiapkan middleware yang akan berguna saat menampilkan pesan kilat. Middleware ini menggunakan connect-flash.
Route untuk aplikasi disiapkan untuk memanfaatkan file route yang anda butuhkan. Permintaan yang menunjuk ke /genres dan /books akan menggunakan genre dan buku yang mengarahkan file masing-masing. Pada saat ini Anda belum membuat file route, namun anda akan segera melakukannya.

Model Buku dan Genre

Model Buku akan menggunakan Skema Mongoose untuk menentukan bagaimana buku akan terstruktur. Buat direktori yang disebut models, dan sebuah file baru bernama Book.js. Begini tampilannya.

#models/Book.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const bookSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a book name'
  },
  description: {
    type: String,
    trim: true
  },
  author: {
    type: String,
    trim: true,
  },
  genre: [{
    type: Schema.Types.ObjectId,
    ref: 'Genre'
  }]
})

module.exports = mongoose.model('Book', bookSchema)

Di sini anda memiliki empat field. Field terakhir digunakan untuk menyimpan genre yang dimiliki setiap buku. Bidang genre di sini merujuk pada model Genre, yang akan dibuat selanjutnya. Itu sebabnya tipe ini diatur ke Schema.Types.ObjectId, di mana id dari masing-masing genre yang dirujuk akan disimpan. ref menentukan model yang Anda referensikan. Perhatikan bahwa genre disimpan sebagai array, artinya buku bisa memiliki lebih dari satu genre.

Mari kita segera membuat model Genre.

#models/genre.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const genreSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a Genre name'
  }
})

module.exports = mongoose.model('Genre', genreSchema)

Untuk Genre Anda, Anda hanya perlu satu field: nama.

Route Genre Index dan View

Untuk tutorial ini, Anda akan menggunakan dua jalur route untuk genre anda: jalur untuk menambahkan genre baru, dan satu lagi yang mencantumkan genre yang anda miliki. Buat file di direktori route Anda yang disebut genres.js.

Mulailah dengan membutuhkan semua modul yang akan anda gunakan.

#routes/genres.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Genre = require('../models/Genre')

Selanjutnya, turunkan route yang menangani file index untuk genre anda.

router.get('/', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('genres', { genres: genres })
  }, (err) => {
    throw err
  })
});

Route ini akan dipanggil kapan pun permintaan diajukan ke /genres. Di sini Anda memanggil metode pencarian pada model Genre Anda untuk mendapatkan semua genre yang telah dibuat. Genre ini kemudian di-render pada template yang disebut genres. Ayo maju dan buat itu, tetapi pertama, perbarui layout.pug anda agar terlihat seperti ini:

#views/layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://bootswatch.com/paper/bootstrap.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
  body
    .container-fluid
      block header
        nav.navbar.navbar-inverse
          .container-fluid
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-2')
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
              a.navbar-brand(href='#') Local Library
            #bs-example-navbar-collapse-2.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='/books') View Books
                li
                  a(href='/books/add') Add New Book
                li
                  a(href='/genres') View Genres
                li
                  a(href='/genres/add') Add New Genre
        block content

Ini akan memberi anda pandangan struktur yang bagus untuk membantu navigasi. Sekarang buat file view bernama genre.pug. Dalam file ini, anda akan melakukan perulangan melalui genre yang dibuat dan menampilkan setiap genre dalam daftar yang tidak berurutan.

Berikut adalah bagaimana file akan terlihat.

#views/genres.pug

extends layout

block content
  h1 Genre
  ul.well.well-lg
    each genre, i in genres
      li.well.well-sm
        p #{genre.name}

Tambahkan Route Genre Baru dan View

Kembali ke routes/genres.js untuk menambahkan route yang akan menangani pembuatan genre baru.

#routes/genres.js

// 1
router.get('/add', (req, res, next) => {
  res.render('addGenre')
})

// 2
router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addgenres', { genre, errors })
  }

  const genre = (new Genre(req.body)).save()
    .then((data) => {
      res.redirect('/genres')
    })
    .catch((errors) => {
      console.log('oops...')
      console.log(errors)
    })
})

// 3
module.exports = router;

Tugas router ini adalah dengan hanya menampilkan halaman untuk menambahkan route baru. Router ini dipanggil setiap kali permintaan dibuat ke jalur /genres/add.
Router ini menangani pengajuan form. Saat form dikirimkan, kitai periksa untuk memastikan bahwa sebuah nama dimasukkan oleh pengguna. Jika tidak ada nama yang dimasukkan, halaman akan dirender-ulang. Jika diperiksa bagus, genre akan disimpan dan pengguna dialihkan ke halaman /genres.
Modul ini diekspor sebagai sebuah router.

Sekarang snda bisa terus maju dan membuat halaman untuk menambahkan genre baru.

#views/addGenre.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/genres/add")
        .form-group
          label.col-lg-2.control.label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Route Buku dan View

Buat sebuah file route baru untuk buku, dan nama diberi nama books.js. Seperti yang anda lakukan sebelumnya dengan genre, mulailah dengan membutuhkan modul-modul yang diperlukan.

#routes/books.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Book = require('../models/Book')
const Genre = require('../models/Genre')

Selanjutnya, mengatur router untuk menampilkan semua buku yang disimpan di Perpustakaan. Coba itu sendiri seperti anda mengaturnya pada genre; anda selalu dapat memeriksa kembali untuk melakukan koreksi.

Saya kira anda akan mencobanya—berikut adalah bagaimana hal ini akan terlihat.

router.get('/', (req, res, next) => {
  const books = Book.find({}).exec().then((books) => {
    res.render('books', { books: books })
  }, (err) => {
    throw err
  })
});

Ketika router ini dipanggil, permintaan dibuat untuk menemukan semua buku-buku yang disimpan dalam database. Jika semuanya berjalan lancar, buku-buku akan ditampilkan pada halaman /books, jika tidak sebuah error akan muncul.

Anda perlu membuat file baru untuk menampilkan semua buku, dan berikut adalah bagaimana hal ini akan terlihat.

#views/books.pug

extends layout

block content
  h1 Books
  ul.well.well-lg
    each book, i in books
      li.well.well-sm
        a(href=`/books/show/${book.id}`) #{book.name}
        p= book.description

Anda cukup melakukan perulangan melalui buku-buku yang dikembalikan dan mengeluarkan nama dan deskripsi dari setiap buku yang menggunakan daftar yang tidak berurutan. Nama buku mengarah ke halaman masing-masing buku.

Route Tambah Buku Baru dan View

Pada router berikutnya anda akan mengatur penanganan penambahan buku baru. Kedua router akan digunakan di sini: yang satu hanya akan membuat halaman, dan yang lain akan menangani pengajuan form.

Ini adalah bagaimana router terlihat.

router.get('/add', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('addBooks', { genres })
    })
    .catch((err) => {
      throw err
    })
})

router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()
  req.checkBody('description', 'Description is required').notEmpty()
  req.checkBody('genre', 'Genre is required').notEmpty

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addBooks', { book, errors })
  }

  const book = (new Book(req.body)).save()
    .then((data) => {
      res.redirect('/books')
    })
    .catch((errors) => {
      console.log('oops...')
    })
})

Di router pertama, anda menampilkan halaman /addBooks. Router ini dipanggil ketika permintaan dibuat pada lokasi /add. Sejak buku-buku ditambahkan seharusnya memiliki genre, anda ingin menampilkan genre yang sudah disimpan ke database.

1	const genres = Genre.find({}).exec()
2	.then((genres) => {

Kode di atas mencari semua genre dalam database anda dan mengembalikan mereka pada variabel genre. Dengan ini, anda akan dapat melakukan perulangan melaui genre-genre dan menampilkannya sebagai sebuah checkbox.

Router kedua menangani pengajuan form. Pertama, anda cek isi permintaannya untuk memastikan bahwa beberapa field tidak kosong. Disinilah middleware express-validator yang anda atur dalam app.js menjadi berguna. Jika ada kesalahan, halaman di-render ulang. Jika tidak ada, misalnya Buku baru disimpan dan pengguna akan diarahkan ke halaman /books.

Mari kita lanjutkan dan buat view untuk ini.

Buat sebuah file view baru bernama addBooks.pug. Perhatikan bahwa nama view sesuai dengan parameter pertama yang diberikan kepada res.render. Hal ini karena anda me-render sebuah template. Selama pengalihan, anda cukup melalui lokasi yang anda ingin arahkan ulang, seperti yang anda lakukan dengan res.redirect('/books').

Setelah menetapkan itu, berikut seperti apa seharusnya view akan terlihat.

#views/addBooks.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/books/add")
        .form-group
          label.col-lg-2.control-label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          label.col-lg-2.control-label Author
          .col-lg-10
            input.form-control(type="text", name='author')
        .form-group
          label.col-lg-2.control-label Book Description
          .col-lg-10
            textarea#textArea.form-control(rows='3', name='description')
        .form-group
          label.col-lg-2.control-label Genre
          .col-lg-10
            for genre in genres
              .checkbox
                input.checkbox(type='checkbox', name='genre', id=genre._id, value=genre._id, checked=genre.checked)
                label(for=genre._id) #{genre.name}
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Hal yang penting untuk dicatat di sini adalah aksi form dan metode. Ketika tombol kirim diklik, anda membuat permintaan POST ke /books/add. Satu hal lagi—sekali lagi anda melakuan perulangan melalui koleksi genre yang dikembalikan dan menampilkannya masing-masing.

Route Tampil Buku dan View

Mari kita turunkan route untuk menangani permintaan yang dilakukan untuk setiap halaman buku. Sementara anda di sana, sangat penting untuk mengekspor modul anda juga.

#routes/books.js

router.get('/show/:id', (req, res, next) => {
  const book = Book.findById({ _id: req.params.id })
  .populate({
    path: 'genre',
    model: 'Genre',
    populate: {
      path: 'genre',
      model: 'Book'
    }
  })
  .exec()
    .then((book) => {
      res.render('book', { book })
    })
    .catch((err) => {
      throw err
    })
})

module.exports = router;

Tidak ada keajaiban yang terjadi sini

Pertama, permintaan yang dilakukan ke router ini harus memiliki id: yaitu id dari buku. Id ini diperoleh dari parameter permintaan menggunakan req.params.id. Ini digunakan untuk mengidentifikasi buku tertentu yang harus diperoleh dari database, sebagai id yang unik. Ketika buku ditemukan, nilai buku genre diisi dengan semua genre yang telah disimpan untuk contoh buku ini. Jika semua berjalan lancar, view buku akan di-render, jika tidak sebuah error akan muncul.

Mari kita buat view untuk sebuah buku. Berikut adalah bagaimana hal ini akan terlihat.

block content
  .well.well-lg
    h1 #[strong Name:] #{book.name}
    ul
      li #[strong Description:] #{book.description}
      li #[strong Author]: #{book.author}
      li #[strong Genre:]
        each genre in book.genre
          #{genre.name}
          |,

Anda dapat memuliai node server anda dengan menjalankan:

1	DEBUG=tutsplus-library:* npm start

Kesimpulan

Sekarang Anda tahu bagaimana membangun sebuah aplikasi web standar di Node.js, bukan hanya sebuah aplikasi agenda sederhana. Anda mampu untuk menangani pengiriman form, mereferensi dua model, dan mengatur beberapa middleware.

Anda dapat melangkah lebih jauh dengan mengembangkan aplikasinya—coba tambahkan kemampuan untuk menghapus sebuah buku. Pertama tambahkan tombol ke halaman tampil, dan kemudian pergi ke file route dan tambahkan router untuk ini. Perhatikan bahwa ini akan menjadi permintaan POST.

Anda juga bisa memikirkan lebih banyak fitur untuk menambahkannya pada aplikasi. Saya harap anda menikmatinya.