Google Sheets CRUD Project in Hindi — Full Tutorial Step by Step
दोस्तों आज इस ब्लॉग में मैं आपको बताने वाला हूं (Google Sheets CRUD Project in Hindi — Full Tutorial Step by Step) कि आप कैसे Google Sheet का इस्तेमाल करके CRUD प्रोजेक्ट बना सकते हैं | CRUD का मतलब होता है:
-
C — Create (डेटा जोड़ना)
-
R — Read (डेटा पढ़ना)
-
U — Update (डेटा अपडेट करना)
-
D — Delete (डेटा हटाना)
इसमें हम Backend के रूप में गूगल सीट का इस्तेमाल करेंगे और Appscript HTML CSS और Javascript का इस्तेमाल करके हम Crud Project बनाएंगे | जिसमें यूजर डाटा को ऐड, अपडेट , डिलीट और रीड कर सकता है |
Google Sheet ही क्यों ?
- यह फ्री है और आसानी से उपलब्ध हो जाता है|
- गूगल एप स्क्रिप्ट की मदद से हम अपने टास्क को ऑटोमेटेड कर सकते हैं |
- रियल टाइम में हम कोलैबोरेट भी कर सकते हैं|
आवश्यक बातें
- एक गूगल अकाउंट होना अनिवार्य है |
- बेसिक Google sheet की नॉलेज जरूरी है |
- इसमें थोड़ा आप स्क्रिप्ट और जावास्क्रिप्ट का भी ज्ञान होना चाहिए | (लेकिन कोई बात नहीं, step-by-step सिखाया जाएगा)
Step 1: Google Sheet ready करना
सबसे पहले तो एक नया Google Sheet बना लीजिए और अपने Sheet का नाम डेटाबेस करके ऐड कर लीजिए और नीचे दिए गए चित्र के अनुसार अपना कलम भी बना लीजिए |
Step 2: Apps Script ओपन करें
- इसके लिए मेनू में एक्सटेंशन ऑप्शन पर क्लिक करें और वहां से एप्स स्क्रिप्ट के ऑप्शन पर क्लिक करें |
- नीचे दिए गए कोड को ऐड करें |
function doGet(e) {
if(!e.parameter){
return HtmlService.createTemplateFromFile('login').evaluate()
}else if(e.parameter.page=="index"){
return HtmlService.createTemplateFromFile('index').evaluate()
}else{
return HtmlService.createTemplateFromFile('login').evaluate()
}
}
let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login');
let database = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Database");
function authenticateData(){
name ="sanjay45"
pass= "sa54"
let data = sheet.getDataRange().getValues();
for(var i = 0 ;i< data.length;i++){
if(data[i][0]== name && data[i][1] ==pass){
return "Success"
}
}
return "Error"
}
// add form data to google Sheet
function sendFormData(data){
let date = new Date().toLocaleDateString()
database.appendRow([date,data.name,data.fname,data.phone,data.email,data.age])
return "Sucsess"
}
// get All Sheet Data
function getSheetData(){
let allData= database.getDataRange().getDisplayValues().slice(1);
return allData
}
//update data in sheet
function sendUpdateData(data){
let dataArray=[]
dataArray.push([data.name,data.fname,data.phone,data.email,data.age])
database.getRange(Number(data.index) +1,2,dataArray.length,dataArray[0].length).setValues(dataArray)
return 'success'
}
//delete Roe in Sheet
function deleteBackendRow(row){
Logger.log(typeof row)
database.deleteRow(Number(row)+1)
}
Step 3: HTML फाइल बनाना (login.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-color: #D980FA;
overflow: hidden;
}
form{
width: 400px;
height: 200px;
background-color: #FDA7DF;
margin: 45px auto;
padding: 10px;
border-radius: 10px;
}
form h1{
text-align: center;
margin-bottom: 10px;
}
form input{
width: 100%;
height: 35px;
margin-bottom: 10px;
outline: none;
padding: 10px;
}
button{
padding: 10px;
cursor: pointer;
border: none;
outline: none;
background-color: #1289A7;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<h1>Login Page</h1>
<input type="text" name="userid" id="userid" placeholder="Enter User Id...">
<input type="password" name="pass" id="pass" placeholder="Enter Password...">
<button id="log" onclick="getUserDetail(event)">Login</button>
<div id="msg"></div>
</form>
</div>
</body>
<script>
function getUserDetail(e){
e.preventDefault();
let userName = document.getElementById("userid").value;
let pass = document.getElementById("pass").value;
google.script.run.withSuccessHandler(msg => {
console.log(msg)
if(msg == "Success"){
document.getElementById('msg').innerHTML = "Successfully Login...";
document.getElementById('msg').style.color = "green";
window.top.location.href = "https://script.google.com/macros/s/AKfycbws6WPTctOkU1FVgjZWVEEnAnT-yn5Gw3LdMcfEU2Lo/dev?page=index";
}else{
document.getElementById('msg').innerHTML = "InValid Credential...";
document.getElementById('msg').style.color = "red";
document.getElementById("userid").value = "";
document.getElementById("pass").value = "";
setTimeout(() => {
document.getElementById('msg').innerHTML = "";
}, 1000);
}
}).authenticateData(userName, pass);
}
</script>
</html>
Step 4: HTML फाइल बनाना (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Web App</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width: 100vw;
height: 100vh;
background-color: #ffffff;
display: flex;
gap: 10px;
}
.leftform{
flex-basis: 40%;
padding: 10px;
border: 1px solid lightgrey;
background-color: #ff6b81;
}
.leftform h1{
text-align: center;
margin-bottom: 30px;
}
.leftform form{
width: 100%;
}
form input{
width: 100%;
height: 35px;
margin-bottom:10px;
border-radius: 10px;
outline: none;
padding: 10px;
border: 2px solid grey;
}
button{
padding: 10px;
cursor: pointer;
outline: none;
border: none;
background-color: #474787;
color: #fff;
}
.righttable{
flex-basis: 60%;
padding: 10px;
}
table{
width: 100%;
text-align: center;
border-collapse: collapse;
}
table tr th{
background-color: #ff6b81;
padding: 10px;
}
table tr, th, td{
border: 1px solid;
padding: 10px;
}
.fa-pen-to-square{
color: #4b7bec;
margin-right: 10px;
cursor: pointer;
}
.fa-trash{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftform">
<h1>Add Employe Data</h1>
<form action="" id="form">
<input type="hidden" id="index" name="index" placeholder="Enter your name...">
<input type="text" id="name" name="name" placeholder="Enter your name...">
<input type="text" id="fname" name="fname" placeholder="Enter your father name...">
<input type="text" id="phone" name="phone" placeholder="Enter your phone No...">
<input type="email" id="email" name="email" placeholder="Enter your Email..." >
<input type="number" id="age" name="age" placeholder="Enter your age...">
<div class="btn-group">
<button type="submit" id="addRecord">Add Record</button>
</div>
</form>
</div>
<div class="righttable">
<table>
<thead>
<tr>
<th>Sl.no</th>
<th>Date</th>
<th>Name</th>
<th>Father Name</th>
<th>Phone</th>
<th>Email</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
<script>
let form = document.querySelector("#addRecord").addEventListener("click",(event)=>{
event.preventDefault();
let formData={
name: document.getElementById("name").value,
fname: document.getElementById("fname").value,
phone: document.getElementById("phone").value,
email: document.getElementById("email").value,
age: document.getElementById("age").value
}
let button = document.getElementById("addRecord")
button.innerHTML="Adding..."
button.setAttribute("disabled",true)
google.script.run.withSuccessHandler(response=>{
button.innerHTML="Add Record"
button.removeAttribute("disabled")
document.querySelector("#form").reset()
}).sendFormData(formData)
})
function callbackend(){
google.script.run.withSuccessHandler(response=>{
let tbody = document.querySelector('tbody');
tbody.innerHTML =""
response.forEach((row,index)=>{
let tr = document.createElement('tr')
tr.innerHTML +=`
<td>${index +1}</td>
<td>${row[0]}</td>
<td>${row[1]}</td>
<td>${row[2]}</td>
<td>${row[3]}</td>
<td>${row[4]}</td>
<td>${row[5]}</td>
<td><i class="fa-solid fa-pen-to-square" onclick="editData(this)"></i><i class="fa-solid fa-trash" onclick="deleteData(this)"></i></td>
`
tbody.appendChild(tr)
})
}).getSheetData()
}
callbackend()
function editData(r){
let row =r.closest('tr')
let rowIndex = row.children[0].innerHTML;
let name = row.children[2].innerHTML;
let fname = row.children[3].innerHTML;
let phone = row.children[4].innerHTML;
let email = row.children[5].innerHTML;
let age = row.children[6].innerHTML;
document.getElementById("index").value= rowIndex
document.getElementById("name").value=name
document.getElementById("fname").value=fname
document.getElementById("phone").value=phone
document.getElementById("email").value= email
document.getElementById("age").value = age
let button = document.getElementById('updateBtn');
if(!button){
let btnDiv = document.querySelector('.btn-group')
let btn = document.createElement('button')
btn.id='updateBtn'
btn.innerHTML ="Update"
btn.style.opacity =1
btnDiv.appendChild(btn)
document.getElementById('updateBtn').addEventListener('click',(event)=>{
event.preventDefault()
let formData={
index: document.getElementById("index").value,
name: document.getElementById("name").value,
fname: document.getElementById("fname").value,
phone: document.getElementById("phone").value,
email: document.getElementById("email").value,
age: document.getElementById("age").value
}
google.script.run.withSuccessHandler(response=>{
if(response =="success"){
document.getElementById('form').reset();
let button = document.getElementById('updateBtn');
button.style.opacity=0
}
}).sendUpdateData(formData)
})
}else{
button.style.opacity=1
}
}
function deleteData(e){
let deleteRow = e.closest('tr').children[0].innerHTML.trim()
alert("Are You Sure ?")
google.script.run.withSuccessHandler(()=>{
callbackend()
}).deleteBackendRow(deleteRow);
}
</script>
</html>
निष्कर्ष
तो अब आप Google Sheet में Crud प्रोजेक्ट कैसे बनाया जाता है वह अपने सीख लिया | यह एक बेसिक Crud प्रोजेक्ट है
अगर आप इस पर कॉन्फिडेंट हो जाते हैं | तो आप इसे भी बड़े-बड़े Web App बना सकते हैं |
Download Sheet For Practice
0 टिप्पणियाँ
Thanks For Message Me if any issue please feel free to contact