Belajar Membuat Web Menggunakan Framework Express JS (Part 6)

Menampilkan Data Menggunakan Datatables Pada Framework Express JS - Pada tutorial kali ini kita akan menampilkan data dari database dan menampilkannya menggunakan datatable, maka kita akan membutuhkan ORM atau Eloquent, karena pada tutorial untuk menggunakan ORM atau ELoquent di Express JS sudah dijelaskan, silakan ikuti terlebih dahulu di artikel sebelumnya di bagian part 3 (Cara Menggunakan Migrations, Seeder Dan Models).

Artikel sebelumnya :

Pertama kita ubah terlebih dahulu di bagian file routes.js yang berada di dalam folder routes/routes.js, setelah itu tambah objek baru, lihat source code dibawah ini

const dashboardPrefix = '/dashboards';

module.exports = function() {

    return {
        index : '/',
        auth : {
            login : '/auth',
            logout : '/auth/logout'
        },
        dashboards : {
            index : dashboardPrefix,
            pages : {
                user : {
                    index : dashboardPrefix + '/page/users'
                }
            }
        }
    };
}

Kemudian ubah juga dibagian file - file berikut

1. routes/web.js

Sebelumnya kita sudah mengganti struktur objek rutenya, maka kita ubah dibagian source code berikut

/*
* User Dashboard Routes
*/
.get(routePrefix.dashboards.users.index, userController.index)

Menjadi seperti dibawah ini

/*
* User Dashboard Routes
*/
.get(routePrefix.dashboards.index, dashboardController.index)

Sehingga akan seperti ini karena nantinya ada perubahan penempatan folder untuk bagian user controller

'use-strict'

const   express = require('express'),
        router = express.Router(),
        authController = require('../controllers/authController'),
        dashboardController = require('../controllers/dashboard/dashboardController'),
        { check } = require('express-validator'),
        routes = require('../routes/routes'),
        routePrefix = routes()

router

    /*
    * Index Route
    */
    .get(routePrefix.index, function(req, res, next) {
        res.render('index', { title : process.env.NODE_APP_NAME })
    })

    /*
    * Auth Routes
    */
    .get(routePrefix.auth.login, authController.index)
    .post(routePrefix.auth.login, [
        check('email','Email is required.').not().isEmpty(),
        check('email','Invalid email format.').isEmail(),
        check('password', 'Password is required.').not().isEmpty(),
    ], authController.login)
    .get(routePrefix.auth.logout, authController.logout)

    /*
    * User Dashboard Routes
    */
    .get(routePrefix.dashboards.index, dashboardController.index)

module.exports = router;

2. app.js

Di dalam file ini terdapat dimana route dashboard harus menggunakan middleware, ubah di bagian source code dibawah ini sekalian kita tambahkan 1 route untuk diberikan middleware.

/*
* Authenticated Routes
*/
const authenticatedRoutes = [
    routePrefix.dashboards.users.index
];

Ubah menjadi seperti source code dibawah ini

/*
* Authenticated Routes
*/
const authenticatedRoutes = [
    routePrefix.dashboards.index,
    routePrefix.dashboards.pages.user.index,
];

3. middleware/authenticatedMiddleware.js

Ubah dibagian kondisi jika user mengakses halaman login dan user tersebut sudah login maka akan di alihkan ke dashboard

if(req.originalUrl == routePrefix.auth.login) {
    if(req.session.userdata) {
        return res.redirect(routePrefix.dashboards.users.index);
    }
}

Ubah menjadi sepert ini

if(req.originalUrl == routePrefix.auth.login) {
    if(req.session.userdata) {
        return res.redirect(routePrefix.dashboards.index);
    }
}

4. views/auth/login.js

Ubah pada bagian redirect setelah login dinyatakan berhasil

if(!response.error) {
    setTimeout(function() {
        location.href = _url + '/user';
    }, 1000);
    return;
}

Sehingga akan menjadi seperti ini

if(!response.error) {
    setTimeout(function() {
        location.href = _url + '#{route.dashboards.index}';
    }, 1000);
    return;
}

5. views/users/includes/navbar.pug

Ubah di bagian berikut

a.nav-link(href=`${ process.env.NODE_APP_URL + route.dashboards.users.index }`)

Menjadi seperti ini

a.nav-link(href=`${ process.env.NODE_APP_URL + route.dashboards.index }`)

6. controllers/userController.js

Sebelumnya kita rename terlebih dahulu nama folder users menjadi dashboard yang berada di dalama folder views, lalu ubah di dalam user controller di bagain berikut

