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

Sessions Each time a user requests a web page from your application is a separate and isolated request and response. To provide a good user experience, your server must maintain a “conversation” by remembering information from one request to another. Otherwise, your application has severe amnesia. For example, your application needs to remember that a user has already logged in.

Sessions, cont’d Many applications require new users to register. You can store registered users in a database. Registered user then must log in each time to use the application. The application can keep track of a logged-in user in a session. Only logged-in users can visit certain pages. The application remembers that a user is logged in so that each request doesn’t require a log in. Each logged-in user is in a separate session.

Example: User Authentication A very simple example of user authentication. User registration and log in We will use the express-session module: ...   "dependencies": {     "body-parser": "~1.18.2",     "debug": "~2.6.9",     "express": "~4.15.5",     "express-session": "^1.15.6",     "jade": "~1.11.0",     "mongodb": "^2.2.25",     "monk": "^4.0.0",     "morgan": "~1.9.0",     "serve-favicon": "~2.4.5"   } package.json

User Authentication, cont’d var express = require('express'); var path = require('path'); var bodyParser = require('body-parser'); var session = require('express-session'); var index = require('./routes/index'); var app = express(); //View engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true }));  app.use(express.static(path.join(__dirname, 'public'))); app.use(session( {secret: "String for encrypting cookies." } )); app.use('/', index); module.exports = app; app.listen(3000); app.js

