-
Notifications
You must be signed in to change notification settings - Fork 1
/
tabel-pendaftar.js
141 lines (126 loc) · 5.31 KB
/
tabel-pendaftar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
$(document).ready(() => {
// Menampilkan Table Saat Awal Reload
showTable();
// Memasukkan Code Untuk menampilkan Table dalam satu Fungsi, yaitu ShowTable
function showTable() {
const $showData = $('#show-data');
$showData.text('Loading the JSON file.');
// Ambil Data JSON
$.getJSON('api.php', (respon) => {
console.log(respon.code);
console.log(respon.status);
// Mengatur Ulang Format Dari JSON Menjadi HTML
const head = `<br><table id="tabelnya" class="table table-bordered table-responsive">`
const thead = `<thead><tr><th>ID</th><th>Nama</th><th>Alamat</th><th>Tempat Lahir</th><th>No Hp</th><th>Alasan</th></tr></thead><tbody>`
const markup = respon.data
.map(item => `
<tr data-id="${item.id}">
<td>${item.id}</td>
<td>${item.nama}</td>
<td>${item.alamat}</td>
<td>${item.tlahir}</td>
<td>${item.handphone}</td>
<td>${item.alasan}</td>
<td>
<button class="btn btn-danger hapus" id="hapus" data-id="${item.id}">HAPUS</button>
</td>
</tr>
`)
.join('');
const footer = `</tbody></table>`
// Merangkum semua data dalam satu variabel
var listdata = head + thead + markup + footer;
const list = (listdata);
// Menampilkan Data table ke Variabel
$showData.html(list);
// Memproses Penghapusan Data
$('.hapus').on('click', (event) => {
// console.log($(event.target).data("id"));
var hapus = $(event.target).data("id");
// console.log(hapus);
// Menampilkan Layar Konfirmasi Penghapusan Data
swal.fire({
title: 'Apakah Anda Yakin?',
text: "Perintah Tidak dapat dibatalkan!",
icon: 'warning', // tipe pesan (success, error, warning, info)
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'YA'
}).then((result) => {
// ketika layar konfirmasi di klik "Iya", maka kode yang akan dijalankan adalah:
if (result.value) {
// Proses Menghapus Data
$.ajax({
url: 'delete.php',
method: 'POST',
data: {
id: hapus
},
success: function () {
// Menampilkan Konfirmasi Bahwa Data Telah Dihapus
Swal.fire({
title: 'SUKSES',
text: 'Data Berhasil Di Hapus',
icon: 'success', // tipe pesan (success, error, warning, info)
})
}
}).always(function () {
// Menjalankan perintah ShowTable saat Penghapusan berhasil
showTable();
});
}
});
});
});
}
// Kode Untuk Submit
$('#form-submit').submit(function (event) {
event.preventDefault(); // mencegah form dari reload
// mengambil nilai dari form
var id = $('#id').val();
var nama = $('#nama').val();
var alamat = $('#alamat').val();
var tlahir = $('#tlahir').val();
var handphone = $('#handphone').val();
var alasan = $('#alasan').val();
// Mencegah Form Disubmit bila mana ada yang kosong
if (nama == '' || alamat == '' || tlahir == '' || handphone == '' || alasan == '') {
// alert('Pastikan anda mengisi semua kolom!');
Swal.fire({
title: 'Peringatan',
text: 'pastikan anda mengisi semua kolom',
icon: 'warning', // tipe pesan (success, error, warning, info)
});
return;
}
// mengirim data ke server menggunakan AJAX
$.ajax({
type: 'POST',
url: 'daftarjs.php',
data: { id: id, nama: nama, alamat: alamat, tlahir: tlahir, handphone: handphone, alasan: alasan },
success: function () {
// Menampilkan Pesan Sukses
Swal.fire({
title: 'SELAMAT',
text: 'Data Pendaftaran anda sudah kami terima',
icon: 'success', // tipe pesan (success, error, warning, info)
})
}
}).always(function () {
// Menjalankan perintah ShowTable saat Pendaftaran berhasil
showTable();
}).always(function () {
// Menjalankan Fungsi removeForm untuk menghapus sisa Data di Form
removeForm();
});
});
// Fungsi untuk mengkosongkan Value di Form
function removeForm() {
$("#nama").val('');
$("#alamat").val('');
$("#tlahir").val('');
$("#handphone").val('');
$("#alasan").val('');
};
});