Web Development with NodeJS
1 like669 views
This document discusses the basics of web application architecture using Node.js and Express. It introduces HTTP requests and responses between clients and servers, and common status codes and verbs like GET and POST. It explains how to create a basic server with the HTTP module in Node.js, and how Express simplifies this with routing, middleware, request/response extensions and view handling capabilities. Specific examples are given for creating routes, using middleware, and setting up a view engine like Handlebars to render templates.
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Web Development with NodeJS (20)
Ad
More from Riza Fahmi (20)
Ad
Recently uploaded (20)
Web Development with NodeJS
- 3. INTRO HTTPREQUEST GET / HTTP/1.1 Host: example.com:3000 Accept: text/html,application/ xhtml+xml,application/xml
- 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. INTRO
- 6. INTRO HTTPSTATUSCODERANGES 100-199 -> Informational 200-299 -> Successful 300-399 -> Redirection (something moved) 400-499 -> Client error 500-599 -> Server error
- 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
- 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. Fast,unopinionated, minimalist web framework for Node.js Fast,unopinionated, minimalist
- 12. $ npm install --save express EXPRESS GETTINGSTARTEDWITHEXPRESS
- 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. EXPRESS WHATEXPRESSGIVESUS Middleware Routing Extends Request ,Response View Layer
- 15. MIDDLEWARE
- 16. EXPRESS INEXPRESS,EVERYTHINGISMIDDLEWARE HTTP Request HTTP Response Client Server (request, response, next) => {} (request, response, next) => {}
- 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. EXPRESS 3RDPARTYMIDDLEWARE Session Logger JSON Web Token express-sass-middleware
- 19. ROUTING
- 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. 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)
- 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
- 26. $ npm install --save hbs EXPRESS INSTALLINGVIEWENGINE
- 27. 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') })
- 28. 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>