Scribd
Upload
56 views

Full Stack CRUD Project

This document outlines the steps to create a full stack CRUD application using Node.js, Express, Mongoose and EJS. It includes initializing packages, creating models, views and server files. Routes are defined for GET, POST, DELETE and UPDATE operations. Forms are created to insert, edit and display data from a MongoDB database.

Uploaded by

kaushal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

Full Stack CRUD Project

This document outlines the steps to create a full stack CRUD application using Node.js, Express, Mongoose and EJS. It includes initializing packages, creating models, views and server files. Routes are defined for GET, POST, DELETE and UPDATE operations. Forms are created to insert, edit and display data from a MongoDB database.

Uploaded by

kaushal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Full Stack CRUD Project

• Npm I init
• Npm I express
• Npm I mongoose
• Npm I ejs
• Npm I body-parser

• Create Server.js
• Next Step
• const express=require('express');
• const app=express();
• const mongoose=require('mongoose');
• const bodyParser=require('body-parser');
• connection
• mongoose.connect("mongodb://localhost:27017/KGF",{useUnifiedTopology:tr
ue,useNewUrlParser:true})
• var connection=mongoose.connection;
• connection.once('open',()=>{
• console.log("Connected");
• })
•

• Model folder created


• Create index.js in model folder
• Write these code
• const mongoose=require('mongoose');
•
• const faculty=mongoose.Schema(
• {
• name:String,
• email:String,
• password:String,
• mobileno:Number,
• }
• )
• module.exports=mongoose.model('staff',faculty);

• we have import our model index.js file in server.js file


const Staff=require('./model/index');

• we have to import two li


• app.use(bodyParser.json());
• app.use(bodyParser.urlencoded({extended:true}));

• set ejs in our engine

app.set('view engine','ejs')

• create views folder and make insert.ejs


• app.get('/',(req,res)=>{
• res.render('insert');
• });

• Create server for running a code

var server=app.listen(1000,()=>{
console.log("Server is running");
});
• Insert.ejs/designing part
• <!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">
• <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.m
in.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
• <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bun
dle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
• <title>Document</title>
• </head>
• <body>
• <div class="container" style="margin-top: 10%; background-color:
gainsboro;width: 450px; padding: 2%; border-radius: 20px;">
• <h1 style="text-align: center;">Insert Form</h1>
• <br>
• <form action="/insert" method="post">
• <div class="mb-3">
• <input type="text" class="form-control" placeholder="Name"
name="name">
• </div>
• <div class="mb-3">
• <input type="email" class="form-
control" placeholder="EmailId" name="email">
• </div>
• <div class="mb-3">
• <input type="password" class="form-
control" placeholder="password" name="password">
• </div>
• <div class="mb-3">
• <input type="number" class="form-
control" placeholder="Mobile No" name="mno">
• </div>
• <button class="btn btn-primary" type="submit" style="margin-
left: 38%;" name="update">Insert</button>
• </form>
• </div>
• </body>
• </html>
• Output

• Add post method for insert


• app.post('/insert',(req,res)=>{
• const user=new User(
• {
• name:req.body.name,
• email:req.body.email,
• password:req.body.password,
• mobileno:req.body.mno
• });
• user.save(()=>{
• res.redirect('/show')
• });
• });
•
• Get method for show
• app.get('/show',(req,res)=>{
• User.find({},(err,result)=>{
• res.render('show',{users:result})
• });
• });

• Show page designing


<!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">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<table class="table">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email Id</th>
<th>Password</th>
<th>Mobile No</th>
<th>Update</th>
<th>Delete</th>
</tr>
<% users.forEach(function(user){%>
<tr>
<td><%=user._id %></td>
<td><%=user.name %></td>
<td><%=user.email %></td>
<td><%=user.password %></td>
<td><%=user.mobileno %></td>
</tr>
<%})%>
</table>
</div>
</body>
</html>

For delete
• Show.ejs
• <td>
• <a href="/delete/<%=user._id%>" class="btn btn-danger">
• delete
• </a>
• </td>
• Server.js
• app.get('/delete/:id',async function(req,res){
• await User.findByIdAndDelete(req.params.id);
• res.redirect("/show")
• })

For Update
• Show.ejs
• <td>
• <a href="/edit/<%=user._id%>" class="btn btn-success">
• update
• </a>
• </td>
• Make edit.ejs
• <!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">
• <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
• <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
• <title>Document</title>
• </head>
• <body>
• <div class="container" style="margin-top: 10%; background-color:
gainsboro;width: 450px; padding: 2%; border-radius: 20px;">
• <h1 style="text-align: center;">Insert Form</h1>
• <br>
• <form action="/update/<%=users._id %>" method="post">
• <div class="mb-3">
• <input type="text" class="form-
control" placeholder="Name" value="<%=users.name %>" name="name">
• </div>
• <div class="mb-3">
• <input type="email" class="form-
control" placeholder="EmailId" value="<%=users.email %>" name="email">
• </div>
• <div class="mb-3">
• <input type="password" class="form-
control" placeholder="password" value="<%=users.password
%>" name="password">
• </div>
• <div class="mb-3">
• <input type="number" class="form-
control" placeholder="Mobile No" name="mno" value="<%=users.mobileno
%>" >
• </div>
• <button class="btn btn-primary" type="submit" style="margin-left:
38%;" name="update">Update</button>
• </form>
• </div>
• </body>
• </html>