User Authentication, cont’d routes/index.js var express = require('express'); var router = express.Router(); var registeredUsers = []; /*  * GET home page.  */ router.get('/', function(req, res, next)  {     res.render('index', { title: 'Authentication Demo' }); });  * GET registration page. router.get('/register', function(req, res)     res.render('register',               { message: "Please register!" });

User Authentication, cont’d routes/index.js /*  * POST registration page.  */ router.post('/register', function(req, res) {     if(!req.body.username || !req.body.password)     {         res.status("400");         res.send("Invalid details!");     }      else          // Create an array of users with matching usernames.         var matches = registeredUsers.filter(function(user)                       {                           return user.username === req.body.username;                       });         

User Authentication, cont’d routes/index.js         // If there is a match, the user has already registered.         if (matches.length > 0)         {             res.render('register', {message: "User already registered!"});         }                  // Register a new user.         else             var newUser = { username: req.body.username,                              password: req.body.password };             registeredUsers.push(newUser);             console.log("New user:"); console.log(newUser);             console.log("Registered users:"); console.log(registeredUsers);             res.redirect('/login');     } });

User Authentication, cont’d views/register.jade html    head       title Registration    body       if(message)          h4 #{message}          form(action = "/register" method = "POST")              input(name = "username" type = "text" required                     placeholder = "username")              input(name = "password" type = "password" required                     placeholder = "password")              button(type = "Submit") Register me!

User Authentication, cont’d routes/index.js /*  * GET login page.  */ router.get('/login', function(req, res) {    res.render('login', { message: "Please log in!" }); });  * POST login page. router.post('/login', function(req, res)     console.log("Registered users:"); console.log(registeredUsers);     console.log("Logging in: " + req.body.username + "/" + req.body.password);          // Create an array of users with matching credentials.     var matches = registeredUsers.filter(function(user)                   {                       return    (user.username === req.body.username)                               && (user.password === req.body.password);                   });

User Authentication, cont’d routes/index.js     console.log("Matching credentials: "); console.log(matches);          if (matches.length === 0)     {         res.render('login', {message: "Invalid credentials!"});     }     else         // The user is logged in for this session.         req.session.user = matches[0];         console.log("Sucessfully logged in:"); console.log(req.session.user.username);         res.render('protected_page', { name: req.session.user.username }); }); Record the logged-in user in a session.

User Authentication, cont’d views/login.jade html    head       title Login    body       if(message)          h4 #{message}          form(action = "/login" method = "POST")              input(name = "username" type = "text" required                     placeholder = "username")              input(name = "password" type = "password" required                     placeholder = "password")              button(type = "Submit") Log in

User Authentication, cont’d /*  * GET logout page.  */ router.get('/logout', function(req, res) {     console.log("Logging out:");          if (req.session.user)     {         var name = req.session.user.username;         console.log(name);                  req.session.destroy(function()         {             console.log(name + " logged out.");         });         res.send(name + " is now logged out.");     }     else         console.log("Nobody is currently logged in!");         res.send("Nobody is currently logged in!"); }); routes/index.js Kill the session.

User Authentication, cont’d routes/index.js function loggedIn(req, res, next) {     console.log("Checking if logged in:");     if (req.session.user)     {         // Proceed if the user is logged in.         console.log("Logged in: "); console.log(req.session.user);         next();       }      else          console.log("Not logged in");         res.send("You must first log in.")     } } /*  * GET protected page.  */ router.get('/protected_page', loggedIn, function(req, res)     res.render('protected_page', { name: req.session.user.username }); });

User Authentication, cont’d views/protected_page.jade html    head       title Protected page    body       p Hi, #{name}!       p Welcome to the protected page. Demo

Cookies A cookie is a small file that the server application writes to the client’s file system. The cookie contents are sent back to the server application each time the client makes a request. Purpose: To keep some information about the user that can be retrieved for a future session. It’s up to the application how to use cookies and what information to keep in them.

Simple Cookie Example A very simple demo of cookies. We will use the Express cookie-parser module. package.json   "dependencies": {     "express": "3.2.6",     "express-session": "^1.15.6",     "cookie-parser": "^1.4.3",     "jade": "*"   }

Simple Cookie Example, cont’d app.js var express = require('express'); var cookieParser = require('cookie-parser'); var session = require('express-session'); var app = express(); app.use(cookieParser()); app.use(session( {secret: "String for encrypting cookies." } ));

Simple Cookie Example, cont’d app.js app.get('/', function(req, res) {     if(req.session.page_views)     {         req.session.page_views++;         res.send("You visited this page " +                   req.session.page_views + " times");         console.log('Cookies: ', req.cookies);     }      else          req.session.page_views = 1;         res.send("Welcome to this page for the first time!");     } }); app.listen(3000); A cookie keeps track of session information. Demo

Simple Cookie Example, cont’d In this example, Express keeps each session’s page count in server memory. Each cookie contains a key value that accesses the session page count. When the server restarts, the counts are lost. More persistent solutions? Write the counts into a database. Write the counts into the cookies.

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. Add user authentication (registration and log in) with session management. Due Friday, November 3.

Review for the Midterm Similar to the first midterm. Emphasis on material covered since then. Advanced JavaScript regular expressions string formatting DOM modification JavaScript objects instantiation prototypes

Review for the Midterm, cont’d AJAX web browser – node.js cycle XMLHttpRequest object

Review for the Midterm, cont’d jQuery simple AJAX jQuery objects initialization element selection setting style events changing classes dynamically jQuery/AJAX templates automatic looping object effects object animation

Review for the Midterm, cont’d jQuery UI themes icons dragging objects resize an object classes for CSS drag and drop objects widgets

Review for the Midterm, cont’d UI design patterns organization navigation page layout list design

Review for the Midterm, cont’d Data visualization data analysis tables vs. graphs what is data visualization traits of meaningful data visual perception abstract data pre-attentive attributes successful data analyst

Review for the Midterm, cont’d Dashboard design presenting useful information design do’s and don’ts data-ink ratio situational awareness performance monitoring decision making

Review for the Midterm, cont’d NoSQL benefits and disadvantages types semi-structured data document model scalability auto-sharding CAP theorem

Review for the Midterm, cont’d MongoDB documents and collections cursor eventually consistent data query language Express project scaffolding project dependencies MongoDB interface routes and views

Review for the Midterm, cont’d Model-view-controller (MVC) REST HTTP verbs default RESTful actions RESTful web services User authentication sessions user registration and login cookies