Sistem Member Blogger Gratis Database Google Sheets

Panduan Lengkap: Membuat Member Area di Blogger dengan Google Sheets

Ingin memiliki fitur login dan pendaftaran member di Blogger secara gratis? Tutorial ini akan memandu Anda membangun sistem keanggotaan menggunakan Google Sheets sebagai database. Sistem ini dirancang aman dengan enkripsi password sederhana dan tampilan yang sangat responsif untuk pengguna mobile.

Langkah 1: Konfigurasi Database (Google Apps Script)

Buat spreadsheet baru dan berikan nama kolom pada baris pertama: Username, Email, Password Hash, Waktu Pendaftaran, Status. Masuk ke menu Extensions > Apps Script dan masukkan kode berikut tanpa merubahnya:

File: Google Apps Script.txt

const SPREADSHEET_ID = "12OS0c17Aazr88VRZCXUp7aZGtBvIjHU4_61gjg4-ReA"; // Opsional jika script terikat ke sheet
const SHEET_NAME = "Sheet1";

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  
  if (data.action === "register") {
    // Cek apakah email sudah ada
    const emails = sheet.getRange(2, 2, sheet.getLastRow(), 1).getValues().flat();
    if (emails.includes(data.email)) {
      return ContentService.createTextOutput("Email sudah terdaftar").setMimeType(ContentService.MimeType.TEXT);
    }
    
    // Samarkan password (Base64)
    const encodedPass = Utilities.base64Encode(data.password);
    
    sheet.appendRow([data.username, data.email, encodedPass, new Date(), "Pending"]);
    return ContentService.createTextOutput("success_reg").setMimeType(ContentService.MimeType.TEXT);
  }
  
  if (data.action === "login") {
    const rows = sheet.getDataRange().getValues();
    const encodedPass = Utilities.base64Encode(data.password);
    
    for (let i = 1; i < rows.length; i++) {
      if (rows[i][1] === data.email && rows[i][2] === encodedPass) {
        if (rows[i][4] === "Approve") {
          return ContentService.createTextOutput("success_login").setMimeType(ContentService.MimeType.TEXT);
        } else {
          return ContentService.createTextOutput("Akun belum di-approve admin").setMimeType(ContentService.MimeType.TEXT);
        }
      }
    }
    return ContentService.createTextOutput("Email atau Password salah").setMimeType(ContentService.MimeType.TEXT);
  }
}

Langkah 2: Memasang Form Login & Daftar di Blogger

Salin seluruh kode di bawah ini dan tempelkan ke postingan atau halaman Blogger Anda dalam mode HTML untuk menampilkan form pendaftaran.

File: HTML & CSS Form.txt

<div id="auth-container">
  <div class="auth-box">
    <div id="form-header">
      <h2 id="form-title">Daftar Akun</h2>
      <p id="form-subtitle">Silahkan isi data diri Anda</p>
    </div>

    <form id="register-form">
      <input type="text" id="reg-user" placeholder="Username" required>
      <input type="email" id="reg-email" placeholder="Email" required>
      <input type="password" id="reg-pass" placeholder="Password" required>
      <button type="submit" class="btn-primary">Daftar Sekarang</button>
      <p class="switch-text">Sudah punya akun? <a href="#" onclick="toggleForm()">Login</a></p>
    </form>

    <form id="login-form" style="display:none;">
      <input type="email" id="log-email" placeholder="Email" required>
      <input type="password" id="log-pass" placeholder="Password" required>
      <button type="submit" class="btn-primary">Masuk</button>
      <p class="switch-text">Belum punya akun? <a href="#" onclick="toggleForm()">Daftar</a></p>
    </form>
  </div>
</div>

<style>
/* Scoped CSS agar tidak bentrok dengan template Blogger */
#auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  min-height: 500px;
  border-radius: 15px;
}
.auth-box {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
  /* Menyesuaikan mobile lebar */
  box-sizing: border-box;
}
#form-header { text-align: center; margin-bottom: 25px; }
#form-title { color: #27ae60; margin: 0;
font-size: 24px; }
#form-subtitle { color: #7f8c8d; font-size: 14px; }
#auth-container input {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px; /* Mencegah auto-zoom di iOS */
}
.btn-primary {
  width: 100%;
padding: 12px;
  background: linear-gradient(to right, #2ecc71, #27ae60);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
transition: 0.3s;
}
.btn-primary:hover { opacity: 0.9; }
.switch-text { text-align: center; font-size: 13px; margin-top: 15px; }
.switch-text a { color: #27ae60;
text-decoration: none; font-weight: bold; }
</style>

<script>
const SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwB68iaeuktz3E3dclTywucKujqPvxOnl8-DN6GJpu0-xQ61McHFox_6GdQm45OxrDLDQ/exec";
const MEMBER_URL = "https://lubisteknisiindonesia.blogspot.com/p/halaman-member.html";

function toggleForm() {
  const regForm = document.getElementById('register-form');
const logForm = document.getElementById('login-form');
  const title = document.getElementById('form-title');
  
  if(regForm.style.display === "none") {
    regForm.style.display = "block";
logForm.style.display = "none";
    title.innerText = "Daftar Akun";
  } else {
    regForm.style.display = "none";
    logForm.style.display = "block";
title.innerText = "Login Member";
  }
}

// Handler Registrasi
document.getElementById('register-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(SCRIPT_URL, {
    method: 'POST',
    body: JSON.stringify({
      action: 'register',
      username: document.getElementById('reg-user').value,
      email: document.getElementById('reg-email').value,
      password: document.getElementById('reg-pass').value
    })
  }).then(res => res.text()).then(res => {
    if(res === "success_reg") alert("Pendaftaran Berhasil! Tunggu persetujuan admin.");
    else alert(res);
  });
});
// Handler Login
document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch(SCRIPT_URL, {
    method: 'POST',
    body: JSON.stringify({
      action: 'login',
      email: document.getElementById('log-email').value,
      password: document.getElementById('log-pass').value
    })
  }).then(res => res.text()).then(res => {
    if(res === "success_login") window.location.href = MEMBER_URL;
    else alert(res);
  });
});
</script>

Berbagi :