Membuat halaman khusus Member - Code Blogger Firebase (Database)

hi, kali ini admin akan membuat halaman khusus member, yaitu halaman khusus member1 dan admin, halaman ini adalah untuk menentukan user akan memilih akan menjadi member1 atau admin dimana nantinya user akan bisa mengakses halaman khusus tersebut dimana member yang lain tidak akan bisa mengakses halaman tersebut. code ini bisa anda tempatkan di halaman page ataupun post atau di widget javascript dihalaman layout. mohon diperhatikan cara tata letak penempatan kode kode dibawah ini
buat halaman baru/page di blogger dan copy paste kode berikut:
Beri judul page tersebut dan simpan

<div id="userListContainer">

  <!--Tambahkan kolom lain sesuai kebutuhan--><!--Data pengguna akan ditampilkan di sini--><table id="userListTable">

    <thead>

      <tr>

        <th>User ID</th>

        <th>Name</th>

        <th>Email</th>

        <th>Registration Date</th>

        

      </tr>

    </thead>

    <tbody id="userListBody">

      

    </tbody>

  </table>

</div>

<script>

 

  // Dapatkan referensi ke elemen tbody di tabel

  var userListBody = document.getElementById('userListBody');

  // Dapatkan data pengguna saat halaman dimuat

  firebase.auth().onAuthStateChanged(function (user) {

    if (user) {

      // Hapus data sebelumnya jika ada

      userListBody.innerHTML = '';

      // Tambahkan baris baru untuk setiap pengguna

      var newRow = userListBody.insertRow();

      newRow.insertCell().textContent = user.uid;

      newRow.insertCell().textContent = user.displayName || 'N/A';

      newRow.insertCell().textContent = user.email || 'N/A';

      // Dapatkan tanggal pertama kali terdaftar

      var creationTime = new Date(user.metadata.creationTime);

      newRow.insertCell().textContent = creationTime.toDateString();

      // Tambahkan kolom lain sesuai kebutuhan

      const displayName = user.displayName;

	  document.getElementById('namaUser').value = displayName;

  

   	  const email = user.email;

      document.getElementById('nomorUser').value = email;

    } else {

      // Pengguna tidak diotentikasi

     userListBody.innerHTML = '<tr><td colspan="4">User not authenticated. Please <a href="/p/pasang-lowongan-kerja.html">Login first</a></td></tr>';
      //window.location.href = '/p/pasang-lowongan-kerja.html';

    }

  });

</script>

    <style>
        .custom-form {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
            text-align: left;
        }

        .custom-form label {
            display: block;
            margin-bottom: 8px;
            color: #495057;
        }

        .custom-form input,
        .custom-form select,
        .custom-form textarea,
        .custom-form file {
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            box-sizing: border-box;
            border: 1px solid #ced4da;
            border-radius: 10px;
        }

        .custom-form textarea {
            resize: vertical;
        }

        .custom-form button {
            background-color: #28a745;
            color: #ffffff;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .custom-form button:hover {
            background-color: #218838;
        }

        /* Responsive Styling */
        @media only screen and (max-width: 600px) {
            .custom-form {
                padding: 15px;
            }
        }
    </style>

<form class="custom-form" id="addUserForm">
    <fieldset>
        <label>Nama:</label>
        <input id="namaUser" name="name" readonly="" required="" type="text" />

        <label>Alamat Email:</label>
        <input id="nomorUser" name="email" readonly="" required="" type="email" />
    </fieldset>

    <fieldset>
        <label>url Bukti Bayar (gDrive)</label>
        <input id="bukti" name="bukti" required="" type="text" />
</fieldset>
    <fieldset>
  
  <label>Member Type:</label><br />
  <select id="memberType" name="memberType">
    <option value="member1">Member 1</option>
    <option value="member2">Member 2</option>
    <option value="member3">Member 3</option>
    <option value="admin">admin</option>
  </select>   
</fieldset>

  <button type="submit">Tambah User</button>
      </form>



  
  

<h2>Database User</h2>

<table border="1" id="user-table">
  <tbody><tr>
    <th>Email</th>
    <th>Member Type</th>
    <th>Approval</th>
    <th>Url Bukti</th>
  </tr>
</tbody></table>



<script>
// Mendapatkan referensi form tambah user
const addUserForm = document.getElementById('addUserForm');

