Membuat halaman khusus User - Code Blogger Firebase (Database)

hi, kali ini admin akan mencoba membuat halaman User dimana halaman ini hanya bisa diakses ketika user sudah login dan user bisa mengisi database uniq dan tercatat khusus untuk user tersebut. Jadi user lain tidak akan bisa melihat isi dari data yang sudah di submit 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/login.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>Koleksi Data</label>
        <textarea id="bukti" name="bukti"></textarea>
</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 Data</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>
  // 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;

        // Panggil fungsi untuk menampilkan data pengguna dari Firestore
        displayUserData(email); // Panggil fungsi displayUserData di sini
    } else {
        // Pengguna tidak diotentikasi, arahkan ke halaman login
        //window.location.href = '/p/pasang-lowongan-kerja.html';
    }
});
// Mendapatkan referensi form tambah user
const addUserForm = document.getElementById('addUserForm');

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 {
        await firestore.collection("koleksi").add({
            email: email,
            memberType: memberType,
            bukti: bukti,
            approval: "No" // Menambahkan kolom "Approval" dengan nilai default "No"
        });

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

// Fungsi untuk menampilkan data pengguna dari Firestore
function displayUserData(email) {
    // Mendapatkan referensi tabel pengguna
    const userTable = document.getElementById('user-table');

    // Menampilkan data pengguna dari Firestore ke dalam tabel
    firestore.collection("koleksi").where("email", "==", email).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>
                            <td>
                                <button onclick="updateData('${doc.id}', '${userData.memberType}', '${userData.approval}')">Update</button>
                                <button onclick="deleteData('${doc.id}')">Delete</button>
                            </td>
                        </tr>`;
            userTable.innerHTML += row; // Menambahkan baris ke dalam tabel
        });
    });
}

  
function updateData(docId, memberType, approval) {
        const updatedMemberType = prompt("Masukkan memberType baru:", memberType);
        const updatedApproval = prompt("Masukkan approval baru:", approval);
        
        firestore.collection("koleksi").doc(docId).update({
            memberType: updatedMemberType,
            approval: updatedApproval
        })
        .then(() => {
            console.log("Document successfully updated!");
                  // Refresh the page after successful deletion
        location.reload();
        })
        .catch((error) => {
            console.error("Error updating document: ", error);
            alert('Terjadi kesalahan saat memperbarui data.');
        });
    }

    // Fungsi untuk melakukan delete data
    function deleteData(docId) {
        if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
            firestore.collection("koleksi").doc(docId).delete()
            .then(() => {
                console.log("Document successfully deleted!");
               
                      // Refresh the page after successful deletion
        location.reload();
            })
            .catch((error) => {
                console.error("Error deleting document: ", error);
                alert('Terjadi kesalahan saat menghapus data.');
            });
        }
    }

</script>

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