Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Pada Pembahasan sebelumnya kita sudah membuat CRUD merk dan memasang datatables. Pada tutorial kali ini kita akan membuat CRUD dari Barang mulai dari membuat form input dan menampilkan data di menu barang dan proses save, update dan delete akan di bahas kali ini. Untuk itu silahkan kalian baca tutorial sebelumnya untuk mengikuti ke tahap ini.
Pada tutorial sebelum2nya kita sudah membuat router atau menu barang di app.js. selanjutnya kita akan membuat controller dengan nama BarangController.js, masukan script dibawah ini.
var mongoose = require('mongoose');
var Barang = require('../models/Barang');
var Kategori = require('../models/Kategori');
var Satuan = require('../models/Satuan');
var Merk = require('../models/Merk');
var barangController = {};
barangController.save = function(req, res){
var barang = new Barang(req.body);
barang.save(function(err){
if(err){
console.log(err);
res.redirect('/barang');
}else{
console.log('save sukses');
res.redirect('/barang');
}
})
}
barangController.delete = function(req, res){
Barang.findOne({ _id: req.params._id }, function(err, row){
if(row){
Barang.remove({ _id: req.params._id }, function(err){
if(err){
console.log('delete error', err);
}else{
console.log('delete sukses');
res.redirect('http://localhost:3000/barang');
}
});
}else{
res.redirect('/barang');
}
});
}
barangController.edit = function(req, res){
var id = req.params._id;
Barang.findOne({ _id: id }, function(err, barang){
if(barang){
Kategori.find({}, function(err, kat){
Kategori.findOne({ _id:barang.id_kategori }, function(err, k){
Satuan.find({}, function(err, sat){
Satuan.findOne({ _id:barang.id_satuan }, function(err, s){
Merk.find({}, function(err, merk){
Merk.findOne({ _id:barang.id_merk }, function(err, m){
res.render('barang/edit_barang', { barang: barang, kategori: kat, satuan: sat, merk:merk, k:k, s:s, m:m, title: 'Form Edit Barang' });
});
});
});
});
});
});
}else{
res.redirect('../');
}
});
}
barangController.update = function(req, res){
Barang.findByIdAndUpdate(req.params._id, {
$set: {
nama: req.body.nama,
singkatan: req.body.singkatan,
id_kategori: req.body.id_kategori,
id_satuan: req.body.id_satuan,
id_merk: req.body.id_merk,
harga_jual: req.body.harga_jual
}
}, { new: true }, function(err, barang){
if(err){
console.log(err);
res.render('edit_barang', { barang: req.body });
}
res.redirect('/barang');
})
}
module.exports = barangController;
Selanjutnya ke route, kita akan mengubah file barang.js di folder routes
barang,js
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var barang = require('../controllers/BarangController.js');
var Barang = require('../models/Barang');
var Kategori = require('../models/Kategori');
var Satuan = require('../models/Satuan');
var Merk = require('../models/Merk');
/* GET home page. */
router.get('/', function(req, res, next) {
Barang.find({}, function(err, barang){
res.render('barang/index', { barang: barang, title: 'Data Barang' });
}).populate('id_kategori id_satuan id_merk');
});
router.get('/add', function(req, res, next){
Kategori.find({}, function(err, kategori){
Satuan.find({}, function(err, satuan){
Merk.find({}, function(err, merk){
res.render('barang/add', { kategori: kategori, satuan: satuan, merk: merk });
});
});
});
});
router.post('/insert', function(req, res){
barang.save(req, res);
});
router.get('/delete/:_id', function(req, res){
barang.delete(req, res);
});
router.get('/edit/:_id', function(req, res){
barang.edit(req, res);
});
router.post('/update/:_id', function(req, res){
barang.update(req, res);
});
module.exports = router; Setelah controller dan route sudah di buat kita lanjut ke view untuk menampilkan datanya. silahkan ubah file index.ejs di dalam folder views/barang/
views/barang/index.ejs
<% layout('../layout/page') -%>
<% block('title', title) %>
<div class='row'>
<div class='col-md-12'>
<a href='/barang/add'><button class='btn btn-primary'>Tambah</button></a>
<br><br>
<table class='table' id='tabel_barang' >
<thead>
<tr>
<th>#</th>
<th>Kode Barang</th>
<th>Nama Barang</th>
<th>Kategori</th>
<th>Satuan</th>
<th>Merk</th>
<th>Harga</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no=1; for (var i = 0; i < barang.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= barang[i].kode %></td>
<td><%= barang[i].nama %></td>
<td><%= barang[i].id_kategori.nama %></td>
<td><%= barang[i].id_satuan.nama %></td>
<td><%= barang[i].id_merk.nama %></td>
<td><%= barang[i].harga_jual %></td>
<td><a href='/barang/edit/<%= barang[i]._id %>'><i class='far fa-edit'></i></a> <a href='barang/delete/<%= barang[i]._id %>' onclick='return confirm("Apa kamu yakin akan menghapus data ini?")'><i class='fas fa-trash'></i></a> </td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
Setelah itu kita akan membuat tampilan form input data barang, silahkan buat file baru bernama add.ejs di views/barang/
view/barang/add.ejs
<% layout('../layout/page') %>
<% block('title', 'Form Input Barang') %>
<hr>
<form action='/barang/insert' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Kode</label>
<input type='text' name='kode' class='form-control' placeholder='Enter Kode Barang' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' placeholder='Enter Nama Barang' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Singkatan</label>
<input type='text' name='singkatan' class='form-control' placeholder='Enter Singkatan Barang' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Kategori</label>
<select type='text' name='id_kategori' class='form-control' required>
<% for(var i = 0; i < kategori.length; i++){ %>
<option value='<%= kategori[i]._id %>' ><%= kategori[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Satuan</label>
<select type='text' name='id_satuan' class='form-control' required>
<% for(var i = 0; i < satuan.length; i++){ %>
<option value='<%= satuan[i]._id %>' ><%= satuan[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Merk</label>
<select type='text' name='id_merk' class='form-control' required>
<% for(var i = 0; i < merk.length; i++){ %>
<option value='<%= merk[i]._id %>' ><%= merk[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Harga</label>
<input type='text' name='harga_jual' class='form-control' placeholder='Enter Harga Barang' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
Selanjutnya kita akan membuat form edit data barang, silahkan buat file baru dengan nama edit_barang.ejs di dalam folder views/barang/ dan masukan script dibawah
views/barang/edit_barang.ejs
<% layout('../layout/page') %>
<% block('title', title) %>
<hr>
<form action='/barang/update/<%= barang._id %>' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' value='<%= barang.nama %>' class='form-control' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Singkatan</label>
<input type='text' name='singkatan' value='<%= barang.singkatan %>' class='form-control' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Kategori</label>
<select type='text' name='id_kategori' class='form-control' required>
<% for(var i = 0; i < kategori.length; i++){ %>
<option value='<%= kategori[i]._id %>' <%= kategori[i]._id.toString()===k._id.toString() ? "selected" : "" %>><%= kategori[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Satuan</label>
<select type='text' name='id_satuan' class='form-control' required>
<% for(var i = 0; i < satuan.length; i++){ %>
<option value='<%= satuan[i]._id %>' <%= satuan[i]._id.toString()===s._id.toString() ? "selected" : "" %>><%= satuan[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Merk</label>
<select type='text' name='id_merk' class='form-control' required>
<% for(var i = 0; i < merk.length; i++){ %>
<option value='<%= merk[i]._id %>' <%= merk[i]._id.toString()===m._id.toString() ? "selected" : "" %>><%= merk[i].nama %></option>
<% } %>
</select>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Harga</label>
<input type='text' name='harga_jual' class='form-control' value='<%= barang.harga_jual %>' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
dan yang terakhir kita akan memasang datatables di tabel data barang silahkan edit page.ejs di folder views/layout/ dan tambahkan script dibawah
$('#tabel_barang').DataTable();
Lihat script lengkapnya.
<!DOCTYPE html>
<html>
<head>
<title><%=blocks.title%></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/stylesheets/style.css" rel="stylesheet"></link>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"></link>
</head>
<body>
<header>
<%-blocks.header%>
</header>
<div class="container-fluid">
<%-partial('../partials/navigasi')%>
<h1>
<%=blocks.title%></h1>
<%-body -%>
</div>
<footer>
<%-blocks.footer%>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function(){
$('#tabel_kategori').DataTable();
$('#tabel_satuan').DataTable();
$('#tabel_merk').DataTable();
$('#tabel_barang').DataTable();
});
</script>
</body>
</html>
Untuk mencobanya silahkan ketik "npm start" di CMD setelah itu akses "localhost:3000" di browser favorit kalian dan pilih menu master data -> barang maka akan ada tampilan seperti gambar dibawah.
Sekian Tutorial Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 9 : CRUD Barang, Bila ada pertanyaan ataupun kesalahan di artikel ini silahkan kita sharing di kolom komentar.