How to Send Data From a Form and Receive It with Express.js
I am practicing with forms and Express.js how to send data and how to catch it and this will be a great way to create a web page who will have a Data Base, and I can save information from the client this looks great, but I need to keep learning and sharing!
Watch the video if you want
Initiate NPM
npm init -yInstall dependencies
We need to install Express.js, express-handlebars, body-parser and that is all for now
npm i express --savenpm i express-handlebarsnpm i body-parser// just one line
npm i express express-handlebars body-parser --save
Structure of our directory
First of all, we need to create our views directory and inside we add views and layouts we will add the 404 view, 500, home and form view for our form’s example.
We can add a little of information to them like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Handle Form</title>
</head>
<body>
{{{ body }}}
</body>
</html>
And the most important thing to be like a common form, don’t forget the method and action because this will send the data to Express.js
<form method="post" action="http://127.0.0.1:1024/form_post">
<label for="">
<input type="text" name="name_user" value="Jhon Wick" placeholder="Add your name">
</label>
<label>
<input type="email" name="email_user" value="jhonw@gmail.com" placeholder="Add your email">
</label>
<button>Click</button>
</form>This is really significant, and we need to specify the name because with this we can see that when we send the data Express.js will receive it, and it will create an object linking the name with the value.
Create our server with Express.js and Node.js
Second, we create a file call formexpress.js, and we need to call express to create our app with express and calling engine this is for the new version of the express-handlebars 6.0.1, the port and the bodyParser to help us to parse the data, and it will give us the information that we need.
const express = require( 'express' ),
app = express(),
{ engine } = require( 'express-handlebars' ), // before 6.0.0
port = process.env.PORT || 1024,
bodyParser = require( 'body-parser' )Specify the engine
This is really important because with this step we assure that we are using express-handlebars and the view engine, also we can add the layout, thus tha main handle-bars that we created before, and we need to use the bodyParser and adding the information extended to false
app.use( bodyParser({ extended: false }) )
app.engine( 'handlebars', engine({
defaultLayout: 'main'
}))
app.set( 'view engine', 'handlebars' )Creating the get functions for the requests
This is another critical part because with this is that we will get the view that we requested from the server
app.get( '/', ( req, res ) => res.render( 'home' ) )
app.get( '/form', ( req, res ) => res.render( 'form' ) )
app.get( '/thank-you', ( req, res ) => res.status( 303 ).render( 'thank-you' ) )Post responses and 404 and 500 views
Finally, we have to create the post and what will do after the client send its data, we need to add the post method to the app and inside we need to set the URL and the req and res parameters then we need to use the req.body to check what the client sent to us, and we can redirect to the thank you page.
app.post( '/form_post', ( req, res ) => {
console.log(req.body)
res.redirect( 303, 'thank-you' )})
app.use( ( req, res ) => res.status( 404 ).render( '404' ) )
app.use( ( err, req, res, next ) => res.status( 500 ).render( 500 ) )
app.listen( port, console.log( `http://127.0.0.1:${ port }` ) )Test it
Run our JS file
The home page
The form page
Clicking and what will we have?
And on the console log we will have the information from our client
We have the information from our client, and we redirected to a thank you page and everyone is happy.
Conclusion
This step is really important because we are transferring worthy information from the client to the server, sending the data and receive it with Express.js in a really interesting step to keep it mind and the next step will be saving on a Data base or and API, but this is a really great breakthrough.
