559 WebProg Course Site

Week 1 - Introduction | Prerequisites: HTML, CSS & JavaScript Basics

Topics:

Download: Handout | Step-by-Step

Back to Top

Week 2 - Workflow Tools | Code Editor | Version Control | JavaScript Essentials

Topics:

  • Assignments, JavaScript & Ex1 Lab (2:45:54)
  • Related Lectures
  • Atom Text Editor (5:18) How to install Atom and customize it.
  • Optional / On Reserve
  • Your Server Account  (3:20) How to activate your server account to upload and host your web pages and files.
  • FTP & Permissions  (4:06) File Transfer Protocol to Upload / Download Files, Permissions for Types of Users & Access.
  • Filezilla & Demo (7:35): Download Filezilla Client, Key Interface Screens, Create Site Definition, Customize Local and Remote Views.

Demos:

  • Demos will be recorded as part of Online "In-Person" Meeting on Tuesday from 3pm-6pm and posted on Wed.
  • Optional / On Reserve Demos
  • Web Page Demo (2) (7:15): Upload to Server, Set Permissions, View in Browser, Role of public_html folder.

Download: Handout | Step-by-Step

  • JavaScript Basics 1 - W3Schools
    • js_statements
    • js_variables
    • js_functions test yourself
    • Scope js_scope
    • Variable declared outside function, becomes GLOBAL.
      All scripts and functions on page can access it.
    • Variables declared within a JavaScript function, become LOCAL to the function.
    • Variables created without the keyword var, are always global, even if created inside a function.
    • Global variables live as long as your application lives
    • Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.
  • JavaScript Basics 2
    • js_events
    • js_if_else
    • js_arrays
    • Debugging js_debugging
    • Best Practices js_best_practices
    • Avoid Global Variables ... Use local variables instead, and learn how to use closures.
    • Always Declare Local Variables
    • Declarations on Top
    • Initialize Variables
    • Never Declare Number, String, or Boolean Objects
  • PC
  • Chrome: CTRL + U
    or Right-Click and select "View page source."
  • Firefox: CTRL + U
    or Firefox > Web Developer > Page Source
  • Edge: CTRL + U
    or Right-Click and select "View Source."
  • Mac
  • Chrome: Command + Alt + U
    Option + Command + U
    or Right-Click and select "View Page Source."
  • Firefox: Command + U
    or Right-Click and select "Page Source."
  • Safari: Option+Command+U
    or Right-Click and select "Show Page Source."
  • FTP = File Transfer Protocol   and   Permissions
  • Permissions
  • Types of Permissions
  • Read : for being able to read the file/directory
  • Write : for being able to write in the file/directory
  • Execute : for being able to access the file/directory
  • Who are Permissions set for?
  • Owner : you
  • Group : group you belong to
  • Others : the rest of the world

Back to Top

Week 3 - Programming Principles: JavaScript Essentials

Topics:

Demos:

  • Related Demos
  • Google Map API
  • Google Maps API - Get Key (2:57) - Get API Key, Pricing, Create billing account (we will use free embed map feature).
  • Google Maps API - Step 1 (6:30) - Create map, Review code, Add secure API key, initMap function, callback=initMap, Change width & height of map.
  • Google Maps API - Step 2 (7:44) - Change map center, Add marker, Review code, Get geocode, Customize center and marker, Set zoom level.

Download: Handout | Step-by-Step

Back to Top

