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 nodemon

Buka 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 scripts

login.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

Download Source Code

0 Response to "Belajar Membuat Web Menggunakan Framework Express JS (Part 4) "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel