CRUD APP IN MONGO EXPRESS EJS
CRUD APP IN MONGO EXPRESS EJS -
File structured -
Dependencies used -
Server.js file -
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser')
mongoose.connect('mongodb://localhost:27017/newdatabase',{ useNewUrlParser: true ,useUnifiedTopology: true})
.then(()=>console.log("database is connected"))
.catch((err)=>console.log(err))
var itemScehma = new mongoose.Schema({
name : String,
surname : String,
email : String,
})
var item = new mongoose.model('item',itemScehma)
const app = express();
app.set('view engine','ejs')
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json());
app.get('/additem',(req,res)=>{
item.find({},(err,items)=>{
if(err)
{
console.log("item is not display")
}
else{
res.render('additem',{items:items})
}
})
})
app.post('/additem',(req,res)=>{
var itemdata = new item(req.body);
itemdata.save().then(result=>{
res.redirect("additem")
console.log("item saved to database")
}).catch((err)=>{
console.log("error saving data")
res.send("there is problem saving data")
})
})
app.get('/edit/:id',(req,res)=>{
item.findById(req.params.id,
function(err, items){
if (err) {
console.log("ERROR!");
} else {
res.render("edit", {items: items});
}
});
})
app.post('/edit/:id',(req,res)=>{
console.log(req.body)
item.findByIdAndUpdate(req.params.id, req.body, function(err) {
if (err) {
res.redirect('edit/' + req.params.id);
} else {
console.log('item saved')
res.redirect('/additem');
}
});
})
app.get('/delete/:id',(req,res)=>{
item.findByIdAndRemove(req.params.id,function(err) {
if (err) {
res.sen('not deleted');
} else {
console.log('item delete')
res.redirect('/additem');
}
});
})
app.get('/',(req,res)=>{
item.find({},(err,items)=>{
if(err)
{
console.log("item is not display")
}
else{
res.render('index',{items:items})
}
})
})
app.listen('3000',(req,res)=>{
console.log("server is connected")
})
Index.ejs file -
<!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>Document</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>this is ejs file</h2>
<a href="/additem">add item</a>
<h2>this is a place where you view item</h2>
<h2>view data</h2>
<table>
<tr>
<th>name</th>
<th>surname</th>
<th>email</th>
</tr>
<% for(let i = 0; i < items.length; i++ ){ %>
<tr>
<td><%= items[i].name %></td>
<td><%= items[i].surname %></td>
<td><%= items[i].email %></td>
</tr>
<% } %>
</table>
</body>
</html>
Edit.ejs file -
<!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>Document</title>
</head>
<body>
<h2>edit section </h2>
<form method="post">
<input type="text" name="name" placeholder="name" value="<%= items.name %>">
<input type="text" name="surname" placeholder="surname" value="<%= items.surname %>">
<input type="text" name="email" placeholder="email" value="<%= items.email %>">
<button type="submit">Save</button>
</form>
</body>
</html>
Additem.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">
<title>Document</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h2>this is a place where you add item</h2>
<a href="/">go back</a>
<form action="/additem" method="post">
<input type="text" name="name" placeholder="name" value="<%= items.name %>">
<input type="text" name="surname" placeholder="surname" value="<%= items.surname %>">
<input type="text" name="email" placeholder="email" value="<%= items.email %>">
<button type="submit">Save</button>
</form>
<h2>view data</h2>
<table>
<tr>
<th>name</th>
<th>surname</th>
<th>email</th>
</tr>
<% for(let i = 0; i < items.length; i++ ){ %>
<tr>
<td><%= items[i].name %></td>
<td><%= items[i].surname %></td>
<td><%= items[i].email %></td>
<td><a href="/edit/<%= items[i]._id %>">edit</a></td>
<td><a href="/delete/<%= items[i]._id %>">delete</a></td>
</tr>
<% } %>
</table>
</body>
</html>
Comments
Post a Comment