Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Pada Pembahasan sebelumnya kita sudah membuat CRUD Satuan. Pada tutorial kali ini kita akan membuat CRUD dari Merk 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 mendeskripsikan router merk di file app.js, tambahkan script dibawah.
var merkRouter = require('./routes/merk');
app.use('/umum/merk', merkRouter);
Lihat script lengkapnya.
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var barangRouter = require('./routes/barang');
var kategoriRouter = require('./routes/kategori');
var satuanRouter = require('./routes/satuan');
var merkRouter = require('./routes/merk');
var app = express();
// view engine setup
app.engine('ejs', require('ejs-locals'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/barang', barangRouter);
app.use('/umum/kategori', kategoriRouter);
app.use('/umum/satuan', satuanRouter);
app.use('/umum/merk', merkRouter);
//koneksi
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/mini_market', { useNewUrlParser: true })
.then(() => console.log('berhasil terhubung'))
.catch((err) => console.error(err));
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// 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;
Selanjunya membuat controller, silahkan buat file MerkController.js di dalam folder controllers
MerkController.js
var mongoose = require('mongoose');
var Merk = require('../models/Merk');
var merkController = {};
merkController.save = function(req, res){
var merk = new Merk(req.body);
merk.save(function(err){
if(err){
console.log(err);
res.render('/umum');
}else{
console.log('save sukses');
res.redirect('/umum');
}
})
}
merkController.delete = function(req, res){
Merk.findOne({ _id: req.params._id }, function(err, row){
if(row){
Merk.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');
}
});
}
merkController.edit = function(req, res){
var id = req.params._id;
Merk.findOne({ _id: id }, function(err, merk){
if(merk){
res.render('merk/edit_merk', { merk: merk, title: 'Form Edit Merk' });
}else{
res.redirect('../');
}
});
}
merkController.update = function(req, res){
Merk.findByIdAndUpdate(req.params._id, {
$set: {
nama: req.body.nama
}
}, { new: true }, function(err, merk){
if(err){
console.log(err);
res.render('edit_merk', { merk: req.body });
}
res.redirect('/umum');
})
}
module.exports = merkController;
Selanjutnya kita akan mengubah route file index.js dan membuat file merk.js di dalam folder routes. lihat script lengkapnya dibawah.
index.js
var express = require('express');
var router = express.Router();
var Kategori = require('../models/Kategori');
var Satuan = require('../models/Satuan');
var Merk = require('../models/Merk');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});
router.get('/umum', function(req, res, next) {
Kategori.find({}, function(err, kat){
Satuan.find({}, function(err, sat){
Merk.find({}, function(err, merk){
res.render('umum/index', { kategori: kat, satuan: sat, merk: merk, title: 'Data Umum' } );
});
});
});
});
module.exports = router;
merk.js
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var merk = require('../controllers/MerkController.js');
/* GET home page. */
router.get('/add', function(req, res, next) {
res.render('merk/index');
});
router.post('/insert', function(req, res){
merk.save(req, res);
});
router.get('/delete/:_id', function(req, res){
merk.delete(req, res);
});
router.get('/edit/:_id', function(req, res){
merk.edit(req, res);
});
router.post('/update/:_id', function(req, res){
merk.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/umum/
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>
<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='/umum/satuan/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<br>
<table class='table'>
<thead>
<tr>
<th>#</th>
<th>Nama Satuan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < satuan.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= satuan[i].nama %></td>
<td><a href='/umum/satuan/edit/<%= satuan[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/satuan/delete/<%= satuan[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'>Merk</h4><a href='/umum/merk/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<br>
<table class='table'>
<thead>
<tr>
<th>#</th>
<th>Nama Merk</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < merk.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= merk[i].nama %></td>
<td><a href='/umum/merk/edit/<%= merk[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/merk/delete/<%= merk[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 merk, silahkan buat folder baru dengan nama merk di dalam views, di dalamnya buat file baru bernama index.ejs
view/merk/index.ejs
<% layout('../layout/page') %>
<% block('title', 'Form Input Merk') %>
<hr>
<form action='/umum/merk/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 Merk' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
Yang terkahir kita akan membuat form edit data merk, silahkan buat file baru dengan nama edit_merk.ejs di dalam folder views/merk dan masukan script dibawah
views/merk/edit_merk.ejs
<% layout('../layout/page') %>
<% block('title', title) %>
<hr>
<form action='/umum/merk/update/<%= merk._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 Merk' value='<%= merk.nama %>' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
Untuk mencobanya silahkan ketik "npm start" di CMD setelah itu akses "localhost:3000" di browser favorit kalian
Sekian Tutorial Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 7 : CRUD Merk, Bila ada pertanyaan ataupun kesalahan di artikel ini silahkan kita sharing di kolom komentar.