Shool website model - admin - CodyLab

School website html code with login example.

In this tutorial, I have tried to show you a school website model with login system.

To know more about login system we recommend you to visit and read this article first . click here to read.

Note: To test this demo use 'USER1' as userId and '12345678' as password.

for advance login system Whatsapp-9801740685

after login following screen you see. See live demo

To create this, I have used following codes.

Code.gs

var ss = SpreadsheetApp.openById('sheet id')
var vUsers = ss.getSheetByName('vUsers');
var cUsers = ss.getSheetByName('cUsers');
var passid = ss.getSheetByName('stores');
var userlr =  vUsers.getLastRow()+1;
var currlr =  cUsers.getLastRow()+1;


function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('plogin');
  htmlOutput.message = '';
  return htmlOutput.evaluate();
}

function doPost(e) {
    Logger.log(JSON.stringify(e));
    if(e.parameter.LoginButton == 'Login'){    
    var username = e.parameter.username;
    var password = e.parameter.password;
    var vdate = vlogin(username, password);
    if(vdate == 'TRUE'){
      var htmlOutput =  HtmlService.createTemplateFromFile('index');
      htmlOutput.username = username;
      htmlOutput.message = '';
      return htmlOutput.evaluate();   
      }else{
      var htmlOutput =  HtmlService.createTemplateFromFile('plogin');
      htmlOutput.message = 'Failed to Login';
      return htmlOutput.evaluate();     
     }}else if(e.parameter.LogoutButton == 'Logout'){
     louNow(e.parameter.username);
     var htmlOutput =  HtmlService.createTemplateFromFile('plogin');
     htmlOutput.message = 'Logged Out';
     return htmlOutput.evaluate(); 
     }

    function vlogin(username, password){
    var flag  = '';
    for(var x = 1; x <= currlr; x++){
    if(cUsers.getRange(x, 2).getValue()== username){
        flag = 'TRUE';
    var d = new Date();
    cUsers.getRange(x, 1).setValue(d);
    }}
    if( flag == ''){
    for(var i = 1; i <= userlr; i++){
    if(vUsers.getRange(i, 1).getValue()== username&& 
    vUsers.getRange(i, 2).getValue() == password){
        flag = 'TRUE';
    var sv = vUsers.getRange(i,8).getValue();
    cUsers.insertRowAfter(1).appendRow([new Date(),username,,sv]);
        }    
    }
  }if(flag == ''){
    flag = 'FALSE'; 
  }return flag;}
  }

function louNow(username){
  for(var b = 1; b <= currlr; b++){
  if(cUsers.getRange(b, 2).getValue() == username){
    cUsers.deleteRow(b);
    }      
  }

}

login.html

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body{text-align:center;font-family:times;margin-top:90px;}
  input{
  width:190px;
  height:20px;
  border:1px dashed black;
  font-family:times;margin:5px;
  padding:5px;text-align:center;
  border-radius:15px
  }
  input[type="submit"]{
    background-color:green;
    color:white;width:100px;
    border-radius:15px;
    padding:0px;height:30px;
    }
 input:hover[type="submit"] {
    background: red;
    }
    hr{border:1px solid red;}
</style>
</head>
<body >
 <?var url = getUrl();?>
 <form method="post" action="<?= url ?>">
   <label>User Name</label><br>
   <input type="text"placeholder="UserId" name="username" required><br>
   <label>Password</label><br>
   <input type="password"name="password" placeholder="password" required><br>
   <input type="submit" value="Login" name="LoginButton" /><hr>
   <span><?= message ?></span>
  </body>
  </html>

index.html

<!DOCTYPE html>
<html>
  <head>
   <title>Index</title>
<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 href='https://fonts.googleapis.com/css?family=merryweather'
rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "merryweather", serif}
.w3-bar-block .w3-bar-item {padding: 12px}
</style>
  </head>
   <body>
   <nav class="w3-sidebar w3-bar-block w3-collapse w3-white w3-animate-left w3-card"
style="z-index:3;width:320px;" id="mySidebar">
    <div class="w3-leftbar w3-border-red">
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
    <input type="hidden" value="<?= username ?>" name="username" />
    <div class="w3-border-left w3-col s8 w3-yellow w3-border-red">
    USER ID:<b><?= username ?></b></div>
    <input type="submit" value="Logout" name="LogoutButton"
class="w3-col s4 w3-red w3-border w3-hover-indigo">
    </form>
    <div class="w3-border-left w3-col s12 w3-pale-blue w3-border-red">
    Info:<?= message ?></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;height:475px;">

