#JP74 Membuat Website Multi User dan Menu Iframe URL Simple

byJavabitpro

Membuat Website Multi User dan Menu Hanya Menggunakan URL Iframe Dengan Mudah Menggunakan Google Apps Script



1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy di atas terdapat Sheet1 dengan kolom :

  • USERNAME : Isi/sesuaikan Username untuk Login
  • PASSWORD : Isi/sesuaikan Password untuk Login
  • URL 1 : Isi dengan URL yang dimana akan menjadi menu 1
  • URL 2 : Isi dengan URL yang dimana akan menjadi menu 2


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


4. Pada lembar kerja Apps Script terdapat file default yaitu :
  • Code.gs
  • loginPage.html
  • css.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 Javabitpro.com
 // Youtube : Javabitpro
 //----------------------
 function doGet() {
  return HtmlService.createTemplateFromFile('loginPage').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

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


function checkLogin(username, password) {
  var sheet = SpreadsheetApp.openById('ID_SPREADSHEET').getSheetByName('NAME_SHEET');//Sesuaikan ID Spreadsheet dan Nama Sheet
  var data = sheet.getDataRange().getValues();
  
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == username && data[i][1] == password) {
      return { success: true, index: i };
    }
  }
  
  return { success: false };
}

function getUrls(username) {
  var sheet = SpreadsheetApp.openById('ID_SPREADSHEET').getSheetByName('NAME_SHEET');//Sesuaikan ID Spreadsheet dan Nama Sheet
  var data = sheet.getDataRange().getValues();
  
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == username) {
      return { url1: data[i][2], url2: data[i][3] };
    }
  }
  
  return { url1: '', url2: '' };
}
function logout() {
  var output = HtmlService.createHtmlOutputFromFile('loginPage')
    .setTitle('Javabitpro')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Sesuaikan ID-Spreadsheet dan nama Sheet.


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

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

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <!-- 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('css')?>
  <?!= include('visit')?>
</head>

<body>
  <div id="login">
      <div class="login-root">
    <div class="box-root flex-flex flex-direction--column" style="min-height: 100vh;flex-grow: 1;">
      <div class="loginbackground box-background--white padding-top--64">
        <div class="loginbackground-gridContainer">
          <div class="box-root flex-flex" style="grid-area: top / start / 8 / end;">
            <div class="box-root" style="background-image: linear-gradient(white 0%, rgb(247, 250, 252) 33%); flex-grow: 1;">
            </div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 4 / 2 / auto / 5;">
            <div class="box-root box-divider--light-all-2 animationLeftRight tans3s" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 6 / start / auto / 2;">
            <div class="box-root box-background--blue800" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 7 / start / auto / 4;">
            <div class="box-root box-background--blue animationLeftRight" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 8 / 4 / auto / 6;">
            <div class="box-root box-background--gray100 animationLeftRight tans3s" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 2 / 15 / auto / end;">
            <div class="box-root box-background--cyan200 animationRightLeft tans4s" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 3 / 14 / auto / end;">
            <div class="box-root box-background--blue animationRightLeft" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 4 / 17 / auto / 20;">
            <div class="box-root box-background--gray100 animationRightLeft tans4s" style="flex-grow: 1;"></div>
          </div>
          <div class="box-root flex-flex" style="grid-area: 5 / 14 / auto / 17;">
            <div class="box-root box-divider--light-all-2 animationRightLeft tans3s" style="flex-grow: 1;"></div>
          </div>
        </div>
      </div>
      <div class="box-root padding-top--24 flex-flex flex-direction--column" style="flex-grow: 1; z-index: 9;">
        <div class="box-root padding-top--48 padding-bottom--24 flex-flex flex-justifyContent--center">
          <h1><a href="https://www.javabitpro.com/" rel="dofollow">JAVABITPRO</a></h1>
        </div>
        <div class="formbg-outer">
          <div class="formbg">
            <div class="formbg-inner padding-horizontal--48">
              <span class="padding-bottom--15">Silahkan Login</span>
              <form id="stripe-login">
                <div class="field padding-bottom--24">
                  <label for="username">Username</label>
                   <input type="text" id="username" name="username" required>
                </div>
                <div class="field padding-bottom--24">
                  <div class="grid--50-50">
                    <label for="password">Password</label>
                  </div>
                  <input type="password" id="password" name="password" required>
                </div>
               <div class="buttons">
                <button class="btn-hover color-9" type="button"  onclick="attemptLogin()">LOGIN</button>
                </div>
               
              </form>
            </div>
          </div>
          <div class="footer-link padding-top--24">
             <div class="listing padding-top--24 padding-bottom--24 flex-flex center-center">
              <span><a>© Javabitpro 2024</a></span>
              <span><a>Free Source Code</a></span>
              <span><a>Privacy & terms</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  </div>

<div id="dashboard" style="background-color: #f0f0f0; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhuokn2FsWEv0stmc-y98DYtX5YxQrOFFo8SuOQhVAgMqHW8JTGT25DwBzIgVmrlHsuWpDkNvlFRX_N1cSqf7MN7EioFS0MQ9XksWhAfSXp8cbb91nr8WFC5iQCk4zS20by0dPftGeJAlTjI9Gb3Gg8KJygs2iJ9qxjAlhxjKYimvVppgEb8DBs8c5EQ/s16000/Abstract_White_Background_HD_motion_graphics_background_loop_White_video_Royalty_Free_Footages.gif'); background-size: cover;">
    <div id="header" style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #3498db; color: #fff; box-shadow:  0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
      <div style="display: flex; align-items: center;">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8B_nPqW3IXcEHCrI7xrh-sqJTMHP8IUzgXSIZhH6-y04PdmOsunTJUWXZGsiHVUDt1fBvhMdDltzihl6hq0rZT8SO1EgCu7LgzQXfxlP_7tbeuekfm0gZqvA8MLV0QpyFEc2e1VsIRt7SDhZaDFFTwYX_vdSWEjS15Z_kyKeC-mKyuWxfkQEPOP0UD8/s320/Untitled%20design.gif" alt="Logo" style="height: 50px; width: auto;">
        <h3 id="dashboardHeader" style="margin-left: 10px;">Dashboard-</h3>
      </div>
      <div>
        <button class="btn btn-success btn-sm" onclick="showIframe(1)">Menu 1</button>
        <button class="btn btn-warning btn-sm" onclick="showIframe(2)">Menu 2</button>
        <button class="btn btn-danger btn-sm" onclick="showLogoutModal()">Logout</button>
      </div>
    </div>
  
  <br>
  <iframe id="iframeContainer" width="100%" height="900" frameborder="0" style="border:0;"></iframe>
</div>

  <!-- Loading Modal -->
  <div class="modal" tabindex="-1" role="dialog" id="loadingModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body text-center">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <p class="mt-2">Logging in...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Logout Modal -->
  <div class="modal" tabindex="-1" role="dialog" id="logoutModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Logout Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Apakah yakin anda akan keluar?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-danger" onclick="logout()">Logout</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    function attemptLogin() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      $('#loadingModal').modal('show');

      google.script.run
        .withSuccessHandler(function (result) {
          if (result.success) {
            showDashboard(result.index,username);
          } else {
            alert("Login Ditolak. Silahkan Cek Username dan Password.");
            $('#loadingModal').modal('hide');
          }
        })
        .checkLogin(username, password);
    }

 function showDashboard(index, username) {
      document.getElementById("dashboardHeader").innerText = 'Dashboard for ' + username;
      document.getElementById("login").style.display = "none";
      document.getElementById("dashboard").style.display = "block";

      google.script.run
        .withSuccessHandler(function (urls) {
          document.getElementById("iframeContainer").src = urls.url1;
          $('#loadingModal').modal('hide');
        })
        .getUrls(index);
    }

     function showIframe(buttonNumber) {
    var username = document.getElementById("username").value;

    google.script.run
      .withSuccessHandler(function (urls) {
        var iframeSrc;
        if (buttonNumber === 1) {
          iframeSrc = urls.url1;
        } else if (buttonNumber === 2) {
          iframeSrc = urls.url2;
        } 
        document.getElementById("iframeContainer").src = iframeSrc;
      })
      .getUrls(username);
  }

    function showLogoutModal() {
      $('#logoutModal').modal('show');
    }

    function logout() {
      $('#logoutModal').modal('hide');

      $('#loadingModal').modal('show');

      google.script.run
        .withSuccessHandler(function () {
          document.getElementById("login").style.display = "block";
          document.getElementById("dashboard").style.display = "none";
          $('#loadingModal').modal('hide');
        })
        .logout();
         
    }
  </script>
