•   Course Home  
•   Information  
  • Syllabus
  • Roster
  • Instructor
•   Class Notes  
  • List of Current & Completed Classes
  • List of Future Classes

  ---

  • Class Videos
•   Assignments  
  • Assignment No. 1 — Thursday, February 4, 2016
  • Assignment No. 2 — Tuesday, March 8, 2016
  • Assignment No. 3 — Thursday, April 14, 2016
  • Assignment No. 4 — Thursday, April 21, 2016

  ---

  • Assignment Submission Form
  • Complete List of Assignments
•   Resources  
  • Getting MEAN Code Repository on GitHub
  • Getting MEAN Publisher’s Forum
  • Getting MEAN Publisher’s Page
  • Simon Holmes Home Page

  ---

  • Poll Everywhere

  ---

  • Textbooks
  • References & Tutorials
  • Cool Stuff
  • Twitter Tricks
  • Of Interest
  • Tools, Utilities, IDEs, & Test Environments
  • Writing Resources

  ---

  • Complete List of Resources

Notes for Class No. 7

Building a Static Site with Node and Express (continued)

Tuesday, February 9, 2016

A video of this class is (or will be) posted at:  http://echo360.uml.edu/heines2016/comp4620-201.html

Handouts and Materials

Openings / Announcements / Reminders

General Comments

• there were some very impressive efforts
• all-in-all the proposals look very professional
  • however, all of them needed more careful proofreading
• some groups are biting off more than they can chew
  • we have a good book, but there’s a lot there, perhaps too much to tackle in one semester
  • I am particularly concerned about AngularJS, because I doubt that we’ll get very far with that in class
  • there are, however, excellent video introductions by Curran Kelleher that he did in this class last year
    • part 1:  https://www.youtube.com/watch?v=TRrL5j3MIvo  (616,924 views as of 2016-02-08)
    • part 2:  https://www.youtube.com/watch?v=6J08m1H2BME  (122,944 views as of 2016-02-08)
  • Curran’s YouTube channel is:  https://www.youtube.com/user/currankelleher
• all groups should follow the philosophy of Holmes’s Getting MEAN text
  • bring up your site (or application) in stages
  • do not spend the first half of the semester doing all backend work
  • always have a version that you can show
• and remember: do not even bother to implement login scripts

Student Mentoring Opportunity

• NEMO (National Engineers Mentor Organization), a new academic organization, is looking for as many participants as possible.
• For underclassmen, this program will provide a great solution to any concerns or questions they might have during the start of their undergraduate career.
• For upperclassmen, being a role model and providing guidance to a younger classmate is a great way to build transferable skills that will last a lifetime.
• To learn more, please complete the general interest survey at http://bit.ly/1OovdDO

Class Notes

Related reading for this class:  GetMEAN: Chap. 4

Lessons from Weaving the Web

Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by Tim Berners-Lee

• http://www.amazon.com/Weaving-Web-Original-Ultimate-Destiny/dp/006251587X

Getting MEAN, Chapter 4  (continued)

Review from last class ...

The goal of this chapter is to “have intelligent views that can display data passed to them, and controllers passing hard-coded data to the views.” (p. 81)

• version 1 has all the data in the views
• version 2 has the data in the controllers
• later chapters move the data to a MongoDB database

4.1 Defining Routes in Express (p. 82)

Holmes’s “collections” of pages (p. 82)

File relationships (p. 83)

“The application includes the routes file, which in turn includes multiple controller files, each named according to the relevant collection.” (p. 83)

What’s where

Loc8r
└──app_server
    ├──controllers
    │     locations.js
    │     main.js
    │     others.js
    ├──routes
    │     index.js
    │     users.js
    └──views
          error.jade
          generic-text.jade
          index.jade
          layout.jade
          location-info.jade
          location-review-form.jade
          locations-list.jade

The loc8r/app.js file

