Web Development with 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
<!DOCTYPE html><html><head><title>Express
</title>

...

INTRO
HTTPSTATUSCODERANGES
100-199
-> Informational
200-299
-> Successful
300-399
-> Redirection (something moved)
400-499
-> Client error
500-599
-> Server error

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

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, {
'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')

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)
=> {
response.send('Hello, Bandung!')
})
app.listen(5432, ()
=> {
console.log('Magic happen at http:
//localhost:5432')
})

EXPRESS
WHATEXPRESSGIVESUS
Middleware Routing
Extends Request ,Response View Layer

EXPRESS
INEXPRESS,EVERYTHINGISMIDDLEWARE
HTTP Request
HTTP Response
Client
Server
(request, response, next)
=> {} (request, response, next)
=> {}

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!')
})

EXPRESS
3RDPARTYMIDDLEWARE
Session
Logger
JSON Web Token express-sass-middleware

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

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)

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

$ npm install
--save hbs
EXPRESS
INSTALLINGVIEWENGINE

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')
})

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>

Let’sBuildSomethign
WithExpress
Image credits: egghead.io

Web Development with NodeJS

More Related Content

What's hot

Similar to Web Development with NodeJS

More from Riza Fahmi

Recently uploaded

Web Development with NodeJS