HTML5
, styled with CSS3
, using express.js
framework of node.js
for backend and MongoDb
database for
Storage.
<html>
<head>
<title> Signup Form | nodejsera </title>
<!-- Including bootstrap v3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Including Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
<div class="col-md-3">
<!-- Blank DIV -->
</div>
<div class="col-md-6 main">
<!-- Form Tag starts here -->
<!-- Action attribute is the route on backend. Method is POST -->
<form action="/sign_up" method="post">
<h1> Signup form </h1>
<input class="box" type="text" name="name" id="name" placeholder="Enter your Name" required /><br>
<input class="box" type="email" name="email" id="email" placeholder="Enter your E-Mail " required /><br>
<input class="box" type="password" name="password" id="password" placeholder="Enter your Password " required/><br>
<input class="box" type="text" name="phone" id="phone" placeholder="Enter your Phone Number " required/><br>
<br>
<input type="submit" id="submitDetails" name="submitDetails" value="Submit Your Details" /><br>
</form>
</div>
<div class="col-md-3">
<!-- Blank DIV -->
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title> Signup Form | nodejsera </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 main">
<h1> Signup Successful <br> Congratulations!!</h1>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
.main{
padding:20px;
font-family: 'Josefin Slab', serif;
border : 2px solid #50d8a4;
border-radius: 15px;
}
.main h1{
font-size: 50px;
text-align:center;
font-family: 'Josefin Slab', serif;
color: #549978;
}
input{
font-family: 'Josefin Slab', serif;
width: 100%;
font-size: 30px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #50d8a4;
}
input[type=submit] {
font-family: 'Josefin Slab', serif;
width: 100%;
background-color: #549978;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
input:hover {
font-family: 'Josefin Slab', serif;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #549978;
}
input[type=submit]:hover {
font-family: 'Josefin Slab', serif;
width: 100%;
background-color: #549978;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
var express = require('express');
var path = require('path');
var mongo = require('mongodb');
var bodyParser = require('body-parser');
var crypto = require('crypto');
var app = express();
//enter the name of the database in the end
var new_db = "mongodb://localhost:27017/database_name";
app.get('/',function(req,res){
res.set({
'Access-Control-Allow-Origin' : '*'
});
return res.redirect('/public/index.html');
}).listen(3000);
console.log("Server listening at : 3000");
app.use('/public', express.static(__dirname + '/public'));
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
var getHash = ( pass , phone ) => {
var hmac = crypto.createHmac('sha512', phone);
//passing the data to be hashed
data = hmac.update(pass);
//Creating the hmac in the required format
gen_hmac= data.digest('hex');
//Printing the output on the console
console.log("hmac : " + gen_hmac);
return gen_hmac;
}
// Sign-up function starts here. . .
app.post('/sign_up' ,function(req,res){
var name = req.body.name;
var email= req.body.email;
var pass = req.body.password;
var phone = req.body.phone;
var password = getHash( pass , phone );
var data = {
"name":name,
"email":email,
"password": password,
"phone" : phone
}
mongo.connect(new_db , function(error , db){
if (error){
throw error;
}
console.log("connected to database successfully");
//CREATING A COLLECTION IN MONGODB USING NODE.JS
db.collection("details").insertOne(data, (err , collection) => {
if(err) throw err;
console.log("Record inserted successfully");
console.log(collection);
});
});
console.log("DATA is " + JSON.stringify(data) );
res.set({
'Access-Control-Allow-Origin' : '*'
});
return res.redirect('/public/success.html');
});
Run : We can run this code
server.js
using the following command :
> node server.js
We started with creating a simple static form with HTML5 and then styling that html form using css. After that we created our backend by using the express.js framework of node. Lastly, we stored all the data in the nosql database MongoDB.