Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 6 : CRUD Satuan

Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Pada Pembahasan sebelumnya kita sudah membuat CRUD Kategori. Pada tutorial kali ini kita akan membuat CRUD dari Satuan 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.

Baca Sebelumnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 5 : CRUD Kategori

Kita mulai, hal pertama yang harus di lakukan adalah mendeskripsikan router satuan di file app.js, tambahkan script dibawah.

var satuanRouter = require('./routes/satuan');

app.use('/umum/satuan', satuanRouter);

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 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);

//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;

Tahap selanjunya membuat controller, silahkan buat file SatuanController.js di dalam folder controllers

var mongoose = require('mongoose');
var Satuan = require('../models/Satuan');

var satuanController = {};

satuanController.save = function(req, res){
  var satuan = new Satuan(req.body);

  satuan.save(function(err){
     if(err){
         console.log(err);
         res.render('/umum');
        }else{
            console.log('save sukses');
            res.redirect('/umum');
           }
    })

}

satuanController.delete = function(req, res){
  Satuan.findOne({ _id: req.params._id }, function(err, row){
     if(row){
         Satuan.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');
           }
    });

}

satuanController.edit = function(req, res){
  var id = req.params._id;
  Satuan.findOne({ _id: id }, function(err, sat){
     if(sat){
         res.render('satuan/edit_satuan', { satuan: sat, title: 'Form Edit Satuan' });
        }else{
            res.redirect('../');

           }
    });
}

satuanController.update = function(req, res){
  Satuan.findByIdAndUpdate(req.params._id, {
     $set: {
         nama: req.body.nama
        }
    }, { new: true }, function(err, sat){
       if(err){
           console.log(err);
           res.render('edit_satuan', { satuan: req.body });
          }
       res.redirect('/umum');
      })
}

module.exports = satuanController;

Selanjutnya kita akan mengubah route file index.js dan membuat file satuan.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');

/* 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){
    res.render('umum/index', { kategori: kat, satuan: sat, title: 'Data Umum' } );
   });
 });
 
 });

module.exports = router;

satuan.js

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var satuan = require('../controllers/SatuanController.js');

/* GET home page. */
router.get('/add', function(req, res, next) {
    res.render('satuan/index');
});

router.post('/insert', function(req, res){
  satuan.save(req, res);
});

router.get('/delete/:_id', function(req, res){
  satuan.delete(req, res);
});

router.get('/edit/:_id', function(req, res){
  satuan.edit(req, res);
});

router.post('/update/:_id', function(req, res){
  satuan.update(req, res);
});

module.exports = router;

Setelah controller dan route sudah di buat kita lanjut ke view untuk menampilkan tabel. 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='/umum/satuan/add'><button class='btn btn-primary'>Tambah</button></a>
<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='#'><button class='btn btn-primary'>Tambah</button></a>
 </div>
</div>

Setelah itu kita akan membuat tampilan form input data satuan, silahkan buat folder baru dengan nama satuan di dalam views, di dalamnya buat file baru bernama index.ejs


view/satuan/index.ejs

<% layout('../layout/page') %>
<% block('title', 'Form Input Satuan') %>
<hr>
<form action='/umum/satuan/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 Satuan' required>
   </div>
   
   <button type='submit' class='btn btn-primary'>Submit</button>
</form>

Pada tahap ini kita sudah bisa menjalankan insert dan delete. Untuk mencobanya silahkan ketik "npm start" di CMD setelah itu akses "localhost:3000"

Yang terkahir kita akan membuat form edit data satuan, silahkan buat file baru dengan nama edit_satuan.ejs di dalam folder views/satuan dan masukan script dibawah


views/satuan/edit_satuan.ejs

<% layout('../layout/page') %>
<% block('title', title) %>
<hr>
<form action='/umum/satuan/update/<%= satuan._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 Satuan' value='<%= satuan.nama %>'  required>
 </div>
 <button type='submit' class='btn btn-primary'>Submit</button>
</form>

Pada tahap terakhir ini kita bisa mengedit data satuan, silahkan kalian jalankan kembali.

Sekian Tutorial Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 6 : CRUD Satuan, pada pembahasan selanjutnya kita akan membuat CRUD merk.

Baca Selanjutnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 7 : CRUD Merk