School website html code with login example.
ในบทช่วยสอนนี้ฉันได้พยายามแสดงรูปแบบเว็บไซต์ของโรงเรียนที่มีระบบเข้าสู่ระบบ หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับระบบเข้าสู่ระบบเราขอแนะนําให้คุณเยี่ยมชมและอ่านบทความนี้ก่อน . คลิกที่นี่เพื่ออ่าน
หมายเหตุ: ในการทดสอบการสาธิตนี้ใช้ 'u141456' เป็น userId และ 'p141456' เป็นรหัสผ่าน
after login following screen you see. See live demo
To create this, I have used following codes.
var ss = SpreadsheetApp.openById('1DwRWA7LWbAZ81C7t4x8iw7YCO9CgCXow_EPLDvPZ-Es')
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.toUpperCase();
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().toUpperCase() == username.toUpperCase()){
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().toUpperCase() == username.toUpperCase() &&
vUsers.getRange(i, 2).getValue().toUpperCase() == password.toUpperCase()){
flag = 'TRUE';
var sv = vUsers.getRange(i,8).getValue();
cUsers.insertRowAfter(1).appendRow([new Date(),username.toUpperCase(),,sv]);
}
}
}if(flag == ''){
flag = 'FALSE';
}return flag;}
}
function louNow(username){
for(var b = 1; b <= currlr; b++){
if(cUsers.getRange(b, 2).getValue() == username.toUpperCase()){
cUsers.deleteRow(b);
}
}
}
plogin.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"><br>
<label>Password</label><br>
<input type="password"name="password" placeholder="password"/><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 Imran Websoft Technology.
</nav>
<!-- Modal that pops up when you click on "New Message" -->
<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>
<!-- 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: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">
tttttt
</div>
<div id="page1" class="w3-container pageIndex">
ttttttt
</div>
<div id="page2" class="w3-container pageIndex">
ttttttt
</div>
<div id="page3" class="w3-container pageIndex">
tttt
</div>
<div id="page4" class="w3-container pageIndex">
ttttttt
</div>
<div id="page5" class="w3-container pageIndex">
tttttt
</div>
<div id="page6" class="w3-container pageIndex">
ttttt
</div>
<div id="page7" class="w3-container pageIndex">
ttttt
</div>
<div id="page8" class="w3-container pageIndex">
tttttt
</div>
<div id="page9" class="w3-container pageIndex">
ttttttt
</div>
<div id="page10" class="w3-container pageIndex">
ttttttt
</div>
<div id="page11" class="w3-container pageIndex">
ttttttttt
</div>
<div id="page12" class="w3-container pageIndex">
ttttttt
</div>
<div id="page13" class="w3-container pageIndex">
ttttttttttt
</div>
<div id="page14" class="w3-container pageIndex">
tttttttt
</div>
<div id="page15" class="w3-container pageIndex">
tttttt
</div>
<div id="page16" class="w3-container pageIndex">
ttttt
</div>
<div id="page17" class="w3-container pageIndex">
tttttt
</div>
<div id="page18" class="w3-container pageIndex">
ttttt
</div>
<div id="page19" class="w3-container pageIndex">
ttttttt
</div>
<div id="page20" class="w3-container pageIndex">
rtttrtrrt
</div>
<div id="page21" class="w3-container pageIndex">
trtrtr
</div>
<div id="page22" class="w3-container pageIndex">
trtrtrt
</div>
<div id="page23" class="w3-container pageIndex">
trtrtrt
</div>
<div id="page24" class="w3-container pageIndex">
trtrtrt
</div>
<div id="page25" class="w3-container pageIndex">
grtrtrt
</div>
<div id="page26" class="w3-container pageIndex">
ghrtrtret
</div>
<div id="page27" class="w3-container pageIndex">
rtret
</div>
<div id="page28" class="w3-container pageIndex">
yyyy
</div>
<div id="page29" class="w3-container pageIndex">
yy
</div>
<div id="page30" class="w3-container pageIndex">
yt
</div>
<div id="page31" class="w3-container pageIndex">
y
</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>
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>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 thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------