{"id":1954,"date":"2021-08-02T18:40:16","date_gmt":"2021-08-02T18:40:16","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=1954"},"modified":"2023-08-10T16:04:27","modified_gmt":"2023-08-10T16:04:27","slug":"dma-project-cheat-sheet","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/dma-project-cheat-sheet\/","title":{"rendered":"DMA Project Cheat Sheet"},"content":{"rendered":"\n
\"\"<\/a>
Multi Tier Architecture<\/figcaption><\/figure><\/div>\n\n\n\n

To get the connection string<\/p>\n\n\n\n

Atlas > Deployment > Databases > Connect > Connect your application > Driver Node.js > Version 4.1 or later<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure><\/div>\n\n\n\n
CRUD Application using Vanilla JS | HTML5 | CSS3 | Bootstrap5<\/h2>\n\n\n\n
NOTE: DON’T FORGET TO APPEND DATABASE NAME IN CONNECTION STRING URL<\/h2>\n\n\n\n
users_module.js<\/h2>\n\n\n\n
\/\/Step 1: Database connection using connection string\nconst mongoose = require(\"mongoose\");\n\n\/\/mongodb:\/\/127.0.0.1:27017\/dbname\n\/\/const conn_str = \"mongodb:\/\/localhost:27017\/tcet\";\nconst conn_str = \"mongodb+srv:\/\/user:passwd<\/strong>@cluster0.gp5lcta.mongodb.net\/<DBNAME><\/strong>?retryWrites=true&w=majority\"\n\nmongoose.connect(conn_str, { useNewUrlParser: true, useUnifiedTopology: true })\n\t.then(() => console.log(\"Connected successfully...\"))\n\t.catch( (error) => console.log(error) );\n\t\n\t\n\/\/Step 2: Create Schema (similar to Java Class)\nconst userSchema = new mongoose.Schema({\n\tname: String,\n\tage: Number,\n\tcity: String\n})\n\n\/\/Step 3: Create collection Object (model)\n\/\/ MAPPING \nconst userObject = new mongoose.model(\"users\", userSchema);\n\nexports.User = userObject;\n\n<\/code><\/pre>\n\n\n\n
Test Database Connection<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
index.js<\/h2>\n\n\n\n
const express = require(\"express\");\nconst port = 8080;\n\nconst user_model = require(\".\/users_module\");\nconst User = user_model.User;\n<\/strong>\nconst app = express();\napp.use(express.json());\n\nvar cors = require('cors');\napp.use(cors());\n\napp.get(\"\/\", (req, res) => {\n\tres.send(\"Hello Friends..\");\n});\n\napp.get(\"\/user\", async (req, res) => {\n\tlet data = await User.find().sort({_id:-1});\n\tres.send(data);\n});\n\napp.get(\"\/user\/:id\", async (req, res) => {\n\tconsole.log(req.params.id);\n\tlet data = await User.find({\"_id\": req.params.id});\n\tres.send(data[0]);\n});\n\napp.post(\"\/user\", async (req, res) => {\n\tconsole.log(req.body)\n\tlet u = await User(req.body);\n\tlet result = u.save();\n\tres.send(req.body);\n});\n\napp.put(\"\/user\", async (req, res) => {\n\tconsole.log(req.body);\n\t\n\t\/\/User.updateOne({where}, {set});\n\tlet u_data = await User.updateOne({\"_id\": req.body._id}, {\n\t\t\"$set\": {\n\t\t\t\"name\" : req.body.name,\n\t\t\t\"age\" : req.body.age,\n\t\t\t\"city\" : req.body.city\n\t\t}\n\t});\n\t\n\tres.send(u_data);\n});\n\napp.delete(\"\/user\", async(req, res) => {\n\t\n\tlet d_data = await User.deleteOne({\"_id\": req.body._id});\n\tres.send(d_data);\n});\n\napp.listen(process.env.PORT || port, () => {\t\n\tconsole.log(`Listening on port ${port}`);\n});<\/code><\/pre>\n\n\n\n
Run index.js file (node .) and Test in Postman<\/p>\n\n\n\n
GET Method<\/h2>\n\n\n\n
\"\"<\/a>

POST Method<\/figcaption><\/figure>\n\n\n\n
POST Method<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
PUT Method<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
DELETE Method<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Create Frontend to access all web services from Web Browser<\/h2>\n\n\n\n
script.js<\/h2>\n\n\n\n
\/\/const api_url = \"<heroku_app_url><\/strong>\"\nconst api_url = \"http:\/\/localhost:8080\/user\"\n\nfunction loadData(records = []) {\n\tvar table_data = \"\";\n\tfor(let i=0; i<records.length; i++) {\n\t\ttable_data += `<tr>`;\n\t\ttable_data += `<td>${records[i].name}<\/td>`;\n\t\ttable_data += `<td>${records[i].age}<\/td>`;\n\t\ttable_data += `<td>${records[i].city}<\/td>`;\n\t\ttable_data += `<td>`;\n\t\ttable_data += `<a href=\"edit.html?id=${records[i]._id}\"><button class=\"btn btn-primary\">Edit<\/button><\/a>`;\n\t\ttable_data += '&nbsp;&nbsp;';\n\t\ttable_data += `<button class=\"btn btn-danger\" onclick=deleteData('${records[i]._id}')>Delete<\/button>`;\n\t\ttable_data += `<\/td>`;\n\t\ttable_data += `<\/tr>`;\n\t}\n\t\/\/console.log(table_data);\n\tdocument.getElementById(\"tbody\").innerHTML = table_data;\n}\n\nfunction getData() {\n\tfetch(api_url)\n\t.then((response) => response.json())\n\t.then((data) => { \n\t\tconsole.table(data); \n\t\tloadData(data);\n\t});\n}\n\n\nfunction getDataById(id) {\n\tfetch(`${api_url}\/${id}`)\n\t.then((response) => response.json())\n\t.then((data) => { \n\t\n\t\tconsole.log(data);\n\t\tdocument.getElementById(\"id\").value = data._id;\n\t\tdocument.getElementById(\"name\").value = data.name;\n\t\tdocument.getElementById(\"age\").value = data.age;\n\t\tdocument.getElementById(\"city\").value = data.city;\n\t})\n}\n\n\nfunction postData() {\n\tvar name = document.getElementById(\"name\").value;\n\tvar age = document.getElementById(\"age\").value;\n\tvar city = document.getElementById(\"city\").value;\n\t\n\tdata = {name: name, age: age, city: city};\n\t\n\tfetch(api_url, {\n\t\tmethod: \"POST\",\n\t\theaders: {\n\t\t  'Accept': 'application\/json',\n\t\t  'Content-Type': 'application\/json'\n\t\t},\n\t\tbody: JSON.stringify(data)\n\t})\n\t.then((response) => response.json())\n\t.then((data) => { \n\t\tconsole.log(data); \n\t\twindow.location.href = \"index.html\";\n\t})\n}\t\n\n\nfunction putData() {\n\t\n\tvar _id = document.getElementById(\"id\").value;\n\tvar name = document.getElementById(\"name\").value;\n\tvar age = document.getElementById(\"age\").value;\n\tvar city = document.getElementById(\"city\").value;\n\t\n\tdata = {_id: _id, name: name, age: age, city: city};\n\t\n\tfetch(api_url, {\n\t\tmethod: \"PUT\",\n\t\theaders: {\n\t\t  'Accept': 'application\/json',\n\t\t  'Content-Type': 'application\/json'\n\t\t},\n\t\tbody: JSON.stringify(data)\n\t})\n\t.then((response) => response.json())\n\t.then((data) => { \n\t\tconsole.table(data);\n\t\twindow.location.href = \"index.html\";\n\t})\n}\n\n\nfunction deleteData(id) {\n\tuser_input = confirm(\"Are you sure you want to delete this record?\");\n\tif(user_input) {\n\t\tfetch(api_url, {\n\t\t\tmethod: \"DELETE\",\n\t\t\theaders: {\n\t\t\t  'Accept': 'application\/json',\n\t\t\t  'Content-Type': 'application\/json'\n\t\t\t},\n\t\t\tbody: JSON.stringify({\"_id\": id})\n\t\t})\n\t\t.then((response) => response.json())\n\t\t.then((data) => { \n\t\t\tconsole.log(data); \n\t\t\twindow.location.reload();\n\t\t})\n\t}\n}<\/code><\/pre>\n\n\n\n
index.html<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<title>CIA Institute - MongoDB Project<\/title>\n\t\t<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"crossorigin=\"anonymous\"><\/script>\n\t<\/head>\n\t<body class=\"d-flex flex-column h-100 container\">\n\t\t<header>\n\t\t\t<nav class=\"navbar navbar-expand-lg navbar-expand-sm navbar-light bg-light\">\n\t\t\t  <div class=\"container-fluid\">\n\t\t\t\t<div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n\t\t\t\t  <div class=\"navbar-nav\">\n\t\t\t\t\t<a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Listing<\/a>\n\t\t\t\t\t<a class=\"nav-link\" href=\"add.html\">Add New<\/a>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/nav>\n\t\t<\/header>\n\t\t\n\t\t<table class=\"table table-striped table-hover text-center\">\n\t\t\t<thead>\n\t\t\t\t<th>Name<\/th>\n\t\t\t\t<th>Age<\/th>\n\t\t\t\t<th>City<\/th>\n\t\t\t\t<th>Action<\/th>\n\t\t\t<\/thead>\n\t\t\t<tbody id=\"tbody\">\n\t\t\t\t\n\t\t\t<\/tbody>\n\t\t\t<tfoot>\n\t\t\t\t\n\t\t\t<\/tfoot>\n\t\t<\/table>\n\t\t\n\t\t<footer class=\"footer mt-auto py-3 bg-light\">\n\t\t  <div class=\"container text-center\">\n\t\t\t<span class=\"text-muted\"> &copy; CIA Institute 2022<\/span>\n\t\t  <\/div>\n\t\t<\/footer>\n\t<\/body>\n\t<script src=\"script.js\"><\/script>\n\t<script>\n\t\tgetData();\n\t<\/script>\n<\/html><\/code><\/pre>\n\n\n\n
Test in Browser<\/h2>\n\n\n\n
add.html<\/h2>\n\n\n\n
<html>\n\t<head>\n\t\t<title>CIA Institute - MongoDB Project<\/title>\n\t\t<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"crossorigin=\"anonymous\"><\/script>\n\t<\/head>\n\t<body class=\"d-flex flex-column h-100 container\">\n\t\t<header>\n\t\t\t<nav class=\"navbar navbar-expand-lg navbar-expand-sm navbar-light bg-light\">\n\t\t\t  <div class=\"container-fluid\">\n\t\t\t\t<div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n\t\t\t\t  <div class=\"navbar-nav\">\n\t\t\t\t\t<a class=\"nav-link\" href=\"index.html\">Listing<\/a>\n\t\t\t\t\t<a class=\"nav-link active\" aria-current=\"page\" href=\"add.html\">Add New<\/a>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/nav>\n\t\t<\/header>\n\t\t\n\t\t<h3>Add Document<\/h3>\n\t\t\n\t\t<form onsubmit=\"return false;\">\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"name\" class=\"form-label\">Name<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"name\" autofocus>\n\t\t  <\/div>\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"exampleInputPassword1\" class=\"form-label\">Age<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"age\">\n\t\t  <\/div>\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"city\" class=\"form-label\">City<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"city\">\n\t\t  <\/div>\n\t\t  <button class=\"btn btn-primary\" onclick=\"return postData()\">Submit<\/button>\n\t\t  <a href=\"index.html\" class=\"btn btn-primary\">Cancel<\/a>\n\t\t<\/form>\n\t\t\n\t\t<footer class=\"footer mt-auto py-3 bg-light\">\n\t\t  <div class=\"container text-center\">\n\t\t\t<span class=\"text-muted\"> &copy; CIA Institute 2022<\/span>\n\t\t  <\/div>\n\t\t<\/footer>\n\t<\/body>\n\t<script src=\"script.js\"><\/script>\n\t<script>\n\t<\/script>\n<\/html><\/code><\/pre>\n\n\n\n
edit.html<\/h2>\n\n\n\n
<html>\n\t<head>\n\t\t<title>CIA Institute - MongoDB Project<\/title>\n\t\t<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" crossorigin=\"anonymous\">\n\t\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"crossorigin=\"anonymous\"><\/script>\n\t<\/head>\n\t<body class=\"d-flex flex-column h-100 container\">\n\t\t<header>\n\t\t\t<nav class=\"navbar navbar-expand-lg navbar-expand-sm navbar-light bg-light\">\n\t\t\t  <div class=\"container-fluid\">\n\t\t\t\t<div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">\n\t\t\t\t  <div class=\"navbar-nav\">\n\t\t\t\t\t<a class=\"nav-link\" href=\"index.html\">Listing<\/a>\n\t\t\t\t\t<a class=\"nav-link active\" aria-current=\"page\" href=\"add.html\">Add New<\/a>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/nav>\n\t\t<\/header>\n\t\t<h3>Edit Document<\/h3>\n\t\t<form onsubmit=\"return false;\">\n\t\t\t<input type=\"hidden\" class=\"form-control\" id=\"id\">\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"name\" class=\"form-label\">Name<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"name\" autofocus>\n\t\t  <\/div>\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"exampleInputPassword1\" class=\"form-label\">Age<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"age\">\n\t\t  <\/div>\n\t\t  <div class=\"mb-3\">\n\t\t\t<label for=\"city\" class=\"form-label\">City<\/label>\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"city\">\n\t\t  <\/div>\n\t\t  <button class=\"btn btn-primary\" onclick=\"return putData()\">Update<\/button>\n\t\t  <a href=\"index.html\" class=\"btn btn-primary\">Cancel<\/a>\n\t\t<\/form>\n\t\t\n\t\t<footer class=\"footer mt-auto py-3 bg-light\">\n\t\t  <div class=\"container text-center\">\n\t\t\t<span class=\"text-muted\"> &copy; CIA Institute 2022<\/span>\n\t\t  <\/div>\n\t\t<\/footer>\n\t<\/body>\n\t<script src=\"script.js\"><\/script>\n\t<script>\n\t\tconst urlParams = new URLSearchParams(window.location.search);\n\t\tconst id = urlParams.get('id');\n\t\tgetDataById(id);\n\t<\/script>\n<\/html><\/code><\/pre>\n\n\n\n
Screenshots<\/strong><\/h4>\n\n\n\n
\"\"<\/a>
listing<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
\"\"<\/a>
delete<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
\"\"<\/a>
add<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
\"\"<\/a>
edit<\/figcaption><\/figure>\n\n\n\n
Reference Link: https:\/\/gitlab.com\/tcet\/mongodb-july-21.git<\/a><\/p>\n\n\n\n
Create REST Api using Node.js | Express | Mongoose<\/h2>\n\n\n\n
index.js<\/p>\n\n\n\n
const port = 8080;\nconst mongoose = require(\"mongoose\");\n\/\/const conn_str =\"C\"\nconst conn_str = \"mongodb:\/\/<user>:<passwd>@cluster0-shard-00-00.dslyw.mongodb.net:27017,cluster0-shard-00-01.dslyw.mongodb.net:27017,cluster0-shard-00-02.dslyw.mongodb.net:27017\/<databasename>?ssl=true&replicaSet=atlas-3xk2hf-shard-0&authSource=admin&retryWrites=true&w=majority\";\n\n\nmongoose.connect(conn_str, { useNewUrlParser: true , useUnifiedTopology: true})\n\t.then( () => console.log(\"Connected successfully...\") )\n\t.catch( (err) => console.log(err) );\n\n\nconst userSchema = new mongoose.Schema({\n\tname: String,\n\tage: Number,\n\tcity: String\n});\n\nconst user = new mongoose.model(\"users\", userSchema);\n\n\n\/** Express Mongoose Integration **\/\n\nconst express = require(\"express\");\nvar cors = require('cors');\nconst app = express();\n\n\n\/\/add middlewares\napp.use(express.json());\napp.use(cors());\n\n\napp.route(\"\/user\")\n.get(async (req, res) => {\n\tlet data = await user.find();\n\tres.send(data);\n})\n.post(async (req, res) => {\n\treq_data = req.query;\n\tlet obj = new user(req.query)\n\tlet result = await obj.save();\n\tres.send(result);\n})\n.put(async (req, res) => {\n\tconsole.log(req.body);\n\t\n\t\/\/model.updateOne({where}, {set});\n\tlet u_data = await user.updateOne({\"_id\": req.body._id}, {\n\t\t\"$set\": {\n\t\t\t\"name\" : req.body.name,\n\t\t\t\"age\" : req.body.age,\n\t\t\t\"city\" : req.body.city\n\t\t}\n\t});\n\t\n\tres.send(u_data);\n})\n.delete(async (req, res) => {\n\tlet d_data = await User.deleteOne({\"_id\": req.body._id});\n\tres.send(d_data);\n})\n\n\napp.listen(process.env.PORT || port, () => {\n\tconsole.log(\"listening 8080...\");\n});<\/code><\/pre>\n\n\n\n
Call REST Api using Vanilla JS<\/h2>\n\n\n\n
index.html<\/p>\n\n\n\n
<script>\nfunction getDataById(id) {\n\tfetch(`http:\/\/localhost:8080\/user\/${id}`)\n\t.then((response) => response.json())\n\t.then((data) => { console.table(data); })\n}\n\nfunction getData() {\n\tfetch(\"http:\/\/localhost:8080\/user\")\n\t.then((response) => response.json())\n\t.then((data) => { console.table(data); })\n}\n\nfunction postData(data) {\n\tfetch(\"http:\/\/localhost:8080\/user\", {\n\t\tmethod: \"POST\",\n\t\theaders: {\n\t\t  'Accept': 'application\/json',\n\t\t  'Content-Type': 'application\/json'\n\t\t},\n\t\tbody: JSON.stringify(data)\n\t})\n\t.then((response) => response.json())\n\t.then((data) => { console.table(data); })\n}\n\t\n\nfunction putData(data) {\n\tfetch(\"http:\/\/localhost:8080\/user\", {\n\t\tmethod: \"PUT\",\n\t\theaders: {\n\t\t  'Accept': 'application\/json',\n\t\t  'Content-Type': 'application\/json'\n\t\t},\n\t\tbody: JSON.stringify(data)\n\t})\n\t.then((response) => response.json())\n\t.then((data) => { console.table(data); })\n}\n\nfunction deleteData(id) {\n\tfetch(\"http:\/\/localhost:8080\/user\", {\n\t\tmethod: \"DELETE\",\n\t\theaders: {\n\t\t  'Accept': 'application\/json',\n\t\t  'Content-Type': 'application\/json'\n\t\t},\n\t\tbody: JSON.stringify({\"_id\": id})\n\t})\n\t.then((response) => response.json())\n\t.then((data) => { console.table(data); })\n}\n\n\ngetDataById();\ngetData();\npostData({\"name\": \"Akshu\", \"age\": 20, \"city\": \"Koradi\"});\nputData({\"_id\" : \"61082ae9cd4b7a0ccc39d377\", \"name\": \"chaitu\"});\ndeleteData(\"61082b4ecd4b7a0ccc39d37a\");\n<\/script><\/code><\/pre>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"
To get the connection string CRUD Application using Vanilla JS | HTML5 | CSS3 | Bootstrap5 NOTE: DON’T FORGET TO APPEND DATABASE NAME IN CONNECTION STRING URL users_module.js Test Database Connection index.js Run index.js file (node .) and Test in Postman GET Method POST Method PUT Method DELETE Method Create Frontend to access all web […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1954"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=1954"}],"version-history":[{"count":50,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1954\/revisions"}],"predecessor-version":[{"id":2585,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/1954\/revisions\/2585"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=1954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=1954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}