Giaoan.link chia sẻ đến các bạn một project bằng Google sheet Apps Script – Tạo Login form có chức năng Đăng ký, Phê duyệt và Đăng nhập. Khi bạn mở form đăng nhập bạn có hai sự lựa chọn: 1 – nếu bạn đã có tài khoản đăng ký và được phê duyệt (approve) thì bạn đăng nhập (Login); 2 – nếu bạn chưa có tài khoản, bạn tiến hành đăng ký. Khi bạn đăng ký xong, bạn vẫn chưa đăng nhập được cho đến kh được Phê duyệt. Tất cả bạn có thể thực hiện theo hướng dẫn trong video bên dưới đây.
Các bài học excel ứng dụng khác:
- Google webapp | Form tìm, hiển thị kết quả học tập nhiều môn và in phiếu kết quả
- Danh mục các Bài học Google sheet Apps script Cơ bản
- Bản Nâng cấp Hệ thống hóa đơn Phân quyền Quản lý khách Quản lý sản phẩm Quản lý hóa đơn
- Tạo webapp import và update dữ liệu từ Excel lên Google sheet có Load bảng Table lên nền tảng web
- Google sheet, appscript và webapp – Giải pháp thu hoạc phí toàn diện
- Quản Lý Học Phí Bằng Google Apps Script: Form CRUD, Tìm Kiếm, In Phiếu Thu và Tự Động Tính Toán
- Giảm dung lượng PDF dễ dàng với PDF24 Creator – Miễn phí và hiệu quả
- Chuyển đổi Pdf dạng bản scan sang MS Excel chuẩn không bị lỗi font và giữ nguyên định dạng
- Chuyển định dạng file pdf dạng scan – dạng chụp hình ảnh sang MS Word định dạng chuẩn 99.9%
- Phím tắt vào BIOS và Boot Options của các hãng máy tính phổ biến
Code gs
function doGet(e) {
var x = HtmlService.createTemplateFromFile("index");
var y = x.evaluate();
var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return z;
}
function checkLogin(username, password) {
var ws=SpreadsheetApp.openById('1PPDkS2ogmRoQk1mPXNznRqvLvVi49fgvFSsGmazZO3Y');
var ss = ws.getSheetByName("Data");
var getLastRow = ss.getLastRow();
var found_record = '';
for(var i = 2; i <= getLastRow; i++){
if(ss.getRange(i, 1).getDisplayValue().toUpperCase() == username.toUpperCase() &&
ss.getRange(i, 2).getDisplayValue().toUpperCase() == password.toUpperCase())
if(ss.getRange(i,5).getValue()=="Approved"){
found_record = 'TRUE';
} else{
found_record = 'FALSE';
}
}
if(found_record == ''){
found_record = 'FALSE';
}
return found_record;
}
function AddRecord(usernamee, passwordd, email, phone) {
var ws=SpreadsheetApp.openById('1PPDkS2ogmRoQk1mPXNznRqvLvVi49fgvFSsGmazZO3Y');
var ss = ws.getSheetByName("Data");
ss.appendRow([usernamee,passwordd,email,phone]);
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Giaoan-link - Login & Registration Form</title>
<style>
body {
En-height: 100vh;
width: 100%;
background: #009579;
}
/*page1*/
.page1_class1-off {
display: none;
}
/*page2*/
.page2_class1 {
display: none;
}
.page2_id1-off {
display: none;
}
/*page3*/
.page3_class1 {
display: none;
}
.page3_id1-off {
display: none;
}
.titlereg{
color: #ffffff;
font-weight: bold;
}
h4 {
color: red;
}
input[type=text]:hover {
border-bottom: 2px solid blue;
}
input[type=number]:hover {
border-bottom: 2px solid blue;
}
input[type=password]:hover {
border-bottom: 2px solid blue;
}
</style>
</head>
<body>
<br><br>
<!--page1-->
<center>
<div class="page1_class1" id="page1_id1"
style="background: #fefcfc; border:2px solid blue; border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;">
<h4> ĐIỀN THÔNG TIN ĐĂNG NHẬP </h4>
<br>
<input type="text" id="username" placeholder="Tên đăng nhập" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;"/><br>
<br>
<input type="password" id="password" placeholder="Mật khẩu" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;"/>
<br><span id="errorMessage" style="color: red ; " ></span><br>
<input type="submit" value="Đăng nhập" onclick="LoginUser()" style="float: center;padding-top: 1px;padding-bottom: 1px;padding-left: 5px;padding-right: 5px;font-size: 0.9em;font-weight:bold;"/><br>
<br>
<b style="color: red;">Bạn chưa có tài khoản?</b><br><input type="button" onClick="function1()" value="Tạo mới" style="margin-top: 5px;font-weight:bold;"/>
</div>
<!--page2-->
<div class="page2_class1" id="page2_id1"
style="background:none; border:2px solid yellow; border-radius: 20px; width: 250px;padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<span class="titlereg">TẠO TÀI KHOẢN</span><br><br>
<input type="text" id="usernamee" placeholder="Tên đăng nhập" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;"/><br>
<br>
<input type="password" id="passwordd" placeholder="Mật khẩu" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9em;width: 50%;" /><br>
<br>
<input type="text" id="email" placeholder="Địa chỉ mail" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;"/><br>
<br>
<input type="number" id="phone" placeholder="Số điện thoại" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;" /><br><br>
<input type="submit" value="Tạo Mới" onclick="AddRow()" style="float: center; padding-top: 1px; padding-bottom: 1px;padding-left: 10px; padding-right: 10px;font-size: 0.9em; font-weight:bold;" />
<br>
</div>
<!--page3-->
<div class="page3_class1" id="page3_id1"
style="background:none; border:2px solid #ffffff;border-radius: 20px;width: 250px;padding-top: 10px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;">
<center>
<h3> Tài khoảng được tạo thành công. Đăng nhập vào tài khoảng của bạn!</h3>
<input type="submit" onClick="function3()" value="Đăng nhập" style="font-weight:bold;"><br>
</div>
</center>
<script>
function AddRow(){
var usernamee = document.getElementById("usernamee").value;
var passwordd = document.getElementById("passwordd").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
if (usernamee==""|| passwordd==""|| email==""|| phone=="") {
return false;
}else{
google.script.run.AddRecord(usernamee,passwordd,email,phone);
document.getElementById("page2_id1").className = "page2_id1-off";
document.getElementById("page3_id1").className = "page3_id1";
}
}
function LoginUser(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(output){
if(output == 'TRUE'){
var url1 ='https://giaoan.link';
/*var winRef = window.open(url1);
winRef ? google.script.host.close() : window.onload=function(){
document.getElementById('url').href = url1;
}*/
window.location.href= url1;
}else if(output == 'FALSE'){
document.getElementById("errorMessage").innerHTML = "Username, Password Chưa đúng hoặc Chưa được phê duyệt!";
}
}).checkLogin(username, password);
}
function function1(){
document.getElementById("page1_id1").className = "page1_class1-off";
document.getElementById("page2_id1").className = "page2_id1";
}
function function3(){
document.getElementById("page3_id1").className = "page3_id1-off";
document.getElementById("page1_id1").className = "page1_id1";
}
</script>
</body>
</html>Video hướng dẫn và demo project
