CRUD Operation in Google Sheet by Web App Script (Already our database)

CRUD Operation in Google Sheet by Web App Script

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट के डेटा को वेब एप स्‍क्रीप्‍ट की मदद से डेटा को अपडेट, डिलीट, न्‍यू एन्‍टरी, सर्च कर सकते है ा

इसकी मदद से आप गुगल शीट में नया डेटा ऐड कर सकते है एवं एक बार डेटा ऐड होने के बाद आप उक्‍त डेटा को दुबारा ऐड नहीं कर सकते है यानि आप डुप्‍लीकेट डेटा ऐड नहीं कर सकतें है ा

In this blog we will tell you CRUD Operation in Google Sheet by Web App Script so read the complete blog carefully and learn CRUD Operation in Google Sheet by Web App Script according to given guidelines.

Practical For Click :- Practical

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 6 file Name Given Below

Code.gs

index.html

entry.js.html

read.js.html

update.js.html

delete.js.html

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

Step 5 :- Click to Copy Below Code and Paste to index.html File

<!DOCTYPE html> <html> <center> <style> table, th, td { border-collapse: collapse; font-family:times; } td,th{width:50%;} input:focus,select:focus, textarea:focus { outline: 1px dashed green; } textarea{ width:98%; height:100px; font-family:times; border:1px solid black;} select,input{ width:95%; font-family:times; padding:1px; border:1px solid black; } input:hover{ background:yellow;} button{width:15%; font-family:times;} button:focus { outline: 1px dashed green;} button:hover{ background:green;color:white;} </style> <body> <?!= include('entry.js') ?> <?!= include('read.js') ?> <?!= include('update.js') ?> <?!= include('delete.js') ?> <table border=0 width=600px> <th>CRUD WEB APP: Sunrise IT Education<hr></th> <th><input id="id" placeholder="Enter ID to Search,Update or Delete Data"><hr></th> </tr> <tr> <td>Name:<input id="name"placeholder="Name"required></td> <td>Father Name:<input id="fname"placeholder="Father Name"required></td></tr> <td>Mobile No:<input id="mo"placeholder="Mobile NO"required></td> <td>Email id:<input id="eid"placeholder="Email ID"required></td> </tr> <tr> <td>Gender: <select id="selected"> <option>Select </option> <option value="Male">Male </option> <option value="Female">Female </option> </select> </td> <td>DOB:<input type="date" id="date"></td> </tr> <tr> <td colspan="2">Remarks: <textarea placeholder="Write something....."id="note"> Message:

Step 6 :- Click to Copy Below Code and Paste to entry.js.html File

Step 7 :- Click to Copy Below Code and Paste to read.js.html File

Step 8 :- Click to Copy Below Code and Paste to update.js.html File

<script>
      function update(){
        let txt = document.querySelector('#id').value;
        let tx1 = document.querySelector('#name').value;
        let tx2 = document.querySelector('#fname').value;
        let tx3 = document.querySelector('#mo').value;
        let tx4 = document.querySelector('#eid').value;
        let tx5 = document.querySelector('#selected').value; 
        let tx6 = document.querySelector('#date').value;
        let tx7 = document.querySelector('#note').value;
        var sd = [txt,tx1,tx2,tx3,tx4,tx5,tx6,tx7];   //sending data in arry
        let info = document.querySelector('#result');
        if (txt === ""){
        info.innerHTML = "<span style='color:red'>Please enter id to update!</span>";
         }else{

        function onFailure(error){
          info.innerHTML = "<span style='color:red'>"+error+"</span>";;
        };
        
        function onSuccess(response){
          info.innerHTML = "<span style='color:green'>"+response+"</span>";;

        };
        info.innerHTML = "Updating detail...";
        google.script.run.withFailureHandler(onFailure)
                         .withSuccessHandler(onSuccess)
                         .updateId(sd);}

      };
    </script>

Step 9 :- Click to Copy Below Code and Paste to delete.js.html File

<script>
      function  delet(){
        let txt = document.querySelector('#id').value;
        let info = document.querySelector('#result');
        if (txt === ""){
        info.innerHTML = "<span style='color:red'>Please enter id to delete!</span>";
         }else{

        function onFailure(error){
          info.innerHTML ="<span style='color:red'>"+error+"</span>";
        };
        
        function onSuccess(response){
          info.innerHTML = "<span style='color:green'>"+response+"</span>";
        };

        info.innerHTML = "Deleting detail...";
        google.script.run.withFailureHandler(onFailure)
                         .withSuccessHandler(onSuccess)
                         .deleteId(txt);
      }
    };
    </script>

CRUD Operation in Google Sheet by Web App Script (Already our database)