Membuat read Galeri dengan Loadmore - Code Blogger Firebase (Database)

hi, Kali ini admin akan mencoba membuat membaca isi storage image yang telah disimpan berupa galeri yang dlengkapi dengan tombol loadmore.
buat halaman baru/page di blogger dan copy paste kode berikut:
Beri judul page tersebut dan simpan

<style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* Default: 4 columns */
            gap: 10px;
        }

        .gallery-item {
            /* Define styles for each gallery item */
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        @media (min-width: 800px) {
            .gallery {
                grid-template-columns: repeat(5, 1fr); /* 6 columns for screens wider than 800px */
            }
        }
       /* Media query for screens narrower than 400px */
    @media (max-width: 400px) {
        .gallery {
            grid-template-columns: repeat(2, 1fr); /* 3 columns for screens narrower than 400px */
        }
    }
    </style>
<style>
   .load-more-btn {
    display: block;
    margin: 10px auto;
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #333;
    background-color: #f4f4f4;
  }
</style>


<div class="gallery" id="gallery"></div>
<button class="load-more-btn" id="load-more-btn">Load More Alumni</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const gallery = document.getElementById("gallery");
  const loadMoreBtn = document.getElementById("load-more-btn");
  let lastVisible = null;

  // Function to display users in the gallery
  function displayUsersInGallery(querySnapshot) {
    querySnapshot.forEach((doc) => {
      var userData = doc.data();
      displayUserInGallery(userData);
    });
    // Update last visible document
    lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
  }

  // Function to display a user in the gallery
  function displayUserInGallery(userData) {
    var userDiv = document.createElement('div');
    userDiv.classList.add('gallery-item');

    var thumbnailImg = document.createElement('img');
    thumbnailImg.src = userData.imageUrl;
    userDiv.appendChild(thumbnailImg);

    var caption = document.createElement('div');
    caption.innerHTML =  "<strong> " + userData.nama + "</strong><br>" +
      					 "Alumni Tahun: <strong> " + userData.Tahun + "</strong><br>" +
  						 "Kelas: <strong>" + userData.Kelas + "</strong>" ;
    userDiv.appendChild(caption);

    gallery.appendChild(userDiv);
  }

  // Initial load
  var usersCollection = firebase.firestore().collection('users').orderBy('createdAt', 'desc').limit(5);
  usersCollection.get().then((querySnapshot) => {
    displayUsersInGallery(querySnapshot);
  });

  // Load more button click event
  loadMoreBtn.addEventListener("click", function() {
    var nextQuery = firebase.firestore().collection('users').orderBy('createdAt', 'desc').startAfter(lastVisible).limit(5);
    nextQuery.get().then((querySnapshot) => {
      displayUsersInGallery(querySnapshot);
    });
  });
});
</script>

 

jangan lupa untuk mengubah Rule di firestore dan storage nya. dengan code dibawah ini.

 
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Aturan untuk koleksi "users"
    match /users/{document=**} {
      // Allow create, update, and delete only if user is authenticated
      allow create, update, delete: if request.auth != null;
      // Allow read for everyone
      allow read;
      // Deny all other write operations
      allow write: if false;
    }

    // Aturan untuk koleksi "users"
    match /admin/{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null;
    }

  }
}
 

dan untuk Sorage ubah rule menjadi

  rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write, delete: if request.auth != null;
    }
  }
}
   

untuk menggunakan halaman demo anda harus login dahulu di website tujuan

Lihat Demo