Sistem Login Unik Menggunakan Numpad (PIN)

1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy di atas terdapat 1 sheet Login dengan kolon PIN dan URL.

Pada kolom PIN silahkan isi pin untuk bisa mengakses URL sesuai baris pada PIN.

3. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.

4. Pada lembar kerja Apps Script terdapat 3 file yaitu :

Code.gs
Page.html
visit.html

5. 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 www.javabitpro.com
function doGet() {
  return HtmlService.createTemplateFromFile('Page').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
        .setFaviconUrl('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHj7zvogZ96zuoYdLKx87C2iYHmwi8hEr7qC_MgAN6qgfKYk721CMQv6w317b4oWlj68S9qdOKHt6ZhG_trYr_nT5rCeTuCyr6MaZpFc7y0vmrnY9S1eKCrgDBJMMn37A30MB95-LkAxLBd61dtfQd7C_dUH-2NdPXOfdSsP4mvBlDTa1U-OaJIdi1Wk/s1600/button-logojp.png'); // Ganti URL favicon sesuai kebutuhan
}

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

function checkLogin(pin) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login');
  var data = sheet.getDataRange().getValues();
  var url = '';

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == pin) {
      url = data[i][1];
      break;
    }
  }

  return url;
}
function onEdit(e) {
  var sheet = e.source.getSheetByName('Login'); // Ganti 'Login' dengan nama sheet Anda

  var range = e.range;
  var cellValue = range.getValue();

  // Periksa apakah perubahan terjadi di kolom A dan baris lebih dari 1 (A2 dan seterusnya)
  if (range.getColumn() == 1 && range.getRow() > 1) {
    // Validasi apakah nilai adalah angka
    if (!isNumber(cellValue)) {
      Browser.msgBox('Harap masukkan angka pada kolom A!');
      range.setValue(''); // Kosongkan nilai jika bukan angka
    } else {
      // Validasi apakah nilai sudah ada di kolom A
      if (isDuplicate(sheet, cellValue)) {
        Browser.msgBox('PIN Sudah ada, Buat Pin Baru!');
        range.setValue(''); // Kosongkan nilai jika duplikat
      }
    }
  }
}

// Fungsi bantu untuk memeriksa apakah nilai adalah angka
function isNumber(value) {
  return !isNaN(parseFloat(value)) && isFinite(value);
}

6. Copy dan pastekan script di bawah ini ke Page.html

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

<!-- Source Code www.javabitpro.com -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Login Form</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
       <!-- 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 {
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #d7f2f7; /* Bootstrap background color */
      }
      
      .login-form {
        max-width: 400px;
        padding: 20px;
        border: 1px solid #dee2e6; /* Bootstrap border color */
        border-radius: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        background-color: #f7f7f7; /* Bootstrap background color */
      }
      .numpad {
        display: grid;
        grid-template-columns: repeat(3, 50px);
        grid-gap: 10px;
        margin-bottom: 20px;
      }
      .numpad button {
        width: 50px;
        height: 50px;
        font-size: 16px;
      }
      .submit-button, .delete-button {
        padding: 10px;
        font-size: 18px;
      }
      
    </style>
  </head>
  <body>
    <div class="login-form">
      <h2 class="text-center mb-4">Masukkan PIN Ujian</h2>
      <form id="loginForm">
        <div class="form-group">
          <label for="pin">PIN:</label>
          <div class="input-group">
            <input type="password" class="form-control" id="pin" name="pin" readonly>
            <div class="input-group-append">
              <button type="button" class="btn btn-outline-secondary" onclick="toggleShowPassword()">
                <i id="showPasswordIcon" class="fas fa-eye"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="numpad">
          <button type="button" class="btn btn-secondary" onclick="appendToPin(1)">1</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(2)">2</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(3)">3</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(4)">4</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(5)">5</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(6)">6</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(7)">7</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(8)">8</button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(9)">9</button>
          <button type="button" class="btn btn-danger delete-button" onclick="deleteLastCharacter()">
          <i class="fas fa-backspace"></i>
          </button>
          <button type="button" class="btn btn-secondary" onclick="appendToPin(0)">0</button>
          <button type="button" class="btn btn-primary submit-button" onclick="submitForm()">
          <i class="fas fa-check"></i>
          </button>
        </div>
        
      </form>
    </div>

    <script>
      var pinInput = document.getElementById('pin');
      var showPasswordIcon = document.getElementById('showPasswordIcon');

      function appendToPin(value) {
        pinInput.value += value;
      }

      function toggleShowPassword() {
        if (pinInput.type === 'password') {
          pinInput.type = 'text';
          showPasswordIcon.className = 'fas fa-eye-slash'; // Eye closed icon
        } else {
          pinInput.type = 'password';
          showPasswordIcon.className = 'fas fa-eye'; // Eye open icon
        }
      }

      function deleteLastCharacter() {
        var currentPin = pinInput.value;
        pinInput.value = currentPin.slice(0, -1);
      }

      function submitForm() {
        var pin = pinInput.value;

        google.script.run.withSuccessHandler(function(url) {
          if (url) {
            window.location.href = url;
            // Reset PIN after successful login
            pinInput.value = '';
          } else {
            alert('PIN salah. Coba lagi.');
            // Reset PIN after unsuccessful login
            pinInput.value = '';
          }
        }).checkLogin(pin);
      }
    </script>
  </body>
</html>

7. Copy dan pastekan script di bawah ini visit.html

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

<link href="https://raw.githack.com/javabitpro/css/main/javabitprocssloginjp70.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>

8. Klik ikon Save.

9. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.

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

11. Klik atau salin URL yang sudah di Deploy.

SELESAI !!!

#JP76 Sistem Login Unik Menggunakan Numpad (PIN)

Sistem Login Unik Menggunakan Numpad (PIN)

Promo

Contact Form