res.render('users/index', {
    title : process.env.NODE_APP_NAME + ' Users',
    sess : JSON.parse(req.session.userdata)
});

Menjadi seperti ini

res.render('dashboard/index', {
    title : process.env.NODE_APP_NAME + ' Users',
    sess : JSON.parse(req.session.userdata)
});

Buat folder baru di dalam folder controllers dengan nama foldernya dashboard kemudian rename file userController.js menjadi dashboardController.js dan pindahkan file dashboardController.js ke dalam folder dashboard tersebut, maka sekarang struktur nya akan seperti ini

├── README.md
├── app.js
├── app_key.js
├── bin
|  └── www
├── bower_components
|  ├── bootstrap
|  |  ├── CNAME
|  |  ├── CODE_OF_CONDUCT.md
|  |  ├── Gemfile
|  |  ├── Gemfile.lock
|  |  ├── LICENSE
|  |  ├── README.md
|  |  ├── _config.yml
|  |  ├── build
|  |  ├── composer.json
|  |  ├── dist
|  |  ├── js
|  |  ├── nuget
|  |  ├── package-lock.json
|  |  ├── package.js
|  |  ├── package.json
|  |  ├── scss
|  |  └── site
|  └── jquery
|     ├── AUTHORS.txt
|     ├── LICENSE.txt
|     ├── README.md
|     ├── bower.json
|     ├── dist
|     ├── external
|     └── src
├── config
|  ├── config.json
|  └── config_example.json
├── controllers
|  ├── authController.js
|  └── dashboard
|     └── dashboardController.js
├── middleware
|  └── authenticatedMiddleware.js
├── migrations
|  └── 20200204075427-create_users_table.js
├── models
|  ├── index.js
|  └── user.js
├── node_modules
├── package-lock.json
├── package.json
├── public
|  ├── images
|  ├── javascripts
|  |  └── toastr.js
|  └── stylesheets
|     ├── style.css
|     └── toastr.css
├── routes
|  ├── routes.js
|  └── web.js
├── seeders
|  └── 20200204085705-UsersTableSeeder.js
└── views
   ├── auth
   |  ├── layout.pug
   |  └── login.pug
   ├── dashboard
   |  ├── includes
   |  ├── index.pug
   |  └── layout.pug
   ├── error.pug
   ├── includes
   |  └── navbar.pug
   ├── index.pug
   └── layout.pug

Nah jika semua file diatas sudah di ubah semua berikut adalah tahapan untuk megintegrasikan dengan datatablenya

1. Buat halaman index users

Buat folder baru dengan nama users di dalam folder dashboard kemudian buat satu file baru dengan nama index.pug dan copas source code dibawah ini

extends ../layout

block stylesheets
    link(rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css")

block content

    .row
        .col-md-12
            .card
                .card-body
                    table.table.table-condensed#DataTable
                        thead
                            tr
                                th.text-center Username
                                th.text-center Email
                        tbody

block scripts
    script(type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js")
    script.
        function users() {
            jQuery('#DataTable').DataTable({
                ordering : false,
                processing : false,
                serverSide : true,
                buttons : [
                ],
                columns : [
                    {
                        data : 'username',
                        name : 'username'
                    },
                    {
                        data : 'email',
                        name : 'email'
                    }
                ],
                ajax : {
                    url : '#{route.dashboards.pages.user.index}'
                }
            });
        }

        users();

2. Buat user route

Kemudian buat satu route dan tambahkan source code dibawah ini di dalam file routes/web.js

const userController = require('../controllers/dashboard/userController');

/*
* Dashboard Routes
* ===============================================
* Page Name : users
*/
.get(routePrefix.dashboards.pages.user.index, userController.index)

3. Buat file user controller

Sebelum membuat controllernya install terlebih dahulu paket sequelize datatable dengan cara seperti ini

$ npm install sequelize-datatable

Lalu yang terakhir buat file controller nya dengan nama userController.js, berikut source codenya

'use strict';

const model = require('../../models');
const datatable = require(`sequelize-datatable`);

exports.index = function(req, res, next) {

    if(!req.xhr) {
        return res.render('dashboard/user/index', {
            title : 'Users'
        });
    }

    /*
    * Sequelize Datatable
    */
    datatable(model.User, req.query, {
        // Todo
    }).then((result) => {
        res.json(result);
    });
}

Maka hasilnya akan seperti gambar dibawah ini

Menampilkan Data Pada Datatables Dengan Express JS

Download Source Code