CodeIgniter

Insert &
Validation
w/ AJAX
PTIK UNS - 2022
Insert Data W/ Ajax
Konsepnya mirip dengan insert seperti biasa, bedanya:
 Form ditampilkan dalam bentuk modal
 Penggunaan ajax dalam pemanggilan modal
 Server-side datatables
Tabel User - Database
Apply Datatables
Datatables, sebuah library open source pembuatan tabel yang dapat diakses di
https://datatables.net
Download dan letakkan datatables pada folder public
 Apply Datatables
Tambahkan css dari Datatables di bagian head

<link rel="stylesheet" type="text/css" href="<?= base_url(‘datatables/datatables.min.css’); ?>" />

Tambahkan javascript dari Datatables pada bagian footer sebelum close tag </html>

<script type="text/javascript" src="<?= base_url(‘datatables/datatables.min.js’); ?>"></script>

Apply Datatables
Aplikasikan pada tabel yang dimaksud dengan menambahkan id=“namaid”. Pada contoh diberi
nama datatabel .........
<table id="datatabel">
<thead>
<tr>
<th>No</th>
<th>Avatar</th>
<th>Username</th>
...........

Ambil id tersebut dengan JQuery, lalu terapkan datatables melalui script. Letakkan di bagian
bawah sendiri view user/index.php, sebelum endSection();
<script>
$(document).ready(function() {
$('#datatabel').DataTable();
});
</script>
Kalau ada yang gagal, kemungkinan karena belum manggil jQuery
 Method Get Data Anggota- Controller
Tambahkan sebuah method bernama getdata() pada controller user.

Getdata() berfungsi untuk menerima request ajax dan mengembalikan nilai view dalam format
json
public function getdata()
{
if ($this->request->isAJAX()) {
$userModel = new UserModel();
$data = [
'list' => $userModel->findAll()
];

$hasil = [
'data' => view('user/list', $data)
Jangan lupa pada routes tambahkan route berikut.
];
$routes->get('/user/data', 'admin\user::getdata');
echo json_encode($hasil);
} else {
exit('Data tidak dapat diload');
}
Membuat List Anggota - View
Buat sebuah view bernama list.php di dalam folder admin/user/.

List.php berfungsi untuk menampilkan data anggota dalam bentuk tabel HTML.

Pindahkan tabel yang ada di dalam view user/index.php ke list.php

.........
<table id="datatabel">
<thead>
<tr>
<th>No</th>
<th>Avatar</th>
<th>Username</th>
...........

Ganti kode yang dipindah tersebut dengan div dengan id ”viewdata”.

<div id="viewdata"></div>
Membuat List Anggota - View
Pindahkan pula JQuery datatables ke bagian bawah list.php

<script>
$(document).ready(function() {
$('#datatabel').DataTable();
});
</script>
Tambah Ajax Script - View
Ajax digunakan untuk memanggil method getdata dari controller user.

Apabila berhasil, maka id viewdata akan menampilkan response parameter berupa data.

Tambahkan pada layout.php <script>

function tampilkan() {
$.ajax({
url: "<?= base_url('/user/data') ?>",
dataType: "json",
success: function(response) {
$('#viewdata').html(response.data);
}
});
}

$(document).ready(function() {
tampilkan();
});
</script>
Run, maka sampai tahap ini seharusnya
tampilannya sama dengan awal.
Jika tidak, maka ulangi penulisan kode.
Membuat Div Modal
Pada view user, tambahkan div dengan id =“viewmodal” (Setelah tag <container> atau
semacamnya)
Pastikan display style bernilai : none agar tidak tampil ketika halaman diload
..........
<div id="viewmodal" style="display:none;"></div>
...................
Membuat Button Modal
Tambahkan tombol tambah data di dalam user/list.php dengan id=“tambah”

<a href="#" id="tambah" class="btn btn-success btn-rounded mb-3">Tambah Anggota W/ Ajax</a>

Tombol tambah data pada user/index.php dicomment saja.

Membuat Method Form - Controller
Buat method baru bernama getform() pada controller user.

public function getform()

{
if ($this->request->isAjax()) {
$hasil = [
'data' => view('user/form')
];
echo json_encode($hasil);
} else {
exit('Data tidak dapat diload');
}
}

Jangan lupa tambahkan route!

 Membuat Form Tambah Data - View
Buat view baru bernama form.php di dalam folder user/.

form.php berfungsi untuk menampilkan form tambah data anggota.

Untuk memudahkan penulisan kode, silakan sadur form yang pernah dibuat pada pertemuan
lalu
<div class="modal fade" id="formmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Tam
Tambah Ajax Script - View
Ajax digunakan untuk memanggil method getForm() dari controller user apabila button
tambah di klik.
Apabila berhasil, maka id viewmodal akan menampilkan response parameter berupa data dan
merubah class hidden menjadi show.
Id formmodal juga akan ditampilkan.
$('#tambah').click(function(e) {
e.preventDefault();
$.ajax({
url: "<?= base_url('/user/form') ?>",
dataType: "json",
success: function(response) {
$('#viewmodal').html(response.data).show();
$('#formmodal').modal('show');
}
});
})
Mempersiapkan Form - View
Form diberikan id “form” sebagai penanda objek yang akan ditangkap oleh ajax.

<form id="form" action="user/insertAjax" method="post" enctype="multipart/form-data">

Buat method insertAjax() yang berisi sama persis dengan insert() pada controller user.

Pada method insertAjax(), hapus bagian flashData() dan redirect()

Handle Data dengan Ajax
Ajax digunakan untuk mengirim data dari form ke method insertAjax() pada controller user
apabila button tambah data di klik.
<script>
$(document).ready(function() {
$('#form').submit(function(e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: new FormData(this),
processData: false,
contentType: false,
success: function(response) {
alert('data berhasil ditambah');
$(‘#anggotammodal').modal('hide');
tampilkan();
},
});
});
});
</script>
Break............

