Create Read Update Delete (CRUD) Blogger dengan Firebase

hi, kali ini admin akan membagikan source code bagaimana membuat halaman page untuk submit data di blogger tanpa harus login terlebih dahulu, jadi siapapun bisa mengisi data tanpa persetujuan dari server.
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


<h2>Form Isi Database</h2>

<form id="firestoreForm">
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama" required placeholder="Nama.."/><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required placeholder="Email..."/><br><br>
  <button type="submit">Submit</button>
</form>

<h2>Database</h2>

<table id="data-table" border="1">
  <tr>
    <th>Nama</th>
    <th>Email</th>
  </tr>
</table>

<script>


  // Mendapatkan referensi form
  const form = document.getElementById('firestoreForm');

  // Menambahkan event listener pada form
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // Mencegah form untuk melakukan submit default

    // Mendapatkan nilai dari form
    const nama = form.nama.value;
    const email = form.email.value;

  
    // Menyimpan data ke Firestore
    firestore.collection("databaru").add({
        nama: nama,
        email: email
    })
    .then((docRef) => {
        console.log("Document written with ID: ", docRef.id);
        alert('Data berhasil disimpan!');
        form.reset(); // Mengosongkan form setelah berhasil disimpan
    })
    .catch((error) => {
        console.error("Error adding document: ", error);
        alert('Terjadi kesalahan, coba lagi.');
    });
  });

  // Mendapatkan referensi tabel
  const dataTable = document.getElementById('data-table');

  // Menampilkan data dari Firestore ke dalam tabel
  
  firestore.collection("databaru").onSnapshot((querySnapshot) => {
  //  dataTable.innerHTML = ''; // Mengosongkan isi tabel sebelum menampilkan data baru
    querySnapshot.forEach((doc) => {
      const data = doc.data();
      const row = `<tr>
                      <td>${data.nama}</td>
                      <td>${data.email}</td>
                      <td>
                        <button onclick="updateData('${doc.id}', '${data.nama}', '${data.email}')">Update</button>
                        <button onclick="deleteData('${doc.id}')">Delete</button>
                      </td>
                  </tr>`;
      dataTable.innerHTML += row; // Menambahkan baris ke dalam tabel
    });
  });

  // Fungsi untuk melakukan update data
  function updateData(docId, nama, email) {
    const updatedNama = prompt("Masukkan nama baru:", nama);
    const updatedEmail = prompt("Masukkan email baru:", email);
    
    firestore.collection("databaru").doc(docId).update({
      nama: updatedNama,
      email: updatedEmail
    })
    .then(() => {
      console.log("Document successfully updated!");
    })
    .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("databaru").doc(docId).delete()
      .then(() => {
        console.log("Document successfully deleted!");
      })
      .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;
    }
  }
}

Dan SELESAI

Lihat Demo
Jika ada pertanyaan silahkan gunakan komentar dibawah

Create Read Update Delete (CRUD) Blogger dengan Firebase

Related Posts

Post a Comment