<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-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-cogs 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-cogs 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-plus 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-print 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-print 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('page16');w3_close();">
<i class="fa fa-print w3-margin-right"></i>Payment Slips</a>
<a href="javascript:void(0)"
class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-gray"
onclick="openPage('page17');w3_close();">
<i class="fa fa-bullhorn w3-margin-right"></i>Payment Reminder</a>
<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-edit w3-margin-right"></i>Manage Entry</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>RSULTS
<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('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('page21');w3_close();">
<i class="fa fa-pencil w3-margin-right"></i>Results Entry</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>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-inbox w3-margin-right"></i>FEEDBACKS</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button test"
onclick="openPage('page31');w3_close();">
<i class="fa fa-send w3-margin-right"></i>NOTIFICATIONS</a>


</div>
<br>
®Powered by CodyLab Technology.
</nav>


<div id="id01" class="w3-modal" style="z-index:4">
  <div class="w3-modal-content w3-animate-zoom">
    <div class="w3-container w3-padding w3-red">
       <span onclick="document.getElementById('id01').style.display='none'"
       class="w3-button w3-red w3-right w3-xxlarge"><i class="fa fa-remove"></i></span>
      <h2>Send Mail</h2>
    </div>
    <div class="w3-panel">
      <label>To</label>
      <input class="w3-input w3-border w3-margin-bottom" type="text">
      <label>From</label>
      <input class="w3-input w3-border w3-margin-bottom" type="text">
      <label>Subject</label>
      <input class="w3-input w3-border w3-margin-bottom" type="text">
      <input class="w3-input w3-border w3-margin-bottom" style="height:150px"
placeholder="What's on your mind?">
      <div class="w3-section">
        <a class="w3-button w3-red"
onclick="document.getElementById('id01').style.display='none'">Cancel
<i class="fa fa-remove"></i></a>
        <a class="w3-button w3-light-grey w3-right"
onclick="document.getElementById('id01').style.display='none'">Send
<i class="fa fa-paper-plane"></i></a>
      </div>
    </div>
  </div>
</div>


<div class="w3-overlay w3-hide-large w3-animate-opacity"
onclick="w3_close()" style="cursor:pointer"
title="Close Sidemenu" id="myOverlay"></div>


<div class="w3-main" style="margin-left:320px;">
<i class="fa fa-bars w3-button w3-white w3-hide-large w3-xlarge w3-margin-left w3-margin-top"
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">
  page0
<iframe width="100%" height="545" src="https://www.youtube.com/embed/T70iS3SQJsA?autoplay=1&mute=1"> </iframe>
</div>
<div id="page1" class="w3-container pageIndex">
page1
</div>

<div id="page2" class="w3-container pageIndex">
page2
<iframe width="100%" height="545" src="https://www.youtube.com/embed/T70iS3SQJsA?autoplay=1&mute=1"> </iframe>
</div>

<div id="page3" class="w3-container pageIndex">
page3
<iframe width="100%" height="545" src="https://www.youtube.com/embed/L1-pPD6Fnrc?autoplay=1&mute=1"> </iframe>
</div>
  <div id="page4" class="w3-container pageIndex">
page4

</div>

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

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

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

</div>

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

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

</div>

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

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

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

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

</div>

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

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

</div>

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

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

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

</div>

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

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

</div>

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

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

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

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

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

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

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

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

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

</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";
  event.currentTarget.className += " w3-light-grey";
}
</script>
<script>
var openTab = document.getElementById("firstTab");
openTab.click();
</script>
</body>
</html>

SEE LIVE DEMO
for advance login system Whatsapp-9801740685

>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.   I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                                                    THANKS FOR VISITING  CodyLab   
                                                                                 Have a nice day!
       --------------------------                          -------------------------

Donate me through - PayPal or RozorPay or Paytm

3 comments

Polar September 30, 2022 at 2:12:00 PM GMT+5:30

thanks bro, fixed iframe ".setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)" pls
Anonymous December 25, 2022 at 8:47:00 PM GMT+5:30

i want to script code with google sheet of School website html code with login example.
1. Nome_Luca January 16, 2025 at 5:04:00 PM GMT+5:30
  
  Hi, thank you for your code. How can I insert only specific information from google sheet to a specific page in your code? In e.g. I want to see in the private area of the USER1 registration data from Google Sheet, etc.

CodyLab

Shool website model - admin - CodyLab

School website html code with login example.

3 comments

School Management Software || Manage Classes

Create School Management System || Student list

School Management Software using Apps script, JavaScript and Google sheet for free

Login system - google Apps script - CodyLab