Belajar Install Jquery, Bootstrap dan Membuat Datatable Menggunakan Webpack dan Node JS

24 Mar 2022 13:30
Dipost oleh Admin
625
0
Share:

Sobatcoding.com - Tutorial Belajar Install Jquery dan Bootstrap Menggunakan Webpack dan Node JS

Sebelumnya kita telah belajar basic installation menggunakan webpack. Kali ini kita akan mencoba install jquery, bootstrap dan juga membuat datatable menggunakan webpack.

Environtment yang digunakan:

Node v16.13.2

Webpack: "^5.70.0",

Webpack-cli: "^4.9.2"

Buat Project Baru

Kalian bisa buat project baru dengan membuat folder webpack-datatable. Kemudian jalankan npm init -y.

Install Dependecies

Kita install dulu beberapa dependecies yang kita butuhkan seperti jquery, bootstrap dan datatable.

npm install webpack webpack-cli html-webpack-plugin jquery bootstrap datatables.net --save-dev

Buat webpack.config.js dan masukkan kode berikut.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    watch: true,
    mode: 'development',
    entry: ['./src/index.js'],
    devtool: 'inline-source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
          title: 'Output Management - Belajar Webpack V2',
          title: 'Development',
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
          })
      ],
};

Buatlah sebuah file index.js dan simpan di dalam folder src. Kemudian import package bootstrap dan datatable yang telah diinstal.

import 'bootstrap'
import 'datatables.net'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'datatables.net-dt/css/jquery.dataTables.css'

Jalankan NPM dengan perintah npm run build untuk memastikan script berjalan dengan normal.

Membuat Data JSON

Kita buat data json untuk data source ke datatable nantinya. Buatlah sebuah file bernama data.json dan masukkan data berikut ini.

{
    "data": [
    {
        "id": "1",
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": "2",
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "id": "3",
        "name": "Ashton Cox",
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12",
        "office": "San Francisco",
        "extn": "1562"
      },
      {
        "id": "4",
        "name": "Cedric Kelly",
        "position": "Senior Javascript Developer",
        "salary": "$433,060",
        "start_date": "2012/03/29",
        "office": "Edinburgh",
        "extn": "6224"
      },
      {
        "id": "5",
        "name": "Airi Satou",
        "position": "Accountant",
        "salary": "$162,700",
        "start_date": "2008/11/28",
        "office": "Tokyo",
        "extn": "5407"
      },
      {
        "id": "6",
        "name": "Brielle Williamson",
        "position": "Integration Specialist",
        "salary": "$372,000",
        "start_date": "2012/12/02",
        "office": "New York",
        "extn": "4804"
      },
      {
        "id": "7",
        "name": "Herrod Chandler",
        "position": "Sales Assistant",
        "salary": "$137,500",
        "start_date": "2012/08/06",
        "office": "San Francisco",
        "extn": "9608"
      },
      {
        "id": "8",
        "name": "Rhona Davidson",
        "position": "Integration Specialist",
        "salary": "$327,900",
        "start_date": "2010/10/14",
        "office": "Tokyo",
        "extn": "6200"
      },
      {
        "id": "9",
        "name": "Colleen Hurst",
        "position": "Javascript Developer",
        "salary": "$205,500",
        "start_date": "2009/09/15",
        "office": "San Francisco",
        "extn": "2360"
      },
      {
        "id": "10",
        "name": "Sonya Frost",
        "position": "Software Engineer",
        "salary": "$103,600",
        "start_date": "2008/12/13",
        "office": "Edinburgh",
        "extn": "1667"
      },
      {
        "id": "11",
        "name": "Jena Gaines",
        "position": "Office Manager",
        "salary": "$90,560",
        "start_date": "2008/12/19",
        "office": "London",
        "extn": "3814"
      },
      {
        "id": "12",
        "name": "Quinn Flynn",
        "position": "Support Lead",
        "salary": "$342,000",
        "start_date": "2013/03/03",
        "office": "Edinburgh",
        "extn": "9497"
      },
      {
        "id": "13",
        "name": "Charde Marshall",
        "position": "Regional Director",
        "salary": "$470,600",
        "start_date": "2008/10/16",
        "office": "San Francisco",
        "extn": "6741"
      },
      {
        "id": "14",
        "name": "Haley Kennedy",
        "position": "Senior Marketing Designer",
        "salary": "$313,500",
        "start_date": "2012/12/18",
        "office": "London",
        "extn": "3597"
      },
      {
        "id": "15",
        "name": "Tatyana Fitzpatrick",
        "position": "Regional Director",
        "salary": "$385,750",
        "start_date": "2010/03/17",
        "office": "London",
        "extn": "1965"
      },
      {
        "id": "16",
        "name": "Michael Silva",
        "position": "Marketing Designer",
        "salary": "$198,500",
        "start_date": "2012/11/27",
        "office": "London",
        "extn": "1581"
      },
      {
        "id": "17",
        "name": "Paul Byrd",
        "position": "Chief Financial Officer (CFO)",
        "salary": "$725,000",
        "start_date": "2010/06/09",
        "office": "New York",
        "extn": "3059"
      },
      {
        "id": "18",
        "name": "Gloria Little",
        "position": "Systems Administrator",
        "salary": "$237,500",
        "start_date": "2009/04/10",
        "office": "New York",
        "extn": "1721"
      },
      {
        "id": "19",
        "name": "Bradley Greer",
        "position": "Software Engineer",
        "salary": "$132,000",
        "start_date": "2012/10/13",
        "office": "London",
        "extn": "2558"
      },
      {
        "id": "20",
        "name": "Dai Rios",
        "position": "Personnel Lead",
        "salary": "$217,500",
        "start_date": "2012/09/26",
        "office": "Edinburgh",
        "extn": "2290"
      },
      {
        "id": "21",
        "name": "Jenette Caldwell",
        "position": "Development Lead",
        "salary": "$345,000",
        "start_date": "2011/09/03",
        "office": "New York",
        "extn": "1937"
      }
]
}

Kita buka kembali file index.js, kita tambahkan function untuk membuat table dan datatable.

//membuat Table
function buildTabel() {
    const tbl = document.createElement('table');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');
        tbl.setAttribute("id", "datatable");
        tbl.classList.add('table');
        tbl.classList.add('table-bordered');
        tbl.classList.add('table-striped');
    
    //Build Thead
    buildHead(thead);
    //Build Tbody
    buildTbody(tbody);
       
    tbl.appendChild(thead);
    tbl.appendChild(tbody);

    return tbl;
}

//membuat Thead
function buildHead(thead)
{
    //Build Thead
    const head = ["Name", "Position", "Office", "Extn", "Sart Day", "Salary"];
    const trHead = document.createElement("tr");
    for(var i=0;i<head.length;i++)
    {
        var th = document.createElement('th');
            th.innerText = head[i];
        trHead.appendChild(th);
    }
    thead.appendChild(trHead);
}

//membuat TBody
function buildTbody(tbody)
{
    const JSON = require('./data.json');
    const data = JSON.data;
    const index = ["name", "position", "office", "extn", "start_date", "salary"];
    
    for(var j=0;j<data.length;j++)
    {
        var trBody = document.createElement("tr");
        for( var k=0; k<index.length; k++)
        {
            var td = document.createElement('td');
            td.innerText = data[j][index[k]];
            trBody.appendChild(td);
        }
        
        tbody.appendChild(trBody);
    }
}

document.body.appendChild(buildTabel());
$('#datatable').DataTable();

Jalankan kembali perintah npm run build. Dan coba akses file index.html via browser. Jika berhasil tampilan kurang lebih seperti pada gambar berikut.

Datatable Webpack