In this video tutorials explains how to make the user login and Registration Form using Node js React, Express js,MongoDB.using MVC architecture. we have created routes,studentControler,studentServices,studentModel.
First you have to Create the Project
npm init After run the command package.json file has been created.
First Step Create the page which is server.js which use to connect the port and databases.
const express = require('express')
const app = express()
const mongoose = require('mongoose');
mongoose.set('strictQuery', false);
var routes = require('./route/routes');
const cors = require('cors');
app.use(cors(
{
origin: "http://localhost:3000"
}
));
app.listen(9992,function check(err)
{
if(err)
console.log("error")
else
console.log("started")
});
mongoose.connect("mongodb://localhost:27017/gbs",{useNewUrlParser: true, useUnifiedTopology: true },
function checkDb(error)
{
if(error)
{
console.log("Error Connecting to DB");
}
else
{
console.log("successfully Connected to DB");
}
});
app.use(express.json());
app.use(routes); After that create the new Folder routes inside the folder create file routes.js.
var express = require('express');
var studentController = require('../src/student/studentController');
const router = express.Router();
router.route('/student/login').post(studentController.loginUserControllerFn);
router.route('/student/create').post(studentController.createStudentControllerFn);
module.exports = router; after that create folder src inside the src create the newfolder user inside the folder make studentControler.js,studentServices.js,studentModel.js these files.
var studentService = require('./studentService');
var createStudentControllerFn = async (req, res) =>
{
try
{
console.log(req.body);
var status = await studentService.createStudentDBService(req.body);
console.log(status);
if (status) {
res.send({ "status": true, "message": "Student created successfully" });
} else {
res.send({ "status": false, "message": "Error creating user" });
}
}
catch(err)
{
console.log(err);
}
}
var loginUserControllerFn = async (req, res) => {
var result = null;
try {
result = await studentService.loginuserDBService(req.body);
if (result.status) {
res.send({ "status": true, "message": result.msg });
} else {
res.send({ "status": false, "message": result.msg });
}
} catch (error) {
console.log(error);
res.send({ "status": false, "message": error.msg });
}
}
module.exports = { createStudentControllerFn,loginUserControllerFn }; var studentModel = require('./studentModel');
var key = '123456789trytryrtyr';
var encryptor = require('simple-encryptor')(key);
module.exports.createStudentDBService = (studentDetails) => {
return new Promise(function myFn(resolve, reject) {
var studentModelData = new studentModel();
studentModelData.firstname = studentDetails.firstname;
studentModelData.lastname = studentDetails.lastname;
studentModelData.email = studentDetails.email;
studentModelData.password = studentDetails.password;
var encrypted = encryptor.encrypt(studentDetails.password);
studentModelData.password = encrypted;
studentModelData.save(function resultHandle(error, result) {
if (error) {
reject(false);
} else {
resolve(true);
}
});
});
}
module.exports.loginuserDBService = (studentDetails)=>
{
return new Promise(function myFn(resolve, reject)
{
studentModel.findOne({ email: studentDetails.email},function getresult(errorvalue, result)
{
if(errorvalue)
{
reject({status: false, msg: "Invaild Data"});
}
else
{
if(result !=undefined && result !=null)
{
var decrypted = encryptor.decrypt(result.password);
if(decrypted== studentDetails.password)
{
resolve({status: true,msg: "Student Validated Successfully"});
}
else
{
reject({status: false,msg: "Student Validated failed"});
}
}
else
{
reject({status: false,msg: "Student Error Detailssss"});
}
}
});
});
} var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var studentSchema = new Schema({
firstname: {
type: String,
required: true
},
lastname: {
type: String,
required: true
},
email: {
type: String,
required: true
},
password: {
type: String,
required: true
}
});
module.exports = mongoose.model('student', studentSchema); React is a front-end application we have already created the folder front end inside the folder open the command prompt and type the commands.
Installing React
npx create-react-app front-end
After that you need to install the required dependencies
For managing the Api requests
2.npm i react-router-dom
For managing the routes
After that go to the bootstrap webite and copy the bootstap css style and paste inside the
index.html inside the head tag.
After install open the project into Vscode Editor.create the folder inside src which name is components inside the folder create 3 files. Home.jsx,Register.jsx,Login.jsx
import axios from "axios";
import { useState } from "react";
function Register() {
const [fname, setFName] = useState("");
const [lname, setLName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
async function save(event) {
event.preventDefault();
try {
await axios.post("http://localhost:9992/student/create", {
firstname: fname,
lastname: lname,
email: email,
password: password,
});
alert("Student Registation Successfully");
} catch (err) {
alert(err);
}
}
return (
<div>
<div class="container mt-4" >
<div class="card">
<h1>Student Registation</h1>
<form>
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Name"
value={fname}
onChange={(event) => {
setFName(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>Last name</label>
<input type="text" class="form-control" id="lname" placeholder="Enter Name"
value={lname}
onChange={(event) => {
setLName(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" id="email" placeholder="Enter Name"
value={email}
onChange={(event) => {
setEmail(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Fee"
value={password}
onChange={(event) => {
setPassword(event.target.value);
}}
/>
</div>
<button type="submit" class="btn btn-primary mt-4" onClick={save} >Save</button>
</form>
</div>
</div>
</div>
);
}
export default Register; import axios from "axios";
import { useState } from "react";
import { useNavigate } from 'react-router-dom';
function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
async function login(event) {
event.preventDefault();
try {
await axios.post("http://localhost:9992/student/login", {
email: email,
password: password,
}).then((res) =>
{
console.log(res)
const data = res.data;
if (data.status === true)
{
alert("Login Successfully");
navigate('/home');
}
else
{
alert("Login Failed")
}
}, fail => {
console.error(fail); // Error!
});
}
catch (err) {
alert(err);
}
}
return (
<div>
<div class="container">
<div class="row">
<h2>Login</h2>
<hr/>
</div>
<div class="row">
<div class="col-sm-6">
<form>
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" id="email" placeholder="Enter Name"
value={email}
onChange={(event) => {
setEmail(event.target.value);
}}
/>
</div>
<div class="form-group">
<label>password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Fee"
value={password}
onChange={(event) => {
setPassword(event.target.value);
}}
/>
</div>
<button type="submit" class="btn btn-primary" onClick={login} >Login</button>
</form>
</div>
</div>
</div>
</div>
);
}
export default Login; function Home() {
return (
<div>
<h1>index</h1>
</div>
);
}
export default Home; open the App.js
import { BrowserRouter,Routes,Route } from "react-router-dom";
import UserRegistation from "./components/UserRegistation";
import Login from "./components/Login";
import Home from "./components/Home";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/home" element= { <Home/>} />
<Route path="/register" element= { <UserRegistation/>} />
<Route path="/" element= { <Login/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
This article explain how to make a Fish Inventory Management App in Angular.this app explain…
Introduction to Fish Inventory Management In the aquaculture industry, managing fish inventory is crucial for…
Introduction to Java GUI CRUD Java is a powerful programming language widely used for building…
Introduction to Login Form Design Designing an effective and beautiful login form is crucial for…
Introduction In today creating a responsive login form is essential for providing a seamless user…
Introduction to Inventory Management Systems In today's fast-paced digital environment, businesses require efficient inventory management…