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

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

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

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

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

6. 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).

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

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

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

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

11. 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”

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

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

14. 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,

15. 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 user = req.body.user ;
    // Set our collection
    var collection = db.get('usercollection');
    // Submit to the DB
    collection.insert( { "username" : userName,
                         " " : user },
                       function (err, doc) 
                       {
                           if (err) {
                               res.send("Insert failed.");
                           }
                           else {
                               // Forward to success page
                               res.redirect("userlist");
                       });
});

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

17. 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, 1 },
                     function(err, doc) 
                     {
                         if (err) {
                             res.send("Find failed.");
                         }
                         else {
                             res.render('showuser', 
                                        { title: 'Show User: ' + uname,
                                          mail: doc[0]. })
                     });
});
routes/showuser.jade
extends layout
block content
    h1= title
    p #{mail}

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

19. 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);
                       });
});

20. 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:

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