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.