Free Code Camp and Learning Express.js: Good Old Form

Exercise number four of the FreeCodeCamp Express.js tutorial.  We’re flying right along!  Here’s the directions and hints they give us:

 GOOD OLD FORM
 Exercise 4 of 8
Write a route (‘/form’) that processes HTML form input (<form><input name=”str”/></form>) and prints backwards the str value.
——————————————————————————-
## HINTS
To handle POST request use the post() method which is used the same way as get():
    app.post(‘/path’, function(req, res){…})
Express.js uses middleware to provide extra functionality to your web server.
Simply put, a middleware is a function invoked by Express.js before your own request handler.
Middlewares provide a large variety of functionalities such as logging, serving static files and error handling.
A middleware is added by calling use() on the application and passing the middleware as a parameter.
To parse x-www-form-urlencoded request bodies Express.js can use urlencoded() middleware from the body-parser module.
    var bodyparser = require(‘body-parser’)
    app.use(bodyparser.urlencoded({extended: false}))
Read more about Connect middleware here:
The documentation of the body-parser module can be found here:
Here is how we can flip the characters:
    req.body.str.split(”).reverse().join(”)
——————————————————————————-
## NOTE
When creating your projects from scratch, install the body-parser dependency with npm by running:
    $ npm install body-parser
…in your terminal.

Again, the port to use is passed expressworks to the application as process.argv[2].

Okay, first we need to install the package as mentioned in the note.  Typing npm install body-parser at the $ prompt gives us:

npm WARN package.json chat-example@0.0.0 No repository field.
npm WARN package.json chat-example@0.0.0 No license field.
body-parser@1.15.1 node_modules/body-parser
├── content-type@1.0.2
├── bytes@2.3.0
├── depd@1.1.0
├── qs@6.1.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── raw-body@2.1.6 (unpipe@1.0.0)
├── http-errors@1.4.0 (inherits@2.0.1, statuses@1.3.0)
├── debug@2.2.0 (ms@0.7.1)
├── iconv-lite@0.4.13

└── type-is@1.6.13 (media-typer@0.3.0, mime-types@2.1.11)

This one is actually easier than it looks, because they give you everything, and I mean everything, you need to do it.

First we declare variables, noting that as usual they are supplying us the port in process.argv[2]:

var express = require("express");
var app = express();
var port = process.argv[2];
Next add the lines relevant to body-parser:
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}));

Add the line for the post request:

app.post('/path', function(req, res){...})

And inside the brackets goes the code for reversing the string:

     req.body.str.split('').reverse().join('');

Oh yeah….there IS one sneaky little it.  See up there in the directions where it says “Write a route (‘/form’)”?  And see how in the app.post() line it says ‘/path’?  Yeah, that gets changed.  Presto, we’ve done it!

And here’s the final program:

var express = require("express");
var app = express();
var port = process.argv[2];

var bodyparser = require('body-parser')
app.use(bodyparser.urlencoded({extended: false}))

app.post('/form', function(req, res) {
    console.log(res.send(req.body.str.split('').reverse().join('')));
});

app.listen(port);

See you next time!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s