Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Development with NodeJS

202 views

Published on

Develop web application with NodeJS, http and ExpressJS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Development with NodeJS

  1. 1. WEBDEVELOPMENT NODEJS
  2. 2. INTRO BASICWEBAPPLICATIONARCHITECTURE HTTP Request HTTP Response Client Server Database
  3. 3. INTRO HTTPREQUEST GET / HTTP/1.1 Host: example.com:3000 Accept: text/html,application/ xhtml+xml,application/xml
  4. 4. INTRO HTTPRESPONSE HTTP/1.1 200 OK Content-length: 47281 Content-Type:text/html,application/xhtml+xml,application/xml <!DOCTYPE html><html><head><title>Express </title> ...
  5. 5. INTRO
  6. 6. INTRO HTTPSTATUSCODERANGES 100-199 -> Informational 200-299 -> Successful 300-399 -> Redirection (something moved) 400-499 -> Client error 500-599 -> Server error
  7. 7. INTRO HTTPVERBS GET Retrieves a resource POST Creates a new resource PUT Updates an existing resource DELETE Removes a resource READ CREATE UPDATE DELETE CRU D
  8. 8. WebApplicationIn Nodejs
  9. 9. HTTP Modulehttps://nodejs.org/dist/latest-v6.x/docs/api/http.html
  10. 10. HTTP MODULE CREATESERVER const http = require('http') http.createServer((request, response) => { response.writeHead(200, { 'Content-Type': 'text/plain' }) response.end('Hello, Bandungn') }).listen(5432, '127.0.0.1') console.log('Server running at http: //127.0.0.1:5432')
  11. 11. Fast,unopinionated, minimalist web framework for Node.js Fast,unopinionated, minimalist
  12. 12. $ npm install --save express EXPRESS GETTINGSTARTEDWITHEXPRESS
  13. 13. EXPRESS GETTINGSTARTEDWITHEXPRESS const express = require('express') const app = express() app.get('/', (request, response) => { response.send('Hello, Bandung!') }) app.listen(5432, () => { console.log('Magic happen at http: //localhost:5432') })
  14. 14. EXPRESS WHATEXPRESSGIVESUS Middleware Routing Extends Request ,Response View Layer
  15. 15. MIDDLEWARE
  16. 16. EXPRESS INEXPRESS,EVERYTHINGISMIDDLEWARE HTTP Request HTTP Response Client Server (request, response, next) => {} (request, response, next) => {}
  17. 17. EXPRESS MIDDLEWAREEXAMPLE app.use((request, response, next) => { console.log('Satu') next() }) app.use((request, response, next) => { console.log('Dua') next() }) app.get('/', (request, response) => { response.send(‘Halo, Bandung!') })
  18. 18. EXPRESS 3RDPARTYMIDDLEWARE Session Logger JSON Web Token express-sass-middleware
  19. 19. ROUTING
  20. 20. EXPRESS ROUTINGEXAMPLE localhost:5432/ localhost:5432/echo GET POST GET app.get(‘/‘, handleGetRoot) app.get(‘/echo/name’, handleGetEcho) app.post(‘/echo’, handleGetEcho) localhost:5432/echo/fox
  21. 21. EXPRESS ROUTINGEXAMPLE const handleGetRoot = (request, response) => { response.send('This is / route') } const handleGetEcho = (request, response) => { response.send(`This is /echo route. Hello ${request.params.name}`) } app.get('/', handleGetRoot) app.get('/echo/:name', handleGetEcho)
  22. 22. EXTENDINGREQUESTAND RESPONSE
  23. 23. EXPRESS EXTENDSEXAMPLES app.get('/hacktiv8', (req, res) => { res.redirect('https: //hacktiv8.com/') }) app.get('/sending', (req, res) => { res.sendFile('/Users/riza/Music/cool_song.mp3') }) http://expressjs.com/en/api.html
  24. 24. HANDLINGVIEWLAYER
  25. 25. $ npm install --save hbs EXPRESS INSTALLINGVIEWENGINE
  26. 26. EXPRESS VIEWENGINESETUP const path = require('path') const express = require('express') const app = express() // view engine setup app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'hbs') app.get('/', (req, res) => { res.render('index', {data: 'Hello, Bandung!'}) }) app.listen(5432, () => { console.log('Magic happen at http: //localhost:5432') })
  27. 27. EXPRESS VIEWENGINESETUP <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Welcome to Express </title> </head> <body> <h1>{{ data }} </h1> </body> </html>
  28. 28. Let’sBuildSomethign WithExpress Image credits: egghead.io

×