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
|
1 2 3 4 5 6 7 8 |
CREATE TABLE `tbl_mahasiswa` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `nama_mahasiswa` varchar(255) NOT NULL, `alamat` text NOT NULL, `jenis_kelamin` varchar(255) NOT NULL, `tgl_masuk` date NOT NULL, `jurusan` varchar(255) NOT NULL ) |
3. Isikan data pada tbl_mahasiswa dengan mengetikkan query dibawah ini
|
1 2 3 4 5 6 7 |
INSERT INTO `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
|
1 2 3 4 5 6 7 8 9 |
<?php define('HOST','localhost'); define('USER','root'); define('PASS',''); define('DB1', 'db_dewankomputer'); // Buat Koneksinya $db1 = new mysqli(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
3. Buat file auth.php untuk membuat otentifikasinya dan untuk keamananya. Isikan dengan kode dibawah
|
1 2 3 4 5 6 7 8 9 10 |
<?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)
|
1 2 3 |
<?php include 'auth.php'; ?> |
Pada tag <head>
|
1 2 |
<!-- Csrf Token --> <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?>"> |
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.
|
1 2 3 4 5 6 |
<!-- Bootstrap --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- Datatable --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"> |
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
|
1 2 3 4 5 6 |
<!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- DataTable --> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
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
|
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 |
<nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="index.php" style="color: #fff;"> Dewan Komputer </a> </nav> <div class="container"> <h2 align="center" style="margin: 30px;">CRUD Ajax No Loading</h2> <form method="post" class="form-data" id="form-data"> <div class="row"> <div class="col-sm-3"> <div class="form-group"> <label>Nama Mahasiswa</label> <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control" required="true"> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label>Jurusan</label> <select name="jurusan" id="jurusan" class="form-control" required="true"> <option value=""></option> <option value="Sistem Informasi">Sistem Informasi</option> <option value="Teknik Informatika">Teknik Informatika</option> </select> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label>Tanggal Masuk</label> <input type="date" name="tanggal_masuk" id="tanggal_masuk" class="form-control" required="true"> </div> </div> <div class="col-sm-3"> <div class="form-group"> <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> </div> </div> <div class="form-group"> <label>Alamat</label> <textarea name="alamat" id="alamat" class="form-control" required="true"></textarea> </div> <div class="form-group"> <button type="button" name="simpan" id="simpan" class="btn btn-primary"> <i class="fa fa-save"></i> Simpan </button> </div> </form> <hr> <div class="data"></div> </div> <div class="text-center">© <?php echo date('Y'); ?> Copyright: <a href="https://dewankomputer.com/"> Dewan Komputer</a> </div> |
5. Masih di index.php, paling bawah tambahkan javascript pada tag <body> dengan code dibawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(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.
|
1 2 3 4 5 |
$.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
|
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 |
<table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <td>No</td> <td>Nama Mahasiswa</td> <td>Alamat</td> <td>Jurusan</td> <td>Jenis Kelamin</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><?php echo $no++; ?></td> <td><?php echo $nama_mahasiswa; ?></td> <td><?php echo $alamat; ?></td> <td><?php echo $jurusan; ?></td> <td><?php echo $jenis_kelamin; ?></td> <td><?php echo $tgl_masuk; ?></td> <td> <button id="<?php echo $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"> <i class="fa fa-trash"></i> Hapus </button> </td> </tr> <?php } } else { ?> <tr> <td colspan='7'>Tidak ada data ditemukan</td> </tr> <?php } ?> </tbody> </table> <script type="text/javascript"> $(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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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 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
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
min mungkin gak sih aplikasi php kita ditambahin ajax tanpa merubah keseluruhannya?
tergantung mas yg mau di buat pake ajax apanya
misalkan simpannya saja ya bikin ajaxnya saat action simpan aja untuk update/delete/show table ngga harus pake ajax jg
Min DK, mau nanya saya kan udah buat nih, tp terkadang saat dibuka di komp lain, (bukan komp yg buat server), dia ga mau ngeinput edit dan delete, jadi saya hapus smua auth dan csrf, tapi sama saja, kadang mau kadang tidak untuk inputnya, itu knapa ya?
barusan saya baca” lg kodingnya, apa karna pada auth.php, session start nya itu ga ke load, makanya ga mau dia ya?
coba lihat di console errornya apa saat gagal simpan
min , muncul error kek gini nih,
padahal koding sama semua
Fatal error: Call to undefined function random_bytes() in C:…\auth.php on line 5
pake php brpa mas?
mas, misalkan di form data itu saya punya nilai1,nilai2,nilai3
dan saya mau kalkulasi ketiga nilai itu dengan rumus rata rata tertimbang
lalu di kirimkan ke database, setelah itu menampilkan semua data itu ke table. kalo lewat CRUD yang mas bikin itu gimana ya?
soalnya saya juga belum pernah kalkulasi data lewat php, dan belum nemu contohnya sama sekali. palingan juga nemu (sum) doang lewat query phpnya dan gak pake rumus aritmatika
untuk rata rata tertimbangnya itu
nilai1 punya bobot 30%
nilai2 punya bobot 40%
nilai3 punya bobot 20%
jadi kalo pake rumus biasa itu
nilai1 = (jumlah nilai yang diimputkan) * 0,3
nilai2 = (jumlah nilai yang diimputkan) * 0,4
nilai3 = (jumlah nilai yang diimputkan) * 0,2
rata2= (nilai1 + nilai2 + nilai3)/3
nah tapi saya gak tau masukin rumusnya kayak gimana
rumusnya biasa mas standar aja seperti itu
$nilai1 = $_POST[‘txtNilai1’];
$nilai2 = $_POST[‘txtNilai2’];
$nilai3 = $_POST[‘txtNilai3’];
$nilaiBobot1 = $nilai1*0.3;
$nilaiBobot2 = $nilai2*0.4;
$nilaiBobot3 = $nilai3*0.5;
$rata = ($nilaiBobot1+$nilaiBobot2+$nilaiBobot3)/3;
echo “nilaiBobot1 : ” . $nilaiBobot1.”
“;
echo “nilaiBobot2 : ” . $nilaiBobot2.”
“;
echo “nilaiBobot3 : ” . $nilaiBobot3.”
“;
echo “rata-rata : ” . $rata;
hasilnya tinggal di insert aja di database nampilin ke tabelnya normal seperti biasa
kalo logikanya itu sih saya mudeng, cuma ga tau nempatinnya dimana, kalo dicrud nya mas itu ditambahin dimananya
ya di part 2 mas pas insert itu menggunakan form_action.php
ok mas makasih saya coba dulu
Biar ada notikasi kalau input data berhasil bagaimana ya min?
tinggal kasih aja alert atau apa di ajax success nya
saya sudah menyempurnakan codingan anda, silahkan kunjungi repository github saya. saya ini kepada anda ingin menyebarkannya. sekian terima kasih. happy coding
https://github.com/widiarrohman1234/crud-ajax
maaf mas kalo mau menyempurnakan kalo bisa lebih bagus bukannya malah menghilangkan prepare statement dan filter inputan usernya, yg ada codingan masnya itu gampang sekali kena sql injection..
saat pemanggilan query lebih pendek bukan berarti lebih bagus hal itu malah menjadikan aplikasi menjadi lebih rentan ditambah lagi tidak ada filter di inputan user semakin menjadi rentan