//////////////////////////////FORM LOGIN//////////////////////////////////////////
<div class="col-12">
<label>Login : <span
class="text-danger">*</span></label>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="checkbox" name="rule" id="admin" value="admin">
<label class="form-check-label"
for="inlineCheckbox1">Admin</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="checkbox" name="rule" id="user" value="user">
<label class="form-check-label"
for="inlineCheckbox2">User</label>
</div>
</div>
//////////////////////////////ADMIN//////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylecss'); ?>
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container-fluid overflow-hidden">
<div class="row vh-100 overflow-auto">
<div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-dark bg-gradient
d-flex fixed-bottom " id="menu">
<div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-
center align-items-sm-start px-3 pt-2">
<a href="javascript:void(0)" class="d-inline-flex align-items-
center pb-sm-3 mb-md-0 me-md-auto text-warning text-decoration-none">
<span class="fs-5">Admin<span class="d-none
d-sm-inline">App</span></span>
</a>
<ul class="nav nav-pills flex-sm-column flex-row flex-nowrap
flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center
align-items-center align-items-sm-start">
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" data-bs-toggle='modal' data-bs-target="#myModal">
<i class="fs-4 bi-table"></i><span class="ms-1 d-none d-sm-
inline"> Input Data</span> </a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="nav-link dropdown-
toggle px-sm-0 px-1 text-light" id="dropdown" data-bs-toggle="dropdown" aria-
expanded="false" >
<i class="fs-4 bi-grid"></i><span class="ms-1 d-none d-sm-
inline"> Download</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small
shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" style="color: yellow;"
id="excel"><i class="fa-regular fa-file-excel"></i> Excel</a></li>
<li><a class="dropdown-item" style="color: yellow;"
id="pdf"><i class="fa-regular fa-file-pdf"></i> Pdf</a></li>
<li><a class="dropdown-item" style="color: yellow;"
id="copy"><i class="fa-regular fa-copy"></i> Copy</a></li>
<li><a class="dropdown-item" style="color: yellow;"
id="csv"><i class="fa-solid fa-file-csv"></i> Csv</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="nav-link dropdown-
toggle px-sm-0 px-1 text-light" id="dropdown" data-bs-toggle="dropdown" aria-
expanded="false" data-bs-auto-close="outside" aria-expanded="false" >
<i class="fs-4 bi-gear"></i><span class="ms-1 d-none d-sm-
inline"> Setting</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small
shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item"
data-column="1">Nama</a></li>
<li><a class="dropdown-item"
data-column="2">Email</a></li>
<li><a class="dropdown-item"
data-column="3">Telpon</a></li>
<li><a class="dropdown-item"
data-column="4">Gender</a></li>
<li><a class="dropdown-item" data-column="5">Tgl
Lahir</a></li>
<li><a class="dropdown-item"
data-column="6">Kota</a></li>
<li><a class="dropdown-item" data-column="7">File
1</a></li>
<li><a class="dropdown-item" data-column="8">File
2</a></li>
<li><a class="dropdown-item"
data-column="9">Print</a></li>
<li><a class="dropdown-item" data-column="10">Last
Update</a></li>
<li><a class="dropdown-item"
data-column="11">Edit</a></li>
<li><a class="dropdown-item"
data-column="12">Hapus</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<i class="fs-4 bi-filter-left"></i><span class="ms-1 d-none
d-sm-inline"> Filter Data</span> </a>
</li>
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" type="button" onclick="google.script.run
.withSuccessHandler(refreshAdmin)
.getAdminHtml()">
<i class="fs-4 bi-arrow-clockwise"></i><span class="ms-1 d-
none d-sm-inline"> Refresh</span> </a>
</li>
</ul>
<div class="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-
shrink-1">
<a href="javascript:void(0)" class="d-flex align-items-center
text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-
toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" aria-
expanded="false">
<img src="https://drive.google.com/uc?
export=view&id=1ByuhIa5aOrCEG9PNEZATuf2oo2eb3_yo" alt="" width="28" height="28"
class="rounded-circle">
<span class="d-none d-sm-inline mx-1"> Action</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow"
aria-labelledby="dropdownUser1">
<li><a class="dropdown-item text-warning"
href="javascript:void(0)">Menu A</a></li>
<li><a class="dropdown-item text-warning"
href="javascript:void(0)">Menu B</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a type="button" class="btn btn-outline-danger text-
light" style="width:100%" href="<?= myURL(); ?>"><i class="fa-solid fa-right-from-
bracket"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col d-flex flex-column h-sm-100">
<main class="row overflow-auto">
<div class="col pt-4 min-vh-100">
<!----------------- Isi Konten ---------------------->
<h5>CRUD DATA</h5>
<hr />
<div class="container-fluid">
<!-- The Modal Form -->
<div class="modal" id="myModal" data-bs-backdrop="static"
data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-
scrollable">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5>Form Input-Edit</h5>
<button type="button" id="btn-close"
class="btn-close" data-bs-dismiss="modal" onclick="clearForm();"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<!-- See Form.html file -->
<?!= include('Form'); ?>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary"
form="myForm">Submit</button>
<button type="reset" class="btn btn-secondary"
value="Reset" form="myForm">Reset</button>
<button type="button" class="btn btn-danger"
data-bs-dismiss="modal" onclick="backhideCol0()">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- DataTable -->
<div class="container-fluid">
<?!= include('DataTable'); ?> <!-- See DataTable.html File
-->
</div>
<?!= include('SpinnerModal'); ?>
<script
src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</div>
</main>
<footer class="row bg-danger bg-gradient py-3 mt-auto">
<div class="col text-light"> Hery Story Youtube Channel</div>
</footer>
</div>
</div>
</div>
</body>
</html>
//////////////////////////////USER - tidak bisa
download//////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylecss'); ?>
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container-fluid overflow-hidden">
<div class="row vh-100 overflow-auto">
<div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-dark bg-gradient
d-flex fixed-bottom " id="menu">
<div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-
center align-items-sm-start px-3 pt-2">
<a href="javascript:void(0)" class="d-inline-flex align-items-
center pb-sm-3 mb-md-0 me-md-auto text-warning text-decoration-none">
<span class="fs-5">User<span class="d-none
d-sm-inline">App</span></span>
</a>
<ul class="nav nav-pills flex-sm-column flex-row flex-nowrap
flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center
align-items-center align-items-sm-start">
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" data-bs-toggle='modal' data-bs-target="#myModal">
<i class="fs-4 bi-table"></i><span class="ms-1 d-none d-sm-
inline"> Input Data</span> </a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="nav-link dropdown-
toggle px-sm-0 px-1 text-light" id="dropdown" data-bs-toggle="dropdown" aria-
expanded="false" data-bs-auto-close="outside" aria-expanded="false" >
<i class="fs-4 bi-gear"></i><span class="ms-1 d-none d-sm-
inline"> Setting</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small
shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item"
data-column="1">Nama</a></li>
<li><a class="dropdown-item"
data-column="2">Email</a></li>
<li><a class="dropdown-item"
data-column="3">Telpon</a></li>
<li><a class="dropdown-item"
data-column="4">Gender</a></li>
<li><a class="dropdown-item" data-column="5">Tgl
Lahir</a></li>
<li><a class="dropdown-item"
data-column="6">Kota</a></li>
<li><a class="dropdown-item" data-column="7">File
1</a></li>
<li><a class="dropdown-item" data-column="8">File
2</a></li>
<li><a class="dropdown-item"
data-column="9">Print</a></li>
<li><a class="dropdown-item" data-column="10">Last
Update</a></li>
<li><a class="dropdown-item"
data-column="11">Edit</a></li>
<li><a class="dropdown-item"
data-column="12">Hapus</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<i class="fs-4 bi-filter-left"></i><span class="ms-1 d-none
d-sm-inline"> Filter Data</span> </a>
</li>
<li>
<a href="javascript:void(0)" class="nav-link px-sm-0 px-2
text-light" type="button" onclick="google.script.run
.withSuccessHandler(refreshUser)
.getUserHtml()">
<i class="fs-4 bi-arrow-clockwise"></i><span class="ms-1 d-
none d-sm-inline"> Refresh</span> </a>
</li>
</ul>
<div class="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-
shrink-1">
<a href="javascript:void(0)" class="d-flex align-items-center
text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-
toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" aria-
expanded="false">
<img src="https://drive.google.com/uc?
export=view&id=1ByuhIa5aOrCEG9PNEZATuf2oo2eb3_yo" alt="" width="28" height="28"
class="rounded-circle">
<span class="d-none d-sm-inline mx-1"> Action</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow"
aria-labelledby="dropdownUser1">
<li><a class="dropdown-item text-warning"
href="javascript:void(0)">Menu A</a></li>
<li><a class="dropdown-item text-warning"
href="javascript:void(0)">Menu B</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a type="button" class="btn btn-outline-danger text-
light" style="width:100%" href="<?= myURL(); ?>"><i class="fa-solid fa-right-from-
bracket"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col d-flex flex-column h-sm-100">
<main class="row overflow-auto">
<div class="col pt-4 min-vh-100">
<!----------------- Isi Konten ---------------------->
<h5>CRUD DATA</h5>
<hr />
<div class="container-fluid">
<!-- The Modal Form -->
<div class="modal" id="myModal" data-bs-backdrop="static"
data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-
scrollable">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5>Form Input-Edit</h5>
<button type="button" id="btn-close"
class="btn-close" data-bs-dismiss="modal" onclick="clearForm();"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<!-- See Form.html file -->
<?!= include('Form'); ?>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary"
form="myForm">Submit</button>
<button type="reset" class="btn btn-secondary"
value="Reset" form="myForm">Reset</button>
<button type="button" class="btn btn-danger"
data-bs-dismiss="modal" onclick="backhideCol0()">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- DataTable -->
<div class="container-fluid">
<?!= include('DataTable'); ?> <!-- See DataTable.html File
-->
</div>
<?!= include('SpinnerModal'); ?>
<script
src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</div>
</main>
<footer class="row bg-danger bg-gradient py-3 mt-auto">
<div class="col text-light"> Hery Story Youtube Channel</div>
</footer>
</div>
</div>
</div>
</body>
</html>
//////////////////////////////CSS//////////////////////////////////////////
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-
icons.css">
@media (min-width: 576px) {
.h-sm-100 {
height: 100%;
}
}
@media (min-width: 576px) {
.d-flex {
height: 100%;
width: 15%;
position: relative;
}
}
@media (min-width: 576px) {
.fs-4 {
font-size: 1.25rem !important;
}
}
@media (min-width: 576px) {
.pt-4 {
width: 85%;
position: relative;
}
}
//////////////////////////////update script
LOGIN//////////////////////////////////////////
function cekLogin(username, password, rule) {
var rules = ['admin', 'user'];
if (username == usernames[i] && password == passwords[i] && rule == rules[i] &&
rule == "admin") {
var rule = e.parameter.rule;
var validasi = cekLogin(username, password, rule);
//////////////////////////////TAMBAHAN DI CODE
GS//////////////////////////////////////////
function getAdminHtml(e) {
var html = HtmlService
.createTemplateFromFile('Admin') // uses templated html
.evaluate()
.getContent();
return html;
}
function getUserHtml(e) {
var html = HtmlService
.createTemplateFromFile('User') // uses templated html
.evaluate()
.getContent();
return html;
}
//////////////////////////////TAMBAHAN DI
JAVASCRIPT//////////////////////////////////////////
function refreshAdmin(adminHtml) {
$('#spinnerModal').modal('show');
falseState();
document.open();
document.write(adminHtml);
document.close();
$('#myModal').modal('hide');
}
function refreshUser(userHtml) {
$('#spinnerModal').modal('show');
falseState();
document.open();
document.write(userHtml);
document.close();
$('#myModal').modal('hide');
}
