Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Ditutorial sebelumnya kita sudah membuat models untuk fitur master barang untuk koneksi dengan databasenya, silahkan baca dlu tutorial sebelumnya. Kali ini kita akan membuat templating fitur master barang.
Baca Sebelumnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 2 : Koneksi Database
Yang pertama kita akan menambahkan "ejs-locals" di app.js
app.engine('ejs', require('ejs-locals'));
Lihat script lengkapnya app.js
Baca Juga - Tutorial ExpressJS : Membuat Templating ejs
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 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);
//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 install modulnya dengan perintah dibawah
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market>npm i ejs-locals
Setelah menginstall kita lanjut dengan download bootstrap pada https://getbootstrap.com/
File yang telah kita download tersebut kita extract., setelah itu rename folder hasil extract tadi jadi 'bootstrap' saja. Kemudian copykan pada folder public, lihat gambar dibawah.
Langkah selanjutnya membuat folder layout dan partials di dalam folder views
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market\views>mkdir layout
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market\views>mkdir partials
Buat file page.ejs di dalam folder layout dan masukan script dibawah.
<!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">
</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>
</body>
</html>
Setelah itu buat file navigasi.ejs di dalam folder partials dan masukan script dibawah.
<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</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Barang</a>
<!--<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</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>
Dan yang terakhir kita akan mengubah file index.ejs di dalam folder views, lihat script dibawah
<% layout('layout/page') -%>
<% block('title', 'Aplikasi Mini Market') %>
Setelah itu coba jalankan dengan mengetik "npm start" di terminal dan buka browser kalian terus ketikan url http://localhost:3000 maka akan ada tampilan seperti gambar dibawah.
Sekian tutorial kali ini tentang Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 3 : Templating. Pada tutorial selanjutnya kita akan membuat Controllers dan Routes fitur barang
Baca Selanjutnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 4 : Routing