Web Application with ExpressJS

By Satit Rianpit <rianpit@gmail.com>

Installation

$ npm init
$ npm install express --save

$ npm install express-generator -g

Generator

$ npm install nodemon -g

Monitoring tool

Create new  project

$ express myapp

create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

Running App

$ cd myapp
$ npm install
$ node .\bin\www

Debug

Result

// with monitoring

$ cd myapp
$ npm install
$ nodemon .\bin\www

Application structure

Basic routing

// routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

// app.js

var routes = require('./routes/index');

Routing Example

// respond with "Hello World!" on the homepage
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// accept POST request on the homepage
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

// accept PUT request at /user
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

// accept DELETE request at /user
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

Get parameters

Routing: /users/:id
Get parameter: req.params.id

Routing: /users?id=100
Get paraeter: req.query.id

Routing: via JSON {id: 100, name: 'Satit'}
Get parameters: req.body.id, req.body.name

http://expressjs.com/api.html#app.param

http://expressjs.com/api.html#req.query

http://expressjs.com/api.html#req.body

Static file

// Default Express static file
app.use(express.static(path.join(__dirname, 'public'))); 

// Custom
app.use(express.static('public'));
app.use(express.static('files'));

// Static folder with url.
app.use('/static', express.static('public'));

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Result

Middleware

router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

Result

Middleware example

// app.js

var auth = function (req, res, next) {
    if (req.session.username) {
        next();
    } else {
        res.redirect('/login');
    }
};

// routers/index.js

app.get('/admin', auth, function (req, res) {
    res.render('views/admin');
});

Template engine

// app.js

// set view path
app.set('views', './views')

// set view engine
app.set('view engine', 'jade');

//- views/index.jade

html
  head
    title!= title
  body
    h1!= message

// routes/index.js

router.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!'});
});

Datebase integration

// Install mysql module

$ npm install mysql

// routes/index.js

router.get('/', function (req, res) {
    var mysql      = require('mysql');
    var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'dbuser',
        password : 's3kreee7'
    });

    connection.connect();

    connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
      if (err) throw err;
      console.log('The solution is: ', rows[0].solution);
    });

    connection.end();
});

Session

// Install module

$ npm install express-session --save

// app.js

app.use(session({
    secret: 'MySeCrETkEy',
    resave: false,
    saveUninitialized: true,
    secure: true
}));

// routes/index.js

router.get('/users', function (req, res) {
    if (req.session.username) {
        res.send('Welcome, ' + req.session.username);
    } else {
        res.redirect('/login');
    }
});

// set session
router.get('/dologin', function (req, res) {
    req.session.username = 'Satit';
    req.session.userType = 1;
});

Destroy Session

// Remove sessioin

app.get('/logout', function (req, res) {
    req.session.destroy(function(err) {
        res.redirect('/login');
    });
});

Upload file

$ npm install multer

// app.js

var multer  = require('muster');
app.use(multer({ dest: './uploads/'}));

// views/upload.jade

form(enctype="multipart/form-data", action="/upload", method="post")
    input(type="file", name="userFile")
    input(type="submit", value="Upload File" name="submit")

// routes/index.js

router.post('/upload', function (req, res) {
    console.log(req.files);
    res.send({file: req.files});
});

Modules

// models/Users.js

exports.doLogin = function (db, username, password) {
    var q = Q.defer();

    db('sys_member')
        .select('*')
        .where('username', username)
        .where('password', md5(password))
        .where('status', 'yes')
        .exec(function (err, rows) {
            if (err) q.reject(err);
            else q.resolve(rows);
        });

    return q.promise;
};

// controllers/Users.js

var Users = require('../models/Users');

exports.login = function (req, res) {
    var username = req.body.username;
    var password = req.body.password;

    Users.doLogin(req.db, username, password)
        .then(function (rows) {
            res.send({ok: true, users: rows});
        });
};

// routes/index.js

var Users = require('../controllers/Users');
router.post('/login', Users.login);

router.get('/users/add', function (req, res) {
    res.render('users/add');
};

Login System

extends ../login

block scripts
    script(src="/javascripts/LoginController.js")
    script(src="/javascripts/LoginService.js")

block content

    div(flex-container="column", flex-align="space-between center", ng-controller="LoginController")
        form(name="frmLogin")
            div(flex-item="6", style="width: 300px;")
                .fs-title.display-block
                    i.mdi.mdi-account-key.icon.icon--l.icon--red.icon--circled
                    |   เข้าสู่ระบบ (Login system)

                lx-text-field(label="Username")
                    input(type="text", ng-model="username")
                lx-text-field(label="Password")
                    input(type="password", ng-model="password")

                button(ng-click="doLogin()").btn.btn--l.btn--green.btn--raised เข้าสู่ระบบ

URL: /login
Method: GET

File: views/users/login.jade  [Express]

Click login button

// File: public/javascripts/LoginController.js  [AngularJS]
// เมื่อคลิกปุ่มล๊อกอิน จะเรียกใช้งานฟังก์ชัน doLogin()

$scope.doLogin = function () {

        LoginService.doLogin($scope.username, $scope.password)
            .then(function (data) {
                if (data.ok) {
                    $window.location.href = '/';
                } else {
                    LxNotificationService.error('ชื่อผู้ใช้งาน/รหัสผ่าน ไม่ถูกต้อง');
                }
            }, function (err) {
                LxNotificationService.error('Oop!');
                console.log(err);
            });
        
    };

// File: public/javascripts/LoginService.js [AngularJS]
doLogin: function (username, password) {
    var q = $q.defer();

    $http({
        url: '/login/dologin',
        method: 'POST',
        data: { username: username, password: password }
    })
        .success(function (data) {
            q.resolve(data);
        })
        .error(function (data, status) {
            q.reject(status);
        });

    return q.promise;
}