User Registration System: Apps Script, HTML, Bootstrap 🔥📝

यदि आप Apps Script Web API का उपयोग कर User Registration बनाना चाहते हैं तो यह Article आपके लिए ही हैं । अभी तक हमने जो भी Article लिखे उसमे हमें Google Sheet का उपयोग कर Login Check किया था इस Article मे हमें पिछले Article को Implement करते हुवे इसमे User भी Project के द्वारा ही बनाये जा सके ऐसा Plan किया हैं, आइए Step By Step समझते हैं । मे यह मान कर Source Code दे रहा हु की आपने पहले Login System बनाया हुवा हैं (चाहे वह Simple Login ) मे उसके आगे का Code आपको दे रह हु। previous Code आप निम्न Article से देख सकते हैं ।

CREATING A SIMPLE LOGIN SYSTEM WITH GOOGLE APPS SCRIPT AND GOOGLE SHEETS (HTML, CSS, BOOTSTRAP, JS)

1. Google Sheet For User Registration

सबसे पहले एक Google Sheet बना लीजिए, हम जो User Registration Page बनाएंगे तब वहाँ से Entry करेंगे तो वह आकार Google Sheet पर Store हो जाएगी। इसलिए इस मे आपको केवल Columns ही बनाना हैं , Entry हम जब Page पर करेंगे तब यहा दिखाई देगी।

इस sheet का नाम login रखना हैं जो की हमे Apps Script से link करते समय काम आएगा ।

2. HTML Code for User Registration

इसके बाद हम Apps Script मे एक register.html File बना लेंगे। इसमे फाइल मे आप नीचे CSS और JavaScript का Code लिखा हैं उसे भी Add कर लीजिएगा ।

<style></style> <!--  Add CSS -->
<script></script> <!--  Add JS -->
<div class="card shadow rounded-4 rounded ">
  <h5 class="card-header bg-secondary- text-white p-3 mycolor">User Registration</h5>
  <div class="card-body p-4">
    <div id="RegBody">
      <div class="input-group mb-3">
        <span class="input-group-text" >User Name</span>
        <input type="text" class="form-control" id="reg_uname" placeholder="User Name" onchange="ClearText()">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" >User ID</span>
        <input type="text" class="form-control" id="reg_uid" placeholder="User ID" onchange="ClearText()">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" >Password</span>
        <input type="password" class="form-control" id="reg_pass" placeholder="Password" onchange="ClearText()" >
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" >Re-enter</span>
        <input type="password" class="form-control" id="reg_repass" placeholder="Re-enter Password" onchange="ClearText()" >
      </div>
    </div>

    <div id="RetMsgReg" class="alert alert-danger " style="display:none" role="alert"> </div>

    <button type="button" class="btn btn-primary- mycolor float-end px-5 text-white" onclick="Register()">Register</button>


  </div>
</div>

आपने जो भी Login Page बनाया हो उस पर आप यह Code add कर दीजिएगा ताकि Login से Register Page open किया जा सके ।

<span href="#"  onclick="OpenRegisterPage()">Register (New User)</a>
<script>
function OpenRegisterPage() {
        google.script.run.withSuccessHandler(ShowRegister).OpenPage("register");
  }
</script>

3. CSS for User Registration

यह Css का Code भी आपको HTML फाइल मे ही लिखना हैं यदि आप अलग से फाइल बनाना चाहते हैं तो बना कर Add कर लीजिएगा।

<style>
    body {
      background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
    }

    .card {
      width: 400px;
      margin: auto;
      margin-top: 30px;
    }

    .input-group-text {
      width: 100px;
      display: inline-block;
    }

    .mycolor {
      background-color: #3a67b1; //#6d3b89;
    }

    .color {
      color: #3a67b1; //#6d3b89;
    }

  
  </style>

4. JavaScript Code for User Registration

यह JavaScript का Code भी आपको HTML File मे ही add करना हैं । इसमे जो function बनाये हैं उसके बारे मे नीचे Detail मे लिखा हैं ।

<script>
  function Register() {
    var unm    = document.getElementById("reg_uname").value.trim();
    var uid    = document.getElementById("reg_uid").value.trim();
    var pass   = document.getElementById("reg_pass").value.trim();
    var repass = document.getElementById("reg_repass").value.trim();

    if (pass != repass) {
      RegReturnMsg("danger,Password Not Matched...");
    }
    else {      google.script.run.withSuccessHandler(RegReturnMsg).UserRegister(uid,pass,unm);
    }
  }
  
  function RegReturnMsg(data) {
      let v = data.split(",");
      let type=v[0];
      $('#RetMsgReg').removeClass("alert-success").removeClass("alert-danger").addClass("alert-"+type);
      $('#RetMsgReg').html(v[1]);
      $('#RetMsgReg').show();
      if (type == 'success') {
        setTimeout(function(){  
           //document.getElementById("myid").click();
           }, 3000);
      }
  }
</script>

• Register() : इस Function का उपयोग कर हम Screen से सभी जरूरी Columns की Value को लेकर उसे Apps Script पर भेज देते हैं । साथ ही मे Screen Level के Validation भी हमने इसमे लगाए हैं । जो भी Apps Script से Return आता हैं उससे एक नया Function Call कर देते हैं जो की निम्न हैं ।
• RegReturnMsg(data) : इस Function से जीतने भी Validation लगाए हैं उन्हे दिखाया गया हैं। साथ मे Success Fully Registerd होने के पेज को Login वाले Page पर ले जाया गया हैं।

5. Apps Script Code for User Registration

let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let LoginSheet  = MySheets.getSheetByName("login"); 

function doGet(e) {
  var output = HtmlService.createTemplateFromFile('login');   
  return output.evaluate();
}

function OpenPage(PageName) {
    return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}

function UserRegister(pUID, pPassword, pName) {
    
    let RetMsg = '';
    let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
    let StartRow = 0;
    ReturnData.forEach(function (range) {
      StartRow = range.getRow();
    });

    if (StartRow > 0) 
    {
      RetMsg = 'danger, User Already Exists';
    }
    else
    {
      LoginSheet.appendRow([pUID, pPassword, pName]) ;  
      RetMsg = 'success, User Successfully Registered'; 
    }

    return  RetMsg;
}

6. Video के माध्यम से समझने के लिए

7. Execution (User Registration)

इस Page से हम कोई भी नए User का Registration कर सकते हैं । इसमे Example के केवल वही Columns लिए हैं जो जरूरी हैं आप चाहे तो और भी Columns ले सकते हैं । इस Page पर हमने कुछ Validation भी लगाए हैं ।

यदि Password और Re-enter Password same नहीं होने पर निम्न प्रकार से Message आएगा, यह JavaScript से किया हैं ।

यदि एक बार पहले से User Registered हैं तब User Already Exists का Message आएगा।

जब User सभी Validation pass कर लेगा तो कुछ इस तरह से Message Display होगा ।

आशा हैं मुझे आपको User Registration System बहुत ही अच्छे से समझ मे आ गया हैं, इस Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।

---

हमारे अन्य आर्टिकल

• MySQL Function
• MySQL Stored Procedure
• PHP Get /Post Method के बारे में जाने
• PHP Math Function के बारे में जाने
• C से C ++ सीखे सरल शब्दों में
• PHP Variable के बारे में जाने
• Arduino Control Structure 
• Union in C
• Declaration of Pointer in C
• jQuery Search Filter
• MySQL Create Table | Alter Table | Drop Table
• API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
• CPANEL In Hindi