Langkah 2.
Membuat Create dan Read dan delete
buat halaman Tambah Data dan copy paste script berikut
disini kita sudah berhasil membuat data baru, dan menampilkan ya untuk control. dilengkapi dengan tombol delete. catatan penting dalam hal ini bahwa 1 user hanya boleh menginput 1 data alumni. sehingga diperlukan filter saat pembuatan Create data.
<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/melebu.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" required="" type="text" />
<label>Email</label>
<input id="nomorUser" name="email" readonly="" required="" type="email" />
<label>Facebook (*wajib)</label>
<input id="Facebook" name="Facebook" type="text" />
<label>Instagram</label>
<input id="Instagram" name="Instagram" type="text" />
<label>Alamat</label>
<input id="Alamat" name="Alamat" required="" type="text" />
<label>Kuliah</label>
<input id="Kuliah" name="Kuliah" type="text" />
<label>Pekerjaan</label>
<input id="Pekerjaan" name="Pekerjaan" type="text" />
</fieldset>
<fieldset>
<label>NISN (*10 digit)</label>
<input id="NISN" name="NISN" required="" type="text" />
<label>Nama Ibu Kandung (*wajib)</label>
<input id="Ibu" name="Ibu" required="" type="text" />*mis SITI SAIDAH (tidak akan ditampilkan) dibutuhkan admin untuk pengecekan ke Valid an data di https://nisn.data.kemdikbud.go.id/<br><br>
<label>Tahun Lulus (*mis 2023)</label>
<input id="Tahun" name="Tahun" required="" type="text" />
<label>Kelas (*mis IPA 4)</label>
<input id="Kelas" name="Kelas" required="" type="text" />
<label>Foto (*wajib)</label>
<input type="file" id="imageFile" required="" accept="image/*">
<label>Pesan / Kesan (*wajib)</label>
<textarea id="description" placeholder="Enter description" required=""></textarea>
</fieldset>
<button type="submit">Tambah Data Alumni</button>
</form>
<h2>Managemen Data</h2>
<table border="1" id="user-table">
<tbody><tr>
<th>Email</th>
<th>Nama</th>
<th>Approval</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';
}
});
const addUserForm = document.getElementById('addUserForm');
const imageFileInput = document.getElementById('imageFile');
// 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 imageFile = imageFileInput.files[0];
const email = addUserForm.nomorUser.value;
const nama = addUserForm.namaUser.value;
const description = addUserForm.description.value;
const Facebook = addUserForm.Facebook.value;
const Instagram = addUserForm.Instagram.value;
const Alamat = addUserForm.Alamat.value;
const NISN = addUserForm.NISN.value;
const Ibu = addUserForm.Ibu.value;
const Tahun = addUserForm.Tahun.value;
const Kelas = addUserForm.Kelas.value;
const Kuliah = addUserForm.Kuliah.value;
const Pekerjaan = addUserForm.Pekerjaan.value;
const resizedImage = await resizeImage(imageFile, 600, 600);
// Upload resized image to Firebase Storage
const storageRef = storage.ref();
const imageRef = storageRef.child(imageFile.name);
const uploadTaskSnapshot = await imageRef.put(resizedImage);
// Get download URL for the image
const imageUrl = await uploadTaskSnapshot.ref.getDownloadURL();
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({
description : description,
email : email,
nama : nama,
Facebook : Facebook,
Instagram : Instagram,
Alamat : Alamat,
NISN : NISN,
Ibu : Ibu,
Tahun : Tahun,
Kelas : Kelas,
imageUrl: imageUrl,
Kuliah: Kuliah,
Pekerjaan: Pekerjaan,
Approval: 'Yes',
createdAt: firebase.firestore.FieldValue.serverTimestamp()
});
alert('Data berhasil disimpan.');
} 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("users").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.nama}</td>
<td>${userData.Approval}</td>
<td>
<button onclick="deleteData('${doc.id}')">Delete</button>
</td>
</tr>`;
userTable.innerHTML += row; // Menambahkan baris ke dalam tabel
});
// Menambahkan baris tambahan setelah tabel
const newRow = "<tr><td colspan='5'>daftar menjadi Admin <a href='/p/pendaftaran-admin.html'>klik disini</a></td></tr>";
userTable.innerHTML += newRow;
});
}
// Fungsi untuk melakukan update data
function updateData(userId, nama, Facebook, Instagram, Alamat, Kuliah, Pekerjaan, NISN, Ibu, Tahun, Kelas, description) {
// Prompt the user to input new values for each field
const updatedNama = prompt("Masukkan nama baru:", nama) || nama;
const updatedFacebook = prompt("Masukkan Facebook baru:", Facebook) || Facebook;
const updatedInstagram = prompt("Masukkan Instagram baru:", Instagram) || Instagram;
const updatedAlamat = prompt("Masukkan Alamat baru:", Alamat) || Alamat;
const updatedNISN = prompt("Masukkan NISN baru:", NISN) || NISN;
const updatedIbu = prompt("Masukkan Ibu baru:", Ibu) || Ibu;
const updatedTahun = prompt("Masukkan Tahun baru:", Tahun) || Tahun;
const updatedKelas = prompt("Masukkan Kelas baru:", Kelas) || Kelas;
const updatedKuliah = prompt("Masukkan Kuliah baru:", Kuliah) || Kuliah;
const updatedPekerjaan = prompt("Masukkan Pekerjaan baru:", Pekerjaan) || Pekerjaan;
const updateddescription = prompt("Masukkan Moto baru:", description) || description;
// Update the Firestore document with the new values
firestore.collection("users").doc(userId).update({
nama: updatedNama,
description: updateddescription,
Facebook: updatedFacebook,
Instagram: updatedInstagram,
Alamat: updatedAlamat,
NISN: updatedNISN,
Ibu: updatedIbu,
Tahun: updatedTahun,
Kelas: updatedKelas,
Kuliah: updatedKuliah,
Pekerjaan: updatedPekerjaan,
Approval: 'Yes', // Assuming this field should be updated
createdAt: firebase.firestore.FieldValue.serverTimestamp() // Assuming this field should be updated
})
.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 beserta file dari storage
async function deleteData(docId) {
try {
// Dapatkan dokumen dari Firestore
const docRef = firestore.collection("users").doc(docId);
const doc = await docRef.get();
// Periksa apakah dokumen ada
if (!doc.exists) {
console.error("Dokumen tidak ditemukan!");
return;
}
// Dapatkan data dari dokumen
const data = doc.data();
const imageUrl = data.imageUrl;
// Menampilkan imageUrl di log sebelum digunakan
console.log("imageUrl:", imageUrl);
// Konfirmasi pengguna
if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
// Hapus dokumen dari Firestore
await docRef.delete();
console.log("Dokumen berhasil dihapus dari Firestore!");
// Check if the imageUrl is valid
if (imageUrl) {
// Get a reference to the file in Firebase Storage
const storageRef = storage.refFromURL(imageUrl);
// Delete the file from Firebase Storage
await storageRef.delete();
console.log("File successfully deleted from Firebase Storage!");
} else {
console.error("Invalid imageUrl!");
}
}
} catch (error) {
console.error("Error deleting data and file:", error);
}
}
// Function to resize image
function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
resolve(blob);
}, file.type);
};
};
reader.onerror = function(error) {
reject(error);
};
});
}
</script>
Dan SELESAI
code diatas akan menyimpan data alumni ke databaae users dan image akan disimpan di storage
ketika tombol delete di klik maka database dan image akan dihapus.
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;
}
}
}
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write, delete: if request.auth != null;
}
}
}
Post a Comment