Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

🏠 » Javascript » How To Transfer AdminLTE To Jade Template Engine In Express.js

How To Transfer AdminLTE To Jade Template Engine In Express.js

By ∙ ∙ Javascript ∙ 3 Comments

Share : TwitterFacebookTelegramWhatsapp

Converting AdminLTE theme into jade template engine is quite easy to do. Using jade template engine facilitates and accelerates us to make front end web applications based node.js. Why I chose AdminLTE ? page HTML on AdminLTE to jade template engine. Throughout this tutorial, I will only discuss tutorials how to move adminLTE layouts into jade template engine at express for beginners.

What is a Node Js ?

I have yet to discuss what is node.js on seegatesite.com blog. This is my first tutorial on Node.js. May already be familiar to you about Node.js.

Node.js is a software designed to develop WEB-based applications. Node.js is executed as an application server. This platform uses the javascript programming language and uses non-blocking I/O technique to speed up the process.

The platform built by Ryan Dahl in 2009 then this is enough to make a big change in the world of development. The concept of event-driven and non-blocking i/o makes the Node.js as a new alternative for building server-side applications. For more information please visit the node.js official site.

Related Articles :

What is an Express Js ?

Express is one of the most popular frameworks in the node.js world. Complete documentation and it’s easy enough, it can make us develop various products such as web applications or RESTful API.

Express can also be used as the basis for building a web framework that is more complex, such as Sails.js, MEAN (MongoDB, Express.js, Angular.js, Node.js) and MERN (MongoDB, Express.js, React.js, Node.js).

Express.js created by TJ Holowaychuk and now managed by the community. For more information please read on the expressjs.com official site.

What is Jade Template Engine ?

One of the most popular template engines on NodeJS is JADE. According to https://www.npmjs.com/package/jade, the jade is a template engine that A clean and are whitespace-sensitive.

So it should be really considered writing code using jade. For the tutorial please read on http://naltatis.github.io/jade-syntax-docs/ ( absolutely complete )

Okay, the above is a little introduction about node.js, express and jade, let’s go back to the main topic. Before starting this tutorial, you should learn about jade template engine first. Why? If you immediately follow this tutorial without knowing the basic concept jade template engine , in my opinion, would be a bit of trouble (especially for beginners).

Transfer adminLTE theme to jade template engine in express JS

1. I sure you have already installed node.js and express.
2. Create new express project as expressproject

1
express --view=jade expressproject

then

1
2
cd myapp
npm install

3. Download adminLTE theme and fontawesome. Then copy both the framework into folder expressproject/public in your project. Make sure the sequence folder as picture below

Adminlte And Font Awesome Folder In The Public Folder Expressjs

Then create a folder named layout in the folder expressproject/views. Where we will put the layout parts that will be split into several sections as shown below.

Folder Layout In The Views Folder And Create 5 New Jade File

  • base.jade is the main part of the layout.
  • header.jade is the head of the layout in which there are codes for use stylesheets.
  • navigation.jade is the layout navigation located in the header.
  • sidebar.jade is the layout for the navigation menu located on the left sidebar.
  • footer.jade is the footer section of the adminLTE.
  • js.jade is the footer section that contains the assets of javascript and jquery

1. header.jade

Copy the following code and paste it in the file header.jade

1
2
3
4
5
6
title=AdminLTE
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/_all-skins.min.css')
link(rel='stylesheet', href='/adminlte/plugins/iCheck/square/blue.css')

2. navigation.jade

Copy the following code and paste it in the file navigation.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
header.main-header
a(href='/').logo
span.logo-mini
<b>A</b> LT
span.logo-lg
<b>Admin</b> LT
nav(role='navigation').navbar.navbar-static-top
a(href='#', role='button', data-toggle='offcanvas').sidebar-toggle
span.sr-only Toggle Navigation
span.icon-bar
span.icon-bar
span.icon-bar
div.navbar-custom-menu
ul.nav.navbar-nav
li.dropdown.messages-menu
a(href='#', data-toggle='dropdown').dropdown-toggle
i.fa.fa-envelope-o
span.label.label-success
| 4
ul.dropdown-menu
li.header
| You have 4 messages
li
ul.menu
li
a(href='#')
.pull-left
img(src='/adminlte/dist/img/user2-160x160.jpg',alt="User image").img-circle
h4
| Support Team
small
i.fa.fa-clock-o 5 mins
p
| Why not buy a new awesome theme?
li.footer
a(href='#')
| See All Messages
 
