Cara menggunakan AJAXSETUP pada JavaScript

Cara Membuat CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 1 Menampilkan Data – Hai sobat ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang CRUD lagi tapi kita naik level yaitu dengan menggunakan Ajax. Dengan menggunakan Ajax ini kita juga bisa membuatnya menyimpan data dan menampilkan data tanpa loading. Namun seperti CRUD yang pertama, pada CRUD yang kedua ini juga terbagi menjadi beberapa part dan untuk part yang pertama ini saya akan membahas tentang Cara menampilkan data dengan Ajax. Untuk koneksi databasenya masih menggunakan MySQLi dengan metode Object Oriented. Jika sobat belum mengetahuinya maka sobat bisa membaca dengan klik link dibawah

Cara Membuat Koneksi dengan Database MySQL menggunakan PHP

Sekali lagi saya sarankan jika sobat sudah terlanjur membuat aplikasi membuat mysql_query maka ubahlah menjadi mysqli_query atau PDO karena cara itu sudahlah tidak aman. Dan untuk langkah untuk mengeksekusi querynya menggunakan prepare statement dan bind param. Seperti apakah itu nanti akan saya jelaskan pada tutorial dibawah.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATETABLE`tbl_mahasiswa`(

`id`int(11)NOT NULLPRIMARY KEYAUTO_INCREMENT,

`nama_mahasiswa`varchar(255)NOT NULL,

`alamat`text NOT NULL,

`jenis_kelamin`varchar(255)NOT NULL,

`tgl_masuk`dateNOT NULL,

`jurusan`varchar(255)NOT NULL

)

3. Isikan data pada tbl_mahasiswa dengan mengetikkan query dibawah ini

INSERTINTO`tbl_mahasiswa`(`id`,`nama_mahasiswa`,`alamat`,`jenis_kelamin`,`tgl_masuk`,`jurusan`)VALUES

(1,'Dewan Komputer','Cilacap','Laki-laki','2019-01-01','Sistem Informasi'),

(2, 'Sule','Jakarta','Laki-laki','2019-01-01','Teknik Informatika'),

(3,'Maemunah','Yogyakarta','Perempuan','2019-01-01','Sistem Informasi'),

(4,'Siti ED','Semarang', 'Perempuan','2019-01-01','Teknik Informatika'),

(5,'Andre','Purwokerto','Laki-laki','2019-01-01','Sistem Informasi'),

(6,'Tukul Arwana','Surabaya','Laki-laki','2019-01-01', 'Sistem Informasi');

Menampilkan Data dari Database MySQL dengan Ajax