Week 4 - Programming Principles: JavaScript Essentials

  • Create Data to map
    Specify location object that stores: location name, category, short info, address, lat, lng, map to use
  • Create Array that contains location objects
  • Enable Geocoding API via link
  • Create Geocode function for address link
    var geocoder = new google.maps.Geocoder();
    https://developers.google.com/maps/documentation/javascript/reference#Geocoder
    geocode(request:GeocoderRequest, 
    callback:function(Array<GeocoderResult>,GeocoderStatus))
    GeocoderRequest = address    “4 Huntington Street, New Brunswick, NJ”
    GeocoderResult = results[0].geometry.location.toString()
  • Geocode and Place All Markers using Recursive Function

    Create automateGeocodePlaceMarker (geocoderUse, locIndex, locArray, mapToUse)

    geocoderUse.geocode({'address': locObjUse.address},

    function(results, status) {

            if (status === 'OK') {

                // assign geocode to locObj + specify map to use + place marker

                // recursive function call   only if  locIndex + 1 < locArray.length

            } else {

                // Geocoder NOT OK because QUERY LIMIT triggered

                setTimeout(function(){automateGeocodePlaceMarker and use locIndex)

                https://www.w3schools.com/jsref/met_win_settimeout.asp

            }

    });
  • Create placeMarker (locationObjUse, mapToUse)
  • Use Custom Markers link  
    Define nested object icons = { Restaurant: { icon: iconBase + 'parking_lot_maps.png' }}
  • List of Map Icons
  • Customize Info Window link
    Format location info and width = 400
  • h2 element used for location name,
  • p element for category and floated to left,
  • p element for short info,
  • Border = 2px and left border = 10px.
  • Add click eventListener
  • Make map draggable
  • Add Form assign name and id = “myForm”
  • Add Radio Buttons to control whether category info is shown in Info Window
    http://www.w3schools.com/js/js_validation.asp
    document.forms["myForm"]["category"].value
    => call in Info Window eventListener
  • Add Checkboxes to control which categories are shown in map
  • addEventListener (“submit”, updateMap);
  • Create updateMap function
    event.preventDefault();
  • Remove Marker link
    var markers = [];      markers.push(marker);

Back to Top

Week 5 - Responsive Web Design | Front-End Frameworks: Bootstrap.js

Topics:

Demos:

  • Related Demos
  • Ex2 Code Walkthrough Screencast: examine working Ex2 code that uses a recursive function AND setTimeout to geocode locations and shows how radio and checkboxes can control which categorical markers are shown and what is shown in a marker's info window in the two maps.
  • Bootstrap 4 Demo (11:12) Create Responsive Web Page with up to 12 columns for xl display.

Download: Handout | Step-by-Step

  • Google Maps - Ex2
  • Create Data to map - Specify location object
  • Create Array that contains location objects for each map
  • Create Geocode function for address link
    var geocoder = new google.maps.Geocoder();
    geocode(request:GeocoderRequest, 
    callback:function(Array<GeocoderResult>,GeocoderStatus))
    Can place marker once geocode returned => callback function

  • Create automateGeocodePlaceMarker(geocoderToUse, i);}
    geocoderUse.geocode({'address': locObjUse.address},
    function(results, status) {
    if (status === 'OK') {
    // assign geocode to locObj
    // specify map to use based locObjUse.mapToUse
    // place marker
    } else {

    setTimeout(function(){automateGeocodePlaceMarker and use locIndex)

    https://www.w3schools.com/jsref/met_win_settimeout.asp

    });

  • Create placeMarker (locationObjUse, mapToUse)
  • Use Custom Markers link | List of Map Icons
  • Customize Info Window link
    Format location info: div contains h2 and p elements and apply border to div
    Add click eventListener
    Make map draggable
  • Add Form assign name and id = “myForm”
  • Add Radio Buttons to control category info in Info Window
    http://www.w3schools.com/js/js_validation.asp
    document.forms["myForm"]["category"].value
    => call in Info Window eventListener
  • Add Checkboxes to control which categories are shown in map
  • addEventListener (“submit”, updateMap);
  • Create updateMap function
    event.preventDefault();
  • Remove Marker link
    var markers = [];
    markers.push(marker); => call in placeMarker

    if (document.getElementById(currentLocation.category).checked) {

        currentMarker.setMap(mapToUse);

    } else { currentMarker.setMap(null); }
  • Rows and Columns
  • .col-SIZE-SPAN - W3Schools
  • SIZE: extra | sm | md | lg | xl
  • SPAN: needs to add up to 12

  • 1 Column => SPAN = 12

    2 Column => SPAN = 6

    3 Column => SPAN = 4

    4 Column => SPAN = 3

    6 Column =>SPAN = 2

    12 Column => SPAN = 1

Back to Top

Week 6 - Responsive Web Design | Front-End Frameworks: Bootstrap.js

Topics:

Demos:

Download: Handout | Step-by-Step

Back to Top

Week 7 - Modular, Reusable User Interface Components | Front-End Frameworks: React.js

Back to Top

Week 8 - Modular, Reusable User Interface Components | Front-End Frameworks: React.js

  • Tools
  • Node.js
  • Download Node.js
  • To see Node version using Command Line: npm -v
  • To install create-react-app: npm install -g create-react-app
  • Cd to application folder (i.e. bulletin-board) to launch React app: npm start

Back to Top

Week 9 - Single Page Application | Data Exchange: JSON | Back-End Frameworks: Node.js and Express.js

  • Tools
  • Node.js
  • Download Node.js
  • To see Node version using Command Line: npm -v
  • To install create-react-app: npm install -g create-react-app
  • Cd to application folder (i.e. bulletin-board) to launch React app: npm start

Back to Top

Week 10 - Back-End Frameworks: Node.js and Express.js

Back to Top

Week 11 - Back-End Frameworks: Node.js and Express.js

Back to Top

Week 12 - Component-Based Architecture | Front-End Frameworks: Angular.js

Topics:

Demos:

Download: Handout | Step-by-Step

Back to Top

Week 13 - MEAN Stack | Databases: MongoDB Development

Topics:

Download: Handout | Step-by-Step

  • Install
  • MongoDB – https://www.mongodb.com/
  • Download v3.6 (not 4.0)| Port 27017
  • Mac Users: please consult these instructions and make sure that the data/db folder is inside of folder that you will save/copy MongoDB into and set up path to it when you install MongoDB (see instructions).
  • Use Terminal to navigate to bin folder
  • $ cd .. (until at C:\)
  • $ cd Program Files/MongoDB/Server/3.6/bin
  • Create data/db folder in C:\
  • $ mongod
  • New Terminal: navigate to C:\Program Files\MongoDB\Server\3.6\bin
  • $ mongo (see connection established)
  • Install
  • Yeoman.io – http://yeoman.io/ - easily generate starter templates
  • npm install -g yo
  • Install generator http://yeoman.io/generators/
  • gulp-angular https://github.com/swiip/generator-gulp-angular
  • $ npm install -g yo gulp bower
  • $ npm install -g generator-gulp-angular
  • $ mkdir my-new-project && cd $_
  • $ yo gulp-angular (select desired technologies (i.e. UI Router, Bootstrap, Angular UI BS, CSS - NO Saas, Babel)
  • Create "front-end" folder
  • Install Generator in front-end folder
  • yo gulp-angular my-message-front (Make initialization selections)
  • $ gulp
  • $ gulp serve (should launch browser)

Back to Top

Week 14 - MEAN Stack | Databases: MongoDB Development

Topics:

Download: Handout | Step-by-Step

Back to Top

Week 15 - Course Review and Term Project

Topics:

Back to Top