How to setup Login page and backend server in School Management System || Apps Script

 Setting up Login function inside AppsScript Project

Create School Management System Page-2 || Login Page 

Welcome to the next page. Here, we will follow the instructions to set up the login system in this project. Let's begin and complete this step.

Put the following code inside the Code.gs file below the previous codes:

Code.gs

  function doGet(e) {

  var htmlOutput = HtmlService.createTemplateFromFile('login');

  htmlOutput.message = '';

  return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');

}

var pgi;

var pgc;

var ip;

var mg;

function doPost(e) {

  Logger.log(JSON.stringify(e));

  if (e.parameter.LoginButton == 'Login') {

    var username = e.parameter.username;

    var password = e.parameter.password;

    pgi = username;

    pgc = password;

    ip = e.parameter.ipd;

    var vdate = vlogin(username, password, ip);

    if (vdate == 'TRUE') {

      dpich();

      var htmlOutput = HtmlService.createTemplateFromFile('index');

      var nm = vUsers.getDataRange().getValues();

      logs.appendRow([time, "index.html", "--", e.parameter.username, e.parameter.ipd]);

      for (var i = 1; i < nm.length; i++) {

        if (username === nm[i][0]) {

          var nme = nm[i][3];

        }

      }

      htmlOutput.username = username;

      htmlOutput.message = nme;

      return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');  

    } else {

      var htmlOutput = HtmlService.createTemplateFromFile('login');

      htmlOutput.message = 'Failed to Login';

      logs.appendRow([time, "Failed to Login", "--", e.parameter.username, e.parameter.ipd]);

      return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');    

    }

  } else if (e.parameter.LogoutButton == 'Logout') {

    mg = "Logout";

    louNow(e.parameter.username, e.parameter.ipd, mg);

    var htmlOutput = HtmlService.createTemplateFromFile('login');

    htmlOutput.message = 'Logged Out';

    return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');

  } else if (e.parameter.Pcv == 'Pcv') {

    var htmlOutput = HtmlService.createTemplateFromFile('login');

    logs.appendRow([time, "Access denied.", "--", e.parameter.username, e.parameter.ipd]);

    htmlOutput.message = 'Access denied.';

    return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');

  } else if (e.parameter.null == null) {

    logs.appendRow([time, "Login to continue...", "--", e.parameter.username, e.parameter.ipd]);

    var htmlOutput = HtmlService.createTemplateFromFile('login');

    htmlOutput.message = 'Login to continue...';

    return htmlOutput.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1.0');

  }

}

function vlogin(username, password, ip) {

  var vu = vUsers.getDataRange().getValues();

  var cu = cUsers.getDataRange().getValues();

  var flag = '';

  for (var x = cu.length - 1; x >= 0; x--) {

    if (cu[x][1] === username && password == cu[x][2]) {

      flag = 'TRUE';

      cUsers.getRange(x + 1, 6).setValue(time);

    }

  }

 

  if (flag == '') {

    for (var i = vu.length - 1; i >= 0; i--) {

      if (vu[i][0] === username && vu[i][1] == password && username != "") {

        flag = 'TRUE';

        cUsers.insertRowAfter(cUsers.getLastRow()).appendRow([time, username, password, vu[i][5], vu[i][2], ip]);

      }

    }

  }

 

  if (flag == '') {

    flag = 'FALSE';

  }

 

  return flag;

}

// start

function chck() {

  var vlr = vUsers.getDataRange().getValues();

 

  for (var q = 1; q < vlr.length; q++) {

    if (pgi == vUsers.getRange(q, 1).getValue() && pgc == vUsers.getRange(q, 2).getValue()) {

      var vap = vUsers.getRange(q, 3).getValue();

    }

  }

 

  return vap;

}

function dpich() {

  var dtpass = reoprv.getDataRange().getValues();

  var orl = reoprv.getLastRow();

  var bpass = [];

 

  for (var i = 1; i < orl; i++) {

    if (chck() === dtpass[i][0]) {

      bpass.push(dtpass[i]);

    }

  }

 

  return bpass;

}

function louNow(username, ipd, mg) { var clr = cUsers.getLastRow(); for (var b = 1; b <= clr; b++) { if (cUsers.getRange(b, 2).getValue() == username && cUsers.getRange(b, 1).getValue() != "") { logs.appendRow([time, mg, cUsers.getRange(b, 5).getValue(), username, ipd]); cUsers.deleteRow(b); } } }

// Check user and take action function hxy(uv) { var vlr = vUsers.getLastRow(); var clr = cUsers.getLastRow(); var flag = 1; var rt = "qwerty"; for (var b = 1; b <= vlr; b++) { for (var t = 1; t <= clr; t++) { if (vUsers.getRange(b, 1).getValue() == uv && cUsers.getRange(t, 2).getValue() == uv) { flag = 0; rt = "ok"; break; } } if (flag == 0) break; } return rt; }

Description:

1. doGet Function:

   • Handles HTTP GET requests.
   • Creates an HTML template from the 'login' file and initializes the message to an empty string.
   • Returns the evaluated HTML output with a meta tag for viewport settings.

2. Variable Initialization:

   • Initialize variables pgi, pgc, ip, and mg for storing the username, password, IP address, and a message, respectively.

3. doPost Function:

   • Handles HTTP POST requests.
   • Logs the request parameters and performs actions based on the parameters received:
     • If the login button is pressed, it validates the username and password using the vlogin function.
       • On successful validation, it updates the logs, creates an HTML template from the 'index' file, and sets the username and message before returning the evaluated output.
       • On failure, it updates the logs and returns the 'login' template with a failed login message.
     • If the logout button is pressed, it logs the user out, updates the logs, and returns the 'login' template with a logged-out message.
     • If an access denial parameter is detected, it logs the attempt and returns the 'login' template with an access denied message.
     • If no parameters are provided, it logs the attempt and returns the 'login' template with a prompt to log in.

4. vlogin Function:

   • Verifies the user's login credentials.
   • Checks the current users list (cUsers). If the credentials match, it updates the login time.
   • If not found, it checks the verified users list (vUsers). If the credentials match, it adds the user to the current users list and logs the login time.
   • Returns 'TRUE' for a successful login and 'FALSE' otherwise.

5. chck Function:

   • Checks the user's credentials in the verified users list (vUsers).
   • Returns the associated value if the credentials match.

6. dpich Function:

   • Retrieves data associated with the user from the database (reoprv).
   • Uses the chck function to verify the credentials and returns the matching data.

7. louNow Function:

   • Logs out a user.
   • Iterates through the cUsers sheet to find the matching username.
   • Logs the logout activity, including the current time, a message, user-related data, username, and IP address.
   • Deletes the user's row from the cUsers sheet, effectively logging them out.

8. hxy Function:

• Checks if a user is present in both the verified users list (vUsers) and the currently logged-in users list (cUsers).
• Iterates through both lists to find a matching username.
• Returns "ok" if the user is found in both lists and "qwerty" if not.

login.html

copy and paste following codes inside login.html

<!DOCTYPE html>

<html>

<head>

    <base target="_top">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>

    @font-face {

   font-family: myFirstFont;

   src: url(sansation_light.woff);

}

* {

   font-family: myFirstFont;

}

  .center{margin: auto;width: 50%;padding: 5px;}

      /* (C) NO SELECT + HIGHLIGHT COLOR */

      * { user-select: none; }

      *::selection { background: none; }

      *::-moz-selection { background: none; }  

fieldset{border-radius:10px;border:1px solid teal;width:50%;margin-left:25%;margin-top:40px;}

legend{color:teal;}

      </style>

  </head>

<body>

  <fieldset class="w3-border-teal w3-small">

<legend><i>Welcome to CodyLab SMS:</i></legend>

<br>

 <?var url = getUrl();?>

 <form method="post" action="<?= url ?>">

 <div class="w3-row center">

   <label>UserId:</label>

   <input type="text"placeholder="UserId"

class="w3-input w3-col s12 w3-center w3-border-green w3-hover-yellow w3-animate-left" name="username"required>

   </div><div class="w3-row center">

   <label>Password:</label>

   <input type="password"name="password"

class="w3-input w3-col s12 w3-center w3-border-green w3-hover-yellow w3-animate-rignt" placeholder="Password" required>

   <input type="hidden"class="ip"name="ipd">

   </div><div class="w3-row center">

   <input type="submit" value="Login" name="LoginButton"class="w3-input w3-hover-red w3-col s12 w3-teal w3-animate-bottom">

   </div>

   <div class="center w3-center w3-animate-top"><?= message ?></div>

   <hr>

   </form>

   <input type="submit" value="Recover Password"onclick="document.getElementById('prmodal').style.display='block'"

name="fpassword"

   class="w3-red w3-border-white w3-hover-teal w3-left w3-animate-right w3-display-bottom">

   <input type="submit" value="Join with us" name="fpassword"

   class="w3-green w3-border-white w3-hover-teal w3-right w3-animate-left">

   <div class="w3-display-bottommiddle w3-green">©Created by <a href="https://codylab.blogspot.com"

target="_blank">CodyLab.</a></div>

   <div id="prmodal" class="w3-modal">

  <div class="w3-modal-content"style="width:260px">

  <div class="w3-container">

   <span onclick="document.getElementById('prmodal').style.display='none'"

class="w3-button w3-display-topright">&times;</span>

   <h4>Reset Password:</h4>

     <form class="w3-container"style="width:240px"id="rpform09" onsubmit="event.preventDefault();rpassword(this)">

        <div class="w3-section">

          <label><b>Email:</b></label>

          <input type="email"class="w3-input w3-margin-bottom" placeholder="Enter registered email"

name="pemail" required>

          <input type="hidden"class="ip"name="ipad">

          <button class="w3-button w3-block w3-red w3-section w3-padding" type="submit">Reset</button>

          <div id="resp"></div>

        </div>

      </form>

    </div>

  </div>

</div>

   </fieldset>

<script>

  function rpassword(v){

  document.getElementById('resp').innerHTML=`

<i class="fa fa-circle-o-notch fa-spin" style="font-size:15px"></i> Processing...`;

  google.script.run.withFailureHandler(ipass)

                     .withSuccessHandler(ipass)

                     .rxpass(v);}function ipass(x){

                      document.getElementById('resp').innerHTML= x;document.getElementById('rpform09').reset();}

                      $.getJSON('https://ipapi.co/json', function(e){

                      $('.ip').val(e.ip);});

  </script>

  </body>

  </html>

index.html

copy and paste following codes inside index.html

<!DOCTYPE html>

<html lang="en">

<base target="_top">  

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<?!= include('css') ?>

<?var bp = dpich();?>

<body class="w3-container w3-border w3-border-blue w3-leftbar">

<input type="hidden" value="<?= bp[0][26] ?>" id="adreg" />

<input type="hidden" value="<?= bp[0][27] ?>" id="rskg" />

<input type="hidden" value="<?= bp[0][1] ?>" id="logo" />

<input type="hidden" value="<?= bp[0][2]  ?>" id="scnam" />

<input type="hidden" value="<?= bp[0][3] ?>" id="scnam0" />

<input type="hidden"

value="<?= bp[0][4] ?>,<?= bp[0][5] ?>,<?= bp[0][6] ?>,<?= bp[0][7] ?>,<?= bp[0][8] ?>,<?= bp[0][10] ?>" id="scaddre" />

<input type="hidden" value="<?= bp[0][11] ?>" id="sccon" />

<input type="hidden" value="<?= bp[0][12] ?>" id="scema" />

<input type="hidden" value="<?= bp[0][13] ?>" id="scweb" />

<!-- Side Navigation -->

<nav class="w3-sidebar w3-bar-block w3-collapse w3-white w3-animate-left w3-border-right"

style="z-index:3;width:280px;margin-top:7px;" id="mySidebar">

 <div class="w3-container w3-row w3-border-blue w3-border-bottom">

    <div class="w3-col s4">

      <img src="https://www.w3schools.com/w3images/avatar2.png" class="w3-circle w3-margin-right"

style="width:46px;height:53px;">

      <b class="w3-center w3-text-green"><?= username ?></b>

    </div>

    <div class="w3-col s8 w3-bar">

    <?var url = getUrl();?>

    <form method="post" action="<?= url ?>" id="mlo">

      <span>Welcome,<br> <strong class="cap"><?= message ?><i id="blink">.</i></strong></span><br>

      <a href="javascript:void(0)" class="w3-button"onclick=""><i class="fa fa-cog"></i></a>

      <input type="hidden" value="<?= username ?>"id="0sername" name="username" />

      <input type="hidden"class="ip"name="ipd">

      <input type="submit"class="w3-button w3-text-red" value="Logout" name="LogoutButton" />

      <input type="submit" value="Pcv"name="Pcv"hidden>

    </form>

    </div>

  </div>

 <a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page0');w3_close();"id="firstTab"><i class="fa fa-home w3-margin-right"></i>Home</a>

<div style="overflow: auto;"id="nheight">

