Week 04 (Final Project) http://fog.ccsf.edu/~hyip Node.js Week 04 (Final Project) http://fog.ccsf.edu/~hyip
Installing Express for final project Create a new directory final_project which is under the nodejs_workspace directory. (mkdir final_project, then cd final_project). Use the npm init command under the new final_project folder to create a package.json file for your application – final_project. npm init NOTE: you can hit RETURN to accept the defaults for most of them, except entry point is app.js: entry point: app.js Install express locally in the nodejs_workspace directory, and save it in the dependencies list: npm install express --save Install body-parser middleware, which is responsible for handling Raw, JSON, URL, and Text encoded form data: NOTE: body-parser is a piece of express middleware that reads a form's input and stores it as a javascript object accessible through `req.body` npm install body-parser --save Install multer middleware, which is responsible for the handling of multipart/form-data: npm install multer --save
Handle get method We are going to use the Form GET method in HTML so as to pass two values. The input will be handled by the router “process_get” inside the file “server.js” Steps to complete the project: Create index.html. Create server.js. Start the server: node server.js Run the program from browser: http://localhost:8081/index.html
Create index.html <html> <head><title>this file is used with server.js</title> </head> <body> <h1>Process get method</h1> <form action="http://127.0.0.1:8081/process_get" method="get"> Your First Name: <input type="text" name="fname"> <br> Your Last Name: <input type="text" name="lname"> <br> <input type="submit" value="Process Get method"> </form> </body> </html>
Create server.js var express = require('express'); var app = express(); app.get('/index.html', function (req, res) { res.sendFile(__dirname + "/index.html"); }); app.get('/process_get', function (req, res) { var response = { fname: req.query.fname, lname: req.query.lname }; console.log(response); // res.end(JSON.stringify(response)); res.json(response); var server = app.listen(8081, function () { console.log('server.js is listening at http://127.0.0.1:8081/index.html or http://localhost:8081/index.html');
Handle post method We are going to use the Form GET method in HTML so as to pass two values. The input will be handled by the router “process_post” inside the file “server.js” Steps to complete the project: Update index.html. Update server.js. Start the server: node server.js Run the program from browser: http://localhost:8081/index.html
Update index.html Add the following codes to the index.html <hr> <h1>Process post method</h1> <form action="http://127.0.0.1:8081/process_post" method="post"> Your First Name: <input type="text" name="fname"> <br> Your Last Name: <input type="text" name="lname"> <br> <input type="submit" value="Process Post method"> </form>
Update server.js Add the following codes to the server.js var bodyParser = require('body-parser'); // creating the application/x-www-form-urlencoded parser var urlenParser = bodyParser.urlencoded({ extended: false}); app.post('/process_post', urlenParser, function (req, res) { var response = { fname: req.body.fname, lname: req.body.lname }; console.log(response); res.end(JSON.stringify(response)); });
References Node.js the Right Way, Jim R. Wilson, The Programatic Bookshelf, ISBN 978-1-937785-73-4 NodeJS: Practical Guide for Beginners, Matthew Gimson, ISBN 978-1- 519354-07-5 Express.js: Node.js Framework for Web Application Development, Daniel Green, ISBN 978-1-530204-06-9 Express.com Tutorials Point The Node Beginner Book, Manuel Kiessling, Leanpub, Link.