Lanjut ke bagian kedua, kali ini kita akan fokus memasang web template yang terkenal untuk halaman admin yaitu AdminLTE. Sebelum melangkah ke teknik lainnya, teknik ini akan kita dahulukan karena target dari tutorial ini adalah membuat sebuah aplikasi web yang dapat digunakan. Sepanjang tutorial ini, kita akan membangun sebuah aplikasi bernama Organo. Sebuah aplikasi yang dapat membantu kita mencatat anggota berdasarkan divisi dan jabatan dari organisasi yang kita kelola. Aplikasi ini cocok untuk pengurus badan eksekutif mahasiswa, anggota dewan keluarga masjid, aktivis lingkungan skala kecil dan lainnya.

Sebagai awalan, aplikasi ini membutuhkan beberapa hal berikut:
<ul>
 	<li>web template AdminLTE</li>
 	<li>font library FontAwesome</li>
 	<li>Mongoose</li>
 	<li>MongoDB</li>
 	<li>Berbagai package pendukung untuk Express.js seperti express-session, express-flash, express-validator, dan lainnya</li>
</ul>
Namun kita akan fokus terlebih dahulu pada pemasangan web template AdminLTE sebelum melangkah ke bagian tutorial lainnya. Selamat mencoba :D.
<h2>Instalasi</h2>
Untuk menggunakan Express.js, pastikan Anda memasang Node.js terlebih dahulu dan pastikan NPM sudah dapat digunakan. Tutorial ini dibuat dengan menggunakan Node.js versi 5.10.1 dan NPM versi 3.8.5. Melalui konsol atau terminal silahkan eksekusi perintah berikut. Pastikan pilih folder yang Anda sukai:
<pre><code>$ npm install express -g
$ express demo
$ npm install
$ npm start
</code></pre>
Sekarang mari kita lihat halaman pertama yang dihasilkan oleh Express.js di web browser. Silahkan akses URL http://localhost:3000/.
<h2>Meletakkan aset statis di folder public</h2>
Silahkan unduh terlebih dahulu AdminLTE dan Font Awesome yang sudah disiapkan untuk tutorial ini di tautan berikut: <a href="https://dl.dropboxusercontent.com/u/54840757/picture/codepolitan/assets-organo-public.zip">https://dl.dropboxusercontent.com/u/54840757/picture/codepolitan/assets-organo-public.zip</a>. Kemudian ekstrak zip tersebut dan taruh semua folder ada di dalam folder hasil ekstraksi ke folder demo/public. Anda dapat melihat struktur folder-nya pada gambar berikut:

<img class="size-full wp-image-13018 aligncenter" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/Selection_012.png" alt="Selection_012" width="193" height="341" />

Sedangkan untuk keseluruhan folder, berikut adalah susunan folder dan file yang akan terbentuk di akhir tutorial ini:

<img class="size-full wp-image-13016 aligncenter" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/Selection_010-1.png" alt="Selection_010" width="280" height="523" />

Kemudian silahkan buat juga sebuah folder dengan nama layout di dalam folder demo/views. Dimana kita akan menempatkan bagian - bagian layout yang akan dipecah menjadi beberapa bagian. Bagian tersebut antara lain:
<ul>
 	<li>base.jade, bagian utama dari layout yang akan digunakan oleh template di folder lain</li>
 	<li>head.jade, bagian kepala layout dimana di dalamnya terdapat tag penggunaan aset statis CSS</li>
 	<li>nav.jade, bagian navigasi halaman Admin berupa dropdown menu</li>
 	<li>sidebar.jade, bagian navigasi halaman Admin berupa slider menu</li>
 	<li>footer.jade, bagian kaki dari layout</li>
 	<li>js.jade, bagian kaki yang berisi tag penggunaan aset statis Javascript</li>
</ul>
<h2>Membuat template base.jade</h2>
Pertama mari kita buat kode base.jade terlebih dahulu:
<pre><code>doctype html
html
 head
 include head.jade
 body.hold-transition.skin-blue.sidebar-mini
 div.wrapper
 include nav.jade
 include sidebar.jade

 div.content-wrapper
 block content
 include footer.jade
 div.control-sidebar-bg

 include js.jade
