#JP97 Memberi Password Pada Folder Google Drive V2 | Photography Edition | Responsive

byJavabitpro

Memberi Password Pada Folder Google Drive V2 | Photography Edition




1. Copy Spreadsheet (Klik disini)

2. Pada Spreadsheet yang telah di copy di atas, terdapat 1 sheet Data dan beberapa kolom yaitu :

  • Kolom Password
  • Kolom URL Folder Google Drive
  • Kolom Nama
  • Kolom Tanggal


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


4. Pada lembar kerja Apps Script terdapat 3 file default yaitu :
  • Code.gs
  • Index.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 by www.javabitpro.com

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
        .setFaviconUrl('https://i.imgur.com/thmO7Xv.png'); 
        
}

function checkPassword(password) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var data = sheet.getDataRange().getValues();
  
  // Loop through the data starting from row 2 (skipping the header)
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === password) { // Check if the password matches
      return data[i][1]; // Return the URL if matched
    }
  }
  return null; // Return null if no match
}

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


6. Copy dan pastekan script di bawah ini Index.html


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

<!DOCTYPE html>
<html>
<head>
	<title>Share Google Drive</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/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>
    *{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}
.wave{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	z-index: -1;
}
.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}
.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}
.img img{
	width: 500px;
}
form{
	width: 360px;
}
.login-content img{
    height: 100px;
}
.login-content h2{
	margin: 15px 0;
	color: #333;
	text-transform: uppercase;
	font-size: 2.9rem;
}
.login-content .input-div{
	position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
	margin-top: 0;
}
.i{
	color: #d9d9d9;
	display: flex;
	justify-content: center;
	align-items: center;
}
.i i{
	transition: .3s;
}
.input-div > div{
    position: relative;
	height: 45px;
}
.input-div > div > h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
}
.input-div:before, .input-div:after{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background-color: #625bff;
	transition: .4s;
}
.input-div:before{
	right: 50%;
}
.input-div:after{
	left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
	width: 50%;
}
.input-div.focus > div > h5{
	top: -15px;
	font-size: 15px;
}
.input-div.focus > .i > i{
	color: #625bff;
}
.input-div > div > input{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: none;
	padding: 0.5rem 0.7rem;
	font-size: 1.2rem;
	color: #555;
	font-family: 'poppins', sans-serif;
}
.input-div.pass{
	margin-bottom: 4px;
}
a{
	display: block;
	text-align: right;
	text-decoration: none;
	color: #999;
	font-size: 0.9rem;
	transition: .3s;
}
a:hover{
	color: #625bff;
}
.btn{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	outline: none;
	border: none;
	background-image: linear-gradient(to right, #625bff, #2bc791, #2bc791);
	background-size: 200%;
	font-size: 1.2rem;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
	margin: 1rem 0;
	cursor: pointer;
	transition: .5s;
}
.btn:hover{
	background-position: right;
}


@media screen and (max-width: 1050px){
	.container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1000px){
	form{
		width: 290px;
	}

	.login-content h2{
        font-size: 2.4rem;
        margin: 8px 0;
	}

	.img img{
		width: 400px;
	}
}

@media screen and (max-width: 900px){
	.container{
		grid-template-columns: 1fr;
	}

	.img{
		display: none;
	}

	.wave{
		display: none;
	}

	.login-content{
		justify-content: center;
	}
}
.show-password {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.show-password input {
    margin-right: 10px;
}

.show-password label {
    color: #555;
    font-size: 0.9rem;
}

.modal-content {
  border: none;
  border-radius: 0.5rem;
}
.spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.4em;
  border-radius: 50%;
  border-top-color: #625bff;
}


    </style>
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script> 
</head>
<body>
	 <img decoding="async" class="wave" src="https://cdn.jsdelivr.net/gh/javabitpro/javabitproimage@main/Javabitprowavepng3.png">
	 <div class="container">
		 <div class="img">
			 <img decoding="async" src="https://cdn.jsdelivr.net/gh/javabitpro/javabitproimage@main/Javabitprowavepng4.png">
		 </div>
		 <div class="login-content">
			 <form id="passwordForm">
				 <img decoding="async" src="https://cdn.jsdelivr.net/gh/javabitpro/javabitproimage@main/Javabitprowave3.png">
				 <h2 class="title">Welcome</h2>
				<div class="input-div pass">
    <div class="i">
        <i class="fas fa-lock"></i>
    </div>
    <div class="div">
        <h5>Password</h5>
        <input type="password" id="password" class="form-control">
    </div>
</div>
<div class="show-password">
    <input type="checkbox" id="show-password">
    <label for="show-password">Show Password</label>
</div>
				<input type="submit" class="btn" value="Login">
			 </form>
		 </div>
     
	 </div>

   <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        <p>Loading, please wait...</p>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="errorModalLabel">Error</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Invalid password. Please try again.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script>
document.getElementById("passwordForm").addEventListener("submit", function(e) {
  e.preventDefault();
  var password = document.getElementById("password").value;

  // Tampilkan modal loading
  var loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'), {
    backdrop: 'static',
    keyboard: false
  });
  loadingModal.show();
  // Source Code by www.javabitpro.com
  google.script.run.withSuccessHandler(function(url) {
    loadingModal.hide(); // Sembunyikan modal loading
    if (url) {
      window.open(url, '_blank'); // Buka URL di tab baru
    } else {
      // Tampilkan modal kesalahan
      var errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
      errorModal.show();
    }
    document.getElementById("passwordForm").reset(); // Hapus formulir
  }).checkPassword(password);
});





     const passwordInput = document.getElementById('password');
    const showPasswordCheckbox = document.getElementById('show-password');

    showPasswordCheckbox.addEventListener('change', function() {
        if (this.checked) {
            passwordInput.type = 'text';
        } else {
            passwordInput.type = 'password';
        }
    });

    // Fungsi untuk mengelola kelas fokus
    const inputs = document.querySelectorAll(".form-control");

    function AddClass() {
        let parent = this.parentNode.parentNode;
        parent.classList.add("focus");
    }

    function RemoveClass() {
        let parent = this.parentNode.parentNode;
        if (this.value == '') {
            parent.classList.remove("focus");
        }
    }

    inputs.forEach(input => {
        input.addEventListener("focus", AddClass);
        input.addEventListener("blur", RemoveClass);
    });
  </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://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>


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 klik Terapkan/Deploy.


11. Lakukan otorisasi perizinan akses jika di perlukan. (Tutorial ada di dalam video)


12. Silahkan salin atau klik URL yang sudah di Deploy.

Gunakan Shortlink atau Generator Barcode untuk membagikan website tersebut ke client.



SELESAI !!!







Tags:
Previous Post Next Post

Promo