0
10
0
share
#Tutorial
0 Reactions
10 Komentar
Memulai Pembuatan Aplikasi Web dengan Express.js (2): Menggunakan Jade dan Memasang Template Web AdminLTE
Muhammad Arslan • 20 Oktober 2016
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:
- web template AdminLTE
- font library FontAwesome
- Mongoose
- MongoDB
- Berbagai package pendukung untuk Express.js seperti express-session, express-flash, express-validator, dan lainnya
Instalasi
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:$ npm install express -g
$ express demo
$ npm install
$ npm start
Meletakkan aset statis di folder public
Silahkan unduh terlebih dahulu AdminLTE dan Font Awesome yang sudah disiapkan untuk tutorial ini di tautan berikut: https://dl.dropboxusercontent.com/u/54840757/picture/codepolitan/assets-organo-public.zip. 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:
Sedangkan untuk keseluruhan folder, berikut adalah susunan folder dan file yang akan terbentuk di akhir tutorial ini:
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:
- base.jade, bagian utama dari layout yang akan digunakan oleh template di folder lain
- head.jade, bagian kepala layout dimana di dalamnya terdapat tag penggunaan aset statis CSS
- nav.jade, bagian navigasi halaman Admin berupa dropdown menu
- sidebar.jade, bagian navigasi halaman Admin berupa slider menu
- footer.jade, bagian kaki dari layout
- js.jade, bagian kaki yang berisi tag penggunaan aset statis Javascript
Membuat template base.jade
Pertama mari kita buat kode base.jade terlebih dahulu: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.doctype html html head include head.jade body.hold-transition.skin-blue.sidebar-mini div.wrapper include nav.jade include sidebar.jadediv.content-wrapper block content include footer.jade div.control-sidebar-bg include js.jade
Mari kita lanjut ke bagian lainnya :D.
Membuat template head.jade
Sekarang kita akan membuat template anak yaitu head.jade. Di dalamnya hanya terdapat penggunaan berbagai file CSS yang digunakan oleh web template AdminLTE: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')
Membuat template nav.jade
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: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;')
Membuat template sidebar.jade
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":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
Membuat template footer.jade
Lalu kita akan membuat template anak yaitu footer.jade. Di daldamnya hanya terdapat pendefinisian footer untuk aplikasi web yang akan kita bangun:footer.main-footer
div.pull-right.hidden-xs Pengelola Anggota Organisasi Anda
strong Copyright © 2016
a(href="#") Codepolitan
| All rights reserved.
Membuat template js.jade
Terakhir kita buat sebuah template anak bernama js.jade dimana didalamnya terdapat penggunaan file statis Javascript yang dibutuhkan oleh AdminLTE: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')
Membuat template index.jade
Sekarang mari kita coba membuat sebuah halaman admin dengan gaya AdminLTE. Tentu saja kita gunakan base.jade yang sudah kita susun sebelumnya: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.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
Sekarang mari kita lihat hasilnya pada gambar berikut:
Penutup
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)