Pada Tutorial ExpressJS sebelumnya kita sudah berhasil menampilkan data pegawai dan sekarang kita akan mencoba menghapus data.
Sebelum dimulai agar kita bisa menghapus data kita perlu membuat sebuah tombol/link aksi yaitu edit dan delete. Kita akan menambahkan icon fontawesome yang ditanam di header. Tambahkan code berikut di bagian header pada file index.ejs agar kita bisa menambahkan icon pada button / link.
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
Sebetulnya kita bisa melihat dokumentasi penggunaan font awesome pada link https://fontawesome.com/start. Setelah memasang font awesome pada header index.ejs maka tambahkan beberapa baris berikut pada index.ejs untuk membuat tombol icon edit dan delete lihat script lengkap dibawah.
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>Data Pegawai</p>
<table class='table'>
<thead>
<tr>
<th scope='col'>#</th>
<th scope='col'>Nama</th>
<th scope='col'>Email</th>
<th scope='col'>Umur</th>
<th scope='col'>Kecamatan</th>
<th scope='col'>Action</th>
</tr>
</thead>
<tbody>
<% var no=1 %>
<% for(var i = 0; i < pegawai.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= pegawai[i].nama %></td>
<td><%= pegawai[i].email %></td>
<td><%= pegawai[i].umur %></td>
<td><%= pegawai[i].id_kec.nama %></td>
<td><a href="/pegawai/edit/<%= pegawai[i]._id %>"><i class="far fa-edit"></i></a> <a href="/pegawai/delete/<%= pegawai[i]._id %>" onclick="return confirm('Apa kamu yakin akan menghapus data ini')" ><i class="fas fa-trash" ></i></a> </td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
Jalankan perintah "npm start" pada terminal, kemudian buka browser dan ketikan alamat "localhost:3000" maka akan ada dua buah icon yaitu edit dan hapus, sengaja icon edit di buat karna pada tutorial ExpressJS selanjutnya kita akan membahas cara edit data.
Lanjut kita akan membuat tambahan fungsi pada controller yaitu menghapus data berdasarkan _id pegawai yang akan kita hapus datanya. Buka file PegawaiController.js di folder controllers lalu tambahkan code berikut.
//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');
}
});
}
Lihat script lengkapnya dibawah.
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');
}
});
}
module.exports = pegawaiController;
Langkah terakhir adalah memanggil fungsi yang sudah kita buat di controller tersebut pada router pegawai.js. Script pada pegawai.js di folder routes kita ubah menjadi seperti berikut ini.
pegawai.js
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)
});
module.exports = router;
Silahkan kalian coba seperti biasa dengan cara ketikan "npm start" di terminal dan buka "localhost:3000" di browser favorit kalian, setelah ada tampilan data pegawai klik ikon hapus di kolom action, maka data akan terhapus. Pada tutorial ExpressJS selanjutnya kita akan membahas edit data.
Baca Selanjutnya - CRUD Dengan ExpressJS & Mongoose Part 8 : Edit Data