Sistem Tabungan Uang di Lengkapi Dengan Hitungan Deposit, Penarikan, Saldo, Sisa Saldo Menggunakan Web Apps Script.
1. Copy Spreadsheet (Klik di sini)
2. Di dalam Spreadsheet, terdapat 2 Sheet yaitu :
- Sheet1 (Untuk pencatatan seluruh transaksi)
- Sheet2 (Untuk daftar nama dan sisa saldo)
3. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.
4. Pada lembar kerja Apps Script terdapat file default yaitu
- Code.gs
- index.html
5.Copy dan pastekan script di bawah ini ke Code.gs
Masukkan Password Untuk Melihat Script (Password ada di dalam video)
//Youtube : Javabitpro
//Website : www.javabitpro.com
//---------------------------------------------
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function recordData(obj) {
const ss1 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
const ss2 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
const data = ss2.createTextFinder(obj.fullName).matchEntireCell(true).findAll()
let row = data.map(r => { return r.getRow() })
let lastMoney = ss2.getRange(row, 2).getValue()
let currentMoney = 0
let result = 'ok'
let action = ''
if (obj.action == 'Deposit') {
currentMoney = Number(lastMoney) + Number(obj.amount)
} else {
currentMoney = Number(lastMoney) - Number(obj.amount)
}
if (obj.action == 'Penarikan' && Number(obj.amount > lastMoney)) {
result = 'no'
} else {
lastMoney = currentMoney
ss2.getRange(row, 2).setValue(lastMoney)
ss1.appendRow([obj.fullName, obj.date, obj.action, obj.amount, lastMoney, currentMoney])
}
let myObj = {
fullName: obj.fullName,
date: obj.date,
action: obj.action,
amount: obj.amount,
lastMoney: lastMoney,
currentMoney, currentMoney,
result
}
return myObj
}
function checkMoney(name) {
const ss2 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
const data = ss2.createTextFinder(name).matchEntireCell(true).findAll()
let row = data.map(r => { return r.getRow() })
let lastMoney = ss2.getRange(row, 2).getValue()
return { lastMoney, name }
}
function getData(user) {
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
var data = ss.getDataRange().getDisplayValues()
var result = data.filter(r => r[0] == user.name)
//Logger.log(result)
return result
}
let options = setOptions().map(d => "<option>"+ d +"</option>").join("") ;
function setOptions() {
let data = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1].getRange('A2:A').getValues()
.filter(d => d[0] !== "")
let newArr = data.map(d => d[0]);
let uniqueList = [];
newArr.map(r => {
if (uniqueList.indexOf(r) === -1) {
uniqueList.push(r);
}
})
return uniqueList.sort()
}
function registerMember(fname,money){
Logger.log(fname,money)
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
ss.appendRow([fname,money])
}
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
//Youtube : Javabitpro
//Website : www.javabitpro.com
//---------------------------------------------
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function recordData(obj) {
const ss1 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
const ss2 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
const data = ss2.createTextFinder(obj.fullName).matchEntireCell(true).findAll()
let row = data.map(r => { return r.getRow() })
let lastMoney = ss2.getRange(row, 2).getValue()
let currentMoney = 0
let result = 'ok'
let action = ''
if (obj.action == 'Deposit') {
currentMoney = Number(lastMoney) + Number(obj.amount)
} else {
currentMoney = Number(lastMoney) - Number(obj.amount)
}
if (obj.action == 'Penarikan' && Number(obj.amount > lastMoney)) {
result = 'no'
} else {
lastMoney = currentMoney
ss2.getRange(row, 2).setValue(lastMoney)
ss1.appendRow([obj.fullName, obj.date, obj.action, obj.amount, lastMoney, currentMoney])
}
let myObj = {
fullName: obj.fullName,
date: obj.date,
action: obj.action,
amount: obj.amount,
lastMoney: lastMoney,
currentMoney, currentMoney,
result
}
return myObj
}
function checkMoney(name) {
const ss2 = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
const data = ss2.createTextFinder(name).matchEntireCell(true).findAll()
let row = data.map(r => { return r.getRow() })
let lastMoney = ss2.getRange(row, 2).getValue()
return { lastMoney, name }
}
function getData(user) {
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
var data = ss.getDataRange().getDisplayValues()
var result = data.filter(r => r[0] == user.name)
//Logger.log(result)
return result
}
let options = setOptions().map(d => "<option>"+ d +"</option>").join("") ;
function setOptions() {
let data = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1].getRange('A2:A').getValues()
.filter(d => d[0] !== "")
let newArr = data.map(d => d[0]);
let uniqueList = [];
newArr.map(r => {
if (uniqueList.indexOf(r) === -1) {
uniqueList.push(r);
}
})
return uniqueList.sort()
}
function registerMember(fname,money){
Logger.log(fname,money)
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1]
ss.appendRow([fname,money])
}
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sistem Tabungan Uang</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
* {
font-family: 'Prompt', sans-serif;
}
.container {
max-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<center class="my-4"> <img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png"
alt="Javabitpro" width="100" class=" rounded-circle"> </center>
<h1 class="text-center text-primary font-weight-bold">Sistem Tabungan Uang</h1>
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Daftarkan Anggota Baru
</button>
</div>
<form id="myForm">
<div class="row justify-content-start g-3">
<div class="col-md-12">
<label for="fullName" class="form-label">Nama Anggota</label>
<select id="fullName" name="fullName" class="form-select" onchange="check(this)" required>
<option selected disabled value="">Pilih Nama...</option>
<?!= options ?>
</select>
</div>
<section id="display">
<div class="col-md-12 mb-3">
<label for="date" class="form-label">Tanggal</label>
<input type="date" name="date" id="date" class="form-control" required>
</div>
<div class="col-md-12 mb-3">
<label for="action" class="form-label">Keterangan</label>
<select id="action" name="action" class="form-select" required>
<option selected disabled value="">Pilih salah satu...</option>
<option value="Deposit">Deposit</option>
<option value="Penarikan">Penarikan</option>
</select>
</div>
<div class="col-md-12 mb-3">
<label for="amount" class="form-label">Jumlah</label>
<input type="number" class="form-control" name="amount" id="amount" required>
</div>
<div class="row">
<div class="col-md-6 text-center mb-3">
<button class="btn btn-primary w-100" id="btn1" type="button" onclick="save()">Lihat riwayat transaksi </button>
<button class="btn btn-primary w-100" id="btn2" type="button" style="display: none" disabled>
<span class="spinner-border spinner-border-sm" role="status"></span> Mencari...</button>
</div>
<div class="col-md-6 text-center mb-3">
<button type="submit" class="btn btn-success w-100">Simpan</button>
</div>
</div>
</section>
</div>
</form>
</div>
<div class="container" id="showtable">
<table id="example" class="table " style="width:100%">
<thead class="bg-primary text-white"></thead>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Daftarkan Anggota Baru</h1>
<button type="button" class="btn-close" id="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="form">
<div class="col-md-12 mb-3">
<label for="fname" class="form-label">Nama</label>
<input type="text" class="form-control" name="fname" id="fname" required>
</div>
<div class="col-md-12 mb-3">
<label for="money" class="form-label">Jumlah Deposit Pertama</label>
<input type="number" class="form-control" name="money" id="money" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" onclick="register()">Simpan Data</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$.LoadingOverlay("show");
// Hide it after 1 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 1000);
});
window.onload = () => {
//$.LoadingOverlay('show')
document.querySelector('#display').style = "display: none"
document.querySelector('#showtable').style = "display: none"
}
document.querySelector('#myForm').addEventListener('submit', function (e) {
e.preventDefault()
google.script.run.withSuccessHandler((obj) => {
document.querySelector('#showtable').style = "display: none"
console.log(obj.result)
console.log(obj.amount)
const fullName = obj.fullName
const date = new Date()
const today = date.toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric', })
const action = obj.action
const amount = obj.amount
const lastMoney = obj.lastMoney
if (obj.result == 'ok') {
var swal_html = `
<div class="panel" style="font-weight:bold">
<table class="table table-striped">
<tr>
<th scope="col">Nama</th>
<td>${fullName}</td>
</tr>
<tr>
<th scope="col">Tanggal Transaksi</th>
<td>${today}</td>
</tr>
<tr>
<th scope="col">${action}</th>
<td>${amount}</td>
</tr>
<tr>
<th scope="col">Saldo</th>
<td>${lastMoney}</td>
</tr>
</table>
</div>`
Swal.fire({ title: "Laporan", icon: 'success', html: swal_html });
document.querySelector('#myForm').reset()
} else {
Swal.fire({
position: 'center',
icon: 'error',
title: 'Gagal menyelesaikan transaksi Lebih dari jumlah penarikan',
showConfirmButton: false,
timer: 1500
})
document.querySelector('#myForm').reset()
}
}).recordData(this)
})
function check(selectect) {
$.LoadingOverlay("show");
let name = selectect.value;
console.log(name)
google.script.run.withSuccessHandler((obj) => {
console.log(obj)
$.LoadingOverlay("hide");
Swal.fire({
title: 'Nama ' + obj.name + ' \n Memiliki Saldo ',
text: 'Sebesar ' + obj.lastMoney + ' Rupiah',
confirmButtonText: 'Setuju',
focusConfirm: false,
})
document.querySelector('#display').style = "display: block"
}).checkMoney(name)
}
function register() {
let fname = document.getElementById('fname').value
let money = document.getElementById('money').value
if (fname != '' && money != '') {
$.LoadingOverlay("show");
google.script.run.withSuccessHandler(() => {
$.LoadingOverlay("hide");
reLoad()
Swal.fire({
position: 'center',
icon: 'success',
title: 'Pendaftaran Berhasil',
showConfirmButton: false,
timer: 1500
})
document.getElementById("btn-close").click()
}).registerMember(fname, money)
} else {
$.LoadingOverlay("hide");
Swal.fire({
position: 'center',
icon: 'error',
title: 'Mohon lengkapi informasinya.!!',
showConfirmButton: false,
timer: 1500
})
}
}
function reLoad() {
google.script.run
.withSuccessHandler(function (url) {
window.open(url, '_top');
})
.getScriptURL();
}
function save() {
$("#btn2").show()
$("#btn1").hide()
event.preventDefault()
var user = {}
user.name = document.getElementById("fullName").value
if (user.name != '') {
google.script.run.withSuccessHandler(showDataTable).getData(user)
} else {
$("#btn2").hide()
$("#btn1").show()
Swal.fire({
position: 'center',
icon: 'error',
title: 'Silakan pilih nama!!',
showConfirmButton: false,
timer: 1500
})
}
}
function showDataTable(result) {
document.querySelector('#showtable').style = "display: block"
$("#btn2").hide()
$("#btn1").show()
if (result.length > 0) {
Swal.fire({
position: 'center',
icon: 'success',
// title: 'menemukan informasi',
showConfirmButton: false,
timer: 1500
})
let table = $('#example').DataTable({
data: result,
destroy: true,
searching: false,
"scrollX": true,
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'informasi dari ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
columns: [
{ 'title': 'Nama' },
{ 'title': 'Tanggal Transaksi' },
{ 'title': 'Daftar' },
{ 'title': 'Jumlah' },
{ 'title': 'Saldo' },
],
});
} else {
Swal.fire({
position: 'center',
icon: 'error',
title: 'Belum ada riwayat transaksi.!!',
showConfirmButton: false,
timer: 1500
})
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.05.22.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sistem Tabungan Uang</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
* {
font-family: 'Prompt', sans-serif;
}
.container {
max-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<center class="my-4"> <img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png"
alt="Javabitpro" width="100" class=" rounded-circle"> </center>
<h1 class="text-center text-primary font-weight-bold">Sistem Tabungan Uang</h1>
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Daftarkan Anggota Baru
</button>
</div>
<form id="myForm">
<div class="row justify-content-start g-3">
<div class="col-md-12">
<label for="fullName" class="form-label">Nama Anggota</label>
<select id="fullName" name="fullName" class="form-select" onchange="check(this)" required>
<option selected disabled value="">Pilih Nama...</option>
<?!= options ?>
</select>
</div>
<section id="display">
<div class="col-md-12 mb-3">
<label for="date" class="form-label">Tanggal</label>
<input type="date" name="date" id="date" class="form-control" required>
</div>
<div class="col-md-12 mb-3">
<label for="action" class="form-label">Keterangan</label>
<select id="action" name="action" class="form-select" required>
<option selected disabled value="">Pilih salah satu...</option>
<option value="Deposit">Deposit</option>
<option value="Penarikan">Penarikan</option>
</select>
</div>
<div class="col-md-12 mb-3">
<label for="amount" class="form-label">Jumlah</label>
<input type="number" class="form-control" name="amount" id="amount" required>
</div>
<div class="row">
<div class="col-md-6 text-center mb-3">
<button class="btn btn-primary w-100" id="btn1" type="button" onclick="save()">Lihat riwayat transaksi </button>
<button class="btn btn-primary w-100" id="btn2" type="button" style="display: none" disabled>
<span class="spinner-border spinner-border-sm" role="status"></span> Mencari...</button>
</div>
<div class="col-md-6 text-center mb-3">
<button type="submit" class="btn btn-success w-100">Simpan</button>
</div>
</div>
</section>
</div>
</form>
</div>
<div class="container" id="showtable">
<table id="example" class="table " style="width:100%">
<thead class="bg-primary text-white"></thead>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Daftarkan Anggota Baru</h1>
<button type="button" class="btn-close" id="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="form">
<div class="col-md-12 mb-3">
<label for="fname" class="form-label">Nama</label>
<input type="text" class="form-control" name="fname" id="fname" required>
</div>
<div class="col-md-12 mb-3">
<label for="money" class="form-label">Jumlah Deposit Pertama</label>
<input type="number" class="form-control" name="money" id="money" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" onclick="register()">Simpan Data</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$.LoadingOverlay("show");
// Hide it after 1 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 1000);
});
window.onload = () => {
//$.LoadingOverlay('show')
document.querySelector('#display').style = "display: none"
document.querySelector('#showtable').style = "display: none"
}
document.querySelector('#myForm').addEventListener('submit', function (e) {
e.preventDefault()
google.script.run.withSuccessHandler((obj) => {
document.querySelector('#showtable').style = "display: none"
console.log(obj.result)
console.log(obj.amount)
const fullName = obj.fullName
const date = new Date()
const today = date.toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric', })
const action = obj.action
const amount = obj.amount
const lastMoney = obj.lastMoney
if (obj.result == 'ok') {
var swal_html = `
<div class="panel" style="font-weight:bold">
<table class="table table-striped">
<tr>
<th scope="col">Nama</th>
<td>${fullName}</td>
</tr>
<tr>
<th scope="col">Tanggal Transaksi</th>
<td>${today}</td>
</tr>
<tr>
<th scope="col">${action}</th>
<td>${amount}</td>
</tr>
<tr>
<th scope="col">Saldo</th>
<td>${lastMoney}</td>
</tr>
</table>
</div>`
Swal.fire({ title: "Laporan", icon: 'success', html: swal_html });
document.querySelector('#myForm').reset()
} else {
Swal.fire({
position: 'center',
icon: 'error',
title: 'Gagal menyelesaikan transaksi Lebih dari jumlah penarikan',
showConfirmButton: false,
timer: 1500
})
document.querySelector('#myForm').reset()
}
}).recordData(this)
})
function check(selectect) {
$.LoadingOverlay("show");
let name = selectect.value;
console.log(name)
google.script.run.withSuccessHandler((obj) => {
console.log(obj)
$.LoadingOverlay("hide");
Swal.fire({
title: 'Nama ' + obj.name + ' \n Memiliki Saldo ',
text: 'Sebesar ' + obj.lastMoney + ' Rupiah',
confirmButtonText: 'Setuju',
focusConfirm: false,
})
document.querySelector('#display').style = "display: block"
}).checkMoney(name)
}
function register() {
let fname = document.getElementById('fname').value
let money = document.getElementById('money').value
if (fname != '' && money != '') {
$.LoadingOverlay("show");
google.script.run.withSuccessHandler(() => {
$.LoadingOverlay("hide");
reLoad()
Swal.fire({
position: 'center',
icon: 'success',
title: 'Pendaftaran Berhasil',
showConfirmButton: false,
timer: 1500
})
document.getElementById("btn-close").click()
}).registerMember(fname, money)
} else {
$.LoadingOverlay("hide");
Swal.fire({
position: 'center',
icon: 'error',
title: 'Mohon lengkapi informasinya.!!',
showConfirmButton: false,
timer: 1500
})
}
}
function reLoad() {
google.script.run
.withSuccessHandler(function (url) {
window.open(url, '_top');
})
.getScriptURL();
}
function save() {
$("#btn2").show()
$("#btn1").hide()
event.preventDefault()
var user = {}
user.name = document.getElementById("fullName").value
if (user.name != '') {
google.script.run.withSuccessHandler(showDataTable).getData(user)
} else {
$("#btn2").hide()
$("#btn1").show()
Swal.fire({
position: 'center',
icon: 'error',
title: 'Silakan pilih nama!!',
showConfirmButton: false,
timer: 1500
})
}
}
function showDataTable(result) {
document.querySelector('#showtable').style = "display: block"
$("#btn2").hide()
$("#btn1").show()
if (result.length > 0) {
Swal.fire({
position: 'center',
icon: 'success',
// title: 'menemukan informasi',
showConfirmButton: false,
timer: 1500
})
let table = $('#example').DataTable({
data: result,
destroy: true,
searching: false,
"scrollX": true,
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'informasi dari ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
columns: [
{ 'title': 'Nama' },
{ 'title': 'Tanggal Transaksi' },
{ 'title': 'Daftar' },
{ 'title': 'Jumlah' },
{ 'title': 'Saldo' },
],
});
} else {
Swal.fire({
position: 'center',
icon: 'error',
title: 'Belum ada riwayat transaksi.!!',
showConfirmButton: false,
timer: 1500
})
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.05.22.23 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>
</html>
8. Klik tombol Terapkan/Deploy lalu klik Deployment baru/New Deployment.
9. Pastikan jenis yang dipilih adalah Aplikasi web dan hak aksesnya adalah Siapa saja/Anyone lalu Terapkan/Deploy.
10. Klik atau salin Url yang sudah di Deploy.
SELESAI !!!
