Pada pembahasana tutorial ExpressJS sebelumnya kita sudah membuat form pegawai dan kecamatan Silahkan yang belum baca tutorial ExpressJS sebelumnya untuk membaca dulu, karna kalo ngga baca dari awal ga bakalan nyambung guys. Tutorial kali ini CRUD dengan ExpressJS & Mongoose Part 6 : View Data kita akan mencoba menampilkan data yang kemarin kita input di form pegawai
Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 5 : Templating
Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 5 : Templating
Untuk menampikan data yang sudah dimasukan kemarin kita akan mengubah index.js di folder routes dan index.ejs di folder views
index.js
var express = require('express');
var router = express.Router();
var Pegawai = require('../models/Pegawai');
/* GET home page. */
router.get('/', function(req, res, next) {
Pegawai.find({}, function(err, pegawai){
console.log(pegawai);
res.render('index', { pegawai: pegawai, title: 'CRUD Pegawai' });
}).populate('id_kec').select('_id nama email umur');
});
module.exports = router;
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>Data Pegawai</p>
<table class='table'>
<thead>
<tr>
<th scope='col'>#</th>
<th scope='col'>Nama</th>
<th scope='col'>Email</th>
<th scope='col'>Umur</th>
<th scope='col'>Kecamatan</th>
</tr>
</thead>
<tbody>
<% var no=1 %>
<% for(var i = 0; i < pegawai.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= pegawai[i].nama %></td>
<td><%= pegawai[i].email %></td>
<td><%= pegawai[i].umur %></td>
<td><%= pegawai[i].id_kec.nama %></td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
Sekarang silahkan mengetikan perintah "npm start" di terminal dan akses halaman "localhost:3000" pada browser kalian. Kita akan melihat sebuah table dengan data dari collection MongoDB.
Di tutorial ExpressJS kali ini kita sudah bisa menampilkan data, pada tutorial selanjutnya kita akan mencoba hapus data.
Baca Selanjutnya - CRUD Dengan ExpressJS & Mongoose Part 7 : Delete Data