#JP86 Input Data Dilengkapi Dengan Validasi Admin dan Registrasi User

byJavabitpro

Input Data Dilengkapi Dengan Validasi Admin dan Registrasi User



1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy di atas terdapat 2 sheet yaitu sheet Data dan sheet Login


3. Pada sheet Data terdapat beberapa kolom untuk menyimpan rincian data.


4. Pada sheet Login terdapat beberapa kolom untuk menyimpan data user.


5. Buatlah lembar kerja Apps Script, dengan cara klik Ektensi/Extensions lalu pilih Apps Script.


6. Pada lembar kerja Apps Script, terdapat 4 file default yaitu :
  • Code.gs
  • Index.html
  • JavaScript.html
  • Visit.html

7. Copy dan pastekan script di bawah ini ke Code.gs
*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video) 

// Source Code by www.javabitpro.com

 function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function registerUser(id, username, password, nama, status) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var loginSheet = ss.getSheetByName('Login');
  loginSheet.appendRow([id, username, password, nama, status]);
}

function userLogin(username, password) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var loginSheet = ss.getSheetByName('Login');
  
  var data = loginSheet.getDataRange().getValues();
  
  for (var i = 1; i < data.length; i++) {
    if (data[i][1] == username && data[i][2] == password) {
      return { success: true, id: data[i][0], nama: data[i][3], status: data[i][4] };
    }
  }
  return { success: false };
}
function logout() {
  var htmlOutput = HtmlService.createHtmlOutput('<script>google.script.host.close()</script>');
  return htmlOutput;
}

function submitUserData(id, nama, alamat, tanggalLahir) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');

  dataSheet.appendRow([id, nama, alamat, tanggalLahir, '', '']);
}
function loadData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();
  return dataValues;
}

function validateData(id) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');
  var dataValues = dataSheet.getDataRange().getValues();
  for (var i = 1; i < dataValues.length; i++) {
    if (dataValues[i][0] == id) {
      dataSheet.getRange(i + 1, 5).setValue('Tervalidasi'); // Kolom Validasi diisi 'Validasi' sesuai ID
      break;
    }
  }
}

function getUserData(userId) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();

  // Mencari data berdasarkan ID pengguna
  for (var i = 1; i < dataValues.length; i++) {
    if (dataValues[i][0] == userId) {
      return [dataValues[i][1], dataValues[i][2], dataValues[i][3], dataValues[i][4], dataValues[i][5]]; // Mengembalikan Nama, Alamat, Tanggal Lahir, dan Validasi
    }
  }
  return ['', '', '', '']; // Jika ID tidak ditemukan, kembalikan nilai default
}

function updateUserData(id, nama, alamat, tanggalLahir) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');
  var dataValues = dataSheet.getDataRange().getValues();
  
  // Mencari baris yang sesuai dengan ID yang akan diupdate
  for (var i = 1; i < dataValues.length; i++) {
    if (dataValues[i][0] == id) {
      dataSheet.getRange(i + 1, 2).setValue(nama); // Kolom Nama
      dataSheet.getRange(i + 1, 3).setValue(alamat); // Kolom Alamat
      dataSheet.getRange(i + 1, 4).setValue(tanggalLahir); // Kolom Tanggal Lahir
      return;
    }
  }
}

function addKeterangan(id, keterangan) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Data');
  var dataValues = dataSheet.getDataRange().getValues();
  for (var i = 1; i < dataValues.length; i++) {
    if (dataValues[i][0] == id) {
      dataSheet.getRange(i + 1, 6).setValue(keterangan); // Mengisi kolom Keterangan sesuai dengan ID
      break;
    }
  }
}



8. Copy dan pastekan script di bawah ini ke Index.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <?!= include('JavaScript'); ?>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- font-awesome@6.2.0 icon Visit -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <?!= include('Visit')?>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: rgb(0,133,29);
      background: linear-gradient(0deg, rgba(0,133,29,1) 0%, rgba(2,108,1,1) 14%, rgba(255,255,255,1) 100%);
    }
    .form-container {
      max-width: 800px; /* Increased max-width for larger content */
      width: 100%;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: white;
    }
    /* Custom CSS for table */
    #data-table {
      width: 100%;
      border-collapse: collapse;
    }
    #data-table th, #data-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    #data-table th {
      background-color: #f2f2f2;
    }
    .button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 7px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  
}
#loginForm, #registerForm, #adminDashboard, #keteranganForm, #userDashboard {
  text-align: center;
}
.button1 {
  background-color: #04AA6D; 
  color: white; 
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: white;
  color: black;
}
#labelKeterangan {
        color: red; /* Ganti dengan warna yang Anda inginkan */
    }
#labelValidasi {
        color: green; /* Ganti dengan warna yang Anda inginkan */
    }

 /* Menambahkan gaya untuk menyembunyikan elemen */
      .hidden {
        display: none;
      }
      .loader {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap {
    animation: 
		spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
	;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}
@keyframes spin {
    0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}    
  </style>
</head>
<body>
<div class="form-container">
	<div id="loginForm">
		<h2 class="text-center">Login</h2>
		<input type="text" id="loginUsername" class="form-control mb-2" placeholder="Username">
		<input type="password" id="loginPassword" class="form-control mb-2" placeholder="Password">
		<button onclick="userLogin()" class="button button1">Masuk</button>
		<button onclick="showRegistrationForm()" class="button button1">Registrasi</button>
	</div>
	<div id="registerForm" style="display: none;">
		<h2 class="text-center">Registrasi</h2>
		<!-- Hilangkan input untuk ID -->
		<input type="text" id="regUsername" class="form-control mb-2" placeholder="Username" required>
		<input type="password" id="regPassword" class="form-control mb-2" placeholder="Password" required>
		<input type="text" id="regNama" class="form-control mb-2" placeholder="Nama" required>
		<select id="regStatus" class="form-control mb-2" required>
			<option value="Admin">Admin</option> <!-- Matikan Pilihan Admin Jika Tidak Di Perlukan -->
			<option value="User">User</option>
		</select>
		<!-- Panggil fungsi generateID() untuk mengisi ID -->
		<button onclick="registerUser()" class="button button1">Daftar</button>
		<button onclick="showLoginForm()" class="button button1">Kembali ke Login</button>
	</div>
	<div id="userDashboard" style="display: none;">
		<h2 class="text-center">Selamat Datang, <span id="usernameDisplay"></span>!</h2>
		<form id="inputForm">
			<input type="text" id="inputId" class="form-control mb-2" placeholder="ID" disabled>
			<input type="text" id="inputNama" class="form-control mb-2" placeholder="Nama">
			<input type="text" id="inputAlamat" class="form-control mb-2" placeholder="Alamat">
			<input type="text" id="inputTanggalLahir" class="form-control mb-2" placeholder="Tanggal Lahir">
			<!-- Menampilkan input keterangan -->
			<button type="button" id="updateButton" style="display: none;" onclick="updateData()">Update</button>
			<h2 id="labelValidasi" style="display: none;"></h2>
			<h2 id="labelKeterangan" style="display: none;"></h2>
			<button type="button" id="submitButton" onclick="submitData()" class="button button1">Simpan</button>
		</form>
		<button onclick="logout()" class="button button1">Logout</button>
	</div>
	<div id="adminDashboard" style="display: none;">
		<h2 class="text-center">Selamat Datang, <span id="usernameDisplay"></span> (Admin)!</h2>
		<table id="data-table" class="table">
		<thead>
		<tr>
			<th>ID</th>
			<th>Nama</th>
			<th>Alamat</th>
			<th>Tanggal Lahir</th>
			<th>Validasi</th>
			<th>Keterangan</th>
			<th>Aksi</th>
		</tr>
		</thead>
		<tbody></tbody>
		</table>
		<div id="keteranganForm" style="display: none;">
			<h3>Keterangan</h3>
			<textarea id="inputKeterangan" rows="4" cols="50" class="form-control mb-2"></textarea>
			<button id="closeKeteranganButton" class="button button1">Close</button>
			<button id="keteranganSubmitButton" onclick="submitKeterangan()" class="button button1">Submit Keterangan</button>
		</div>
		<button onclick="logout()" class="button button1">Logout</button>
	</div>
</div>
<div class="modal" id="logoutModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Logout Berhasil!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Anda telah berhasil logout.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="registrationSuccessModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Registrasi Berhasil!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Registrasi Anda berhasil.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="loginSuccessModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Login Berhasil!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Anda berhasil login.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="dataSavedModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Data Berhasil Disimpan!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Data Anda berhasil disimpan.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="loginFailedModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Login Gagal!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				 Login gagal. Periksa kembali username dan password Anda.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="dataUpdatedModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Data Berhasil Diperbarui!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Data berhasil diperbarui.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="dataValidatedModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Data Berhasil Divalidasi!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Data berhasil divalidasi.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="keteranganAddedModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Keterangan Berhasil Ditambahkan!</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">Keterangan berhasil ditambahkan.</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
			</div>
		</div>
	</div>
</div>
<div class="modal" id="loadingModal" tabindex="-1" role="dialog">
	<div class="loader">
		<div class="loader-inner">
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
		</div>
	</div>
</div>

  <!-- Bootstrap JS -->
  <script>
  document.getElementById('closeKeteranganButton').addEventListener('click', function() {
    document.getElementById('keteranganForm').style.display = 'none';
  });
</script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>


9. Copy dan pastekan script di bawah ini ke JavaScript.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<script>
     // Fungsi untuk membuat ID dari tanggal dan jam hari ini
  function generateID() {
    var now = new Date();
    var year = now.getFullYear();
    var month = ('0' + (now.getMonth() + 1)).slice(-2);
    var day = ('0' + now.getDate()).slice(-2);
    var hours = ('0' + now.getHours()).slice(-2);
    var minutes = ('0' + now.getMinutes()).slice(-2);
    var seconds = ('0' + now.getSeconds()).slice(-2);
    var id = year + month + day + hours + minutes + seconds;
    return id;
  }

  // Fungsi untuk register pengguna
  function registerUser() {
    $('#loadingModal').modal('show');
    var id = generateID(); // Membuat ID baru
    var username = document.getElementById('regUsername').value;
    var password = document.getElementById('regPassword').value;
    var nama = document.getElementById('regNama').value;
    var status = document.getElementById('regStatus').value;
    
    google.script.run.withSuccessHandler(function(response) {
      $('#loadingModal').modal('hide');
       $('#registrationSuccessModal').modal('show'); // Menampilkan popup registrasi berhasil
      clearRegistrationForm();
    }).registerUser(id, username, password, nama, status);
  }

  function clearRegistrationForm() {
      document.getElementById('regUsername').value = '';
      document.getElementById('regPassword').value = '';
      document.getElementById('regNama').value = '';
      document.getElementById('regStatus').selectedIndex = 0;
    }

    // Fungsi untuk menampilkan dashboard admin
  function showAdminDashboard(username) {
    document.getElementById('loginForm').style.display = 'none';
    document.getElementById('registerForm').style.display = 'none';
    document.getElementById('adminDashboard').style.display = 'block';
    document.getElementById('usernameDisplay').textContent = username;

    // Memuat data dari server setelah dashboard ditampilkan
    google.script.run.withSuccessHandler(function(data) {
      displayData(data); // Menampilkan data dalam tabel
    }).loadData();
  }

  // Fungsi untuk menampilkan data dalam tabel
  function displayData(data) {
    var tbody = document.querySelector('#data-table tbody');
    tbody.innerHTML = ''; // Membersihkan isi tabel sebelum menampilkan data baru

    // Mulai iterasi dari baris kedua (indeks 1)
    for (var i = 1; i < data.length; i++) {
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>' + data[i][0] + '</td>' +
                     '<td>' + data[i][1] + '</td>' +
                     '<td>' + data[i][2] + '</td>' +
                     '<td>' + data[i][3] + '</td>' +
                     '<td>' + data[i][4] + '</td>' +
                     '<td>' + data[i][5] + '</td>' +
                     '<td><button onclick="validateData(' + data[i][0] + ')">Validasi</button>' +
                     '<button onclick="rejectData(' + data[i][0] + ')">Reject</button></td>'; // Menambahkan tombol Reject
      tbody.appendChild(tr);
    }
  }

  // Fungsi untuk reject data
  function rejectData(id) {
    document.getElementById('keteranganForm').style.display = 'block'; // Menampilkan form Keterangan
    // Inisialisasi tombol submit keterangan
    var submitButton = document.getElementById('keteranganSubmitButton');
    submitButton.onclick = function() { // Mengirimkan Keterangan ke server saat tombol Submit ditekan
    $('#loadingModal').modal('show');
      var keterangan = document.getElementById('inputKeterangan').value;
      google.script.run.withSuccessHandler(function() {
        $('#loadingModal').modal('hide');
       $('#keteranganAddedModal').modal('show');
        document.getElementById('keteranganForm').style.display = 'none'; // Menyembunyikan form Keterangan setelah proses selesai
        document.getElementById('inputKeterangan').value = '';
        google.script.run.withSuccessHandler(function(data) {
          displayData(data); // Memuat ulang data setelah Keterangan ditambahkan
        }).loadData();
      }).addKeterangan(id, keterangan);
    };
  }

 // Fungsi untuk validasi data
  function validateData(id) {
    $('#loadingModal').modal('show');
    google.script.run.withSuccessHandler(function() {
      $('#loadingModal').modal('hide');
       $('#dataValidatedModal').modal('show');
      google.script.run.withSuccessHandler(function(data) {
        displayData(data); // Menampilkan data yang sudah diperbarui dalam tabel
      }).loadData(); // Memuat kembali data setelah validasi
    }).validateData(id);
  }



    function showRegistrationForm() {
      document.getElementById('loginForm').style.display = 'none';
      document.getElementById('registerForm').style.display = 'block';
    }

function logout() {
  $('#loadingModal').modal('show');
  google.script.run.withSuccessHandler(function() {
    $('#loadingModal').modal('hide');
    $('#logoutModal').modal('show'); // Menampilkan popup logout
    showLoginForm(); // Menampilkan kembali form login setelah logout
  }).logout();
}
function showLoginForm() {
  document.getElementById('loginForm').style.display = 'block';
  document.getElementById('registerForm').style.display = 'none';
  document.getElementById('userDashboard').style.display = 'none';
  document.getElementById('adminDashboard').style.display = 'none';
  
}
  // Fungsi untuk login pengguna
  function userLogin() {
    $('#loadingModal').modal('show');
    var username = document.getElementById('loginUsername').value;
    var password = document.getElementById('loginPassword').value;
    
    google.script.run.withSuccessHandler(function(result) {
      $('#loadingModal').modal('hide');
      if (result.success) {
        $('#loginSuccessModal').modal('show'); // Menampilkan popup login berhasil
        if (result.status === 'Admin') {
          showAdminDashboard(result.nama);
        } else {
          showUserDashboard(result.nama, result.id); // Mengirimkan ID pengguna yang sedang login ke fungsi showUserDashboard()
        }
      } else {
        $('#loginFailedModal').modal('show'); // Menampilkan popup login gagal
      }
    }).userLogin(username, password);
  }

// Fungsi untuk menampilkan dashboard pengguna
  function showUserDashboard(username, userId) {
    document.getElementById('loginForm').style.display = 'none';
    document.getElementById('registerForm').style.display = 'none';
    document.getElementById('userDashboard').style.display = 'block';
    document.getElementById('usernameDisplay').textContent = username;
    document.getElementById('inputId').value = userId; // Mengisi input ID dengan ID pengguna yang sedang login

    // Memuat data pengguna berdasarkan ID saat ini
    google.script.run.withSuccessHandler(function(userData) {
      document.getElementById('inputNama').value = userData[0];
      document.getElementById('inputAlamat').value = userData[1];
      document.getElementById('inputTanggalLahir').value = userData[2];



// Menampilkan keterangan jika tersedia
    var keteranganLabel = document.getElementById('labelKeterangan');
    if (userData[4] !== '' && userData[4] !== undefined) {
      keteranganLabel.style.display = 'block'; // Menampilkan label keterangan
      keteranganLabel.textContent = 'Keterangan: ' + userData[4]; // Menampilkan nilai keterangan
    } else {
      keteranganLabel.style.display = 'none'; // Menyembunyikan label keterangan jika tidak tersedia
    }

       // Menampilkan validasi jika data telah divalidasi oleh admin
      if (userData[3] === 'Tervalidasi') {
        document.getElementById('labelValidasi').style.display = 'block'; // Menampilkan label validasi
        document.getElementById('labelValidasi').textContent = 'Status: ' + userData[3]; // Menampilkan nilai validasi
        document.getElementById('labelKeterangan').style.display = 'none'; // Menyembunyikan label keterangan jika data telah divalidasi
        document.getElementById('inputNama').disabled = true; // Menonaktifkan input nama jika data telah divalidasi
        document.getElementById('inputAlamat').disabled = true; // Menonaktifkan input alamat jika data telah divalidasi
        document.getElementById('inputTanggalLahir').disabled = true; // Menonaktifkan input tanggal lahir jika data telah divalidasi
        document.getElementById('updateButton').disabled = true; // Menonaktifkan tombol update jika data telah divalidasi
      } else {
        document.getElementById('labelValidasi').style.display = 'none'; // Menyembunyikan label validasi jika data belum divalidasi
      }
      // Jika data sudah ada, tombol "Simpan" disembunyikan dan tombol "Update" ditampilkan
      if (userData[0] !== '') {
        document.getElementById('submitButton').style.display = 'none';
        document.getElementById('updateButton').style.display = 'block';
      }
    }).getUserData(userId);
  }

 // Fungsi untuk menyimpan data baru
  function submitData() {
    $('#loadingModal').modal('show');
    var id = document.getElementById('inputId').value;
    var nama = document.getElementById('inputNama').value;
    var alamat = document.getElementById('inputAlamat').value;
    var tanggalLahir = document.getElementById('inputTanggalLahir').value;
// Tambahkan tanda petik satu di depan tanggal lahir
    tanggalLahir = "'" + tanggalLahir;

    google.script.run.withSuccessHandler(function() {
       $('#loadingModal').modal('hide');
      $('#dataSavedModal').modal('show'); // Menampilkan popup login berhasil
      document.getElementById('inputForm').reset(); // Membersihkan formulir setelah input berhasil
    }).submitUserData(id, nama, alamat, tanggalLahir);
  }

  // Fungsi untuk mengupdate data yang sudah ada
  function updateData() {
    $('#loadingModal').modal('show');
    var id = document.getElementById('inputId').value;
    var nama = document.getElementById('inputNama').value;
    var alamat = document.getElementById('inputAlamat').value;
    var tanggalLahir = document.getElementById('inputTanggalLahir').value;
// Tambahkan tanda petik satu di depan tanggal lahir
    tanggalLahir = "'" + tanggalLahir;

    google.script.run.withSuccessHandler(function() {
      $('#loadingModal').modal('hide');
      $('#dataUpdatedModal').modal('show');
    }).updateUserData(id, nama, alamat, tanggalLahir);
  }
  
  </script>


10. Copy dan pastekan script di bawah ini ke Visit.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<link href="https://cdn.jsdelivr.net/gh/javabitpro/css@main/javabitprovisit.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/watch?v=s9jDQXGsnDU&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=70"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>


11. Klik ikon Save.


12. Klik tombol Terapkan/Deploy lalau pilih Deployment baru/New deployment.


13. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone, dan pilih Terapkan/Deploy.


14. Klik atau salin URL yang sudah di Deploy.


SELESAI !!!








Tags:
Previous Post Next Post

Promo