how to fix csrf in one page php ajax codeigniter problem - php

Question

I'm using codeigniter 3 and I've got issue here, how to fix my code if i use CSRF. because I want only have one page action to view in codeigniter.
Here's my controller code :
public function index()
{
# code untuk menampilkan Database Rotator
$this->data['partial_head'] = '
<!-- DataTables -->
<link rel="stylesheet" href="'.base_url('assets').'/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="'.base_url('assets').'/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="'.base_url('assets').'/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">';
$this->data['partial_body'] = '
<!-- DataTables & Plugins -->
<script src="'.base_url('assets').'/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="'.base_url('assets').'/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="'.base_url('assets').'/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="'.base_url('assets').'/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- jquery-validation -->
<script src="'.base_url('assets').'/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="'.base_url('assets').'/plugins/jquery-validation/additional-methods.min.js"></script>
<!-- Custom JS -->
<script src="'.base_url('assets').'/dist/js/customJs/rotator-admin.js"></script>
';
$this->data['content'] = 'rotator/index';
$this->template->_render_page('layout/main',$this->data);
}
public function get_dataTable()
{
# code untuk menampilkan tabel ajax
$draw = intval($this->input->get("draw"));
$start = intval($this->input->get("start"));
$length = intval($this->input->get("length"));
$query = $this->model->getAllData('rotator');
$data = [];
$no = 1;
foreach($query->result() as $row) {
$data[] = array(
$no++,
'+'.htmlentities($row->nomor_hp, ENT_QUOTES, "UTF-8"),
htmlentities($row->pesan, ENT_QUOTES, "UTF-8"),
htmlentities($row->jml_perulangan, ENT_QUOTES, "UTF-8").' kali',
($row->status_aktif==1)?
'<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input btn-aktif" name="aktif" id="'.encryptor('encrypt', $row->id_rotator).'" checked>
<label class="custom-control-label label-aktif" for="'.encryptor('encrypt', $row->id_rotator).'">Aktif</label>
</div>':'<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input btn-aktif" name="aktif" id="'.encryptor('encrypt', $row->id_rotator).'">
<label class="custom-control-label label-aktif" for="'.encryptor('encrypt', $row->id_rotator).'">Non Aktif</label>
</div>',
'<i class="fas fa-edit"></i>
<i class="fas fa-trash"></i>'
);
}
$result = array(
'draw' => $draw,
'recordsTotal' => $query->num_rows(),
'recordsFiltered' => $query->num_rows(),
'data' => $data
);
echo json_encode($result);
exit();
}
public function getByDataId($id = null)
{
# code untuk menampilkan Data Himpunan jika tombol edit di klik
$where = ['id_rotator' => encryptor('decrypt', $id)];
$hasil = $this->model->whereData($where, 'rotator')->row();
$data = [
'handphone' => $hasil->nomor_hp,
'pesan' => $hasil->pesan,
'isAktif' => $hasil->status_aktif,
'diulang' => $hasil->jml_perulangan,
'id' => $id
];
echo json_encode($data);
}
public function tambah_data()
{
# code untuk menambahkan data baru
$this->form_validation->set_rules('handphone', 'Nomor Handphone', 'trim|required|is_numeric|is_unique[rotator.nomor_hp]');
$this->form_validation->set_rules('pesan', 'Pesan', 'trim|required');
$this->form_validation->set_rules('diulang', 'Jumlah Perulangan', 'trim|required|is_numeric');
$this->form_validation->set_rules('isAktif', 'is Aktif', 'trim|numeric');
if ($this->form_validation->run() == FALSE) {
echo json_encode([
'alert_error' => validation_errors()
]);
} else {
$nomorHp = $this->input->post('handphone', true);
$pesan = $this->input->post('pesan', true);
$perulangan = $this->input->post('diulang', true);
$isAktif = !empty($this->input->post('isAktif', true)) ? 1 : 0;
$data = [
'nomor_hp' => $nomorHp,
'pesan' => $pesan,
'status_aktif' => $isAktif,
'jml_perulangan' => $perulangan,
];
if ($this->model->insertData($data, 'rotator')) {
echo json_encode([
'alert_success' => 'Data berhasil ditambahkan!',
'status' => TRUE
]);
} else {
echo json_encode([
'alert_success' => 'Data gagal ditambahkan!',
'status' => FALSE
]);
}
}
}
public function edit_data()
{
# code untuk mengubah Data
$this->form_validation->set_rules('handphone', 'Nomor Handphone', 'trim|required|is_numeric');
$this->form_validation->set_rules('pesan', 'Pesan', 'trim|required');
$this->form_validation->set_rules('diulang', 'Jumlah Perulangan', 'trim|required|is_numeric');
$this->form_validation->set_rules('isAktif', 'is Aktif', 'trim|numeric');
if ($this->form_validation->run() == FALSE) {
echo json_encode([
'alert_error' => validation_errors()
]);
} else {
$nomorHp = $this->input->post('handphone', true);
$pesan = $this->input->post('pesan', true);
$perulangan = $this->input->post('diulang', true);
$isAktif = !empty($this->input->post('isAktif', true)) ? 1 : 0;
$data = [
'nomor_hp' => $nomorHp,
'pesan' => $pesan,
'status_aktif' => $isAktif,
'jml_perulangan' => $perulangan,
];
$id = $this->input->post('idRotator', true);
if($this->model->updateData(['id_rotator' => encryptor('decrypt', $id) ], $data, 'rotator')){
echo json_encode([
'alert_success' => 'Data berhasil diubah!',
'status' => TRUE
]);
} else {
echo json_encode([
'alert_error' => 'Data Gagal diubah!',
'status' => FALSE
]);
}
}
}
public function hapus_data($id = null)
{
# code untuk menghapus Data Himpunan
$where = ['id_rotator' => encryptor('decrypt', $id)];
$this->model->deleteData($where, 'rotator');
echo json_encode([
'status' => TRUE
]);
}
public function aktif_handphone($id = null)
{
# code untuk mengaktifkan handphone
$this->form_validation->set_rules('aktif', 'Aktif Handphone', 'trim|is_numeric');
if ($this->form_validation->run() == FALSE) {
echo json_encode([
'alert_error' => validation_errors()
]);
} else {
$data = [
'status_aktif' => $this->input->post('aktif',true)
];
if($this->model->updateData(['id_rotator' => encryptor('decrypt', $id)], $data, 'rotator')){
echo json_encode([
'alert_success' => 'Data berhasil diubah!',
'status' => TRUE
]);
}
}
}
Here's my table in view code:
<table class="table table-bordered table-sm table-striped table-hover" id="dataTable"
width="100%" cellspacing="0">
<thead>
<tr>
<th>No.</th>
<th>Nomor HP</th>
<th>Pesan</th>
<th>Jumlah Diulang</th>
<th>Status</th>
<th width="12%">#</th>
</tr>
</thead>
</table>
Here's my modal in view code:
<!-- modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close btn-tutup" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="" id="myForm" method="post" accept-charset="utf-8">
<div class="modal-body">
<div class="form-group row">
<label for="handphone" class="col-sm-4 col-form-label">Nomor Hp</label>
<div class="col-sm-8 inputan">
<input id="handphone" name="handphone" type="text" pattern="\d*" maxlength="13"
onkeypress="return isNumber(event)" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="pesan" class="col-sm-4 col-form-label">Pesan Untuk Admin</label>
<div class="col-sm-8 inputan">
<textarea name="pesan" id="pesan" cols="30" rows="3" class="form-control"
style="resize: none;" maxlength="256"></textarea>
</div>
</div>
<div class="form-group row">
<label for="diulang" class="col-sm-4 col-form-label">Diulang Sebanyak</label>
<div class="col-sm-4 inputan">
<input id="diulang" name="diulang" type="text" pattern="\d*" maxlength="2" minlength="1"
min="1" max="10" onkeypress="return isNumber(event)" class="form-control">
</div>
<span class="col-sm-4 col-form-label">(x) kali</span>
</div>
<div class="form-group row">
<div class="col-4"></div>
<div class="col-8 inputan">
<div class="custom-control custom-checkbox custom-control-inline">
<input name="isAktif" id="checkbox_0" type="checkbox" class="custom-control-input"
value="1" required="required">
<label for="checkbox_0" class="custom-control-label">is Aktif</label>
</div>
</div>
</div>
<input id="idRotator" name="idRotator" type="hidden">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default btn-tutup" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
and here's my script code:
//tampilkan data di datatables
$(document).ready(function() {
resetForm()
table = $('#dataTable').DataTable({
"ajax": {
url: 'rotator/get-dataTable',
type: 'POST'
},
})
})
$(function () {
// validasi form sebelum di kirim
$('#myForm').validate({
rules: {
handphone: {
required: true,
},
pesan: {
required: true,
},
diulang: {
required: true,
min: 1,
max: 10
},
isAktif: {
required: false
}
},
messages: {
handphone: {
required: "Pastikan masukan nomor telp dengan kode negara, misal 62xxxxxxxxxxx"
},
pesan: {
required: "Inputan pesan tidak boleh kosong!"
},
diulang: {
required: "Input angka 1 sampai 10",
min: "Input angka minimal 1",
max: "Input angka maksimal 10"
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.inputan').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
},
// jika form di submit
submitHandler: function() {
var data = $('#myForm').serialize()
$('.btn-simpan').text('simpan...') //ganti text button
$('.btn-simpan').attr('disabled', true) //set button disable
var url
if (save_method == 'add') {
url = "rotator/tambah-data"
} else {
url = "rotator/edit-data"
}
$.ajax({
url: url,
type: 'POST',
data: data,
dataType: 'JSON',
success: function(data) {
if (data.status) {
toastr.success(data.alert_success)
$('#exampleModal').modal('hide')
reload_table()
resetForm()
} else {
var messages = data.alert_error.split("\n")
for(var i=0; i<messages.length - 1; i++)
toastr.error(messages[i])
}
$('.btn-simpan').text('Simpan') //ganti text button
$('.btn-simpan').attr('disabled', false) //set button enable
},
error: function(jqXHR, textStatus, errorThrown) {
toastr.error('Error ' + save_method + ' data')
$('.btn-simpan').text('Simpan') //ganti text button
$('.btn-simpan').attr('disabled', false) //set button enable
}
})
}
})
})
//fungsi jika tombol tutup di klik
$('.btn-tutup').on("click", function(e) {
e.preventDefault()
resetForm()
})
//fungsi jika tombol tambah di klik
$('.btn-tambah').on('click',function (e) {
e.preventDefault()
$('.modal-title').text('Tambah Data')
resetForm()
save_method = 'add'
})
//fungsi jika tombol edit di klik
$('#dataTable').on('click', '.btn-edit', function() {
$('.modal-title').text('Edit Data')
var url = "rotator/getByDataId/"
var id = this.id
save_method = 'update'
resetForm()
$.ajax({
url: url + id,
type: 'POST',
dataType: 'JSON',
success: function(data) {
$.each(data, function() {
$('[name="handphone"]').val(data.handphone)
$('[name="pesan"]').text(data.pesan)
$('[name="diulang"]').val(data.diulang)
if(data.isAktif>0){
$('input[name=isAktif]').attr('checked', 'checked')
} else {
$('input[name=isAktif]').removeAttr('checked')
}
$('[name="idRotator"]').val(data.id)
$('[name="idRotator"]').attr('readonly', true)
//console.log(data)
})
},
error: function(jqXHR, textStatus, errorThrown) {
//toastr.error('Gagal baca data dari ajax')
return false
}
})
})
//fungsi jika tombol hapus di klik
$('#dataTable').on('click', '.btn-hapus', function() {
var url = "rotator/hapus-data/"
var id = this.id
Swal.fire({
title: 'Yakin akan menghapus data?',
icon: 'question',
showDenyButton: true,
showCancelButton: false,
confirmButtonText: `Ya, Hapus`,
denyButtonText: `Tidak`,
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: url + id,
type: 'POST',
dataType: 'JSON',
success: function(data) {
Swal.fire('Dihapus!', 'data berhasil dihapus.', 'success')
reload_table()
resetForm()
},
error: function(xhr, ajaxOptions, thrownError) {
Swal.fire('Hapus Gagal!', 'Coba lagi', 'error')
}
})
} else if (result.isDenied) {
Swal.fire('Aman..!', 'Data tidak jadi dihapus.', 'info')
}
})
})
//fungsi untuk aktivasi handphone
$('#dataTable').on('click', '.btn-aktif', function() {
var url = "rotator/aktif-handphone/"
var id = this.id
var aktif = $('input#'+ id +':checked').val() ? '1' : '0'
$.ajax({
url: url + id,
type: 'POST',
dataType: 'JSON',
data : {aktif:aktif},
success: function(data) {
toastr.success(data.alert_success)
reload_table()
},
error: function(xhr, ajaxOptions, thrownError) {
toastr.error(data.alert_error)
return false
}
})
})
//fungsi untuk reload dataTabel
function reload_table() {
table.ajax.reload(null, false)
}
//fungsi untuk cek hanya angka yang diinput
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false
}
return true
}
//fungsi untuk reset form
function resetForm() {
$('#myForm').find('input:checkbox').removeAttr('checked') //kosongkan chekbox
$('#myForm').find('input:text').val('') //kosongkan form input
$('#myForm').find('textarea').text('') //kosongkan text area
}
if I try to setting my $config['csrf_protection'] = TRUE; will be error and showing notification, Where location we must locate <?= $this->security->get_csrf_token_name(); ?> and <?php echo $this->security->get_csrf_hash(); ?> to fix all ajax using csrf in one page..?

Answer 1

i come across this issue and if are you use multi form see this answer
https://stackoverflow.com/a/69407364/6559546