<a id="myBtn" onclick="menu('Index1')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>STUDENTS<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index1" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page1');w3_close();"><i class="fa fa-user-plus w3-margin-right"></i>New Admission</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page2');w3_close();"><i class="fa fa-list-ol w3-margin-right"></i>Students' List</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page3');w3_close();"><i class="fa fa-users w3-margin-right"></i>Manage Classes</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page4');w3_close();"><i class="fa fa-print w3-margin-right"></i>Admission receipt</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page5');w3_close();"><i class="fa fa-id-card w3-margin-right"></i>ID Cards</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page6');w3_close();"><i class="fa fa-print w3-margin-right"></i>Print On Stamp</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page7');w3_close();"><i class="fa fa-camera-retro w3-margin-right"></i>Manage Image</a>

</div>

<a id="myBtn" onclick="menu('Index2')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>STAFFS<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index2" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page8');w3_close();"><i class="fa fa-plus w3-margin-right"></i>Add Staff</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page9');w3_close();"><i class="fa fa-list-ol w3-margin-right"></i>Staffs' List</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page10');w3_close();"><i class="fa fa-users w3-margin-right"></i>Manage Staffs</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page11');w3_close();"><i class="fa fa-id-card w3-margin-right"></i>ID Cards</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page12');w3_close();"><i class="fa fa-camera-retro w3-margin-right"></i>Manage Image</a>

  </div>

<a id="myBtn" onclick="menu('Index3')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>PAYMENTS<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index3" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page13');w3_close();"><i class="fa fa-rupee w3-margin-right"></i>Cash Entry</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page14');w3_close();"><i class="fa fa-history w3-margin-right"></i>Payment History</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page15');w3_close();"><i class="fa fa-book w3-margin-right"></i>Dues Report</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page32');w3_close();"><i class="fa fa-table w3-margin-right"></i>Charging Table</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page16');w3_close();"><i class="fa fa-print w3-margin-right"></i>Print Reminder</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page19');w3_close();"><i class="fa fa-cogs w3-margin-right"></i>Payment Settings</a>

</div>

<a id="myBtn" onclick="menu('Index4')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>RESULTS<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index4" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page18');w3_close();"><i class="fa fa-print w3-margin-right"></i>Attendance List</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page21');w3_close();"><i class="fa fa-pencil w3-margin-right"></i>Results Entry Form1</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page2i');w3_close();"><i class="fa fa-pencil w3-margin-right"></i>Results Entry Form2</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page20');w3_close();"><i class="fa fa-print w3-margin-right"></i>Admit Cards</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page22');w3_close();"><i class="fa fa-print w3-margin-right"></i>Results Card</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page23');w3_close();"><i class="fa fa-print w3-margin-right"></i>Results Report</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page24');w3_close();"><i class="fa fa-cogs w3-margin-right"></i>Results Settings</a>

</div>

<a id="myBtn" onclick="menu('Index5')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>TRANSPORT<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index5" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page25');w3_close();"><i class="fa fa-plus w3-margin-right"></i>Manage Van</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page26');w3_close();"><i class="fa fa-plus w3-margin-right"></i>Manage Driver</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page27');w3_close();"><i class="fa fa-print w3-margin-right"></i>Manage Expense</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page28');w3_close();"><i class="fa fa-cogs w3-margin-right"></i>Manage Entries</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page29');w3_close();"><i class="fa fa-edit w3-margin-right"></i>Reports</a>

</div>

<a id="myBtn" onclick="menu('Index5')" href="javascript:void(0)" class="w3-bar-item w3-button">

<i class="fa fa-bars w3-margin-right"></i>STOCK<i class="fa fa-caret-down w3-margin-left"></i></a>

<div id="Index5" class="w3-hide w3-animate-left">

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page25');w3_close();"><i class="fa fa-plus w3-margin-right"></i>Goods Entry</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page26');w3_close();"><i class="fa fa-plus w3-margin-right"></i>Sell Entry</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page27');w3_close();"><i class="fa fa-print w3-margin-right"></i>History</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page28');w3_close();"><i class="fa fa-cogs w3-margin-right"></i>Manage Entries</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"

onclick="openPage('page29');w3_close();"><i class="fa fa-edit w3-margin-right"></i>Reports</a>

</div>

<a href="javascript:void(0)" class="w3-bar-item w3-button test"onclick="openPage('page30');w3_close();">

