Ex 5
Ex 5
Step 2: Select New Project and then select Express from Generators, give name of the project
and select Handlebars from the View Engine and Click on Create button.
index.hbs:
<h1>MONGODB - EXERCISE</h1>
<section class="insert">
<h3>Insert Data</h3>
<form action="/insert"method="post">
<div class="input">
<label for="name">Student Name</label>
<input type="text"id="name"name="name">
</div>
<div class="input">
<label for="year">Year of Study</label>
<input type="text"id="year"name="year">
</div>
<div class="input">
<label for="gender">Gender</label>
<input type="text"id="gender"name="gender">
</div>
<button type="submit">INSERT</button>
</form>
</section>
<section class="get">
<h3>Get Data</h3>
<a href="/get-data">LOAD DATA</a>
<div>
{{# each items }}
<article class="item">
<div>Student Name: {{ this.name }}</div>
<div>Year of Study: {{ this.year }}</div>
<div>Gender: {{ this.gender }}</div>
<div>ID: {{ this._id }}</div>
</article>
{{/each}}
</div>
</section>
<section class="update">
<h3>Update Data</h3>
<form action="/update"method="post">
<div class="input">
<label for="id">ID</label>
<input type="text"id="id"name="id">
</div>
<div class="input">
<label for="name">Student Name</label>
<input type="text"id="name"name="name">
</div>
<div class="input">
<label for="year">Year of Study</label>
<input type="text"id="year"name="year">
</div>
<div class="input">
<label for="gender">Gender</label>
<input type="text"id="gender"name="gender">
</div>
<button type="submit">UPDATE</button>
</form>
</section>
<section class="delete">
<h3>Delete Data</h3>
<form action="/delete"method="post">
<div class="input">
<label for="id">ID</label>
<input type="text"id="id"name="id">
</div>
<button type="submit">DELETE</button>
</form>
</section>
style.css:
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a{
color: #00B7FF;
}
section {
float: left;
background: #bdc3c7;
padding: 10px;
margin: 30px;
width: 300px;
box-shadow: 3px 3px 1px
#34495e; min-height: 400px;
}
section:first-of-type
{ margin-left: 0;
}
section:last-of-type
{ margin-right: 0;
}
section h3 {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
.insert {
background: #2ecc71;
}
.get {
background: #ecf0f1;
}
.update {
background: #3498db;
}
.delete {
background: #e74c3c;
}
.input label {
display: block;
font-weight:
bold; padding:
2px 0;
}
input,
button {
font: inherit;
}
button {
margin-top: 10px;
border: none;
box-shadow: 1px 1px 1px
#34495e; border-radius: 0;
background: #ecf0f1;
cursor: pointer;
}
button:hover {
background:
#bdc3c7;
}
.item {
margin: 10px 0;
padding: 5px;
background: #95a5a6;
border: 1px solid black;
}
index.js:
const express = require('express');
const router = express.Router();
});
router.post('/update', async(req,res)=> {
let item = {
name: req.body.name,
year: req.body.year,
gender: req.body.gender
};
let id = req.body.id;
let database = await getdatabase();
const collection = database.collection('studdet');
});
router.post('/delete', async(req,res)=> {
let id = req.body.id;
let database = await getdatabase();
const collection = database.collection('studdet');
});
module.exports = router;
Insert Data:
Read Data:
Update Data:
Delete Data: