Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 10 : CRUD Pegawai

Sunday, June 21, 2020

Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Pada Pembahasan sebelumnya kita sudah membuat CRUD Barang. Pada tutorial kali ini kita akan membuat CRUD Pegawai mulai dari membuat form input dan menampilkan data di menu pegawai dan proses save, update, delete dan autentikasi atau hak akses 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 9 : CRUD Barang

Kita deklarasikan dlu field/kolom yang ada di tabel/collection pegawai.

Pegawai

- id

- nip

- nama

- email

- tempat_lahir

- tanggal_lahir

- alamat

- jabatan

- gaji

- password

Langkah selanjutnya yaitu membuat skema user di folder models dengan nama file Pegawai.js dan masukan script dibawah.

models/Pegawai.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var pegawaiSchema = new Schema(
{
   nip: { type: String, required: true },
   nama: { type: String, required: true },
   email: { type: String, required: true },
   tempat_lahir: { type: String, required: true },
   tanggal_lahir: { type: Date, required: true },
   alamat: String ,
   jabatan: { type: String, required: true },
   gaji: { type: Number, required: true },
   jabatan: { type: String, required: true },
   password: { type: String, required: true }
},
{
   timestamps: true
}
);

module.exports = mongoose.model('pegawai', pegawaiSchema);

Setelah membuat schema pegawai kita lanjut akan membuat menu pegawai. kita ubah file navigasi.ejs yang ada di folder views/partials/ seperti di bawah ini

views/partials/navigasi.ejs

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Admin</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Master Data <span class="sr-only">(current)</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="/umum">Umum</a>
	  <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/barang">Barang</a>
          <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="/pegawai">Pegawai</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Transaksi</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Laporan</a>
      </li>
    </ul>
    <span class="navbar-text">
      <a>Logout</a>
    </span>
  </div>
</nav>

Selanjutnya kita akan membuat route dengan nama pegawai.js

routes/pegawai.js

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Pegawai = require('../models/Pegawai');
var pegawai = require('../controllers/PegawaiController.js');
/* GET home page. */
router.get('/', function(req, res, next) {
	Pegawai.find({}, function(err, pegawai){
		res.render('pegawai/index', { pegawai: pegawai, title: 'Data Pegawai' });
	});
});

router.get('/add', function(req, res, next){
	res.render('pegawai/add');					
});

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

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

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

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

module.exports = router;

Setelah itu kita ubah file app.js seperti dibawah ini.

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 pegawaiRouter = require('./routes/pegawai');

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);
app.use('/pegawai', pegawaiRouter);

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

Selanjutnya kita akan membuat file PegawaiController.js di dalam folder controllers.

controllers/PegawaiController.js

var mongoose = require('mongoose');
var crypto = require('crypto');

var Pegawai = require('../models/Pegawai');

var pegawaiController = {};

pegawaiController.save = function(req, res){
	
	var secret = 'brotherhood2013';
	var password = crypto.createHmac('sha256', secret).update(req.body.password).digest('hex');
	
	var pegawai = new Pegawai({
	 nip: req.body.nip,
	 nama: req.body.nama,
	 email: req.body.email,
	 tempat_lahir: req.body.tempat_lahir,
	 tanggal_lahir: req.body.tanggal_lahir,
	 alamat: req.body.alamat,
	 jabatan: req.body.jabatan,
	 gaji: req.body.gaji,
	 password: password
	});

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

pegawaiController.delete = function(req, res){
	Pegawai.findOne({ _id: req.params._id }, function(err, row){
		if(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/pegawai');
			}
			});
		}else{
		        res.redirect('/pegawai');
		}
	});

}

pegawaiController.edit = function(req, res){
	var id = req.params._id;
	Pegawai.findOne({ _id: id }, function(err, pegawai){
		if(pegawai){
			res.render('pegawai/edit', { pegawai: pegawai, title: 'Form Edit Pegawai' });		
		 }else{
		        res.redirect('../');
		 }
	});
}

pegawaiController.update = function(req, res){
	Pegawai.findByIdAndUpdate(req.params._id, {
		$set: {
			nip: req.body.nip,
			nama: req.body.nama,
			email: req.body.email,
			tempat_lahir: req.body.templat_lahir,
			tanggal_lahir: req.body.tanggal_lahir,
			alamat: req.body.alamat,
			jabatan: req.body.jabatan,
			gaji: req.body.gaji
					
		}
	}, { multi: true }, function(err, pegawai){
		if(err){
			console.log(err);
			res.render('edit', { pegawai: req.body });
		}
			if(req.body.password){
				var secret = 'brotherhood2013';
				var password = crypto.createHmac('sha256', secret).update(req.body.password).digest('hex');
				console.log(password);
				Pegawai.findByIdAndUpdate(req.params._id, {
				$set: { password: password }
				}, { multi: true }, function(err, result){

				})
			}
			res.redirect('/pegawai');
	})
}

module.exports = pegawaiController;

