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:
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:
Now let's look at the first page generated by Express.js in the web browser. Please access the URL http://localhost:3000/$ npm install express -g
$ express demo
$ npm install
$ npm start
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:
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)
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.