<i class="fa fa-send w3-margin-right"></i>SEND NOTIFICATIONS</a>

  <a href="javascript:void(0)" class="w3-bar-item w3-button test"onclick="openPage('page31');w3_close();">

<i class="fa fa-inbox w3-margin-right"></i>FEEDBACKS</a>

<a href="javascript:void(0)" class="w3-bar-item w3-button test"onclick="openPage('page33');w3_close();">

<i class="fa fa-calendar w3-margin-right"></i>EVENTS</a>

</div>

<div class="w3-light-gray w3-bottom w3-left w3-col s2">©Created by <a href="https://codylab.blogspot.com"

target="_blank">CodyLab.</a></div>

</nav>

<!-- Overlay effect when opening the side navigation on small screens -->

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer"

title="Close Sidemenu" id="myOverlay"></div>

<!-- Page content -->

<div class="w3-main" style="margin-left:280px;">

<i class="fa fa-bars w3-button w3-white w3-hide-large w3-xlarge w3-margin-left w3-margin-top w3-teal"

onclick="w3_open()"></i>

<a href="javascript:void(0)" class="w3-hide-large w3-red w3-button w3-right w3-margin-top w3-margin-right"

onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-pencil"></i></a>

<div id="page0" class="w3-container pageIndex">

   <?!= include('home') ?>

</div>

<div id="page1" class="w3-container pageIndex">

  <?!= include('adform') ?>

 

</div>

<div id="page2" class="w3-container pageIndex">

 <?!= include('student-list') ?>

</div>

<div id="page3" class="w3-container pageIndex">

 <?!= include('mclass') ?>

</div>

   

  <div id="page4" class="w3-container pageIndex">

 <?!= include('ad-receipt') ?>

</div>

<div id="page5" class="w3-container pageIndex">

 <?!= include('students-ids') ?>

</div>

<div id="page6" class="w3-container pageIndex">

  <?!= include('feeCard') ?>

   

</div>

  <div id="page7" class="w3-container pageIndex">

  <?!= include('m-image') ?>

</div>

<div id="page8" class="w3-container pageIndex">

 <?!= include('ad-staff') ?>

</div>

<div id="page9" class="w3-container pageIndex">

  <?!= include('staffs-list') ?>

</div>

   

  <div id="page10" class="w3-container pageIndex">

 <?!= include('m-staffs') ?>

 

</div>

<div id="page11" class="w3-container pageIndex">

 <?!= include('staff-ids') ?>

</div>

<div id="page12" class="w3-container pageIndex">

  <?!= include('m-staff-image') ?>

   

</div>

 <div id="page13" class="w3-container pageIndex">

  <?!= include('cash-entry') ?>

</div>

<div id="page14" class="w3-container pageIndex">

 <?!= include('payment-history') ?>

 

</div>

<div id="page15" class="w3-container pageIndex">

  <?!= include('due-report') ?>

</div>

   

  <div id="page16" class="w3-container pageIndex">

 <?!= include('payment-slip') ?>

 

</div>

<div id="page17" class="w3-container pageIndex">

 <?!= include('p-reminder') ?>

</div>

<div id="page18" class="w3-container pageIndex">

  <?!= include('exattlist') ?>

   

</div>

<div id="page19" class="w3-container pageIndex">

  <?!= include('p-setting') ?>

</div>

<div id="page20" class="w3-container pageIndex">

<?!= include('admit-card') ?>

</div>

<div id="page21" class="w3-container pageIndex">

 <?!= include('result-entry') ?>

</div>

<div id="page2i" class="w3-container pageIndex">

 <?!= include('result-entry2') ?>

</div>

  <div id="page22" class="w3-container pageIndex">

 <?!= include('result-card') ?>

 

</div>

<div id="page23" class="w3-container pageIndex">

 <?!= include('result-report') ?>

</div>

<div id="page24" class="w3-container pageIndex">

  <?!= include('result-setting') ?>

</div>

<div id="page25" class="w3-container pageIndex">

  <?!= include('goods-entry') ?>

</div>

<div id="page26" class="w3-container pageIndex">

<?!= include('sell-entry') ?>

</div>

<div id="page27" class="w3-container pageIndex">

  <?!= include('history') ?>

</div>

   

  <div id="page28" class="w3-container pageIndex">

 <?!= include('stock-manage') ?>

 

</div>

<div id="page29" class="w3-container pageIndex">

 <?!= include('reports') ?>

