Scribd
Upload
3 views

code igniter

The document outlines a web application with separate login forms for Admin and User roles, featuring a CRUD data interface. It includes HTML structure, CSS for styling, and JavaScript functions for handling login and content refresh. The Admin has more functionalities compared to the User, who has limited access to certain features like downloading.

Uploaded by

rizki.ananda3588
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

code igniter

The document outlines a web application with separate login forms for Admin and User roles, featuring a CRUD data interface. It includes HTML structure, CSS for styling, and JavaScript functions for handling login and content refresh. The Admin has more functionalities compared to the User, who has limited access to certain features like downloading.

Uploaded by

rizki.ananda3588
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

//////////////////////////////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">

</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/[email protected]/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');
}

You might also like