CMPE 280 Web UI Design and Development October 19 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak

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 email 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.

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 └── express-generator@4.15.5 

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

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.” https://www.npmjs.com/package/monk

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 > nodetest1@0.0.0 start /Users/rmak/nodetest1 > node ./bin/www Demo

“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!' });

“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

Initialize the MongoDB Database Start the MongoDB shell. Insert the first document: /usr/local/Cellar/mongodb/3.2.10: mongo MongoDB shell version: 3.2.10 connecting to: test Server has startup warnings:  2017-10-19T02:30:02.649-0700 I CONTROL  [initandlisten]  2017-10-19T02:30:02.649-0700 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", "email" : "testuser1@testdomain.com" }) WriteResult({ "nInserted" : 1 }) Collection usercollection is automatically created the first time we add to it.

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

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

Initialize the MongoDB Database, cont’d > db.usercollection.find().pretty() { "_id" : ObjectId("59e8711733b5f794be534cda"), "username" : "testuser1", "email" : "testuser1@testdomain.com" } "_id" : ObjectId("59e8715233b5f794be534cdb"), "username" : "testuser2", "email" : "testuser2@testdomain.com" "_id" : ObjectId("59e8715233b5f794be534cdc"), "username" : "testuser3", "email" : "testuser3@testdomain.com"

Connect to the MongoDB Database In app.js Use Monk to connect to the database nodetest1 at the default MongoDB port 27017. 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(); } );

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.

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.email}")= user.username Demo

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

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#inputUserEmail(type="text", placeholder="useremail", name="useremail")         button#btnSubmit(type="submit") submit Demo

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 userEmail = req.body.useremail;     // Set our collection     var collection = db.get('usercollection');

Add a New User, cont’d In routes/index.js, cont’d // Submit to the DB     collection.insert( { "username" : userName,         "email" : userEmail }, 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");     }); });

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

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: https://www.npmjs.com/package/monk Mongoose: https://www.npmjs.com/package/express-mongoose