CRUD Operations using Data from MongoDB
1. Create a table
"tblproducts"
ProductId
Name
Price
Stock
Mfd
2. api.js
var express = require("express");
var mongoClient = require("mongodb").MongoClient;
var cors = require("cors");
var app = express();
var connectionString = "mongodb://127.0.0.1:27017";
app.use(cors());
app.use(express.urlencoded({
extended:true
}));
app.use(express.json());
app.get("/getproducts", function(req, res){
mongoClient.connect(connectionString, function(err, clientObject){
if(!err){
var dbo = clientObject.db("projectdb");
dbo.collection("tblproducts").find({}).toArray(function(err, documents)
{
if(!err){
res.send(documents);
}
})
}
})
});
app.post("/addproduct", function(req, res){
var data = {
"ProductId": parseInt(req.body.ProductId),
"Name": req.body.Name,
"Price": parseFloat(req.body.Price),
"Stock": (req.body.Stock=="true")?true:false,
"Mfd": new Date(req.body.Mfd)
}
mongoClient.connect(connectionString, function(err, clientObject){
if(!err){
var dbo = clientObject.db("projectdb");
dbo.collection("tblproducts").insertOne(data, function(err, result){
if(!err){
console.log("Record Inserted");
}
})
}
})
});
app.delete("/removeproduct/:id", function(req, res){
var id = parseInt(req.params.id);
mongoClient.connect(connectionString, function(err, clientObject){
if(!err){
var dbo = clientObject.db("projectdb");
dbo.collection("tblproducts").deleteOne({ProductId:id}, function(err,
result){
if(!err){
console.log("Record Deleted");
}
})
}
})
});
app.listen(8080);
console.log("Server Started");
3. product.html
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function(){
$(document).on("click", "#btnDelete", function(e){
var flag = confirm("Are you sure? Want to Delete");
if(flag==true){
$.ajax({
method: "DELETE",
url: `http://127.0.0.1:8080/removeproduct/$
{e.target.name}`
})
alert("Deleted");
}
})
function LoadProducts(){
$.ajax({
method:"GET",
url:"http://127.0.0.1:8080/getproducts",
success: function(data){
for(var product of data){
$(`
<tr>
<td>${product.Name}</td>
<td>${product.Price}</td>
<td>${(product.Stock==true)?"Available":"Out of
Stock"}</td>
<td>${product.Mfd} </td>
<td>
<button type="button" name=${product.ProductId}
id="btnDelete" class="btn btn-danger">
<span class="bi bi-trash"></span>
</button>
</td>
</tr>`).appendTo("tbody");
}
}
})
}
LoadProducts();
$("#btnRegister").click(function(){
var data = {
"ProductId": parseInt($("#ProductId").val()),
"Name": $("#Name").val(),
"Price": parseFloat($("#Price").val()),
"Stock": $("#Stock").prop("checked"),
"Mfd": new Date($("#Mfd").val())
}
$.ajax({
method : "POST",
url: "http://127.0.0.1:8080/addproduct",
data: data
})
alert("Record Inserted");
})
})
</script>
</head>
<body class="container-fluid">
<h2>Register Product</h2>
<dl>
<dt>Product Id</dt>
<dd><input type="number" id="ProductId"></dd>
<dt>Name</dt>
<dd><input type="text" id="Name"></dd>
<dt>Price</dt>
<dd><input type="text" id="Price"></dd>
<dt>Stock</dt>
<dd><input type="checkbox" id="Stock">Available</dd>
<dt>Manufactured</dt>
<dd><input type="date" id="Mfd"></dd>
</dl>
<button id="btnRegister" class="btn btn-primary">Register</button>
<h2>Products List</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Mfd</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
React
- It is a JavaScript library used for building SPA.
- React implicitly uses Ajax.
- React interacts with Virtual DOM.
- Faster 10x
- React is just a library, can build application but can't control application
flow.
80% UI 20% server side UI
Angular
React 60% server ui