</code></pre>
Di dalamnya terdapat penggunaan template lain dengan menggunakan keyword include. Penggunaan perintah include head.jade mempunyai arti bawah template head.jade yang satu folder dengan base.jade akan digunakan oleh base.jade. Kemudian ada juga block content yang artinya setiap template lain yang menggunakan base.jade dan yang memiliki block content maka elemen dibawah tag tersebut akan ditempatkan di bagian block content yang ada di base.jade.

Mari kita lanjut ke bagian lainnya :D.
<h2>Membuat template head.jade</h2>
Sekarang kita akan membuat template anak yaitu head.jade. Di dalamnya hanya terdapat penggunaan berbagai file CSS yang digunakan oleh web template AdminLTE:
<pre><code>title= Organo
link(rel='stylesheet', href='/adminlte/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/font-awesome/css/font-awesome.css')
link(rel='stylesheet', href='/adminlte/dist/css/AdminLTE.min.css')
link(rel='stylesheet', href='/adminlte/dist/css/skins/skin-blue.min.css')
link(rel='stylesheet', href='/adminlte/plugins/iCheck/square/blue.css')
</code></pre>
Pastikan bahwa Anda sudah memasang folder AdminLTE dan Font Awesome di folder demo/public.
<h2>Membuat template nav.jade</h2>
Sekarang kita akan membuat template anak yaitu nav.jade. Di dalamnya hanya terdapat pendefinisian menu popup yang akan menyimpan tombol edit profil dan tombol keluar serta menampilkan poto profil dari user yang login:
<pre><code>header.main-header
 a(href='/').logo
 span.logo-mini
 span.logo-lg
 b Organo
 nav(role='navigation').navbar.navbar-static-top
 a(href='#', role='button', data-toggle='offcanvas').sidebar-toggle
 span.sr-only Toggle Navigation
 div.navbar-custom-menu
 ul.navbar-nav.nav
 li.dropdown.user.user-menu
 a(href="#", data-toggle='dropdown').dropdown-toggle
 img.user-image(src='/adminlte/dist/img/avatar.png', alt='User Image')
 span.hidden-xs Muhammad Arslan
 ul.dropdown-menu
 li.user-header
 img.img-circle(src='/adminlte/dist/img/avatar.png', alt='User Image')
 p
 | Muhammad Arslan
 li.user-footer
 div.pull-left
 a.btn.btn-default.btn-flat(href='/profil/') Profil
 div.pull-right
 a.btn.btn-default.btn-flat(href='/logout/') Keluar
 li
 div(style='margin-right:25px;')
</code></pre>
<h2>Membuat template sidebar.jade</h2>
Sekarang kita akan membuat template anak yaitu sidebar.jade. Di dalamnya hanya terdapat pendefinisian menu slide yang akan menyimpan berbagai menu untuk area admin dan area member. Menu yang tersedia terdiri dari "Data Master", "Keanggotaan", dan "Pengaturan untuk area admin. Sedangkan untuk area member hanya ada menu "Keanggotaan":
<pre><code>aside.main-sidebar
 section.sidebar
 ul.sidebar-menu
 li.header Admin Area
 li.treeview
 a(href='#')
 i.fa.fa-table
 span Data Master
 span.pull-right-container
 i.fa.fa-angle-left.pull-right
 ul.treeview-menu
 li
 a(href='#') Divisi
 li
 a(href='#') Jabatan
 li.treeview
 a(href='#')
 i.fa.fa-table
 span Keanggotaan
 span.pull-right-container
 i.fa.fa-angle-left.pull-right
 ul.treeview-menu
 li
 a(href='#') Anggota
 li
 a(href='#') Kontribusi
 li.treeview
 a(href='#')
 i.fa.fa-linkrendering
 span Pengaturan
 span.pull-right-container
 i.fa.fa-angle-left.pull-right
 ul.treeview-menu
 li
 a(href='/users') Pengguna
 li
 a(href='#') Tampilan
 li
 a(href='#') Backup Database
 li.header Member Area
 li.treeview
 a(href='#')
 i.fa.fa-table
 span Keanggotaan
 span.pull-right-container
 i.fa.fa-angle-left.pull-right
 ul.treeview-menu
 li
 a(href='#') Profil
 li
 a(href='#') Kontribusi

