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;
// Memastikan pengguna terotentikasi sebelum mengirim data
const user = firebase.auth().currentUser;
if (!user) {
alert('Anda harus login terlebih dahulu untuk mengirim data.');
return;
}
// Menyimpan data ke Firestore
firestore.collection("data").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("data").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("data").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("data").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: "AIzaSy....",
authDomain: "karirid...com",
databaseURL: "https://.....",
projectId: "karir...",
storageBucket: "karir....com",
messagingSenderId: "...",
appId: "1:843...:web:063...",
measurementId: "G-5..."
};
// 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>
<!-- Include Firebase SDK -->
<script>
// Masukkan kode firebaseConfig dibawah ini
const firebaseConfig = {
apiKey: "AIzaSy....",
authDomain: "karirid...com",
databaseURL: "https://.....",
projectId: "karir...",
storageBucket: "karir....com",
messagingSenderId: "...",
appId: "1:843...:web:063...",
measurementId: "G-5..."
};
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;
}
}
}
untuk menggunakan halaman demo anda harus login dahulu di website tujuan
Lihat Demo
Jika ada pertanyaan silahkan gunakan koment dibawah
 dengan login terlebih dahulu){kind=link}
Post a Comment