Cara Menampilkan Data dari Database dengan Ajax

Jika kita membicarakan tentang bagaimana cara menampilkan data dari database dengan Ajax, berarti disini kita akan menggunakan jQuery dan PHP ya, apa keuntungan kita menggunakan ajax ini, seperti yang kita tau data yang kita tau dengan ajax kita menampilkan, mendelete, menghapus, memasukan data baru dan mengedit itu tidak akan terjadi reload halaman, seperti kita hanya menggunakan PHP, jadi jangan kemana-mana simak terus ya teman-teman.

Loh kan untuk supaya kita menggunkan edit delete supaya tidak refresh itu bukanya efek kita menggunakan jQuery ya, iya betul, tetapi ketika hanya menggunakan jQuery ketika kita membuat efek edit delete update dan insert itu hanya sementara saja, tetapai ketika kita refresh akan kembali seperti semula, walaupun kita bisa localstorage tetapi itu hanya tersimpan di web browser saja saja, paling enak ya kita menggunakan database, oke langsung saja ya, disini saya membuat sebuah database untuk cara menampilkan data dari database dengan Ajax seperti ini:

jadi disini saya membuat dengan nama todos, oke lanjut ya, seperti biasa kita haru mengkoneksikannya ya, teman-teman sudah bisa ya,

$con = mysqli_connect("localhost", "root", "", "ajax_dmt");

1	$con = mysqli_connect("localhost", "root", "", "ajax_dmt");

saya membuatnya sesimple ini saja, dan saya menggunakan mysqli ya, oke langsung saja, kita akan membuatnya table seperti ini:

<div class="container">
		<div class="col-md-12">
			<div class="row">
				<input type="text" name="" placeholder="Cari disini..." class="form-control m-4" id="searchForm">
				<table class="table table-bordered">
					<thead>
						<tr class="thead-dark">
							<th>Title</th>
							<th>Body</th>
							<th>Tanggal Pembuatan</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>	
	</div>

<thead>

<th>Title</th>

<th>Tanggal Pembuatan</th>

</tr>

</thead>

</table>

</div>

Disini saya membuatnya menggunakan bootstrap ya, dan untuk datanya saya akan tampilkan di tbody, dan sekarang kita buat kode ajaxnya

$(document).ready(function(){
var app = {
show: function(){
	$("tbody").html("")
	$.ajax({
		url: 'data.php',
		method : 'POST',
		data: {type: 'tampil'},
		success: function(response){
			var todos = JSON.parse(response);
			todos.forEach(function(value, index){
				$("tbody").append(`
				<tr>
					<td>${value.title}</td>
					<td>${value.body}</td>
					<td>${value.created_at}</td>
				</tr>`);	
			})
		}
	})	
}
}
})

$(document).ready(function(){

var app = {

show: function(){

$("tbody").html("")

$.ajax({

url: 'data.php',

method : 'POST',

data: {type: 'tampil'},

success: function(response){

var todos = JSON.parse(response);

todos.forEach(function(value, index){

$("tbody").append(`

<tr>

<td>${value.title}</td>

<td>${value.body}</td>

<td>${value.created_at}</td>

</tr>`);

})

}

})

}

})

Disini saya menggunakan JSON.parse ya, jika kita lihat url itu mengaharah ke data.php ya, oke langsung saja kita buka file data.php nya

if($_POST['type'] == "tampil"){
	$data = [];
	$query = mysqli_query($con, "SELECT * FROM posts ORDER BY id DESC ");
	while($row = mysqli_fetch_object($query)){
		$data[] = $row;
	}
	echo json_encode($data);
}

if($_POST['type'] == "tampil"){

$data = [];

$query = mysqli_query($con, "SELECT * FROM posts ORDER BY id DESC ");

while($row = mysqli_fetch_object($query)){

$data[] = $row;

}

echo json_encode($data);

}

nah ketika kita menggunakan json.parse di indexnya berarti di webservicenya kita menggunakan json_encode ya, oke saya rasa cukup, dan sekarang kita lihat hasilnya.

oke sudah berhasil ya kita bagaimana cara menampilkan data dari database dengan Ajax, dan saya rasa cara menampilkan data dengan ajax ini bisa kita pakai kedepanya jadi saya tidak harus menuliskannya kembali, jadi kita langsung saja ke materi selanjutnya seperti itu, oke semoga bermanfaat ya.

Facebook DUMET School

Categories