> Google Sheets CRUD Project in Hindi — Full Tutorial Step by Step
एक्सेल और एडवांस एक्सेल से जुड़े सभी लेटेस्ट विडियो पाने के लिए मेरे यूट्यूब चैनल को अभी सबस्क्राइब करे लिंक नीचे है धन्यवाद |

Google Sheets CRUD Project in Hindi — Full Tutorial Step by Step

Tech Gyan Amit जुलाई 06, 2025

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
Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

Thanks For Message Me if any issue please feel free to contact