Untuk mempercantik tampilan saya menggunakan bootstrap 4 dan datatables. Langsung saja saya berikan tutorialnya yaitu :

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-crud-ajax.

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1=newmysqli(HOST,USER,PASS,DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

3. Buat file auth.php untuk membuat otentifikasinya dan untuk keamananya. Isikan dengan kode dibawah

<?php

//Membuat Token Keamanan Ajax Request (Csrf Token)

session_start();

if(empty($_SESSION['csrf_token'])){

$_SESSION['csrf_token'] =bin2hex(random_bytes(32));

}

//CEK LOGIN USER JIKA ADA TAMBAHKAN DIBAWAH INI

Catatan :

Nama file bisa terserah sobat, jika sobat sudah memiliki file yang mirip dengan ini maka sobat bisa tambahkan saja di file tersebut. Karena pada contoh kali ini tidak ada session loginnya maka tidak ada pengecekan otentifikasi login, namun jika pada aplikasi sesungguhnya maka alangkah baiknya untuk ditambahkan pengecekan sesi login.

4. Buatlah file index.php pada folder sobat dan isikan dengan script dibawah ini

Di paling atas atau pada baris pertama diatas tag <html> kita tambahkan baris berikut untuk membuat session csrf_token dan pengecekan login (jika ada)

<?php

include'auth.php';

Pada tag <head>

Karena kita menggunakan Ajax maka kita perlu csrf token untuk membatasi siapa saja yang bisa mengakses url. Ini berfungsi untuk keamanan dalam pertukaran datanya.

Kemudian tambahkan css untuk mempercantik tampilan pada contoh kali ini saya menggunakan bootstrap.

Bootstrap digunakan untuk mempercantik tampilan dan juga tombol. Fontawesome digunakan untuk menampilkan logo pada tombol dan datatable digunakan untuk mempercantik tampilan tabel dan membuat search, pagination, kolom warna warni dll.

Pada tag <body> bagian bawah isikan

Karena ini hanya demo maka saya menggunakan css dan js online. Jika untuk kepentingan development disarankan untuk mendownload terlebih dahulu librarinya atau nanti sobat bisa download project di akhir postingan.

Pada tag <body> isikan script dibawah

<aclass="navbar-brand"href="index.php"style="color: #fff;">

Dewan Komputer

</a>

</nav>

<h2 align="center"style="margin: 30px;">CRUD Ajax No Loading</h2>

<label>Nama Mahasiswa</label>

</div>

<label>Jurusan</label>

<option value="Sistem Informasi">Sistem Informasi</option>

<option value="Teknik Informatika">Teknik Informatika</option>

</select>

</div>

<label>Tanggal Masuk</label>

</div>

<label>Jenis Kelamin</label><br>

<input type="radio"name="jenkel"id="jenkel1"value="Laki-laki"required="true">Laki-laki

<input type="radio"name="jenkel"id="jenkel2"value="Perempuan">Perempuan

</div>

<label>Alamat</label>

</div>

<iclass="fa fa-save"></i> Simpan

</button>

</div>

</form>

<hr>

</div>

<div class="text-center">©<?phpecho date('Y');?>Copyright:

<ahref="https://dewankomputer.com/">Dewan Komputer</a>

</div>

5. Masih di index.php, paling bawah tambahkan javascript pada tag <body> dengan code dibawah ini

$(document).ready(function(){

//Mengirimkan Token Keamanan

$.ajaxSetup({

headers:{

'Csrf-Token': $('meta[name="csrf-token"]').attr('content')

}

});

$('.data').load("data.php");

});

</script>

Penjelasan :

– Pada kode dibawah adalah untuk mengirim csrf token saat menggunakan Ajax. Sobat bisa menempatkan kode ini pada main.js yang mana file tersebut kita indludekan di setiap file sehingga kita tidak perlu menambahkan kode ini pada setiap file atau pada setiap Ajax. Cara ini lebih memudahkan kita karena kita hanya sekali menuliskan kode dibawah. Kode ini adalah kode yang akan dikirimkan setiap kita membuat ajax.

$.ajaxSetup({

headers:{

'Csrf-Token':$('meta[name="csrf-token"]').attr('content')

}

});

6. Buat file data.php yang berfungsi untuk reload data menggunakan ajax sehingga aplikasi sobat tidak perlu loading saat menyimpan data atau ada data update. Isikan data.php dengan script dibawah ini

<thead>

<tr>

<td>NamaMahasiswa</td>

<td>Alamat</td>

<td>Jurusan</td>

<td>JenisKelamin</td>

<td>Tanggal Masuk</td>

<td>Action</td>

</tr>

</thead>

<tbody>

<?php

include'koneksi.php';

$no= 1;

$query="SELECT * FROM tbl_mahasiswa ORDER BY id DESC";

$dewan1=$db1->prepare($query);

$dewan1->execute();

$res1=$dewan1->get_result();

if ($res1->num_rows>0){

while($row=$res1->fetch_assoc()) {

$id=$row['id'];

$nama_mahasiswa= $row['nama_mahasiswa'];

$alamat=$row['alamat'];

$jurusan =$row['jurusan'];

$jenis_kelamin=$row['jenis_kelamin'];

$tgl_masuk =$row['tgl_masuk'];

<tr>

<td>

<button id="<?phpecho$id;?>"class="btn btn-success btn-sm edit_data"><i class="fa fa-edit"></i>Edit</button>

<button id="<?php echo$id;?>"class="btn btn-danger btn-sm hapus_data"><iclass="fa fa-trash"></i>Hapus</button>

</td>

</tr>

<?php}} else{?>

<tr>

<td colspan='7'>Tidak adadataditemukan</td>

</tr>

<?php}?>

</tbody>

</table>

$(document).ready(function(){

$('#example').DataTable();

});

</script>

7. Untuk keamanan karena kita menggunakan header pada ajax, kita perlu membuat file csrf.php kemudian isikan dengan script dibawah

<?php

header('Content-Type: application/json');

//Mengirimkan Token Keamanan

if (empty($_SESSION['csrf_token'])){

$_SESSION['csrf_token']=bin2hex(random_bytes(32));

}

$headers=apache_request_headers();

if(isset($headers['Csrf-Token'])){

if ($headers['Csrf-Token']!==$_SESSION['csrf_token']){

exit(json_encode(['error'=> 'Wrong CSRF token.']));

}

}else{

exit(json_encode(['error'=> 'No CSRF token.']));

}

Catatan :

– Jika setelah ditambahkan csrf terjadi error dengan pasan ‘No CSRF Token’ berarti sobat belum mengirimkan csrf saat membuat ajax. Script saat mengirimkan seharusnya ada pada main.js atau file php menggunakan kode $.ajaxSetup().

– Jika sobat sudah mengirimkan dan masih ERROR yang sama mungkin kasusnya seperti yang pernah saya alami, pada ajaxSetup saya mengirimkan Csrf-Token namun yang terkirim malah csrf-token, sehingga sobat harus mengganti pada kode $headers[‘Csrf-Token’] menjadi $headers[‘csrf-token’].

-Sedangkan jika sobat mengalami error Wrong csrf token berarti token yang dikirimkan tidak sama, mungkin penyebabnya sessionn belum dimulai sehingga sistem membuat session cesr_token baru. Untuk kasus inisobat perlu menambahkan kode session_start();

8. Jika sobat jalankan http://localhost/dewan-crud-ajax/ maka akan muncul hasilnya seperti gambar dibawah

Jika tabel sudah tampil berarti tandanya Ajax sudah bekerja sedang sempurna. Sisanya kita nanti tinggal menjadikan action berjalan. Sekian postingan saya tentang CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 1 Menampilkan Data Ajax. Jika ada pertanyaan atau eror silahkan tinggalkan pada kolom komentar dibawah. Sampai ketemu pada postingan saya selanjutnya. Untuk menambahkan file upload dan menyimpannya menggunakan Ajax sobat bisa kunjungi postingan saya yang lainnya karena itu tidak saya bahas pada CRUD ini.

Baca juga :

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 1 Menampilkan Data Ajax

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 2 Insert Data dan Validasinya

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 3 Update Data

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP – Part 4 Hapus Data

Cara Mengupload Gambar dengan Ajax dan Menyimpan ke Database PHP

Membuat CRUD Expert, Upload & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..