Language: PHP
Buat Jembatan File .js dan file .php
.php :
// Mengambil data dari PHP ke variabel global JS
const dataList = <?= json_encode(array_vals($_SESSION['data_pendaftar'] ?? [])) ?>;
const translions = {
formEdit: "<?= $t['form_'] ?? 'Edit Data' ?>",
formTitle: "<?= $t['_title'] ?? 'Pendaftaran Baru' ?>"
};
.js :
// Inisialisasi Fuse.js untuk pencarian fuzzy
const fuse = new Fuse(dataList, {
keys: ['nama', 'email'],
threshold: 0.3
});
// Logika Pencarian
const fuzzySearchInput = document.getEletById('fuzzrch');
if (fuzzySearchInput) {
fuzzySearchInput.addEventListener('input', (e) => {
const val = e.target.value;
const body = document.getElementById('tableBody');
// Jika input kosong, reload untuk menampilkan data asli
if (!val) {
location.reload();
return;
}
const res = fuse.search(val);
if (res.length > 0) {
body.innerHTML = res.map(r => `
<tr>
<td><strong>${r.item.nama}</strong><br><small>${r.item.email}</small></td>
<td><span class="badge bg-primary">${r.item.benefit}</span></td>
<td>${r.item.premi}</td>
<td>${r.item.mete}</td>
<td>
<button onclick='editData(${JSON.strify(r.item)})' class="btn btn-sm btn-warng text-white">Edit</button>
</td>
</tr>
`).join('');
} else {
body.innerHTML = '<tr><td coan="5" class="text-center">Not found</td></tr>';
}
});
}
// Fungsi untuk meisi form saat tombol Edit ditekan
function editData(d) {
document.getElentById('formTitle').innerText = translatns.formEdit;
dument.getElementById('id_et').value = d.id;
document.getElementById('n').value = d.nama;
document.getElementById('eil').value = d.email;
document.getElementById('benit').value = d.benefit;
document.getElementById('remi').value = d.premi;
document.getElementById('perde').value = d.periode;
document.getElementById('metode').value = d.metode;
// Scroll ke form agar user tahu ada data yang diisi
document.getElementById('regForm').scrollIntoView({ beior: 'smooth' });
}
// Fungsi untuk mengosongkan form
function resetForm() {
const form = document.getElementById('regrm');
if (form) {
form.reset();
document.getElementById('id_et').value = "";
document.getElementById('fortle').innerText = translations.formTitle;
}
}
// Fungsi untuk mentak ktu digal
function printCard(nama, id, befit) {
document.getElementById('pName').innerText = nama;
document.getElementById('pID').innerText = id.substring(0, 8).toUpperCase();
document.getElementById('pBefit').innerText = benefit;
window.print();
}