Menampilkan Data ke Samping (Horizontal) dengan PHP - Mari Belajar Coding

Senin, 08 April 2019

Menampilkan Data ke Samping (Horizontal) dengan PHP


Menampilkan Data ke Samping (Horizontal) dengan PHP

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 
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`)
);

Menampilkan Data ke Samping Horizontal dengan PHP

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 


Related search:
  • Menampilkan data kesamping dengan PHP
  • Menampilkan data horizontal dengan PHP

Related Posts

Load comments