Web Application Creation Tutorial with Express.js (Part 2): Using Jade and Installing AdminLTE Web Templates

Advertisement

This time we will focus on installing the famous web template for Admin page of AdminLTE. Before stepping into another technique, this technique will we put it first because the target of this tutorial is to create a web application that can be used. Throughout this tutorial, we will build an app called Organo. An application that can help us record members based on the divisions and positions of the organizations we manage. This app is suitable for executives of student executive bodies, mosque family council members, small-scale environmental activists and others.

For starters, this app needs the following things:

• Web template AdminLTE
• FontAwesome font library
• Mongoose
• MongoDB
• Various support packages for Express.js like express-session, express-flash, express-validator, and more

But we will focus first on the installation of AdminLTE web template before stepping into other tutorial sections.

Installation

To use Express.js, make sure you install Node.js first and make sure the NPM is working. This tutorial is created using Node.js version 5.10.1 and NPM version 3.8.5. Via console or terminal please execute the following command. Make sure select the folder you like:

$ npm install express -g
$ express demo
$ npm install
$ npm start

Now let's look at the first page generated by Express.js in the web browser. Please access the URL http://localhost:3000/

Puts static assets in the public folder

Please first download the AdminLTE and the Awesome Fonts that have been prepared for this tutorial at the following link: https://dl.dropboxusercontent.com/u/54840757/picture/codepolitan/assets-organo-public.zip. Then extract the zip and put all the folders in the extracted folder into the demo / public folder. You can see the folder structure in the following picture: 

As for the whole folder, here is the arrangement of folders and files that will be formed at the end of this tutorial:

Then please also create a folder with the name of the layout in the demo/views folder. Where we will put the parts of the layout to be split into several parts. These sections include:

• base.jade, the main part of the layout that will be used by templates in other folders
• head.jade, the head section of the layout wherein the tags contain the use of static CSS assets
• nav.jade, the Admin navigation page is a dropdown menu
• sidebar.jade, the Admin navigation page is a slider menu
• footer.jade, the foot section of the layout
• js.jade, the foot section that contains the Javascript static asset usage tag

Creating template base.jade

First let's make the base.jade code first:

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

In it there is another template usage by using keyword include. The use of the command include head.jade has the meaning of the head.jade template that one folder with base.jade will be used by base.jade. Then there's also block content which means every other template that uses base.jade and block content that has the element under the tag will be placed on the block content that is in base.jade.

Create a head.jade template

Now we will create a child template that is head.jade. In it there is only the use of various CSS files used by the AdminLTE web template: 

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')

Make sure that you have installed the AdminLTE folder and the Awesome Font in the demo/public folder. 

Creating template nav.jade

Now we will create a child template that is nav.jade. In it there is only a definition of popup menu that will save the edit profile button and exit button and display the profile photo of the user 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 Teuku Maulana
                    ul.dropdown-menu
                        li.user-header
                            img.img-circle(src='/adminlte/dist/img/avatar.png', alt='User Image')
                            p
                                | Teuku Maulana
                        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;')

 

Create a sidebar.jade template

Now we will create a child template that is sidebar.jade. In it there is only a definition of slide menu that will store various menus for the admin area and member area. The available menu consists of "Master Data", "Membership", and "Settings for the admin area." For member area there is only "Membership" menu:

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

 

Create a footer.jade template

Then we will create a child template that is footer.jade. In it there is only a footer definition for the web application we will build: 

footer.main-footer
    div.pull-right.hidden-xs All Tutorials
    strong Copyright © 2017
        a(href="#") AllTutorials
    | All rights reserved.

 

Create a js.jade template

Finally we create a child template named js.jade where in it there is the use of Javascript static files required by 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')

 

Create an index.jade template

Now let's try to create an Admin page with AdminLTE style. Of course we use the base.jade we have compiled before: 

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

As you can see, when using extends, we should automatically call the base.jade file with the name of the folder where it was stored. Then its use becomes extends layout/base. As for the element to be placed in base.jade, we must place it under block content.

Now let's see the result in the following picture: 

Closing

By using template engine like Jade, hopefully we can create a website page that is dynamic and reusable. Of course it would be different story if we rely on clientside scripting like using Angular.js, React.js, or Vue.js where the process of layouting the page directly done on the web browser. Template engines like Jade accommodate web developers who still use conventional ways of building web pages but want to be powered by Node.js.

In the next tutorial we will immediately try a simple authentication where user data will be stored in MongoDB. Hopefully useful.

Cooperation with (codepolitan / expressjs / nodejs)

Found an article helpful? Donate via Paypal

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.