li.dropdown.notifications-menu
a(href='#',data-toggle='dropdown').dropdown-toggle
i.fa.fa-bell-o
span.label.label-warning
| 0
ul.dropdown-menu
li.header
| You have 10 notifications
li
ul.menu
li
a(href='#')
i.fa.fa-users.text-aqua
| 5 new members joined today
li.footer
a(href='#')
| View All
 
li.dropdown.tasks-menu
a(href='#',data-toggle='dropdown').dropdown-toggle
i.fa.fa-flag-o
span.label.label-danger
|9
ul.dropdown-menu
li.header
| You have 9 tasks
li
ul.menu
li
a(href='#')
h3
| Design some buttons
small.pull-right
|20%
.progress.xs
.progress-bar.progress-bar-aqua(style='width:20%',role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
span.sr-only
| 20% Complete
li.footer
a(href='#')
| View all tasks
li.dropdown.user.user-menu
a(href='#',data-toggle='dropdown').dropdown-toggle
img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').user-image
span.hidden-xs
| Alexander Pierce
ul.dropdown-menu
li.user-header
img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').img-circle
p
| Alexander Pierce - Web Developer
small
| Member since Nov. 2012
li.user-body
.row
.col-xs-4.text-center
a(href='#')
| Followers
.col-xs-4.text-center
a(href='#')
| Sales
.col-xs-4.text-center
a(href='#')
| Friends
 
li.user-footer
.pull-left
a(href='#').btn.btn-default.btn-flat
| Profile
.pull-right
a(href='#').btn.btn-default.btn-flat
| Sign out

3. sidebar.jade

Copy the following code and paste it in the file sidebar.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
aside.main-sidebar
section.sidebar
.user-panel
.pull-left.image
img(src='/adminlte/dist/img/user2-160x160.jpg',alt='User Image').img-circle
.pull-left.info
p Alexander Pierces
a(href='#')
i.fa.fa-circle.text-success
| Online
form(action='#',method='get').sidebar-form
.input-group
input(type='text', name='q',placeholder='Search...').form-control
span.input-group-btn
button(type='submit', name='search')#search-btn.btn.btn-flat
i.fa-fa-search
ul.sidebar-menu
li.header
| Main Navigation
li.treeview
a(href='#')
i.fa.fa-dashboard
span
| Dashboard
span.pull-right-container
i.fa.fa-angle-left.pull-right
ul.treeview-menu
li
a(href='#')
i.fa.fa-circle-o
| Dashboard V1
li
a(href='#')
i.fa.fa-circle-o
| Dashboard V2
li.treeview
a(href='#')
i.fa.fa-files-o
span
| Layout Options
span.pull-right-container
span.label.label-primary.pull-right
| 4
ul.treeview-menu
li
a(href='#')
i.fa.fa-circle-o
| Top Navigation
li
a(href='#')
i.fa.fa-circle-o
| Boxed
li
a(href='#')
i.fa.fa-circle-o
| Fixed
li
a(href='#')
i.fa.fa-circle-o
| Collapsed Sidebar
li
a(href='#')
i.fa.fa-th
span
| Widgets
span.pull-right-container
small.label.pull-right.bg-green
| Hot
li.treeview
a(href='#')
i.fa.fa-pie-chart
span
| Chart
span.pull-right-container
i.fa.fa-angle-left.pull-right
ul.treeview-menu
li
a(href='#')
i.fa.fa-circle-o
| ChartJs
li
a(href='#')
i.fa.fa-circle-o
| Morris
li
a(href='#')
i.fa.fa-circle-o
| Flot
li
a(href='#')
i.fa.fa-circle-o
| ChartJs
li
a(href='#')
i.fa.fa-circle-o
| Inline charts
li.treeview
a(href='#')
i.fa.fa-laptop
span
| UI Elements
span.pull-right-container
i.fa.fa-angle-left.pull-right
ul.treeview-menu
li
a(href='#')
i.fa.fa-circle-o
| General
li
a(href='#')
i.fa.fa-circle-o
| Icons
li
a(href='#')
i.fa.fa-circle-o
| Buttons
li
a(href='#')
i.fa.fa-circle-o
| Sliders
li
a(href='#')
i.fa.fa-circle-o
| Timeline
li
a(href='#')
i.fa.fa-circle-o
| Modals

4. footer.jade

Copy the following code and paste it in the file footer.jade

1
2
3
4
5
6
7
8
footer.main-footer
.pull-right.hidden-xs
|  <b>Version</b> 2.3.7
strong
| Copyright &copy; 2016
a(href="#") >Almsaeed Studio
| All rights reserved.
.control-sidebar-bg

5. js.jade

Copy the following code and paste it in the file js.jade

1
2
3
4
5
script(type='text/javascript', src='/adminlte/plugins/jQuery/jquery-2.2.3.min.js')
script(type='text/javascript', src='/adminlte/bootstrap/js/bootstrap.min.js')
script(type='text/javascript', src='/adminlte/plugins/slimScroll/jquery.slimscroll.min.js')
script(type='text/javascript', src='/adminlte/dist/js/app.min.js')
script(type='text/javascript', src='/adminlte/plugins/iCheck/icheck.min.js')

6. base.jade

Copy the following code and paste it in the file base.jade

1
2
3
4
5
6
7
8
9
10
11
12
doctype html
html
head
include header.jade
body.hold-transition.skin-blue.sidebar-mini
.wrapper
include navigation.jade
include sidebar.jade
.content-wrapper
block content
include footer.jade
include js.jade

Base jade is the main page that will be used as a template to create a new page

If you’ve completed the above step, please try to create a new page by creating a file with the name blankpage.jade. Make sure the order of the file same with the image below

Blankpage Jade Order File

Copy the following code and paste it in the file blankpage.jade

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
extends layout/base
block content
section.content-header
h1
| Blank Page
small it all starts here
ol.breadcrumb
li
a(href='#')
i.fa.fa-dashboard
| Level
li.active Here
section.content
.box
.box-header.with-border
h3.box-title
| Title
.box-tools.pull-right
button(type='button', data-widget='collapse', data-toggle='tooltip',title='collapse').btn.btn-box-tool
i.fa.fa-minus
button(type='button', data-widget='remove', data-toggle='tooltip',title='Remove').btn.btn-box-tool
i.fa.fa-times
.box-body
| Start Creating your amazing application!
.box-footer
| Footer

Do not forget to add routes to access the blankpage.jade file on index.js in the folder routes

1
2
3
router.get('/blankpage', function(req, res, next) {
  res.render('blankpage', { title: 'Express' });
});

Create Routes For Blankpage In Index Js In The Routes Folder

To enable expressJS so that it can run in the browser please execute the following code

1. Please go to the folder expressproject through a terminal ubuntu or command prompt windows

2. Please execute the following code

Linux

1
  DEBUG=expressproject:* npm start

Windows

1
  DEBUG=expressproject:* & npm start

Please open your browser and run the following URL

http://localhost:3000/blankpage

If successful will be as shown below

How To Transfer Adminlte In Jade Template Engine In The Express Js

If you are interested to get the full source code please share this article with the button below

Thus my article on How To Transfer To Jade Template Engine AdminLTE In Express.js, may be useful. If there are suggestions and questions please ask through the comment field below

Another Javascript Related Post :

Reader Interactions

Comments

  1. Nice post, it helped me to use the Admin LTE with express-handlebars engine after trying your code.
    Best regards

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.