/* File: C:\Texts\Manning\GettingMEAN-MongoExpressAngularNode\loc8r\app.js * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on December 29, 2015 at 12:54 PM */ var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); //// updated by JMH on December 29, 2015 at 12:48 PM per page 67 //// original: var routes = require('./routes/index'); //// original: var users = require('./routes/users'); var routes = require('./app_server/routes/index'); var users = require('./app_server/routes/users'); var app = express(); // view engine setup //// updated by JMH on December 29, 2015 at 12:46 PM per page 66 //// original: app.set('views', path.join(__dirname, 'views')); app.set('views', path.join(__dirname, 'app_server', 'views')); app.set('view engine', 'jade'); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); // make the app object available to the entire application module.exports = app;

• note the require statements
• note that the app itself is an express object (line 121)
  • this statement calls a JavaScript “constructor,” which is a function in a closure

  “A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain.  The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variables.”

  source:  http://javascriptissexy.com/understand-javascript-closures-with-ease

• note the module.exports statement at the very bottom of the file

New material begins here ...

The loc8r/app_server/routes/index.js file

/* File: C:\Texts\Manning\GettingMEAN-MongoExpressAngularNode\loc8r\app_server\routes\index.js * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on December 31, 2015 at 9:28 AM */ var express = require('express'); var router = express.Router(); //// added by JMH on December 29, 2015 at 1:14 PM per page 69 //// replaced on December 31, 2015 at 9:24 AM per Listing 4.1 on p. 84 // var ctrlMain = require( '../controllers/main' ) ; //// added by JMH on December 31, 2015 at 9:24 AM per Listing 4.1 on p. 84 var ctrlLocations = require('../controllers/locations'); var ctrlOthers = require('../controllers/others'); //// added by JMH on December 29, 2015 at 12:57 PM per page 67 var homepageController = function( req, res ) { res.render( 'index', { title : 'Express' } ) ; } /* GET home page. */ //// changed by JMH on December 29, 2015 at 12:58 PM per page 67 //// original: router.get('/', function(req, res, next) { //// original: res.render('index', { title: 'Express' }); //// original: }); // router.get( '/', homepageController ) ; //// changed again by JMH on December 29, 2015 at 1:15 PM per page 69 //// replaced on December 31, 2015 at 9:24 AM per Listing 4.2 on p. 84 // router.get( '/', ctrlMain.index ) ; //// added by JMH on December 31, 2015 at 9:27 AM per Listing 4.2 on p. 84 /* Locations pages */ router.get('/', ctrlLocations.homelist); router.get('/location', ctrlLocations.locationInfo); router.get('/location/review/new', ctrlLocations.addReview); /* Other pages */ router.get('/about', ctrlOthers.about); // make the router object available to the entire application module.exports = router;

• note that when requiring files, the .js extension is optional (lines 216-217)
• the actual routing is done at the bottom of the file with router.get statements (lines 239-243)
• and once again note the module.exports statement at the very bottom of the file (line 246)

4.2 Building Controllers (p. 84)

The loc8r/app_server/controllers/main.js file

/* File: C:\Texts\Manning\GettingMEAN-MongoExpressAngularNode\loc8r\app_server\controllers\main.js * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on December 29, 2015 at 1:10 PM */ //// added by JMH on December 29, 2015 at 1:10 PM per page 69 /* GET home page */ module.exports.index = function( req, res ) { res.render( 'index', { title : 'Express' } ) ; } ;

• this file is from the first version, but we will use it as a template

The loc8r/app_server/controllers/others.js file (p. 85)

• here we have simply changed the title property from 'Express' to 'About'
• (changing 'index' to 'generic-text' was done later, after creating the generic-text.jade file)
• note the correspondence between the exported function name and the page title

The loc8r/app_server/controllers/locations.js file (pp. 85-86)

