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"
Kalian bisa buat project baru dengan membuat folder webpack-datatable. Kemudian jalankan npm init -y
.
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.
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.
Sekian tutorial kali ini dan semoga bermanfaat.
Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini
Komentar 0