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.
WEBDEVELOPMENT
NODEJS
INTRO
BASICWEBAPPLICATIONARCHITECTURE
HTTP Request
HTTP Response
Client
Server
Database
INTRO
HTTPREQUEST
GET / HTTP/1.1 Host: example.com:3000
Accept: text/html,application/
xhtml+xml,application/xml
INTRO
HTTPRESPONSE
HTTP/1.1 200 OK
Content-length: 47281
Content-Type:text/html,application/xhtml+xml,application/xml
<!DO...
INTRO
INTRO
HTTPSTATUSCODERANGES
100-199 
-> Informational
200-299 
-> Successful
300-399 
-> Redirection (something moved)
400-...
INTRO
HTTPVERBS
GET Retrieves a resource
POST Creates a new resource
PUT Updates an existing resource
DELETE Removes a res...
WebApplicationIn
Nodejs
HTTP Modulehttps://nodejs.org/dist/latest-v6.x/docs/api/http.html
HTTP MODULE
CREATESERVER
const http = require('http')
http.createServer((request, response) 
=> {
response.writeHead(200, ...
Fast,unopinionated,
minimalist web
framework for Node.js
Fast,unopinionated,
minimalist
$ npm install 
--save express
EXPRESS
GETTINGSTARTEDWITHEXPRESS
EXPRESS
GETTINGSTARTEDWITHEXPRESS
const express = require('express')
const app = express()
app.get('/', (request, response...
EXPRESS
WHATEXPRESSGIVESUS
Middleware Routing
Extends Request ,Response View Layer
MIDDLEWARE
EXPRESS
INEXPRESS,EVERYTHINGISMIDDLEWARE
HTTP Request
HTTP Response
Client
Server
(request, response, next) 
=> {} (reques...
EXPRESS
MIDDLEWAREEXAMPLE
app.use((request, response, next) 
=> {
console.log('Satu')
next()
})
app.use((request, response...
EXPRESS
3RDPARTYMIDDLEWARE
Session
Logger
JSON Web Token express-sass-middleware
ROUTING
EXPRESS
ROUTINGEXAMPLE
localhost:5432/
localhost:5432/echo
GET
POST
GET
app.get(‘/‘, handleGetRoot)
app.get(‘/echo/name’, ...
EXPRESS
ROUTINGEXAMPLE
const handleGetRoot = (request, response) 
=> {
response.send('This is / route')
}
const handleGetE...
EXTENDINGREQUESTAND
RESPONSE
EXPRESS
EXTENDSEXAMPLES
app.get('/hacktiv8', (req, res) 
=> {
res.redirect('https:
//hacktiv8.com/')
})
app.get('/sending'...
HANDLINGVIEWLAYER
$ npm install 
--save hbs
EXPRESS
INSTALLINGVIEWENGINE
EXPRESS
VIEWENGINESETUP
const path = require('path')
const express = require('express')
const app = express()

// view eng...
EXPRESS
VIEWENGINESETUP
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
...
Let’sBuildSomethign
WithExpress
Image credits: egghead.io
Web Development with NodeJS
Web Development with NodeJS
Web Development with NodeJS
Web Development with NodeJS
Upcoming SlideShare
Loading in …5
×

Web Development with NodeJS

240 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

×