Pada tutorial ExpressJS sebelumnya kita sudah bisa menghapus data, maka selajutnya kita akan mecoba edit data. Konsep edit adalah mengambil sebuah _id dengan metode get lalu kita update datanya berdasarkan id tersebut.
Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 7 : Delete Data
Selanjutnya yang perlu dipersiapkan adalah sebuah form untuk menampilkan form edit ditambah sebuah fungsi untuk melakukan update data. Form edit akan kita buat pada folder views sedangkan fungsi update akan kita buat pada folder routes yang didalamnya dipanggil dari file yang tersimpan di controllers. Pertama kita kita buah dulu fungsi yang akan kita gunakan untuk mengarahkan ke form edit yang akan kita buat di file PegawaiController.js.
var mongoose = require('mongoose');
var Pegawai = require('../models/Pegawai');
var pegawaiController = {};
pegawaiController.save = function(req, res){
var pegawai = new Pegawai(req.body);
pegawai.save(function(err){
if(err){
console.log(err);
res.render('index');
}else{
console.log('save sukses');
res.redirect('../');
}
});
};
//hapus data
pegawaiController.delete = function(req, res){
Pegawai.findOne({ _id: req.params._id }, function(err, row){
if(row){
console.log(row);
Pegawai.remove({ _id: req.params._id }, function(err){
if(err){
console.log('delete error', err);
}else{
console.log('delete sukses');
res.redirect('http://localhost:3000');
}
});
}else{
res.redirect('http://localhost:3000');
}
});
}
pegawaiController.edit = function(req, res){
var id = req.params._id;
Pegawai.findOne({ _id: id }, function(err, pegawai){
if(pegawai){
console.log(pegawai);
Kecamatan.find({}, function(err, kec){
Kecamatan.findOne({ _id:pegawai.id_kec }, function(err, x){
console.log(x);
res.render('editpegawai', {pegawai: pegawai, title: 'CRUD', kecamatan: kec, x: x});
});
});
}else{
res.redirect('../');
}
});
};
pegawaiController.update = function(req, res){
Pegawai.findByIdAndUpdate(req.params._id, {
$set: { nama: req.body.nama,
email: req.body.email,
umur: req.body.umur,
id_kec: req.body.id_kec
}
}, { new: true }, function(err, pegawai){
if(err){
console.log(err);
res.render('editpegawai', { pegawai: req.body });
}
res.redirect('http://localhost:3000');
});
}
module.exports = pegawaiController;
Agar fungsi yang sudah kita buat di controller dapat berjalan maka kita harus mengubah code pada router pegawai.js dengan menambahkan beberapa fungsi berikut.
router.get('/edit/:_id', function(req, res){
pegawai.edit(req, res);
});
//update
router.post('/update/:_id', function(req, res){
pegawai.update(req, res);
});
Lihat script lengkapnya dibawah.
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var pegawai = require('../controllers/PegawaiController.js');
var kecamatan = require('../models/Kecamatan.js');
router.get('/', function(req, res){
kecamatan.find({}, function(err, kec){
console.log(kec);
res.render('pegawai', { kecamatan: kec, title: 'CRUD Pegawai' });
}).select('_id nama');
});
router.post('/tambah', function(req, res){
pegawai.save(req, res);
});
//delete
router.get('/delete/:_id', function(req,res){
pegawai.delete(req, res)
});
//edit
router.get('/edit/:_id', function(req, res){
pegawai.edit(req, res);
});
//update
router.post('/update/:_id', function(req, res){
pegawai.update(req, res);
});
module.exports = router;
Fungsi router edit sudah kita buat selanjutnya karena pada fungsi tersebut merender ke template yaitu editpegawai.ejs maka kita wajib membuat file editpegawai.ejs yang akan kita buat dengan script berikut.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Edit Data</p>
<form action='/pegawai/update/<%= pegawai._id %>' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' id='' placeholder='Enter Name' value='<%= pegawai.nama %>' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Email</label>
<input type='text' name='email' class='form-control' id='' placeholder='Enter Email' value='<%= pegawai.email %>' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Umur</label>
<input type='text' name='umur' class='form-control' id='' placeholder='Enter Umur' value='<%= pegawai.umur%>' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Kecamatan</label>
<select type='text' name='id_kec' class='form-control' required>
<option value='<%= x._id %>' selected><%= x.nama %></option>
<% for(var i=0; i < kecamatan.length; i++){ %>
<option value='<%= kecamatan[i]._id %>'><%= kecamatan[i].nama %></option>
<% } %>
</select>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
</body>
<script style='javascript' src='/bootstrap/js/bootstrap.min.js'>
</html>
Jalankan "npm start" pada terminal, lalu akses browser ketikan "localhost:3000"
Baca Selanjutnya - CRUD Dengan ExpressJS & Mongoose Part 9 : Login Dan Logout