Google Sheet Data Update & Delete by Web app Script CRUD 2.0

Google Sheet Data Update & Delete by Web app Script

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

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

In this blog we will tell you Google Sheet Data Update & Delete by Web app Script so read the complete blog carefully and learn Google Sheet Data Update & Delete 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 7 file Name Given Below

Kode.gs

index.html

Macros.html

Form-js.html

stylecss.html

css.html

js.html

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

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .setTitle("CRUD Withour Drop Down")
  .addMetaTag('viewport', 'width=device-width, initial-scale-1.0')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

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

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
        <title>Crud</title>   
    </head>
  <?!= include('stylecss'); ?>

<body>
<div id = "Komponen"></div>
<div id = "BoxMessage">

<div>
<div id = "JudulMsg"></div>
<div id = "IsiMsg"></div>
<div id = "AkhirMsg"></div>
</div>
</div>

<div id="objek">
<center><img src="https://lh4.googleusercontent.com/BxinTpVAFnHJVZ4qcCY8jwgxdw27d_qSECY-b5uVw-GWzwwTeOu-VHpjAAQmbFmwwJqy2jK6PYW1MK79rmaj3sC0P26sNberm9SdgTkjBtVop4spAZgi3sDRG_GHuF0blg=w1280"><br>
<h4 style="margin-top: 3px;">Sunrise IT Education<br></h4></center><hr style="width:85%;margin-top:-10px">

<center><h4 style="margin-top: 3px;font-size: 13px;">CRUD Operation<br><br>

   <div class="row"style="margin-left:8%;">
   <label>Roll NO <span style="margin-left: 12px;font-size: 12px;">:</span></label>
   <input id="Jnc1" style="width: 12%;font-size: 15px;" type="" name=""placeholder="Roll NO Enter">

   <button id = "btncari" style="width: auto; height: 22px;background-color:#91d6ed;">SEARCH</button><br>

   <label>Student Name <span style="margin-left: 60px;font-size: 12px;">:</span></label>
   <input id="Jnc2" style="width: 25%;font-size: 15px;" type="" name=""disabled><br>

   <label>Father Name <span style="margin-left: 60px;font-size: 12px;">:</span></label>
   <input id="Jnc3" style="width: 25%;font-size: 15px;" type="" name=""><br>

   <label>Gender <span style="margin-left: 60px;font-size: 12px;">:</span></label>
   <input id="Jnc4" style="width: 25%;font-size: 15px;" type="" name=""disabled><br>

   <label>Mobile NO <span style="margin-left: 60px;font-size: 12px;">:</span></label>
   <input id="Jnc5" style="width: 25%;font-size: 15px;" type="" name=""><br>

   <label>Address <span style="margin-left: 60px;font-size: 12px;">:</span></label>
   <input id="Jnc6" style="width: 25%;font-size: 15px;" type="" name=""><br><br>

   
  </div>

     <?!= include('css'); ?>
<div class="container-fluid p-0">
     
                  <button id = "btnbersih" style="width: auto; height: 22px;background-color:#dbd524;">RESTART</button>
                  <button id = "btnubah" style="width: auto; height: 22px;background-color:#96ee96;">UPDATE</button>
                  <button id = "btnhapus" style="width: auto; height: 22px;background-color:#b17c7c;" onclick ="Confirm.Execute()">DELETE</button><br>
                  <button id = "btnsimpan" style="width: 30%; height: 22px" value="Save" hidden> 
                </div>
              </div>
          </ul>
      </nav>
    </div> 

  <form action="" method="POST" id="form">
  <center>
  <table width=85% >

  
  </center>
  </form>
  </div>
   
  
   <p align="center">
    
    <input style="width: auto;" type="button" onclick="print('form')" value="Print Page"></p>
   <script>
     function Print(form){
      var printdata = document.getElementById(form);
      newwin = window.open("");
      newwin.document.write(printdata.outerHTML);
      newwin.print();
      newwin.close();
     }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <?!= include('Form-js'); ?>
         <?!= include('js'); ?>
    </body>
</html>

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

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

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

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

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