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

Summary: Express + MongoDB Express generates server-side scaffolding for a web application. Initial app.js and package.json files. Directory structure including the routes and views subdirectories. Query a MongoDB database with JavaScript. Use the Monk API on top of Express. Mongoose is another popular API.

Summary: Express + MongoDB, cont’d MongoDB is a NoSQL database that uses the document model. Each key is paired with a complex data structure called a document. Analogous to a record of a relational database. A document is stored as JSON or binary JSON. You can search on any field of the document. Documents are grouped into collections. Analogous to a table of a relational database.

Summary: Express + MongoDB, cont’d Use Express routing to interact with a MongoDB database. Route a URL to a database operation. Routing code kept in Express’s routes subdirectory. Database CRUD. Create, Read, Update, and Delete data. A route can dynamically generate a web page. Generate web pages with Jade templates. Jade code kept in Express’s views subdirectory.

Model-View-Controller Architecture (MVC) Design goal: Identify which objects are model, view, or controller. A user cannot directly modify the model.

MVC Implementation: Loose Coupling Keep the implementations of the three objects types separate. Each type of objects does not depend on how the other types are implemented. Your application is more robust (resilient to change).

MVC Model Objects Represent the persistent information maintained by your application. AKA entity objects Maintained in a database such as MongoDB. Manipulated by JavaScript code via object-document mapping (ODM). Analogous to object-relational mapping (ORM). ODM implemented by packages such as Monk or Mongoose.

MVC View Objects View objects represent user interface components. Input components of a web page. In each use case, users interact with at least one view object. A view object collects information from users in a form that the model and controller objects can use.

MVC Controller Objects Coordinate the model and view objects. Often have no physical counterpart in the real world. Collect information from view objects for dispatch to model objects. This is how user-entered data can update the model. Can be implemented by routing. Represent application control flows.

Routes A route is a mapping from an incoming HTTP request to the appropriate controller code. Associates a URI plus an HTTP method (get or post) with a particular controller action. HTTP method also called HTTP verb Most widely used HTTP methods in web apps are GET, POST, PUT, and DELETE. Defined by the HTTP standard.

REST Representational State Transfer First developed by Roy Fielding in his Ph.D. dissertation in 2000. Entities manipulated by a web app are resources. Design routes such that any HTTP request contains all the information necessary to identify both a resource and the action to perform on it. “Expose RESTful APIs”

Database Actions and HTTP Verbs Mapping between database CRUD actions and HTTP verbs: A web browser is only able to issue GET and POST requests. Therefore, Express “fakes” the PUT and DELETE requests with framework logic. Database action HTTP verb Create POST Read (show) GET Update PUT Delete DELETE

Default RESTful Actions Express uses REST, which expands the read database action (HTTP GET) into four RESTful actions: RESTful action HTTP verb Description index GET List all documents. show Show one document. new Show a form to create a new document. edit Show a form to edit an existing document. create POST Create a new document. update PUT Update an existing document. destroy DELETE Delete a document.

RESTful App Example Think of a web app primarily as a collection of resources accessible via RESTful APIs. Example: Operation on resource Method and URI Controller action Read (index) all users GET /userlist index Read (show) a user GET /userlist/:username show Display form to create a new user GET /newuser new Display form to edit a user GET /edituser/:username edit Create a new user from form data POST /adduser create Update a user from form data PUT /userlist/:username update Delete a user DELETE /deleteuser/:username destroy Engineering Software as a Service by Armando Fox & David Patterson self-published, 2014-2016

RESTful App Example, cont’d Create a new user app.js 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');     // Submit to the DB     collection.insert( { "username" : userName,                          "email" : userEmail },                        function (err, doc)                         {                            if (err) {                                res.send("Insert failed.");                            }                            else {                                // Forward to success page                                res.redirect("userlist");                        }); });

RESTful App Example, cont’d Read (index) all users app.js 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 });                             }); }); routes/userlist.jade extends layout block content     h1.         User List     ul         each user, i in userlist             li                 a(href="mailto:#{user.email}")= user.username

RESTful App Example, cont’d Read (show) a single user app.js router.get('/userlist/:username', function(req, res)  {     var uname = req.params.username;     var db = req.db;     var collection = db.get('usercollection');          collection.find( { username : uname },                       { _id: 0, email: 1 },                      function(err, doc)                       {                          if (err) {                              res.send("Find failed.");                          }                          else {                              res.render('showuser',                                          { title: 'Show User: ' + uname,                                           mail: doc[0].email })                      }); }); routes/showuser.jade extends layout block content     h1= title     p Email: #{mail}

RESTful App Example, cont’d Update a user An exercise for the reader! See collection.update()

RESTful App Example, cont’d Delete a user app.js router.get('/deleteuser/:username', function(req, res)  {     var uname = req.params.username;     var db = req.db;     var collection = db.get('usercollection');     // Submit to the DB     collection.remove( { "username" : uname },                        function (err, doc)                         {                            if (err) {                                res.send("Delete failed.");                            }                            else {                                res.send("Successfully deleted " + uname);                        }); });

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

Assignment #4, cont’d Create a RESTful API to perform operations on your MongoDB database. Due Monday, October 30.