// Menambahkan event listener pada form tambah user untuk menambah data user baru
addUserForm.addEventListener('submit', async (e) => {
    e.preventDefault(); // Mencegah form untuk melakukan submit default

    const email = addUserForm.nomorUser.value;
    const memberType = addUserForm.memberType.value;
    const bukti = addUserForm.bukti.value;

    const user = firebase.auth().currentUser;
    if (!user) {
        alert('Anda harus login terlebih dahulu untuk mengirim data.');
        return;
    }

    try {
        // Melakukan pengecekan apakah email sudah ada di dalam database sebelumnya
        const snapshot = await firestore.collection("users").where("email", "==", email).get();

        if (!snapshot.empty) {
            // Email sudah ada di dalam database, maka hentikan penyimpanan data dan tampilkan pesan
            alert('Email ini sudah terdaftar. Data tidak dapat disimpan.');
            return;
        }

        // Email belum ada di dalam database, maka simpan data user baru ke Firestore
        await firestore.collection("users").add({
            email: email,
            memberType: memberType,
            bukti: bukti,
            approval: "No" // Menambahkan kolom "Approval" dengan nilai default "No"
        });

        alert('Data berhasil disimpan.');
    } catch (error) {
        console.error('Terjadi kesalahan:', error);
        alert('Terjadi kesalahan. Data tidak dapat disimpan.');
    }
});

// Mendapatkan referensi tabel pengguna
const userTable = document.getElementById('user-table');

// Menampilkan data pengguna dari Firestore ke dalam tabel
firestore.collection("users").onSnapshot((querySnapshot) => {
    // Mengosongkan isi tabel sebelum menampilkan data baru
    //userTable.innerHTML = '';

    querySnapshot.forEach((doc) => {
        const userData = doc.data();
        const row = `<tr>
                      <td>${userData.email}</td>
                      <td>${userData.memberType}</td>
                      <td>${userData.approval}</td>
                      <td>${userData.bukti}</td>
                  </tr>`;
        userTable.innerHTML += row; // Menambahkan baris ke dalam tabel
    });
});


</script>
<br>
<h3><u>halaman USER yang bisa diakses</u></h3>
  <a href="/p/rahasia.html">halaman khusus member1</a><br>
  <a href="/p/admin.html">halaman khusus admin</a>

Copy paste kode dibawah ini dan tempel di Theme/Custom Edit html dibawah <head>dan simpan

  <script src='https://cdn.jsdelivr.net/npm/lightgallery/dist/js/lightgallery.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/lg-thumbnail/dist/lg-thumbnail.min.js'/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
  <script src='https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js'/>
  <script src='https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js'/>
  <script src='https://cdn.jsdelivr.net/npm/sweetalert2@10'/>
  <script src='https://www.gstatic.com/firebasejs/9.6.1/firebase-storage-compat.js'/>
  <script src='https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js'/>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
  <script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>

    <!-- Include Firebase SDK -->
    <script>
        // Masukkan kode firebaseConfig dibawah ini
  const firebaseConfig = {
  apiKey: &quot;AIzaSy....&quot;,
  authDomain: &quot;karirid...com&quot;,
  databaseURL: &quot;https://.....&quot;,
  projectId: &quot;karir...&quot;,
  storageBucket: &quot;karir....com&quot;,
  messagingSenderId: &quot;...&quot;,
  appId: &quot;1:843...:web:063...&quot;,
  measurementId: &quot;G-5...&quot;
};
      
  // Inisialisasi Firebase
  firebase.initializeApp(firebaseConfig);

  // Mendapatkan referensi Firestore
  const firestore = firebase.firestore();
      
  // Mendapatkan referensi autentikasi Firebase
  const auth = firebase.auth();
      
const storage = firebase.storage();
      </script>

Perhatikan kode agar disesuaikan dengan project firebase anda

    <!-- Include Firebase SDK -->
    <script>
        // Masukkan kode firebaseConfig dibawah ini
  const firebaseConfig = {
  apiKey: &quot;AIzaSy....&quot;,
  authDomain: &quot;karirid...com&quot;,
  databaseURL: &quot;https://.....&quot;,
  projectId: &quot;karir...&quot;,
  storageBucket: &quot;karir....com&quot;,
  messagingSenderId: &quot;...&quot;,
  appId: &quot;1:843...:web:063...&quot;,
  measurementId: &quot;G-5...&quot;
};

diganti dengan script pemberian Firebase

Masuk ke Firebase anda dan ke Project anda kemudian pilih menu firestore database
Ubah Rule dengan kode berikut:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Aturan untuk koleksi "users"
    match /users/{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null;
    }

    // Aturan untuk koleksi "data"
    match /data/{document=**} {
      allow read, write: if request.auth != null;
    }
   // Aturan untuk koleksi "images"
    match /images/{document=**} {
      allow read, write;
    }
       // Aturan untuk koleksi "images"
    match /databaru/{document=**} {
      allow read, write;
    }
     match /dataide/{document=**} {
      allow read, write;
    }
      match /koleksi/{document=**} {
      allow read, write;
    }
  }
}

Dan SELESAI
untuk menggunakan halaman demo anda harus login dahulu di website tujuan

Lihat Demo
Jika ada pertanyaan silahkan gunakan koment dibawah