Selamat datang kembali di blog Mari belajar koding. Apakah teman teman sedang membuat sebuah aplikasi web berupa katalog atau web ecommerce dan ingin menampilkan data dari database menyamping di tampilan aplikasinya? Nah pada tutorial kali ini kita akan belajar menampilkan data dari database kesamping atau horizontal dengan PHP.
Menampilkan Data ke Samping (Horizontal) dengan PHP
Buat database dan tabel terlebih dahulu. Contoh yang akan kita gunakan yaitu database galeri dengan satu tabel bernama buku. Nantinya kita akan membuat sebuah website katalog buku.
CREATE DATABASE galeri;
USE galeri;
CREATE TABLE `buku` (
`id_buku` int(11) NOT NULL AUTO_INCREMENT,
`nama_buku` varchar(255),
`gambar` varchar(255),
PRIMARY KEY (`id_buku`)
);
Insert data kedalam tabel buku.
INSERT INTO `buku` VALUES ('1', 'Zadie Smith, Feel Free', 'Zadie.jpg');
INSERT INTO `buku` VALUES ('2', 'Amy Bloom, White House', 'Amy.jpg');
INSERT INTO `buku` VALUES ('3', 'Aminatta Forna, Happiness', 'Aminatta.jpg');
INSERT INTO `buku` VALUES ('4', 'Lorrie Moore, See What Can Be Done', 'Lorrie.jpg');
INSERT INTO `buku` VALUES ('5', 'Lauren Groff, Florida', 'Lauren.jpg');
INSERT INTO `buku` VALUES ('6', 'Denis Johnson, The Largesse of the Sea Maiden', 'Denis.jpg');
INSERT INTO `buku` VALUES ('7', 'Tayari Jones, An American Marriage', 'Tayari.jpg');
INSERT INTO `buku` VALUES ('8', 'Ro Kwon, The Incendiaries', 'RO.jpg');
INSERT INTO `buku` VALUES ('9', 'Christopher Yates, Grist Mill Road', 'Christopher.jpg');Buat file koneksi.php di directory xampp/htdocs/galeri untuk menghubungkan aplikasi dengan database.
<?php
$db_username = "root";
$db_hostname = "localhost";
$db_password = "";
$db_name = "galeri";
$con = mysql_connect($db_hostname, $db_username, $db_password);
$db = mysql_select_db($db_name, $con);
?>Buat file latihan1.php untuk menampilkan data dari database di directory xampp/htdocs/galeri.
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Coding</title>
<?php include "koneksi.php"; ?>
</head>
<body>
<div align="center">
<h2><b>Menampilkan Data Kesamping dengan PHP</b></h2>
<h4><b>Data Buku</b></h4>
<table >
<?php
$kolom = 3;
$i=1;
$query=mysql_query("SELECT * FROM buku");
while ($data=mysql_fetch_array($query)) {
if(($i) % $kolom== 1) {
echo'<tr>';
}
echo '<td align="center" width="300px"><img src="img/'.$data['gambar'].'" width="50%" /><br><b>'.$data['nama_buku'].'</b></td>';
if(($i) % $kolom== 0) {
echo'</tr>';
}
$i++;
}
?>
</table>
<br>
<h2><a href="https://www.maribelajarcoding.com/" target="_blank">www.maribelajarcoding.com</a> </h2> <br> <br>
</div>
</body>
</html>Keterangan:
Teman-teman bisa mengubah jumlah kolom menyamping dengan mengganti $kolom. Lihat pada baris yang di beri highlight.
Jalankan file latihan1.php dengan mengetikkan localhost/galeri/latihan1.php di browser. Pastikan services apache dan mysql dalam keadaan start.
Baca juga Membuat Pagination dengan PHP dan Mysql
Bagaimana jika ingin menampilkan data menggunakan grid bootstrap bukan menggunakan tabel? Caranya mudah, ganti tag tr <tr> dengan div class row. Buat satu file lagi bernama latihan2.php di directory xampp/htodcs/galeri.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mari Belajar Coding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<?php include "koneksi.php"; ?>
</head>
<body>
<div class="container" align="center">
<h2><b>Menampilkan Data Kesamping dengan PHP (Bootstrap)</b></h2>
<h4><b>Data Buku</b></h4>
<?php
$kolom = 3;
$i=1;
$query=mysql_query("SELECT * FROM buku");
while ($data=mysql_fetch_array($query)) {
if(($i) % $kolom== 1) {
echo'<div class="row">';
}
echo '<div class="col-sm-4"><img class="img-thumbnail" src="img/'.$data['gambar'].'" width="50%" /><br><b>'.$data['nama_buku'].'</b></div>';
if(($i) % $kolom== 0) {
echo'</div>';
}
$i++;
}
?>
<br>
<h3><a href="https://www.maribelajarcoding.com/" target="_blank">www.maribelajarcoding.com</a> </h3> <br><br>
</div>
</body>
</html>
Keterangan:
Untuk mengubah jumlah kolom menjadi 4, teman-teman bisa mengganti $kolom=3 menjadi $kolom=4 dan <div class="col-sm-4"> di ganti menjadi <div class="col-sm-3">. Lihat baris yang diberi highlight.
Source code:
galeri.rar
Untuk mengubah jumlah kolom menjadi 4, teman-teman bisa mengganti $kolom=3 menjadi $kolom=4 dan <div class="col-sm-4"> di ganti menjadi <div class="col-sm-3">. Lihat baris yang diberi highlight.
Source code:
Related search:
- Menampilkan data kesamping dengan PHP
- Menampilkan data horizontal dengan PHP