Menampilkan Data dengan MySQLi & PHP


Setelah membuat koneksi database, selanjutnya kita akan belajar untuk menampilkan data dari database MySQL menggunakan MySQLi. Berikut langkah-langkahnya :

Langkah 1

Buatlah sebuah tabel misal tabel buku dengan field id_buku,judul dan pengarang.

CREATE TABLE `buku` (  
`id_buku` int(11) NOT NULL AUTO_INCREMENT,  
`judul` varchar(255) NOT NULL,  
`pengarang` varchar(255) NOT NULL,  
PRIMARY KEY (`id_buku`)
) ENGINE=InnoDB;

Kemudian isikan dengan data :

INSERT INTO `buku` (`judul` ,`pengarang`) VALUES ('Membuat Alat Penghemat BBM', 'Urip Sudirman');

Langah 2

Selanjutnya, pastikan koneksi database sudah Anda buat. Jika belum silahkan buat koneksi database dengan MySQLi terlebih dahulu.

Setelah membuat koneksi database, buatlah sebuah file dengan nama misal tampil.php. Nantinya file ini akan kita tuliskan perintah PHP untuk menampilkan data dari database. Awalnya include-kan file koneksi ke file ini terlebih dahulu dengan perintah :

<?php include('config.php'); ?>

Letakkan perintah tersebut dibagian paling awal/baris pertama dalam file utama.php.

Langkah 3

Data yang akan ditampilkan nantinya ialah judul dan pengarang-nya saja. Data tersebut akan ditampilkan didalam tabel. Berikut perintah untuk menampilkan data menggunakan MySQLi :

<?php
$sql= "SELECT judul, pengarang FROM buku ORDER BY judul ASC"; // Menampung perintah SQL ke variabel ‘sql’
$hasil = $mysqli->query($sql); // Menjalankan perintah tersebut dengan fungsi mysqli-query

if($hasil === false) { // Jika gagal menjalankan query
trigger_error(‘Perintah SQL salah: ‘ . $sql . ‘ Error: ‘ . $mysqli->error, E_USER_ERROR); // Tampilkan pesan
} else { // Jika berhasil
while($data = $hasil->fetch_array()){ // Tampilkan data dengan pengulangan while
echo "<tr>";
echo "<td>$data[judul]</td>"; // Menampilkan data judul
echo "<td>$data[pengarang]</td>"; // Menampilkan data pengarang
echo "</tr>";
}
}
?>

Langkah 4

Agar data tersebut tampil lebih menarik, maka berikan style CSS pada tabel data tersebut. Sesuaikan dengan selera Anda.

table {
margin: 0 auto;
border-collapse: collapse; 
}

tbody {
color: #000;
}

table th, table td {
padding: 5px 10px;
border: 1px solid #000000;
}

table th {
background: #CCC;
font: bold 14px Arial, Helvetica, sans-serif;
color:#333;
}

table tr {
font: normal 14px Tahoma, Geneva, sans-serif;
}

Apabila Anda mengalami kesulitan, silahkan download file source code-nya.