1. CMPE 280 Web UI Design and Development October 19 Class Meeting
Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak

2. Express/MongoDB Example
A very simple example of Express on the server side accessing a MongoDB database.
We will display some user documents that each contains a user name and an address.
Recall that a document is analogous to a record in a relational database.
Recall that a collection is analogous to to a relational table.
We will add new documents.

3. Install the Express Generator
The generator creates project scaffolding.
~: npm install -g express-generator
(node:24252) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
/usr/local/bin/express -> /usr/local/lib/node_modules/express-generator/bin/express-cli.js
/usr/local/lib
└──

4. Create a New Express Project
~: express nodetest1
  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options
   create : nodetest1
   create : nodetest1/package.json
   create : nodetest1/app.js
   create : nodetest1/public
   create : nodetest1/routes
   create : nodetest1/routes/index.js
   create : nodetest1/routes/users.js
   create : nodetest1/views
   create : nodetest1/views/index.jade
   create : nodetest1/views/layout.jade
   create : nodetest1/views/error.jade
   create : nodetest1/bin
   create : nodetest1/bin/www
   create : nodetest1/public/javascripts
   create : nodetest1/public/images
   create : nodetest1/public/stylesheets
   create : nodetest1/public/stylesheets/style.css
   install dependencies:
     $ cd nodetest1 && npm install
   run the app:
     $ DEBUG=nodetest1:* npm start

5. Add Project Dependencies
Modify nodetest1/package.json {
...
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "mongodb": "^2.2.25",
    "monk": "^4.0.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  } }
Monk: “A tiny layer that provides
simple yet substantial usability
improvements for MongoDB
usage within Node.JS.”

6. Start the node.js Web Server
First install the dependencies:
Then start the node.js web server:
Send your web browser to localhost:3000
~: npm install
~: npm start
> start /Users/rmak/nodetest1
> node ./bin/www
Demo

7. “Hello World” In 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' });
});
/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
    res.render('helloworld', { title: 'Hello, World!' });

8. “Hello World” cont’d In views/helloworld.jade
Send your web browser to localhost:3000/helloworld
extends layout
block content
  h1= title
  p Hello, World! Welcome to #{title}
Demo

9. Initialize the MongoDB Database
Start the MongoDB shell.
Insert the first document:
/usr/local/Cellar/mongodb/3.2.10: mongo
MongoDB shell version:
connecting to: test
Server has startup warnings: 
T02:30: I CONTROL  [initandlisten] 
T02:30: I CONTROL  [initandlisten] ** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000
> use nodetest1
switched to db nodetest1
> db.usercollection.insert({ "username" : "testuser1", " " : })
WriteResult({ "nInserted" : 1 })
Collection usercollection
is automatically created
the first time we add to it.

10. Initialize the MongoDB Database, cont’d
> db.usercollection.find().pretty() {
"_id" : ObjectId("59e b5f794be534cda"),
"username" : "testuser1",
" " : }
Yes, it was successfully inserted.
So insert two more documents.

11. Initialize the MongoDB Database, cont’d
> newstuff = [{ "username" : "testuser2", " " : },
{ "username" : "testuser3", " " : }] [ {
"username" : "testuser2",
" " : },
"username" : "testuser3",
" " : } ]
> db.usercollection.insert(newstuff);
BulkWriteResult({
"writeErrors" : [ ],
"writeConcernErrors" : [ ],
"nInserted" : 2,
"nUpserted" : 0,
"nMatched" : 0,
"nModified" : 0,
"nRemoved" : 0,
"upserted" : [ ] })

12. Initialize the MongoDB Database, cont’d
> db.usercollection.find().pretty() {
"_id" : ObjectId("59e b5f794be534cda"),
"username" : "testuser1",
" " : }
"_id" : ObjectId("59e b5f794be534cdb"),
"username" : "testuser2",
" " :
"_id" : ObjectId("59e b5f794be534cdc"),
"username" : "testuser3",
" " :

13. Connect to the MongoDB Database
In app.js
Use Monk to connect to the database nodetest1 at the default MongoDB port
Make the database accessible to the router:
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');
app.use(function(req, res, next) {
req.db = db;
next(); } );

14. Display Database Data In routes/index.js /* GET Userlist page. */
router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({}, {}, function(e, docs)
        res.render('userlist', {
            "userlist" : docs
        });
    }); } );
Fill the docs with
database documents
and then render them.

15. Display Database Data, cont’d
In views/userlist.jade
Send your web browser to localhost:3000/userlist
block content
    h1.
        User List
    ul
        each user, i in userlist
            li
                a(href="mailto:#{user. }")= user.username
Demo

16. Display the New User Form
In routes/index.js
/* GET New User page. */
router.get('/newuser', function(req, res) {
    res.render('newuser',
{ title: 'Add New User' });
});

17. Display the New User Form, cont’d
In views/newuser.jade
Send your web browser to localhost:3000/newuser
extends layout
block content
    h1= title
    form#formAddUser(name="adduser",method="post",action="/adduser")
        input#inputUserName(type="text", placeholder="username", name="username")
        input#inputUser (type="text", placeholder="user ", name="user ")
        button#btnSubmit(type="submit") submit
Demo

18. Add a New User In routes/index.js /* POST to Add User Service */
router.post('/adduser', function(req, res) {
    // Set our internal DB variable
    var db = req.db;
    // Get our form values. These rely on the "name" attributes
    var userName = req.body.username;
    var user = req.body.user ;
    // Set our collection
    var collection = db.get('usercollection');

19. Add a New User, cont’d In routes/index.js, cont’d // Submit to the DB
    collection.insert( { "username" : userName,
        " " : user },
function (err, doc) {
        if (err)
            // If it failed, return error
            res.send("There was a problem.");
        }
        else
            // And forward to success page
            res.redirect("userlist");
    });
});

20. Add a New User, cont’d Send your web browser to localhost:3000/newuser
The completed application would have much more error checking.
Demo

21. Assignment #4 Add a MongoDB database to your project.
Create web pages to:
display documents
add and delete documents
update documents
You must use Express and either Monk or Mongoose to talk to the database.
Monk:
Mongoose: