how to get user input and process it in nodejs tutorial

how to get user input and process it in nodejs tutorial

This is a continuation of the tutorial started on node js angular and mongo db shown on
node js console tutorial

Now we have advanced a bit more and have served an html file from node js in this tutorial.

It would be a matter of updating the html file to have the user input box and adding one more route in node js to wait for specific url, getting the input and posting back the processed data.

In this part, the app will accept a name from the user and will print an email address containing the name that is provided.

How to get input from the user

If you have followed this tutorial, start from number 4

1. create a directory node-input

2. move to that directory and issue the following command to install express in it

sudo npm install express

3. The above command would install express package in node_modules folder. This is the folder where all third party packages would be stored.

4. create server.js file in the folder node-input and add the following snippet in it.


 var express = require("express");
 
 //use the application off of express.
 var app = express();
 
 //define the route for "/"
 app.get("/", function (request, response){
     response.sendFile(__dirname+"/views/index.html");
 });
 
 app.get("/getemail", function (request, response){
     var firstname = request.query.firstname;
 
     if (firstname != "") {
         response.send("Your email address is " + firstname + "@gullele.com");
     } else {
         response.send("Please provide us first name");
     }
 });
 
 //start the server
 app.listen(8080);
 
 console.log("Something awesome to happen at http://localhost:8080");

5. create a folder views in node-input folder

6. create index.html inside views and add the following code in it


<html>
    <head>
        <title>Simple hello world</title>
        <style>
            .prompt {
                font-size: 16px;
                color: brown;
                font-weight: bold;
                margin-bottom: 5px;
            }
            .container {
                width: 50%;
            }
            .left-pane {
                width: 50%;
                float: left;
            }
            .right-pane {
                width: 50%;
                float: right;
            }
            .submit-name {
                clear: both;
            }
        </style>
    </head>
<body>
    <h1>Hello Node JS</h1>

    <form method='GET' action="/getemail">
        <div class="container">
            <div class="prompt left-pane">
                <span>Give us your firstname and get email address</span>
            </div>
            <div class="right-pane">
                <input type="text" id="firstname" name="firstname" />
            </div>
        </div>
        <div class="submit-name">
            <input type="submit" value="get the email" />
        </div>
        </div>
    </form>
</body>
</html>

7. Save this file and start the sever using

node server.js

8. Now go to browser and surf http://localhost:8080

As you can see, the main point here would be adding one more route app.get("/getemail", function (request, response){ and accessing the parameters using the request object then passing the response with processed name in it.

The next would be to see how node can accomplish rendering the next page with values. And for that, there is a need to have template engine introduced.

Next: Using template engine ejs with node js

Passing composite object parameter to jersey in Restful Java web

J2EE Maven Eclipse Hello World Tutorial Part Two

using mongodb with nodejs and angular js

using angular js with node js application example

introduction to Angular js for usage of node js

Using template engine in node js to render response values example

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*