Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Pada Pembahasan sebelumnya kita sudah membuat routes untuk pengaturan setiap halaman yaitu menu umum dan barang. Di halaman umum akan menampilkan data kategori, satuan dan merk, termasuk tombol untuk menuju ke form input data. Pada tutorial sebelumnya sebenarnya kita sudah membuat route ke form input data kategori tapi belum menampilkan form inputnya. Nah pada tutorial kali ini kita akan membuat CRUD dari Kategori mulai dari membuat form input dan menampilkan data di menu umum dan proses save, update dan delete akan di bahas kali ini. Untuk itu silahkan kalian baca tutorial sebelumnya untuk mengikuti ke tahap ini.
Hal pertama yang harus di lakukan adalah membuat folder controllers dan membuat file KategoriController.js
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market>mkdir controllers
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market>vim controllers/KategoriController.js
dan masukan script dibawah ini.
KategoriController.js
var mongoose = require('mongoose');
var Kategori = require('../models/Kategori');
var kategoriController = {};
kategoriController.save = function(req, res){
var kategori = new Kategori(req.body);
kategori.save(function(err){
if(err){
console.log(err);
res.render('/umum');
}else{
console.log('save sukses');
res.redirect('/umum');
}
})
}
kategoriController.delete = function(req, res){
Kategori.findOne({ _id: req.params._id }, function(err, row){
if(row){
Kategori.remove({ _id: req.params._id }, function(err){
if(err){
console.log('delete error', err);
}else{
console.log('delete sukses');
res.redirect('http://localhost:3000/umum');
}
});
}else{
res.redirect('/umum');
}
});
}
kategoriController.edit = function(req, res){
var id = req.params._id;
Kategori.findOne({ _id: id }, function(err, kat){
if(kat){
res.render('kategori/edit_kategori', { kategori: kat, title: 'Form Edit Kategori' });
}else{
res.redirect('../');
}
});
}
kategoriController.update = function(req, res){
Kategori.findByIdAndUpdate(req.params._id, {
$set: {
nama: req.body.nama
}
}, { new: true }, function(err, kat){
if(err){
console.log(err);
res.render('edit_kategori', { kategori: req.body });
}
res.redirect('/umum');
})
}
module.exports = kategoriController;
Selanjutnya kita akan mengubah route file index.js dan kategori.js di dalam folder routes. lihat script lengkapnya dibawah.
index.js
var express = require('express');
var router = express.Router();
var Kategori = require('../models/Kategori');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});
router.get('/umum', function(req, res, next) {
Kategori.find({}, function(err, kat){
res.render('umum/index', { kategori: kat, title: 'Data Umum' } );
});
});
module.exports = router;
kategori.js
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var kategori = require('../controllers/KategoriController.js');
/* GET home page. */
router.get('/add', function(req, res, next) {
res.render('kategori/index');
});
router.post('/insert', function(req, res){
kategori.save(req, res);
});
router.get('/delete/:_id', function(req, res){
kategori.delete(req, res);
});
router.get('/edit/:_id', function(req, res){
kategori.edit(req, res);
});
router.post('/update/:_id', function(req, res){
kategori.update(req, res);
});
module.exports = router;
Setelah controller dan route sudah di buat kita lanjut ke view untuk menampilkan tabel dan fomnya. silahkan ubah file index.ejs di dalam folder views/umum/ untuk menampilkan data kategori.
views/umum/index.ejs
<% layout('../layout/page') -%>
<% block('title', title) %>
<hr>
<div class=row>
<div class='col-md-4'>
<h4 align='center'>Kategori</h4><a href='/umum/kategori/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<table class='table'>
<thead>
<tr>
<th>#</th>
<th>Nama Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < kategori.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= kategori[i].nama %></td>
<td><a href='/umum/kategori/edit/<%= kategori[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/kategori/delete/<%= kategori[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 class='col-md-4'>
<h4 align='center'>Satuan</h4><a href='#'><button class='btn btn-primary'>Tambah</button></a>
</div>
<div class='col-md-4'>
<h4 align='center'>Merk</h4><a href='#'><button class='btn btn-primary'>Tambah</button></a>
</div>
</div>
Setelah itu kita akan membuat tampilan form input data kategori, silahkan ubah file index.ejs di dalam folder views/kategori/
views/kategori/index.ejs
<% layout('../layout/page') %>
<% block('title', 'Form Input Kategori') %>
<hr>
<form action='/umum/kategori/insert' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' placeholder='Enter Nama Kategori' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
Selanjutnya kita akan membuat form edit data kategori, silahkan buat file baru dengan nama edit_kategori.ejs di dalam folder views/kategori dan masukan script dibawah
views/kategori/edit_kategori.ejs
<% layout('../layout/page') %>
<% block('title', title) %>
<hr>
<form action='/umum/kategori/update/<%= kategori._id %>' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' placeholder='Enter Nama Kategori' value='<%= kategori.nama %>' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
Pada tahap ini kita sudah membuat CRUD kategori, silahkan kalian jalankan seperti biasa "npm start" dan buka browser ketikan "localhost:3000" pilih menu master data->umum coba kalian input, edit dan delete seharusnya bisa. klo misalnya ada masalah atau ada yang salah silahkan beritahu di dalam kolom komentar. berikut tampilan gambar CRUD kategori
Sekian Tutorial Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 5 : CRUD Kategori, pada pembahasan selanjutnya kita akan membuat CRUD satuan
Baca Selanjutnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 6 : CRUD Satuan