Friday 24 March 2017

[TUTORIAL] Menampilkan Data dari Database dengan AJAX jQuery




Hello World!
Melanjutkan postingan saya yang kemarin tentang  bagaimana cara submit data dari form dengan ajax, hari ini kita bakal coba buat menampilkan data yang sudah disubmit kemarin untuk ditampilkan pada sebuah modal bootstrap.
Karena tutorial ini merupakan lanjutan tutorial sebelumnya, maka kita tidak perlu membuat database dan table lagi, jadi cukup pakai database yang sama dengan project sebelumnya.

Oke kita mulai.

Pertama, kita buka lagi project yang kemarin dan buat sebuah file dengan nama view.php dan isi kan source code berikut :

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP
	
</head>
<body>

<?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $dbname = 'ajax-jquery-php'; $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname); if($conn->connect_error){ die('Connection Error :'.$conn->connect_error); } $sql = "SELECT * FROM biodata"; $data = $conn->query($sql); while($row = $data->fetch_array()){ ?> <?php } ?>
Full Name View Profile
</body> </html>

Selanjutnya tepat diatas tag </body> masukan script ajax berikut :





Setelah itu buat sebuah file php sebagai target dari ajax, beri nama submit2.php lalu masukan kode berikut :

<?php 

if(isset($_POST['id'])){

		$id = $_POST['id'];

		$link = mysqli_connect("localhost", "root", "", "ajax-jquery-php");
		 
		// jalankan query
		$sql = "SELECT * FROM biodata WHERE id = '$id'";
		$result = mysqli_query($link, $sql);

		$row = mysqli_fetch_array($result, MYSQLI_ASSOC);

		echo json_encode($row);
		exit;
}

 ?>

Di file tersebut data akan dikirimkan dalam bentuk json.
Setelah semua kode ditulis selanjutnya dicoba. viola done!

Jika ada yang kurang jelas silakan tinggalkan komentar atau unduh project nya disini

6 comments

This comment has been removed by the author.

Salam, mhn petunjuk dengan jason bagaimana klo mau menggabungkan tanggal dan tempat lahir jd dalam 1 kolom,
id="txt_tempatlahir"
<td id="txt_tanggallahir"
jadi spt ini : tempat, tanggal lahir
makasi kanda.

kode html terakhir ada error.. mohon pentunjuknya.

mohon maaf, mungkin agan kelupaan untuk mengupload file .js ke dropbox

salah satu kelemahan Ajax adalah sebagian halaman website dimuat terpisah, terkadang menjadi sulit ketika melakukan bookmark/favorite, karena browser hanya akan menandai bookmark satu URL saja, sedangkan dengan Ajax, sebagian konten bisa berubah berkali-kali. Terima kasih, artikelnya bermanfaat

Kunjungi web kampus saya : Atma Luhur


Kunjungi web saya : Rismawati

titanium white octane - TITIAN RODIANS
The titanium white octane is the t fal titanium primary source of corrosion, chi titanium flat iron corrosion titanium symbol resistance and resistance of steel. titanium mountain bikes The titanium white octane is titanium grey not only the


EmoticonEmoticon