• Server.js

1.edit
app.get('/edit/:id',function (req,res){
User.findById(req.params.id,function(err,result){
res.render('edit',{users:result});
})
})
2.update
app.post('/update/:id' ,async function(req,res){
await User.findByIdAndUpdate(req.params.id,req.body);
res.redirect('/show');
})
All Files
1.server.js
var express=require('express');
var app=express();
var mongoose=require('mongoose');
var bodyParser=require('body-parser');
var User=require('./model/index');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

mongoose.connect("mongodb://localhost:27017/Triumph",{useUnifiedTopology:true,
useNewUrlParser:true})
var connection=mongoose.connection;
connection.once('open',()=>{
console.log("Connected succcess");
});

app.set('view engine','ejs');
app.get('/',(req,res)=>{
res.render('insert')
})

app.post('/insert',(req,res)=>{
const user=new User(
{
name:req.body.name,
email:req.body.email,
password:req.body.password,
mobileno:req.body.mno
});
user.save(()=>{
res.redirect('/show')
});
});

app.get('/show',(req,res)=>{
User.find({},(err,result)=>{
res.render('show',{users:result})
});
});

app.get('/delete/:id',async function(req,res){
await User.findByIdAndDelete(req.params.id);
res.redirect("/show")
})
app.get('/edit/:id',function (req,res){
User.findById(req.params.id,function(err,result){
res.render('edit',{users:result});
})
})

app.post('/update/:id' ,async function(req,res){


await User.findByIdAndUpdate(req.params.id,req.body);
res.redirect('/show');
})

let server=app.listen(4000,()=>{
console.log("Sever is running");
})
2.model/index.js
var mongoose=require('mongoose');

var newschema=mongoose.Schema(
{
name:String,
email:String,
password:String
}
);
module.exports=mongoose.model("users",newschema);

3.views/insert.ejs
<!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">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Document</title>
<style>
body{
background-color: skyblue;
}
</style>
</head>
<body>

<br><br>
<marquee behavior="alternate" direction=""><h1>Coding Club
Member</h1></marquee>
<br><br>
<div class="container" style="background-color: white; padding: 5%;
border-radius: 20px; width: 600px; box-shadow: 4px 4px 3px black ; ">
<h1 style="text-align: center;">Data Entry Form</h1>
<br>
<form method="post" action="/insert">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="name"
id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter
Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email</label>
<input type="email" class="form-control" name="email"
id="exampleInputPassword1" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"
id="exampleInputPassword1" placeholder="Enter Password">
</div>
<br>
<center><button type="submit" class="btn btn-outline-dark "
style="width: 150px;">Insert</button></center>
</form>
</div>
</body>
</html>
4.views/show.ejs
<!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">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Document</title>
<style>
body{
background-color: skyblue;
}
</style>
</head>
<body>
<br><br><br>
<div class="container" style="background-color: white; padding: 5%;border-
radius: 20px;box-shadow: 4px 4px 3px black ;">
<h1 style="text-align: center;">Show Database Entry</h1>
<br>
<table class="table table-border table-bordered table-hover text-center
shadow">
<tr>
<th>User Id</th>
<th>User Name</th>
<th>User Email</th>
<th>User Password</th>
<th>User Update</th>
<th>User Delete</th>
</tr>
<% users.forEach(function(user){%>
<tr>
<td><%=user._id %></td>
<td><%=user.name %></td>
<td><%=user.email %></td>
<td><%=user.password %></td>
<td>
<a href="/edit/<%=user._id%>" class="btn btn-outline-success">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-
2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0
0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-
.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5
15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0
1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
</a>
</td>
<td>
<a href="/delete/<%=user._id%>" class="btn btn-outline-danger"
onclick="show()">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8
7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-
.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>
</a>
</td>

</tr>
<% }) %>
</table>
</div>
<script>
function show(){
alert("Data Deleted");
}
</script>
</body>
</html>
5.views/edit.ejs
<!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">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Document</title>
<style>
body{
background-color: skyblue;
}
</style>
</head>
<body>
<br><br><br><br>
<div class="container" style="background-color: white; padding: 5%;
border-radius: 20px; width: 600px; box-shadow: 4px 4px 3px black ;">
<center><h1>Update Your Data</h1></center> <br>
<form method="POST" action="/update/<%=users._id %>">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" value="<%=users.name %>"
name="name" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email</label>
<input type="email" class="form-control" name="email"
value="<%=users.email %>" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"
value="<%=users.password %>" >
</div>
<button type="submit" onclick="show()" class="btn btn-success"
name="update" >Update</button>
<br><br>
</form>
</div>
<script>
function show(){
alert('Updated Successfully');
}
</script>
</body>
</html>
6.Mongo compass
Table

Staff Details

You might also like