Info Web Tech Course Web Programming Anselm Spoerri
Info + Web Tech Course Web Programming Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu Web Programming Course © Anselm Spoerri
Lecture 12 - Overview Ex 4 Revision Due Apr 18 Quiz 5 – Node. js + Express. js Due Apr 18 Ex 5 Lab Due Apr 18 − Build on 04_08 e − Use new items. json and embed video and map with marker − Refine responsive layout W 14 Graded Discussion "Learning How to Interact with Other Developers. . . " Due May 2 What to Do BEFORE Next Class ‒ Videos in Week 13 (in green) Web Programming Course © Anselm Spoerri
Recap – Set Up (Node. js https: //nodejs. org/en/ and Git (Git. Bash) installed) Building Website using Node. js and Express. js (2020) Samples files: https: //github. com/danielkhan/building-website-nodejs-express Clone Branches: https: //github. com/danielkhan/building-website-nodejs-express. git Terminal App (Git. Bash) clear | ls | CTRL C $ cd ~/Desktop switch to folder $ cd 559 switch to folder $ mkdir ex 5 create folder $ cd ex 5 $ git clone --bare https: //github. com/danielkhan/building-websitenodejs-express. git $ git config --bool core. bare false $ git reset --hard reset to last state and all branches available $ git branch see all branches b = beginning e = ending $ npm install node plugins if not already done so $ git checkout 04_08 e select branch OR extract ZIP into ex 5 folder https: //github. com/danielkhan/building-website-nodejs-express/tree/04_08 e Web Programming Course © Anselm Spoerri
Recap – Set Up (Node. js https: //nodejs. org/en/ and Git (Git. Bash) installed) Building Website using Node. js and Express. js (2020) Samples files: https: //github. com/danielkhan/building-website-nodejs-express Clone Branches: https: //github. com/danielkhan/building-website-nodejs-express. git Terminal App (Git. Bash) clear | ls | CTRL C Make sure to install needed code plugins using Node Manager in ex 5: $ npm install express $ npm install -D eslint $ npx eslint –init Check syntax + Find + Enforce | Common. JS | None (no react) | No Typescript | Deselect Browser + Select Node | Follow Guide Style: Air. Bnb | JSON config file $ npm install -D prettier eslint-config-prettier eslint-plugin-prettier $ npm install -D nodemon $ npm install ejs $ npm install cookie-session $ npm start dev Web Programming Course and browser: localhost: 3000 © Anselm Spoerri
Recap – ejs – Tips http: //ejs. co/ Simple templating language to generate HTML with plain Java. Script <% 'Scriptlet' tag, for control-flow, no output <%= Outputs the value into the template (HTML escaped) <%- Outputs the unescaped value into the template <%# Comment tag, no execution, no output <%% Outputs a literal '<%' %> Plain ending tag -%> Trim-mode ('newline slurp') tag, trims following newline Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js CSS speaker item views speaker item specify jumbotron background (consult items. json) views pages/index. ejs main content of Home Page <%- include('. /partials/top. Items') %> pages/items. ejs items content of Listing Page <% items. for. Each(function (item) {%> pages/item-list. ejs item content of Individual Page pages/partials/top. Items. ejs items content on Home Page <% top. Items. for. Each(function(item) {%> Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js views speaker item views layout/index. ejs main page structure of Home Page <%- include( `. . /pages/${template}`) %> <%- include('. /partials/scripts') %> layout/partials/navigation. ejs <% item. Names. for. Each(function (item) {%> Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js data Use new items. json file server. js study items. json specifies key variables app. locals. site. Name = 'Highlights'; Speakers. Service Item. Service speakers. Service item. Service const item. Service = new Item. Service('. /data/items. json'); app. use const items = await item. Service. get. Items(); res. locals. item. Names = items; item. Names used in navigation. ejs in navigation dropdown Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js services Speaker. Service. js Item. Service. js Speakers. Service Item. Service speaker item get. Data() critical JSON. parse(data). ? ? ? Need to update methods based on items. json structure add image: item. image id plays role of shortname | category: item. category shortname id (i. e name = title) get. Names get. Items | get. Item(id) Remove Artwork related functionality Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js routes index. js : speakers. Route item. Route (and link to items. js) speakers. Service item. Service top. Speakers top. Items template: 'index' Remove artwork related code speakers. js items. js speakers. Service item. Service id plays role of shortname id router. get('/: id' const item = await item. Service. get. Item(request. params. id); template: 'item-detail' Remove artwork related code Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js views / layout ejs index. ejs <%- include(`. . /pages/${template}`) %> views / layout / partials ejs navigation. ejs customize speaker item / Item items. json: make sure data is accessed correctly update URL: use id property Web Programming Course © Anselm Spoerri
Recap – Ex 5 Lab – Node. js + Express. js views / pages ejs index. ejs top. Speakers. ejs top. Items. ejs | remove artwork. ejs speakers. ejs items. ejs customize speaker item | remove artwork. ejs class="speakerslist" customize also in style. css items. json: make sure data is accessed correctly update URL: use id property | image URLs speakers-detail. ejs item-detail. ejs customize speaker item Remove artwork. ejs items. json: make sure data is accessed correctly update URL: use id property | image URLs views / pages / partials ejs top. Speakers. ejs top. Items. ejs customize speaker item / top. Item items. json: make sure data is accessed correctly update URL: use id property | image URLs and set width Web Programming Course © Anselm Spoerri
Ex 5 Lab – Node. js + Express. js item-detail. ejs Embed Video Option 1: add embed. Video property to data JSON file "video. Embed": "https: //www. youtube. com/embed/Ze 6 Vt 0 gp. Vpo" Option 2: https: //www. npmjs. com/package/embed-video npm install embed-video | var embed = require("embed-video"); embed(youtube. URL) | Specify parameter(s) Embed Map with Marker specify width, height, zoom Need to Update get. Item method so can access video and map data in item_detail. ejs and add video and map Web Programming Course © Anselm Spoerri
- Slides: 13