</body>

</html>


7. Copy dna pastekan script di bawah ini ke css.html


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

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <link href="https://raw.githack.com/javabitpro/buttoncss/main/bootstrap.min.css" rel="stylesheet" >
<link href="https://raw.githack.com/javabitpro/buttoncss/main/buttons.css" rel="stylesheet" >
<link href="https://raw.githack.com/javabitpro/buttoncss/main/style.css" rel="stylesheet" >
<style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    input {
      margin-bottom: 10px;
    }

    #dashboard {
      display: none;
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
        * {
  padding: 0;
  margin: 0;
  color: #1a1f36;
  box-sizing: border-box;
  word-wrap: break-word;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}
body {
    min-height: 100%;
    background-color: #ffffff;
}
h1 {
    letter-spacing: -1px;
}
h3 {
  color: white;
}
a {
  color: #5469d4;
  text-decoration: unset;
}
.login-root {
    background: #fff;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
.loginbackground {
    min-height: 692px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
}
.flex-flex {
    display: flex;
}
.align-center {
  align-items: center; 
}
.center-center {
  align-items: center;
  justify-content: center;
}
.box-root {
    box-sizing: border-box;
}
.flex-direction--column {
    -ms-flex-direction: column;
    flex-direction: column;
}
.loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}
.box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
}
.box-background--blue {
    background-color: #5469d4;
}
.box-background--white {
  background-color: #ffffff; 
}
.box-background--blue800 {
    background-color: #212d63;
}
.box-background--gray100 {
    background-color: #e3e8ee;
}
.box-background--cyan200 {
    background-color: #7fd3ed;
}
.padding-top--64 {
  padding-top: 64px;
}
.padding-top--24 {
  padding-top: 24px;
}
.padding-top--48 {
  padding-top: 48px;
}
.padding-bottom--24 {
  padding-bottom: 24px;
}
.padding-horizontal--48 {
  padding: 48px;
}
.padding-bottom--15 {
  padding-bottom: 15px;
}


.flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.formbg {
    margin: 0px auto;
    width: 100%;
    max-width: 448px;
    background: white;
    border-radius: 4px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}
span {
    display: block;
    font-size: 20px;
    line-height: 28px;
    color: #1a1f36;
}
label {
    margin-bottom: 10px;
}
.reset-pass a,label {
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}
.grid--50-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: rgb(84, 105, 212);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
                rgb(84, 105, 212) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px; 
    box-shadow: unset;
    min-height: unset;
}
.field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}
a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
}
.footer-link span {
    font-size: 14px;
    text-align: center;
}
.listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
}

.animationRightLeft {
  animation: animationRightLeft 2s ease-in-out infinite;
}
.animationLeftRight {
  animation: animationLeftRight 2s ease-in-out infinite;
}
.tans3s {
  animation: animationLeftRight 3s ease-in-out infinite;
}
.tans4s {
  animation: animationLeftRight 4s ease-in-out infinite;
}

@keyframes animationLeftRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translateX(0px);
  }
} 

@keyframes animationRightLeft {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 1%;
    text-align: center;
}

.btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}
.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
  </style>

8. Copy dan pastekan script di bawah ini ke 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>


9. Klik ikon Save


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


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


12. Klik atau salin URL yang sudah di Deploy.


SELESAI !!!







Tags:
Previous Post Next Post

Promo