Belajar Membuat Web Menggunakan Framework Express JS (Part 4)
Di part sebelumnya kita sudah bahas tentang migrations, seeder dan model. Maka Pada part 4 kita akan membuat login sederhana menggunakan Framework Express JS, bagi kalian yang belum mengikuti tutorial di bagian part 3 silakan ikuti terlebih dahulu tutorial sebelumnya, bagi yang sudah mengikuti tutorial sebelumnya silakan untuk lanjut di tutorial kali ini.
1. Membuat Rute Login
Sebelum membuat rute nya silakan install paket - paket dibawah ini
$ npm install --save express-session
$ npm install --save express-validator
$ npm install --save http-errors
$ npm install -g nodemonBuka file app.js copy code dibawah ini
var authRouter = require('./routes/auth');Lalu kita gunakan variable authRouter untuk memanggil route nya seperti ini
app.use('/login', authRouter);Lalu tambahkan source code berikut
conts expressSession = require('express-session');
app.use(expressSession({
secret : process.env.NODE_APP_KEY,
saveUninitialized: false,
resave : false
}));Sehingga akan terlihat seperti ini
const createError = require('http-errors'),
express = require('express'),
path = require('path'),
cookieParser = require('cookie-parser'),
logger = require('morgan'),
expressSession = require('express-session'),
app = express(),
indexRouter = require('./routes/index'),
usersRouter = require('./routes/users'),
authRouter = require('./routes/auth');
require('dotenv').config();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
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(express.static(path.join(__dirname, 'bower_components')));
app.use(expressSession({
secret : process.env.NODE_APP_KEY,
saveUninitialized: false,
resave : false
}));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/login', authRouter);
// 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;Jika sudah maka buat file auth.js di dalam folder routes, kemudian copy source code berikut ke dalam file tersebut
const express = require('express'),
router = express.Router(),
authController = require('../controllers/authController'),
{ check } = require('express-validator');
router
.get('/', authController.index)
.post('/',[
check('email','Email is required').not().isEmpty(),
check('email','Invalid email format').isEmail(),
check('password', 'Class Year should be a number').not().isEmpty(),
], authController.login);
module.exports = router;Terdapat beberapa methods di Express Router, diantaraya :
router.get('/', controller.method);
router.post('/', controller.method);
router.put('/', controller.method);
router.delete('/', controller.method);2. Membuat Controller
Buat folder dengan nama controllers lalu buat file authController.js didalamnya, kemudian copy source code dibawah ini
const crypto = require('crypto'),
model = require('../models'),
{ validationResult } = require('express-validator');
exports.index = function(req, res, next) {
res.render('auth/login', { title : 'Login ' + process.env.NODE_APP_NAME });
}
exports.login = function(req, res, next) {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(422).json({error : 1, message : errors.mapped() });
}
var getUser = new Promise(function(resolve) {
model.User.findOne({
where: {
email : req.body.email,
password : crypto.createHmac('sha256', process.env.NODE_APP_KEY)
.update(req.body.password)
.digest('hex'),
}
}).then(callBack => resolve(callBack))
});
getUser.then(function(callBack) {
if(callBack == null) {
res.json({
error : true,
message : "User tidak ditemukan.",
result : null
});
} else {
req.session.userdata = JSON.stringify(callBack);
res.json({
error : false,
message : "Login berhasil.",
result : req.session.userdata
});
}
});
}Di dalam file controller ini terdapat 2 method yaitu method index untuk menampilkan halaman loginnya sendiri dan method login untuk proses pengecekan data user dengan field email dan password ke database.
3. Membuat Halaman Login
Kemudian buat folder auth di dalam folder views, setelah itu buat 2 file layout.pug dan login.pug
layout.pug
doctype html
html
head
title #{title}
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(rel='stylesheet', href='/bootstrap/dist/css/bootstrap.min.css')
style.
body {
background-color:#eee;
}
body
div.container-fluid
block content
script(src="/jquery/dist/jquery.min.js", type='text/javascript')
script(src="/bootstrap/dist/js/bootstrap.min.js", type='text/javascript')
block scriptslogin.pug
extends layout
block content
div(style="padding:50px;")
div.row
div.col-md-4.offset-md-4
form.login-form(action=`${process.env.NODE_APP_URL}/login`)
center
b
h4 Login User
hr
div.form-group
label(for="email") Email
input.form-control#email(type="email" placeholder="Email" name="email")
div.form-group
label(for="password") Password
input.form-control#password(type="password" placeholder="Password" name="password")
div.form-group
button.btn.btn-primary.btn-block#login-button(type="button" onclick="login()") Login
br
center
a.text-muted(href=`${process.env.NODE_APP_URL}`) Back To Home
block scripts
script.
function login() {
var loginButton = jQuery('#login-button');
jQuery.ajax({
url : "#{process.env.NODE_APP_URL}/login",
method : 'post',
data : jQuery('.login-form').serialize(),
beforeSend : function() {
loginButton.attr('disabled','disabled');
},
success : function(response) {
loginButton.removeAttr('disabled');
console.log(response);
}
});
}Kemudian ubah file navbar yang berada di dalam folder views/includes/navrbar.pug, ubah menjadi seperti ini
navbar.pug
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
a.navbar-brand(href=`${process.env.NODE_APP_URL}`) #{ process.env.NODE_APP_NAME }
button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbarSupportedContent', aria-controls='navbarSupportedContent', aria-expanded='false', aria-label='Toggle navigation')
span.navbar-toggler-icon
#navbarSupportedContent.collapse.navbar-collapse
ul.navbar-nav.mr-auto
li.nav-item.active
a.nav-link(href=`${process.env.NODE_APP_URL}`)
| Home
span.sr-only (current)
li.nav-item.active
a.nav-link(href=`${process.env.NODE_APP_URL}/login`)
| Login
span.sr-only (current)Lalu yang terakhir jalankan aplikasinya dengan nodemon, karena kita sebelumnya sudah menginstall nodemon supaya ketika sedang tahap development tidak perlu end start npm nya di terminal berulang - ulang.
Jika berhasil maka hasilnya akan terlihat seperti ini.
 |
| Halaman Home |
 |
| Halaman Login |
Untuk meyakinkan berhasil atau tidaknya silakan lihat menggunakan F12 cek dibagian network, karena kita membuat dashboard user nya di tutorial selanjutnya.
 |
| Login Response |