CRUD AJAX – Episode CREATE & READ/VIEW DATA
Di tutorial CRUD Ajax kali ini siapkan sebuah database dengan nama blog_ajax dan sebuah table degan nama blog dengan struktur seperti berikut
Lalu siapkan 3 buah file dengan nama insert.php, fungsi.php, file jquery dan konek.php
Script konek.php
<?php
$konek=mysqli_connect('localhost','root','','blog_ajax') or die(mysqli_error($konek));
?>
Script insert.php
<!--memanggil jquery-->
<script type="text/javascript" src="jquery.min.js"></script>
<!--buat form input komnetar-->
Nama
<input type="text" name="nama" id="nama">
Isi artikel
<textarea name="textarea" id="tulis_komentar" cols="40" rows="8"></textarea>
<input type="submit" name="submit" id="submit" value="submit">
<div id="isi_komentar"></div>
<script type="text/javascript">
$('#submit').on('click', function() {
var namaa = $('#nama').val();
var artikel = $('#tulis_komentar').val();
$.ajax({
method: 'POST',
url: 'fungsi.php',
type: 'insert',
data: {nama: namaa,
isi_artikel:artikel},
success:function(data){
console.log(data);
}
});
});
</script>
<?php
Penjelasan
$(‘#submit’).on(‘click’, function() -> //Jika tombol dengan id submit di klik maka fungsi akan berjalan
var namaa = $(‘#nama’).val();
var artikel = $(‘#tulis_komentar’).val();
//membuat variabel namaa dan artikel yang nilainya di ambil dari id nama dan is tulis_komentar
$.ajax -> mulai menjalankan fungsi ajax
method: ‘POST’,
url: ‘fungsi.php’,
type: ‘insert’,
data: {nama: namaa, isi_artikel:artikel},
success:function(data){
console.log(data);
// Jika dalam php kurang lebih di baca seperti ini, gunakan metode POST lalu kirimkan ke fungsi.php dengan type insert dan nilainya diambil dari variabel namaa dan variabel artikel
Script fungsi.php
<?php
include 'konek.php';
if($_POST['type']=='insert'){
$nama=mysqli_escape_string($konek,$_POST['nama']);
$artikel=mysqli_escape_string($konek,$_POST['isi_artikel']);
$query="INSERT INTO blog (nama,isi_artikel) VALUES ('$nama','$artikel')";
if(mysqli_query($konek,$query)){
echo "berhasil";
}else{
echo "gagal";
}
}
?>
Penjelasan
Pada dasarnya fungsi nya sama pada create php procedural, hanya saja kita menambahkan fungsi ($_POST[‘type’]==’insert’) ini bertujuan untuk membaca ‘type’ yang kita kirimkan tadi di file insert pada fungsi ajaxnya.
,$_POST[‘nama’] & ,$_POST[‘isi_artikel’]// diambil dari database
Jika berhasil data akan keluar di dalam console. Pada tutorial ajax sangat di sarankan untuk menggunakan Google Chrome sebagai browser karna fungsi console dalam chrome sangat membantu dalam proses ajax ini.
Caranya jika anda telah berhasil klik kanan pada browser-> inspect element(Ctrl+Shift+i)->Console
Akan terlihat tulisan berhasil seperti berikut
Oke jika berhasil kalian juga akan melihat data nya masuk ke database kalian.
Berikut ini cara Read/View data pada Ajax
Pada tutorial read data kali ini kita tidak perlu menulis ulang script,Kita hanya perlu menambahkan beberapa script, diantaranya pada file insert.php tambahkan fungsi berikut didalam div id=isi_komentar
<div id="isi_komentar">
<?php
include 'konek.php';
$query="SELECT * FROM blog";
$result=mysqli_query($konek,$query);
foreach ($result as $data) {
echo "
".$data['nama']."
";
echo $data['isi_artikel'];
}
?>
</div>
Penjelasan
Fungsi di atas digunakan untuk menampilkan data pada database.
Kemudian menambahkan fungsi
$(‘#isi_komentar’).append(data); dibawah fungsi success, menjadi seperti ini
success:function(data){
$('#isi_komentar').append(data);
}
Fungsi ini digunakan untuk meletakan data di id isi_komentar
Lalu tambahkan “<p>”.$nama.”<br>”.$artikel.”</p>” fungsi berikut pada echo di file fungsi.php
if(mysqli_query($konek,$query)){
echo "".$nama."
".$artikel."
";
}else{
echo "gagal";
}
Fungsi ini digunakan untuk memanggil data dari database.
Jika berhasil kalian akan melakukan input data tanpa harus merefresh halaman
Itu tadi tutorial Create & Read data dengan Ajax semoga bermanfaat
Script Kami 