OUTPUT OF CRUD OPERATION APPLICATION👇
so lets start coding part
step 1: create package.json file
command : npm init-y
step 2:- install dependencies
command:- npm i axios body-parser dotenv ejs express mongoose morgon nodemon
step 3:-After installing all the dependencies create server.js file and then copy below code in your server.js file
server.js
const express=require("express")
const dotenv =require("dotenv")
const morgan=require("morgan")
const path=require("path")
const bodyparser = require("body-parser")
const connectDB=require("./server/database/connection.js")
const app=express()
//dotenv
dotenv.config({path:"config.env"})
const PORT=process.env.PORT||8080
//morgon module
app.use(morgan("tiny"));
//bodyparser
app.use(bodyparser.urlencoded({extended:true}))
//mongo
connectDB()
//view engine
app.set("view engine","ejs")
//assets
app.use("/assets",express.static(path.resolve(__dirname,"assets")))
app.use("/",require("./server/routes/router"))
app.listen(PORT,()=>{
console.log(`server is running on http://localhost:${PORT}`);
})
step 4: creation of folder and file
- create new folder name server in that create folder controller/controller.js , database/connection.js, model/model.js , routes/router.js , service/render.js
- create new folder names views in that create add_user.ejs, index.ejs , update_user.ejs
- create assets in that create style.css for styling the page
below is the structure of folder
step 5 : fill the code part 🤭
install mongodb compass
#database connection in connection.js copy below code and paste it on connection.js file located in database folder:
const mongoose=require("mongoose")
const connectDB =async()=>{
try{
const con=await mongoose.connect('mongodb://localhost:27017/ADD-db', {
useNewUrlParser: true,
useUnifiedTopology: true,
// useFindOneAndModify:false
})
console.log("mongo connected");
}catch(err){
console.log(err);
process.exit(1)
}
}
module.exports=connectDB
Now design the schema part copy below code and paste it on model.js file located in model folder:
const mongoose=require("mongoose")
var schema =new mongoose.Schema({
name:{
type:String, required:true
},
email:{
type:String, required:true
},
gender:String
})
const Userdb =mongoose.model("userdb",schema)
module.exports=Userdb
Now creates routes copy below code and paste it on router.js located in router folder
const express=require("express")
const route=express.Router()
const controller=require("../controller/controller")
const services=require("../services/render")
//creating get routes
route.get("/",services.homeRoutes)
route.get("/add",services.addRoutes)
route.get("/update",services.updateRoutes)
//api calling
route.post("/api/users",controller.create)
route.get("/api/users",controller.find)
route.put("/api/users/:id",controller.update)
route.delete("/api/users/:id",controller.delete)
module.exports=route
Now render the ejs file ,copy the below code in the render.js file located in services folder
const axios =require("axios")
exports.homeRoutes=(req,res)=>{
//make a get req
axios.get("http://localhost:3000/api/users")
.then(function(response){
console.log(response);
res.render("index",{users:response.data})
}).catch(err=>{
res.send({message:"error"})
})
}
exports.addRoutes=(req,res)=>{
res.render("add_user")
}
exports.updateRoutes=(req,res)=>{
console.log("req data is "+ req.query.id);
axios.get("http://localhost:3000/api/users",{params:{id:req.query.id}})
.then(function(userdata){
res.render("update_user",{users:userdata.data})
console.log(users)
}).catch(err=>{
res.render(err)
})
}
Now the time of crud operation part 😁 , copy below code in the controller.js file located in controller folder
var userdb=require("../model/model.js")
exports.create=(req,res)=>{
//validate request
if(!req.body){
res.status(400).send({message:"content is not there"})
return;
}
const user=new userdb({
name:req.body.name,
email:req.body.email,
gender:req.body.gender
})
//save in db
user
.save(user)
.then(data=>{
res.redirect("/")
}).catch(err=>{
res.status(500).send({message:err.message||"error"})
})
}
exports.find=(req,res)=>{
if(req.query.id){
const id=req.query.id;
userdb.findById(id)
.then(data=>{
if(!data){
res.status(400).send({message:"id is not matchin"})
}else{
res.status(200).send(data)
}
}).catch(err=>{
res.status(400).send({message:"cant get the user"})
})
}
else{
userdb.find()
.then(user=>{
res.send(user)
})
.catch(err=>{
res.status(500).send({message:err.message||"error message"})
})
}
}
exports.update=(req,res)=>{
if(!req.body){
return res.status(400).send({message:"data to updated can not be empty"})
}
const id=req.params.id;
userdb.findByIdAndUpdate(id,req.body).then(data=>{
if(!data){
res.send({message:'cannot update'})
res.redirect("/")
}else{
res.send(data)
res.redirect("/")
console.log("the id is" +id)
console.log("data is " + data)
}
}).catch(err=>{
res.send({message:err.message||"message err"})
res.redirect("/")
})
}
exports.delete=(req,res)=>{
const id=req.params.id;
console.log(id)
userdb.findByIdAndDelete(id)
.then(data=>{
if(!data){
res.status(404).send({message:"id is not match"})
}else{
res.status(200).send({
message:"deleted users"
})
}
}).catch(err=>{
res.status(500).send({message:"user not deleted"})
})
}
step 6 : -frontend part (part A): making ejs file
copy below code in index.ejs file located in views folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD APPLICATION</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
</head>
<body>
<header id="header">
<nav>
<div class="container">
<div class="text-center">
<a href="/" class="nav-brand text-dark">User Management System </a>
</div>
</div>
</nav>
</header>
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<a href="/add" class="border-shadow">
<span class="text-gradient">New user <i class="fas fa-user"></i></span>
</a>
</div>
<form action="/api/user" method="post">
<table class="table">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>@Email</th>
<th>Gender</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<%for(var i=0;i<users.length;i++){%>
<tr>
<td><%=i+1%></td>
<td><%=users[i].name%></td>
<td><%=users[i].email%></td>
<td><%=users[i].gender%></td>
<td>
<a href="/update?id=<%=users[i]._id%>" class="btn border-shadow update">
<span class="text-gradient"><i class="fas fa-pencil-alt"></i></span>
</a>
<a class="btn border-shadow delete" data-id=<%=users[i]._id%>>
<span class="text-gradient"><i class="fas fa-times"></i></span>
</a>
</td>
</tr>
<%}%>
</tbody>
</table>
</form>
<!-- <%=users%> -->
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script >
if(window.location.pathname=="/"){
$ondelete=$(".table tbody td a.delete");
$ondelete.click(function(){
var id=$(this).attr("data-id")
var request={
"url":`http://localhost:3000/api/users/${id}`,
method:"DELETE"
}
if(confirm("DO YOU WANT TOI DELETE ")){
$.ajax(request).done(function(res){
alert("data deleted successfully")
location.reload()
})
}
})
}
</script>
</body>
</html>
copy below code in add_user.ejs file located in views folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD APPLICATION</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
</head>
<body>
<header id="header">
<nav>
<div class="container">
<div class="text-center">
<a href="/" class="nav-brand text-dark">User Management System </a>
</div>
</div>
</nav>
</header>
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<a href="/"> <i class="fas fa-angle-double-left"></i> All Users</a>
</div>
</div>
<div class="form-title text-center">
<h2 class="text-dark">NEW USER</h2>
<span class="text-light">USE THE BELOW FORM TO CREATE NEW ACCOUNT</span>
</div>
<form id="add_user" method="post" action="/api/users">
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value="">
<input type="text" autocomplete="off" name="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email" class="text-light">Email</label>
<input type="hidden" name="id" value="">
<input type="text" autocomplete="off" name="email" placeholder="example@gmail.com">
</div>
<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" name="gender" value="Male" id="rad1">
<label for="rad1" class="text-light">Male</label>
</div>
<div class="radio inline">
<input type="radio" name="gender" value="Female" id="rad2">
<label for="rad2" class="text-light">Female</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn text-dark update" id="add-user">Save</button>
</div>
</div>
</form>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script >
$("#add_user ").submit(function(eve){
alert("data inserted successfully")
})
</script>
</body>
</html>
copy below code in update_user.ejs file located in views folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD APPLICATION</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
</head>
<body>
<header id="header">
<nav>
<div class="container">
<div class="text-center">
<a href="/" class="nav-brand text-dark">User Management System </a>
</div>
</div>
</nav>
</header>
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<a href="/"> <i class="fas fa-angle-double-left"></i> All Users</a>
</div>
</div>
<div class="form-title text-center">
<h2 class="text-dark">UPDATE USER</h2>
<span class="text-light">USE THE BELOW FORM TO UPDATE NEW ACCOUNT</span>
</div>
<form id="update_user" method="post" >
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value=<%=users._id %>>
<input type="text" autocomplete="off" name="name" value=<%=users.name %>>
</div>
<div class="form-group">
<label for="email" class="text-light">Email</label>
<!-- <input type="hidden" name="id" value=""> -->
<input type="text" autocomplete="off" name="email" value=<%=users.email %>>
</div>
<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" name="gender" value="Male" id="rad1">
<label for="rad1" class="text-light">Male</label>
</div>
<div class="radio inline">
<input type="radio" name="gender" value="Female" id="rad2">
<label for="rad2" class="text-light">Female</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn text-dark update">Save</button>
</div>
</div>
</form>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script >
$("#update_user").submit(function(event){
event.preventDefault();
var unindex=$(this).serializeArray();
console.log(unindex);
let data={}
// console.log(unindex);
$.map(unindex,function(n,i){
data[n['name']]=n['value']
})
console.log(data);
var request={
"url":`http://localhost:3000/api/users/${data.id}`,
method:"PUT",
"data":data
}
$.ajax(request).done(function(response){
alert("data updated successfully");
console.log(response);
// location.reload()
})
})
</script>
</body>
</html>
step 6 : -frontend part (part B): styling the page
copy below code in style.css located in assets/css folder
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
:root{
--dark:#2b2d42;
--light:#adb5bd;
--border:#dee2e6;
--border-btn:#edf2f4
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
font-family: "PT Sans",sans-serif;
}
a:hover{
text-decoration: none;
font-family: "PT Sans",sans-serif;
cursor: pointer;
}
.contanier{
max-width: 1024px;
margin:auto;
}
.nav-brand{
font-size: 1.5em;
font-weight: bold;
}
.d-flex{
display: flex;
flex-wrap: wrap;
}
.justify-between{
justify-content: space-between;
}
.text-center{
text-align: center;
}
.border-shadow{
border: 1px solid var(--border-btn);
box-shadow: 1px 3px 10px white;
}
.text-dark{
color: var(--dark);
}
.inline{
display: inline-block;
}
.text-light{
color: var(--light);
}
.text-gradient{
background: linear-gradient(to right , purple,purple);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#header nav{
background-color: cyan;
padding: 1em 0;
width: 100%;
}
#site-main{
margin-top: 4em ;
font-family: "Barlow",sans-serif;
}
#site-main.contanier.box-nav>a{
font-size: 1em;
padding: 5em 1em ;
}
#site-main.container form{
margin: 2em 0;
}
table{
margin-top: 20px;
border-spacing: 0px;
width: 100%;
}
.table td,.table th{
padding: .75em;
vertical-align: top;
text-align: center;
border-top: 1px solid var(--border);
}
.table td>a.btn{
padding: .3em 1em;
font-size: 1.1em;
margin: 0 .2em;
}
.table tr:hover{
background-color: cyan;
}
.table tr:hover td>a{
box-shadow: none;
}
.table .thead-dark th{
color: white;
background-color: var(--dark);
border-color: black;
}
@media only screen and (max-width:1024px){
table,thead,tbody,th,td,tr{
display: block;
}
thead tr{
position: absolute;
top: -9999px;
left:-9999px
}
tr{border:1px solid var(--border)}
td{
border:none;
border-bottom:1px solid var(--border);
position: relative;
}
}
.form-title{
margin-top: 2em;
}
.form-title{
padding: .5em 0;
}
.new_user{
max-width: 786px;
margin: auto;
}
#update_user .form-group{
margin: 4em 0;
}
#add_user .form-group{
margin: 4em 0;
}
#update_user .form-group .radio{
margin: 1em 2em;
}
#add_user .form-group .btn, #update_user .form-group .btn{
width: 30%;
padding: .9em 1em;
background-color: cyan;
cursor: pointer;
font-size: 1em;
}
#add_user .form-group .btn:hover, #update_user .form-group .btn:hover{
/* width: 50%; */
padding: .9em 1em;
background-color: rgb(31, 107, 107);
cursor: pointer;
font-size: 1em;
}
This comment has been removed by a blog administrator.
ReplyDelete