/* File: C:\Texts\Manning\GettingMEAN-MongoExpressAngularNode\loc8r\app_server\controllers\locations.js * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on December 31, 2015 at 9:33 AM */ //// added by JMH on December 31, 2015 at 9:33 AM per page 85 /* GET 'home' page */ module.exports.homelist = function( req, res ) { //// updated by JMH on December 31, 2015 at 10:07 AM per p. 94 //// res.render( 'index', { title : 'Home' } ) ; res.render( 'locations-list', { title : 'Home' } ) ; } ; /* GET 'Location info' page */ module.exports.locationInfo = function( req, res ) { //// updated by JMH on December 31, 2015 at 11:16 AM per p. 99 //// res.render( 'index', { title : 'Location info' } ) ; res.render( 'location-info', { title : 'Location info' } ) ; } ; /* GET 'Add review' page */ module.exports.addReview = function( req, res ) { //// updated by JMH on December 31, 2015 at 12:08 PM per p. 102 //// res.render( 'index', { title : 'Add review' } ) ; res.render( 'location-review-form', { title : 'Add review' } ) ; } ;

• note again the correspondence between the exported function name and the page title

This should now work if you enter the following URLs

• http://peaceful-shelf-9605.herokuapp.com
• http://peaceful-shelf-9605.herokuapp.com/about
• http://peaceful-shelf-9605.herokuapp.com/location
• http://peaceful-shelf-9605.herokuapp.com/location/review/new

4.3 Creating Views (p. 87)

• “Jade is the default template engine in Express, although you can use others”
• “Bootstrap is a front-end layout framework that makes it really easy to build a responsive website that looks different on desktop and mobile devices”

Bootstrap Responsive Grid System (p. 88)

• “Bootstrap uses a 12-column grid. No matter the size of the display you’re using, there will always be these 12 columns.”
• “The fundamental concept of Bootstrap is that you can define how many columns an element will use, and this can be a different number for different screen sizes.”
• “Bootstrap has various CSS references that let you target up to four different pixelwidth breakpoints for your layouts.”

• “To define the width of an element you combine a CSS reference from table 4.2 with the number of columns you wish it to span.” (p. 88)

  

  This specification indicates that “the element it’s applied to will take up 6 columns on screens of size sm and larger.”

• “To get the responsive side of things to work, you can apply multiple classes to a single element.” (p. 88)

  

  “The col-xs-12 class tells the layout to use 12 columns on extra-small devices, and the col-sm-6 class tells the layout to use 6 columns for small devices and above.” (p. 89)

The Basic Application Layout (p. 89)

“This framework for a layout is pretty simple, but it suits our needs. It will give a consistent look and feel, while allowing for all types of content layouts to go in the middle.” (p. 90)

“Creating the framework in a layout file means that you only have to do it once, and only have to maintain it in one place.” (p. 90)

The initial loc8r/app_server/views/layout.jade file (p. 90)

Adding a navigation section above the content block and a footer below it (pp. 90-92)

body // added by JMH on December 31, 2015 at 9:46 AM per pp. 90-91 .navbar.navbar-default.navbar-fixed-top .container .navbar-header a.navbar-brand(href='/') Loc8r button.navbar-toggle(type='button', data-toggle='collapse', datatarget='#navbar-main') span.icon-bar span.icon-bar span.icon-bar #navbar-main.navbar-collapse.collapse ul.nav.navbar-nav li a(href='/about/') About .container // added by JMH on December 31, 2015 at 9:51 AM per p. 91 block content // added by JMH December 31, 2015 at 9:51 AM per p. 91 footer .row .col-xs-12 small &copy; Simon Holmes 2014 // added by JMH on December 31, 2015 at 11:07 AM // see http://jade-lang.com/reference/attributes/ for parenthesis syntax for attributes // see http://stackoverflow.com/questions/5219317/how-can-i-set-thickness-of-horizontal-rule-in-html // for specifying the thickness of a horizontal rule (hr) via CSS hr(style='margin-bottom: 5px ; border: 1px solid lightgray') // added by JMH on December 29, 2015 at 1:03 PM // http://stackoverflow.com/questions/5858218/how-can-i-render-inline-javascript-with-jade script. document.writeln( "<p style='text-align: center ; margin-bottom: 0'>" + new Date() + "</p>" ) ; hr(style='margin-top: 5px ; border: 1px solid lightgray') // added by JMH on December 29, 2015 at 1:34 PM per page 73 script( src='/javascripts/jquery-2.1.4.min.js' ) script( src='/bootstrap/js/bootstrap.min.js' )

