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

Introduction to Assignment No. 2: Alpha Version, and Introduction to Building a Static Site with Node and Express

Thursday, February 4, 2016

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

Handouts and Materials

A proposal written by me

Openings / Announcements / Reminders

In response to a student request, I have now posted due dates on all the project-related assignments for this semester

• Assignment No. 2, the Project Alpha Version, is now posted and we will talk about this today
• I intend to have 1 or 2 assignments based on the textbook as well, so how are you all doing on that?

In response to another student request, I have posted a proposal written by me

• the program solicitation
  • on the NSF website (HTML) — local copy (PDF)
  • note the precise specifications for formatting as well as content
  • there is also an 78-page Grant Proposal Guide (HTML | PDF)
• the proposal I submitted (PDF)
  • obviously, this was not written solely by me, but with a team of collaborators
  • the full proposal included letters of support and a budget as well as other supporting or required documentation
  • the Project Summary was revised 14 times
  • the Project Description was revised 39 times
  • the Project Budget was revised 10 times
• the proposal was due November 14, 2014
  • my first meeting with potential collaborators was in August 2014, 3 months before the proposal was due
  • “upfront investment”
  • we didn’t hear anything about our proposal until July 2015
  • the final amount of the award was $288,945
  • the project is summarized at http://www.nsf.gov/awardsearch/showAward?AWD_ID=1515767

Class Notes

Related reading for this class:  GetMEAN: Chap. 4

Introduction to Assignment No. 2

I must say that I am very pleased to see people discussing project management software on Piazza

• Cullin Lam — Asana — https://asana.com
• Curran Kelleher — GitHub Issues — https://guides.github.com/features/issues
• Angel Calcano — Jira — https://www.atlassian.com/software/jira

This is *not* an area that I know much about, so it is wonderful to see fellow students sharing their experiences

Review of Assignment No. 2 write-up

Getting MEAN, Chapter 4

“In chapter 3 you should have had an Express application running, set up in an MVC way, with Bootstrap included to help with building page layouts.  Our next step is to build on this base, creating a static site that you can click through.  This is a critical step in putting together any site or application.  Even if you’ve been given a design or some wireframes to work from, there’s no substitute for rapidly creating a realistic prototype that you can use in the browser.  Something always comes to light in terms of layout or usability that hadn’t been noticed before.” (p. 80)

Why else is it useful to have “a realistic prototype that you can use in the browser”?

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)

What is a route?

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

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 teh 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 © 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

This is document http://jesseheines.com:8080/~heines/91.462/91.462-2015-16s/462-lecs/lecture06.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.