</div>

<div id="page30" class="w3-container pageIndex">

  <?!= include('notifications') ?>

   

</div>

<div id="page31" class="w3-container pageIndex">

  <?!= include('feedback') ?>

</div>

<div id="page32" class="w3-container pageIndex">

 <?!= include('chTable') ?>

</div>

<div id="page33" class="w3-container pageIndex">

  page-33

</div>

   

  <div id="page34" class="w3-container pageIndex">

 page-34

 

</div>

<div id="page35" class="w3-container pageIndex">

 page35

</div>

<div id="page36" class="w3-container pageIndex">

  page36

   

</div>

</div>

 

   

   

<script>

function w3_open() {

  document.getElementById("mySidebar").style.display = "block";

  document.getElementById("myOverlay").style.display = "block";

}

function w3_close() {

  document.getElementById("mySidebar").style.display = "none";

  document.getElementById("myOverlay").style.display = "none";

}

function menu(index) {

  var x = document.getElementById(index);

  if (x.className.indexOf("w3-show") == -1) {

    x.className += " w3-show";

    x.previousElementSibling.className += " w3-yellow";

  } else {

    x.className = x.className.replace(" w3-show", "");

    x.previousElementSibling.className =

    x.previousElementSibling.className.replace(" w3-yellow", "");

  }

}

openPage("page1")

function openPage(pageNum) {

  var i;

  var x = document.getElementsByClassName("pageIndex");

  for (i = 0; i < x.length; i++) {

    x[i].style.display = "none";

  }

  x = document.getElementsByClassName("test");

  for (i = 0; i < x.length; i++) {

    x[i].className = x[i].className.replace(" w3-light-grey", "");

  }

  document.getElementById(pageNum).style.display = "block";

  document.getElementById(pageNum).style.height = window.innerHeight-5+"px";

  event.currentTarget.className += " w3-light-grey";

}

</script>

<script>

var openTab = document.getElementById("firstTab");

openTab.click();setFun1();villLoad();feeFunSet();goLive();smsb();

document.getElementById("mySidebar").style.height = window.innerHeight-18+"px";

document.getElementById("nheight").style.height = window.innerHeight-150+"px";

</script>

<script>

function lowerCase(elem) {

var temp = elem.value;

elem.value = temp.toLowerCase();}

</script>

<script>

setInterval(function(){

document.getElementById("tixx").innerHTML= new Date().toLocaleTimeString();

helper0();

let lo = document.getElementsByClassName("logo");

for(let i = 0; i<lo.length; i++) {

lo[i].src = <?=bp[0][1]?>;}

let scl = document.getElementsByClassName("scl");

for(let i = 0; i<scl.length; i++) {

scl[i].innerHTML = <?=bp[0][2]?>;}

let sscl = document.getElementsByClassName("sscl");

for(let i = 0; i<sscl.length; i++) {

sscl[i].innerHTML = <?=bp[0][3]?>;}

let sclad = document.getElementsByClassName("sclad");

for(let i = 0; i<sclad.length; i++) {

sclad[i].innerHTML = <?=bp[0][4]?>;}

let co = document.getElementsByClassName("cont");

for(let i = 0; i<co.length; i++){

co[i].innerHTML = <?=bp[0][6]?>;}

let email = document.getElementsByClassName("eml");

for(let i = 0; i<email.length; i++){

email[i].innerHTML = <?=bp[0][7]?>;}

let sweb = document.getElementsByClassName("sweb");

for(let i = 0; i<sweb.length; i++){

sweb[i].innerHTML = <?=bp[0][8]?>;}

},1000);  

function helper0(){

    var b = document.getElementById('blink');

    var uv = document.getElementById("mlo").elements[0].value;

    var s = new Date().getSeconds();

    if(s%5){

    google.script.run

              .withSuccessHandler(xhelp)

              .hxy(uv);}else{

    b.style.textDecoration = (b.style.textDecoration == 0 ?'underline':'');

    }};function xhelp(xv){

    var b = document.getElementById('blink');

    if(xv==="qwerty"){

    document.getElementById("mlo").elements["Pcv"].click();

    }else{

    b.style.textDecoration = (b.style.textDecoration == 0 ?'underline':'');

    }};

    $.getJSON('https://ipapi.co/json', function(e){

    $('.ip').val(e.ip);});

</script>

</body>

</html>

Next code will be available in the next post

     Create School Management System Page-3 || Admission form