• N.B. ”If you pop that in and run it you’ll notice that the navigation now overlays the page heading.  This will be fixed...” (p. 91)
• “Remember that Jade doesn’t include any HTML tags, and that correct indentation is critical to provide the expected outcome.” (p. 91)
• wrapping the content block in a div with a class of container causes the content to be “centered in the window, and constrained to sensible maximum widths on large displays.” (p. 91)
• note that the footer is inside the container div with the content block

Building the Homepage template (p. 93)

• planning for both responsiveness
• “The few minutes it takes to do this upfront can save us hours later on — moving parts around, or even throwing them out and starting again, is much easier with a sketch than with a load of code.” (p. 94)

(1)  Create a new view file:  loc8r/app_server/views/locations-list.jade

(2)  Modify the controller for the homepage in loc8r/app_server/controllers/locations.js to use this view (p. 94)

module.exports.homelist = function(req, res){
  res.render('locations-list', { title: 'Home' });
};

(3)  Code the 3 main areas of the page (p. 95) — file loc8r/app_server/views/locations-list.jade

#banner.page-header // page header fills entire width .row .col-lg-6 // limit width to 6 columns on large screens h1 Loc8r small &nbsp;Find places to work with wifi near you! .row .col-xs-12.col-sm-8 // container for list of locations, 12 columns on extra-small devices, 8 on larger devices p List area. .col-xs-12.col-sm-4 // container for sidebar, 12 columns on extra-small devices, 4 on larger devices p.lead Loc8r helps you find places to work when out and about.

(4)  Code the main page area (p. 97) — file loc8r/app_server/views/locations-list.jade

• the vertical bars (|) at the beginnings of lines enable continuation of paragraph text
• they don’t appear to be required at all times, but it also appears that including them doesn’t hurt
• page 104 states:  “Notice that the lines starting with the pipe character (|) can contain HTML tags if you want them.”
• I have found that, at least in some cases, I could include HTML even if I didn’t use the pipe character

Building the rest of the views (pp. 98-105)

These are done similarly to building the Home page view, so you should be able to follow the book

Error on page 99:  Listing 4.7 is file app_server/views/location-info.jade, not location-info.js

Listing 4.7 itself is very difficult to follow due to the indentation and wrapping of long lines

• I suggest that you copy-and-paste this from Holmes’s GitHub site

Note that the CSS listed at the bottom of page 101 is in public/stylesheets, not app_server/views

/* File: C:\Texts\Manning\GettingMEAN-MongoExpressAngularNode\loc8r\public\stylesheets\style.css * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on December 29, 2015 at 1:37 PM */ /* all content removed (commented out) after adding Bootstrap per page 73 */ /* * body { * padding: 50px; * font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; * } * * a { * color: #00B7FF; * } */ /* added by JMH on December 31, 2015 at 11:36 AM per p. 101 */ .review {padding-bottom: 5px;} .panel-body.review-container {padding-top: 0;} .review-header {margin-bottom: 10px;} .reviewAuthor {margin: 0 5px;} .reviewTimestamp {color: #ccc;}

This ends what Holmes refers to as the “views” part of Chapter 4

• at this point the data is still hard-coded in the views
• the GitHub site has a branch for this point:
       https://github.com/simonholmes/getting-MEAN/tree/chapter-04-views

The next step is to take the data out of the views (p. 106)

This is document http://jesseheines.com:8080/~heines/91.462/91.462-2015-16s/462-lecs/lecture07.jsp.  It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines.  All rights reserved.  May be freely copied or excerpted for educational purposes with credit to the author.