</code></pre>
<h2>Membuat template footer.jade</h2>
Lalu kita akan membuat template anak yaitu footer.jade. Di daldamnya hanya terdapat pendefinisian footer untuk aplikasi web yang akan kita bangun:
<pre><code>footer.main-footer
 div.pull-right.hidden-xs Pengelola Anggota Organisasi Anda
 strong Copyright &amp;copy; 2016 
 a(href="#") Codepolitan 
 | All rights reserved.
</code></pre>
<h2>Membuat template js.jade</h2>
Terakhir kita buat sebuah template anak bernama js.jade dimana didalamnya terdapat penggunaan file statis Javascript yang dibutuhkan oleh AdminLTE:
<pre><code>script(type='text/javascript', src='/adminlte/plugins/jQuery/jQuery-2.1.3.min.js')
script(type='text/javascript', src='/adminlte/bootstrap/js/bootstrap.min.js')
script(type='text/javascript', src='/adminlte/dist/js/app.min.js')
script(type='text/javascript', src='/adminlte/plugins/iCheck/icheck.min.js')
</code></pre>
<h2>Membuat template index.jade</h2>
Sekarang mari kita coba membuat sebuah halaman admin dengan gaya AdminLTE. Tentu saja kita gunakan base.jade yang sudah kita susun sebelumnya:
<pre><code>extends layout/base
block content 
 section.content-header
 h1
 | Hello World
 small This is a hello world page
 ol.breadcrumb
 li
 a(href='#')
 i.fa.fa-dashboard
 | Level
 li.active Here
 // Main content
 section.content
 // Your Page Content Here
 // /.row
 .row
 .col-xs-12
 .box
 .box-header
 h3.box-title Hi, Coders
 // /.box-header
 .box-body
 p Welcome to #{title}
 // /.box-body
 // /.box
 // /.content

</code></pre>
Seperti yang anda lihat, pada saat menggunakan extends, otomatis kita harus memanggil file base.jade dengan diawali nama folder dimana dia disimpan. Maka penggunaannya menjadi extends layout/base. Sedangkan untuk elemen yang akan ditempatkan di base.jade, kita harus tempatkan dibawah block content.

Sekarang mari kita lihat hasilnya pada gambar berikut:

<img class="size-large wp-image-13017 aligncenter" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/Selection_011-1-700x338.png" alt="Selection_011" width="700" height="338" />

<h2>Penutup</h2>
Dengan menggunakan template engine seperti Jade, diharapkan kita dapat membuat halaman website yang dinamis dan reusable. Tentu saja akan berbeda ceritanya bila kita mengandalkan clientside scripting seperit menggunakan Angular.js, React.js, atau Vue.js dimana proses layouting halaman langsung dilakukan di sisi web browser. Template engine seperti Jade mengakomodasi web developer yang masih menggunakan cara konvensional dalam membangun halaman web namun ingin ditenagai oleh Node.js.

Di tutorial berikutnya kita akan langsung mencoba autentikasi sederhana dimana data pengguna akan disimpan di MongoDB. Semoga bermanfaat :D.

(codepolitan/expressjs/nodejs)

Memulai Pembuatan Aplikasi Web dengan Express.js (2): Menggunakan Jade dan Memasang Template Web AdminLTE

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Memulai Pembuatan Aplikasi Web dengan Express.js (2): Menggunakan Jade dan Memasang Template Web AdminLTE

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

PDKT dengan MongoDB

Implementasi REST sederhana dengan MongoDB dan Silex

Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 1)

Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 2)

Membangun Aplikasi Web Sederhana dengan Angular.js dan REST (Bagian 3 - END)

Memulai Pembuatan Aplikasi Web dengan Yii2 (1): Instalasi