Setelah controller dan route sudah di buat kita lanjut ke view untuk menampilkan datanya. silahkan buat folder pegawai di dalam folder views dan buat file index.ejs di dalam folder views/pegawai/ yang telah dibuat tadi

views/pegawai/index.ejs

  <% layout('../layout/page') -%>
<% block('title', title) %>

<div class='row'>
	<div class='col-md-12'>
		<a href='/pegawai/add'><button class='btn btn-primary'>Tambah</button></a>
		<br><br>
		<table class='table' id='tabel_pegawai' >
			<thead>
				<tr>
					<th>#</th>
					<th>NIP</th>
					<th>Nama</th>
					<th>Email</th>
					<th>Jabatan</th>
					<th>Gaji</th>
					<th>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].nip %></td>
				<td><%= pegawai[i].nama %></td>
				<td><%= pegawai[i].email %></td>
				<td><%= pegawai[i].jabatan %></td>
				<td><%= pegawai[i].gaji %></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>
	</div>
</div>

Setelah itu kita akan membuat tampilan form input data pegawai, silahkan buat file baru bernama add.ejs di dalam folder views/pegawai/

view/pegawai/add.ejs

  <% layout('../layout/page') %>
<% block('title', 'Form Input Pegawai') %>
<hr>
<form action='/pegawai/insert' method='post' role='form'>
   <div class='form-group'>
    <label for='exampleInputEmail'>NIP</label>
    <input type='text' name='nip' class='form-control' placeholder='Enter NIP' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Nama</label>
    <input type='text' name='nama' class='form-control' placeholder='Enter Nama' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Email</label>
    <input type='text' name='email' class='form-control' placeholder='Enter Email' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Tempat Lahir</label>
    <input type='text' name='tempat_lahir' class='form-control' placeholder='Enter Tempat Lahir' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Tanggal Lahir</label>
    <input type='date' name='tanggal_lahir' class='form-control'  required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Alamat</label>
    <textarea name='alamat' class='form-control'></textarea>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Jabatan</label>
    <select name='jabatan' class='form-control'  required>
	<option value=''></option>
    	<option value='Admin'>Admin</option>
        <option value='Marketing'>Marketing</option>
    </select>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Gaji</label>
    <input type='number' name='gaji' class='form-control' placeholder='Enter Gaji' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Password</label>
    <input type='password' name='password' class='form-control' placeholder='Enter Password' required>
   </div>
   <button type='submit' class='btn btn-primary'>Submit</button>
</form>

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

views/pegawai/edit.ejs

  <% layout('../layout/page') %>
<% block('title', title) %>
<hr>
<form action='/pegawai/update/<%= pegawai._id %>' method='post' role='form'>
   <div class='form-group'>
    <label for='exampleInputEmail'>NIP</label>
    <input type='text' name='nip' value='<%= pegawai.nip %>' class='form-control' placeholder='Enter NIP' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Nama</label>
    <input type='text' name='nama' value='<%= pegawai.nama %>' class='form-control' placeholder='Enter Nama' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Email</label>
    <input type='text' name='email' value='<%= pegawai.email %>' class='form-control' placeholder='Enter Email' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Tempat Lahir</label>
    <input type='text' name='tempat_lahir' value='<%= pegawai.tempat_lahir %>' class='form-control' placeholder='Enter Tempat Lahir' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Tanggal Lahir</label>
    <input type='date' name='tanggal_lahir' value='<%= pegawai.tanggal_lahir.toISOString().substring(0, 10) %>' class='form-control'  required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Alamat</label>
    <textarea name='alamat' class='form-control'><%= pegawai.alamat %></textarea>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Jabatan</label>
    <select name='jabatan' class='form-control'  required>
	<option value=''></option>
    	<option value='Admin' <%= pegawai.jabatan.toString() === "Admin" ? "selected" : "" %>>Admin</option>
        <option value='Marketing' <%= pegawai.jabatan.toString() === "Marketing" ? "selected" : "" %>>Marketing</option>
    </select>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Gaji</label>
    <input type='number' name='gaji' value='<%= pegawai.gaji %>' class='form-control' placeholder='Enter Gaji' required>
   </div>
   <div class='form-group'>
    <label for='exampleInputEmail'>Password</label>
    <input type='password' name='password' class='form-control' placeholder='Tidak ganti password jangan diisi'>
   </div>
   <button type='submit' class='btn btn-primary'>Submit</button>
</form>

dan yang terakhir kita akan memasang datatables di tabel data pegawai silahkan edit page.ejs di folder views/layout/ dan tambahkan script dibawah

$('#tabel_pegawai').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();
        $('#tabel_pegawai').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 -> pegawai maka akan ada tampilan seperti gambar dibawah.

Sekian Tutorial Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 9 : CRUD Pegawai, Bila ada pertanyaan ataupun kesalahan di artikel ini silahkan kita sharing di kolom komentar.

Media Info

Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 10 : CRUD Pegawai

Sunday, June 21, 2020 Tags: express, mongodb, nodejs, pemrograman, tutorial