Node.js এবং MongoDB ব্যবহার করে সাইন-আপ ফর্ম তৈরি

প্রস্তুতি

নিচের ডিপেন্ডেন্সি ইনস্টল করুন:

• npm install express --save — HTTP রিকোয়েস্ট হ্যান্ডলিং
• npm install body-parser --save — POST ডেটা পার্সিং
• npm install mongoose --save — MongoDB ODM

ফাইল স্ট্রাকচার

• app.js — সার্ভার কোড
• public/ ফোল্ডারে:
  • index.html — সাইন-আপ ফর্ম
  • success.html — সাফল্য পেজ
  • style.css — স্টাইলিং

app.js (সার্ভার কোড)

var express=require("express");
var bodyParser=require("body-parser");
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/tutorialsPoint');
var db=mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){ console.log("connection succeeded"); })
var app=express()
app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
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 data = { "name": name, "email":email, "password":pass, "phone":phone }
  db.collection('details').insertOne(data,function(err, collection){
    if (err) throw err;
    console.log("Record inserted Successfully");
  });
  return res.redirect('success.html');
})
app.get('/',function(req,res){
  res.set({ 'Access-control-Allow-Origin': '*' });
  return res.redirect('index.html');
}).listen(3000)
console.log("server listening at port 3000");

index.html (ফর্ম)

<!DOCTYPE html>
<html><head><title> Signup Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css"></head><body>
<div class="container"><div class="main">
<form action="/sign_up" method="post">
<h1>Welcome to Tutorials Point - SignUp</h1>
<input class="box" type="text" name="name" placeholder="Name" required /><br>
<input class="box" type="email" name="email" placeholder="E-Mail" required /><br>
<input class="box" type="password" name="password" placeholder="Password" required/><br>
<input class="box" type="text" name="phone" placeholder="Phone Number" required/><br>
<input type="submit" id="submitDetails" class="registerbtn" value="Submit" />
</form></div></div></body></html>

success.html

<!DOCTYPE html><html><head><title> Signup Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css"></head><body>
<div class="container"><div class="col-md-6 main"><h1> Signup Successful</h1></div></div></body></html>

style.css

.main{ padding:20px; font-family: 'Helvetica', serif; box-shadow: 5px 5px 7px 5px #888888; }
.main h1{ font-size: 40px; text-align:center; font-family: 'Helvetica', serif; }
input{ font-family: 'Helvetica', serif; width: 100%; font-size: 20px; padding: 12px 20px; margin: 8px 0; border: none; border-bottom: 2px solid #4CAF50; }
input[type=submit] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; margin: 4px 2px; border-radius: 10px; }
.registerbtn { background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; }

চলানো

node app.js

ব্রাউজারে খুলুন: https://localhost:3000/index.html