Cobalah tambahkan data. Berhasil?

Validasi
CodeIgniter provides a comprehensive data validation class that helps minimize the amount of
code you’ll write.

Validasi dari sisi Codeigniter dapat dilakukan dengan menggunakan service validation();

$validasi = \Config\Services::validation();

Disclaimer : Validasi disini digunakan pada AJAX, untuk validasi pada page, bisa gunakan
fungsi redirect()->withInput()->with(‘validation’,’’) dan penambahan class invalid dengan
$validasi->hasError()
 Validasi di Method InsertAjax - Controller
Kembali ke method insertAjax() di controller user, tambahkan validasi pada nama depan.

$validasi = \Config\Services::validation();
$valid = $this->validate([
'namadepan' => [
'label' => 'Nama Depan',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong'
]
]
]);

Label adalah nama label yang disematkan pada variabel namadepan

Rules merupakan aturan yang harus dipenuhi di dalam field tersebut

(cek: https://www.codeigniter.com/userguide3/libraries/form_validation.html#rule-reference )
Errors merupakan custom error message yang muncul ketika terdapat kesalahan pengisian field.
 Validasi di Method InsertAjax - Controller
Cek apakah inputan valid, jika tidak maka akan memunculkan pesan “error” dalam format json.

Jika sudah valid, maka isikan titik-titik tersebut dengan perintah insert data seperti pada method insert(),
lalu tambahkan pesan “sukses” dalm format json

if (!$valid) {
$pesan = [
'error' => [
'namadepan' => $validasi->getError('namadepan')
]
];
echo json_encode($pesan);
} else {
......................
$pesan = [
'sukses' => 'Data anggota berhasil diinput'
];
echo json_encode($pesan);
}
Validasi di Ajax - View
Pada field yang akan diberikan pesan error validasi, berikan ID=“nd” / sesuai dengan nama ID yang
dikehendaki

Di bawah field yang akan diberikan label error validasi, tambahkan sebuah div kosong dengan kelas
“invalid-feedback” dan berisi ID “errornd” / sesuai dengan yang dikehendaki.

<div class="col">
<label class="form-label" for="nd">Nama depan</label>
<input type="text" id="nd" name="namadepan" class="form-control" />
<div class="invalid-feedback" id="errornd"></div>
</div>
 Validasi di Ajax - View
Pada proses ajax, pada view form.php, edit kode pada status success.

Variabel respon melakukan parsing JSON terhadap data yang diterima. (jika menggunakan json_encode())

Jika terdapat error, maka pada id #nd tambahkan kelas is-invalid

Jika terdapat error, maka pada id #errornd edit pesan error sesuai dengan yang di tulis di controller.
success: function(response) {
var respon = JSON.parse(response);
if (respon.error) {
if (respon.error.namadepan) {
$('#nd').addClass('is-invalid');
$('#errornd').html(respon.error.namadepan);
} else {
$('#nd').removeClass('is-invalid');
$('#errornd').html('');
}
} else {
alert(respon.sukses);
$('#formmodal').modal('hide');
tampilkan();
}
Cobalah beberapa kali testing memasukkan data kosong.

Apakah ada bug?

Kenapa itu bisa terjadi?
Bagaimana solusinya?
Hint: cek config/security.php
Tugas
 Dengan menyesuaikan pada tema masing-masing,

 Tambahkan validasi pada semua form

 Nama depan wajib
 Telepon wajib dan harus angka
 Email wajib, valid dan unik
 Username wajib dan unik
 Password wajib 8 karakter
 Tambahkan field ulangi password, harus sama dengan field password
 Profil file berupa jpg/jpeg/png dan max 500kb

 Deliverable:
 dokumentasi cara dan screenshot
atau
 video tutorial