Info + Web Tech Course

1. Info + Web Tech Course • Web Programming • Anselm Spoerri PhD (MIT) • SC&I @ Rutgers University • aspoerri@rutgers.edu

2. Lecture 14 - Overview • Ex5 Revision Due May 8 • Project Lab Due Wed May 10 • OPTION 1 – Extend Ex5 (Node + Express) to Add Category Views • OPTION 2 – MEAN Stack Development • Week 14 To Dos • Quiz 6(quiz 1 – 5) • Graded Discussion Reflections on Learning How to Create Web Applications

3. Project – Extend Ex5: Add Category Views • header.pug • Add pulldown for All Categories | Individual Categories • Use a(href=`/categories/${item.category}`) • Use each item in categoryNames to iterate through categories •  Need to define categoryNamesin index.js as local variable • server/index.js • res.locals.categoryNames = categories; •  Need to compute categories itemService.getCategories();

4. Project – Extend Ex5: Add Category Views • routes/index.js • constcategoriesRoute = require('./categories'); • router.use('/categories', categoriesRoute(param)); •  Need to create “categories” folder in “routes” folder • routes/categories/index.js • Copy index.js from “items” folder and customize: item(s)  categories • router.get('/' … promises.push(itemService.getCategories()); • return res.render('categories' • itemslist categorieslist • router.get('/:category'… promises.push(itemService.getCategory(req.params.category)); • return res.render('categories/category', • itemslist categoryitemslist

5. Project – Extend Ex5: Add Category Views • services/ItemService.js • Create getCategories and getCategory methods • getCategorieswant unique and sorted categories • Define categories array and Iterate through data • constfoundCategory = categories.find((itemCategory) => { • return itemCategory.category === data[i].category; }); • if (!foundCategory) { … categories.push(obj with category & categoryItems) • else { … foundCategory.categoryItems.push • categories.sort((a, b) => (a.category > b.category) ? 1 : -1); • getCategorywant all items with specified category • constcategoryItems = data.filter((item) => { • return item.category === category });

6. Project – Extend Ex5: Add Category Views • views and PUG files: need to create “categories” folder and “category” subfolder • Copy & paste index.pug files from “items” / “detail” folders and customize • views/categories/index.pugiterate through categories and their items • each categoryObjin categorieslist • each categoryItem in categoryObj.categoryItems • views/categories/category/ index.pugiterate through items • each item in categoryitemslist • Want to show first category name … how? • Need to modify what is returned by getCategory … want categoryObj • Need to modify index.pug file (hint: similar approach as for All Categories)

7. Ex5 Tips • Banner Image: hard code in CSS file • Could create local variable and update style of banner image. • Responsive layout for All Items and Individual Item • Bootstrap 4 Navigation

8. Recap • MongoDB – https://www.mongodb.com/ • Port 27017 • Use Terminal #1 to navigate to bin folder • $ cd Program Files/MongoDB/Server/3.6/bin • To run MongoDB • $ mongod • Use Terminal #2 to navigate to bin folder • To run Mongo Shell • $ mongo • db.messages.find() • db.messages.deleteMany({}) • front-end • Use Terminal #3to navigate to front-end folder • $ gulp serve (should launch browser) • back-end • Use Terminal #4to navigate to back-endfolder • $ node server.js

9. Project Lab – Develop Message Board App • Display Messages • Switch to Mongoose with NPM in back-end folder • $ npm install mongoose -save • Update server.js code • Need to create model to save message using JS object • var Message = mongoose.model('Message', {msg: String}); • app.post • var message = new Message(req.body); • message.save(); • Create message list endpoint with Express.js • app.get('/api/message', GetMessages); • function GetMessages (req, res) { • Message.find({}).exec(function(err, result){ • res.send(result); • }) • }

10. Project Lab – Develop Message Board App • Display Messages • Create message list view in Angular.js main.controller.js in front-folder • getMessages() { • varvm = this; • this.$http.get('http://localhost:5000/api/message').then(function(result){ vm.messages = result.data; }); } • main.html • <div class="panel-body"> • <ul class="list-group"> • <li class="list-group-item" ng-repeat="message in main.messages"> • {{message.msg}} • </li> • </ul> • </div> • Add Refresh Messages functionality

11. Angular • JavaScript front-end framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures. • https://angularjs.org/ v1.+ | https://angular.io/ v2+ • https://www.w3schools.com/angular/ • AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. • https://www.w3schools.com/angular/ • AngularJS modules define AngularJS applications. • AngularJS controllers control AngularJS applications. • try_ng_intro_controller • Angular directives:  add functionality to application • Angular expression: {{ … }} | ng-bind="expression" (defined in ng-app) • Angular objects | arrays | AngularJS expressions inside HTML

12. Angular • https://www.w3schools.com/angular/angular_modules.asp • <div ng-app="myApp" ng-controller="myCtrl"> • angular.module("myApp", []); app.controller("myCtrl", function($scope) {} • []used to define dependent modules | Without [] retrieving existing module. • Common to put moduleand controllersin JavaScript files • AngularJS modules reduces problem of using global functions that can be overwritten by keeping all functions local to the module. • Load AngularJS library in <head> or at start of <body> • https://www.w3schools.com/angular/angular_directives.asp • Extend HTML by creating new attributes called Directives using .directivefunction • Use built-in directives to add functionality to application • ng-app directive defines AngularJS application • ng-model directive binds value of HTML controls to application data • ng-bind directive binds application data to the HTML view. • ng-init directive initializes AngularJS application variables. • ng-repeatdirective clones HTML elements once for each item in a collection • Invoke directive: Element name | Attribute | Class | Comment

13. Angular • https://www.w3schools.com/angular/angular_model.asp • ng-model directive binds value of HTML controls to application data • provide status for application data (invalid, dirty, touched, error) • Two-way binding: value of input field changes, AngularJS property also changes • https://www.w3schools.com/angular/angular_databinding.asp • HTML container where the AngularJS application is displayed, is called view • ng-bindbinds innerHTML of element to the specified model property • <p ng-bind="firstname"></p> • <p>First name: {{firstname}}</p> • Two-way binding: model changes, view reflects change | data in view changes,model is updated • https://www.w3schools.com/angular/angular_scopes.asp • scope = binding between HTML (view) and the JavaScript (controller). • scope = object with available properties and methods. • scope = available for both view and controller. • https://www.w3schools.com/angular/angular_application.asp