Belajar Membuat Web Menggunakan Framework Express JS (Part 2)

Setelah kita melakukan instalasi Express JS nya kali ini kita lanjut ke tahap integrasi dengan framework css seperti bootstrap, materialize dan lain sebagainya, namun di sini kita akan coba menggunakan bootstrap versi 4, Oh ya bagi kamu yang belum install Express JS sebelumnya, kamu bisa baca - baca dan ikuti step by stepnya terlebih dahulu Belajar Membuat Web Menggunakan Framework Express JS (Part 1), bagi yang sudah kita lanjut saja. Langsung aja yuk!

1. Install PUG Engine

Buka salah satu file yang berada di dalam folder views, Setelah dibuka kamu bisa lihat di file tersebut terlihat agak berbeda dan aneh mungkin bagi yang belum tahu dan mengapa bukan file HTML seperti pada umumnya.
Di Node JS sendiri sebetulnya bisa menggunakan HTML seperti pada umumnya, akan tetapi pada Express JS ini sudah tersedia template engine bawannya yaitu Jade Language.

Jade Language atau template engine yang digunakan pada Express JS sangat populer saat ini, untuk dokumentasi nya sendiri sudah cukup lumayan lengkap, kamu bisa akses ke website resminya sendiri di sini, namun dikarena kan Jade Language ini sekarang namanya sudah berubah menjadi Pug Engine maka kalian bisa langsung akses ke dokumentasi resmi PUG engine nya sendiri di sini.

Nah sekarang kita coba rename nama dari keseluruhan file .jade yang ada di dalam folder views itu menjadi .pug kemudian coba jalankan, dan apa yang terjadi ketika dibuka webnya? dan akan menapilkan pesan error sepert ini Failed to lookup view "index" in views, ya itu karena kita belum menginstall pugjs nya, kita coba install terlebih dahulu pugjs nya dengan cara

$ npm install pug

2. Setting Template Engine

Lalu selanjutnya kita coba buka file app.js yang berada pada folder root projectnya, lalu ubah di bagian

app.set('view engine', 'jade');

Ubah menjadi

app.set('view engine', 'pug');

Maka webnya sekarang sudah bisa diakses seperti ini

3. Install Bower

Setelah itu kamu install bower node module nya sepert ini

$ npm install -g bower

Setelah bowernya terinstall kemudian install bootstrap & jquery menggunakan bower tersebut.

$ bower install bootstrap
$ bower install jquery

Kemudian kamu akan melihat folder baru di dalam project kamu yaitu bower_components, nah pada inilah letak file bootstrapnya terinstall. lalu kamu tambahkan source code berikut ke dalam file app.js

app.use(express.static(path.join(__dirname, 'bower_components')));

4. Membuat View

Lalu kita buat satu file untuk menu navbar yang berada di dalam folder view/includes, kemudian copy paste source code di bawah ini dan beri nama file navbar.pug

header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  a.navbar-brand(href='#') FajarPunya Software
  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='#')
          | Home 
          span.sr-only (current)

Kemudian buat file layoutnya dengan nama layout.pug, lalu paste source code dibawah ini

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;
   }
   .v-container-custom {
    border:20px solid rgba(0,0,0,.5);
    width: 400px;
    height: 200px;
    background: #353b48;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -240px;
    text-align: center;
    padding:40px;
    display: table;
    color:#fff;
   }
   .v-box {
    background:orange;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border:50px solid #ccc;
   }
 body
  include includes/navbar.pug
  div.container-fluid
   block content
  script(src="/jquery/dist/jquery.min.js", type='text/javascript')
  script(src="/jquery/dist/jquery.slim.min.js", type='text/javascript')
  script(src="/bootstrap/dist/js/bootstrap.min.js", type='text/javascript')

Kemudian buat file indexnya dengan nama index.pug, lalu copy paste kembali source code dibawah ini

extends layout
 block content
  div.v-container-custom
   div.v-box-custom
    h1 Welcome In Tutorial Express JS

5. Running App

Dan terakhir kamu jalankan kembali web nya dengan mengunakan perintah

$ npm run start

Maka akan seperti ini hasilnya.

Nah seperti itulah cara integrasi Express JS dengan Famework CSS Bootstrap

Penjelasan singkat

Mengapa di dalam PUG JS ini tidak ada penutup setiap akhir element?begini misalnya jika menggunakan HTML biasa ketika ingin membuat.

<h1 class="todo">TODO</h1>

Maka jika pada PUG JS hanya seperti ini.

h1.todo TODO

Terlihat perbedaannya bukan? nah ini dikarenakan dengan adanya PUG JS atau template engine seperti ini kita tidak perlu cape - cape untuk menutup setiap akhir element, karena pada PUG JS sudah otomatis tentunya.
Contoh lain jika kita membuat div yang di dalamnya terdapat atribut lain seperti class , id, data-id mungkin di html biasa cukup ribet juga kita membuatnya seperti ini dan harus menutup setiap elementnya masing - masing.

<div class="name-class" id="name-id" data-id="id">something</div>

Jika kita ubah ke PUG JS maka akan seperti ini.

div(class="name-class",id="name-id",data-id="id") something

Atau bisa seperti ini

div.name-class#name-id(data-id="id") something

Download Full Source Code

Share this post