Belajar PHP MySQLi #3 : Menampilkan Data & Detail Data dari Database pada Tabel

Belajar PHP dengan Database MySQL dan MySQLi bagian ketiga, Cara menampilkan detail data dari database kedalam Tabel

Sesi belajar PHP dan Database MySQLi part #3 khusus pemula. Sesi belajar PHP kali ini akan Menampikan data dan detail data dari Database pada PHP dan akan ditampilkan pada sebuah tabel.

Jika sebelumnya anda belum familiar dengan pemrograman PHP, anda bisa baca-baca tutorial PHP dan tutorial sesi belajar PHP dan Database MySQLi pada bagian pertama dan kedua.

Untuk dapat menampilkan data dari database pada PHP tentu kita harus mempunyai koneksi ke database tersebut, silahkan baca Cara membuat koneksi PHP dengan Database MySQLi.

Menampilkan Data Pada Tabel

Silahkan buat project baru dengan nama "todo" (boleh disesuaikan) pada server local, dan pada project ini kita akan membutuhkan sebuah Database dan tiga buah file PHP yang masing-masing file memiliki kegunaan diantaranya :

Database - Silahkan Baca disini
koneksi.php - Menghubungkan aplikasi PHP dengan Database
index.php - Menampilkan Data dari Database kedalam Tabel
detail.php - Menampilkan Detail Data berdasarkan Id Data.

Koneksi Ke Database

Buatlah file baru didalam project anda dengan nama koneksi.php dan tuliskan seluruh code berikut ini.

koneksi.php

<?php
  // konfigurasi server
  define('SERVER','localhost');
  define('USER','root');
  define('PASSWORD','');
  define('DATABASE','kodeajaib');

  // koneksi ke server
  $conn = mysqli_connect(SERVER,USER,PASSWORD,DATABASE);

  // cek apakah koneksi berhasil
  if (mysqli_connect_errno()){
   echo "Oouppss, Koneksi gagal : " . mysqli_connect_error();
  }
?>

index.php
Selanjutnya kita akan membuat file baru dengan nama index.php yang nantinya berguna untuk menampilkan seluruh data dari Database kedalam tabel.

<?php
  // defenisikan koneksi
  require('koneksi.php');
 ?>
<!DOCTYPE html>
<html lang="id" dir="ltr">
  <head>
    <title>kodeajaib[dot]com</title>
  </head>
  <body>
    <h2>Selamat Datang di KodeAjaib.com</h2>
    <h3>Tabel Biodata</h3>
    <?php
      // query SQL menampilkan data dari table tbl_biodata
      $sql = "SELECT * FROM tbl_biodata ORDER BY id DESC";
      // tampung data (dalam array) kedalam variable $biodata
      $biodata = mysqli_query($conn, $sql);
      // variable untuk membuat tabel HTML
      $strTbl = "";
      $strTbl .= "<table border='1'>";
      $strTbl .= "<tr>";
      $strTbl .= "<th>No</th>";
      $strTbl .= "<th>Nama</th>";
      $strTbl .= "<th>Alamat</th>";
      $strTbl .= "<th>Aksi</th>";
      $strTbl .= "</tr>";
      // variable nomor urut
      $nomor = 1;
      // cek apakah $biodata nilai kosong atau tidak
      if (mysqli_num_rows($biodata) > 0) {
        // jika ada looping untuk membaca seluruh data
        // dan tampilkan kedalam tabel
        while ($data = mysqli_fetch_assoc($biodata)) {
          // tampilkan data kedalam table
          $strTbl .= "<tr>";
          $strTbl .= "<td>". $nomor."</td>";
          $strTbl .= "<td>". $data['nama_depan'] ." ".$data['nama_belakang'] ."</td>";
          $strTbl .= "<td>". $data['alamat'] ."</td>";
          $strTbl .= "<td><a href='detail.php?id=".$data['id']."'>Lihat Detail</a></td>";
          $strTbl .= "</tr>";
          $nomor++;
        }
      } else {
        // jika data kosong, tampilkan pesan didalam tabel
        $strTbl .="<tr><td colspan='4'>Ooouppsss... Maaf, data masih kosong, tambahkan data dari Database terlebih dahulu</td></tr>";
      }
      $strTbl .= "</table>";
      // tampilkan tabel pada halaman
      print($strTbl);
     ?>
     <p>Copyright @ Localhost</p>
  </body>
</html>

Akses project anda dengan alamat http://localhost/todo/index.php dan jika berhasil maka akan seperti gambar berikut ini :

Tampilan jika data pada Database masih kosong

Tampilan jika data ada pada Database

Tentu sampai pada tahap ini, kita sudah berhasil menampilkan seluruh data dari Database kedalam Tabel HTML, namun ketika anda menekan Link "Lihat Detail" akan terjadi Error 404, karena kita belum membuat file detail.php. Untuk itu silahkan ikuti tutorial ini sampai baris terakhir.

Menampilkan Detail Data dari Database

detail.php
Selanjutnya membuat halaman detail.php dimana halaman ini akan berfungsi untuk menampilkan detail data (salah satu data) yang dipilih berdasarkan id -nya.

Buatlah sebuah file baru dengan nama detail.php dan tuliskan seluruh code dibawah ini :

<?php
  // defenisikan koneksi
  require('koneksi.php');
  // Cek apakah parameter ID ada
  if (isset($_GET['id'])) {
    // jika ada ambil nilai id
    $id = $_GET['id'];
  } else {
    // jika tidak ada redirect ke index.php
    header('Location:index.php');
  }
 ?>
<!DOCTYPE html>
<html lang="id" dir="ltr">
  <head>
    <title>kodeajaib[dot]com</title>
  </head>
  <body>
    <h2>Selamat Datang di KodeAjaib.com</h2>
    <h3>Detail Biodata</h3>
    <?php
      // query SQL menampilkan data dari table tbl_biodata
      $sql = "SELECT * FROM tbl_biodata WHERE id='$id'";
      // tampung data (dalam array) kedalam variable $biodata
      $biodata = mysqli_query($conn, $sql);
      // variable untuk membuat tabel HTML
      $strTbl = "";
      $strTbl .= "<table>";
      // cek apakah $biodata nilai kosong atau tidak
      if (mysqli_num_rows($biodata) > 0) {
        // jika ada tampilkan kedalam tabel
        $data = mysqli_fetch_assoc($biodata);
        $strTbl .= "<tr>";
        $strTbl .= "<td>Nama Lengkap :</td>";
        $strTbl .= "<td>". $data['nama_depan'] ." ".$data['nama_belakang'] ."</td>";
        $strTbl .= "</tr>";
        $strTbl .= "<tr>";
        $strTbl .= "<td>Alamat :</td>";
        $strTbl .= "<td>". $data['alamat'] ."</td>";
        $strTbl .= "</tr>";
      } else {
        // jika data tidak ada, tampilkan pesan didalam tabel
        $strTbl .="<tr><td colspan='2'>Ooouppsss... Maaf, data masih kosong, tambahkan data dari Database terlebih dahulu</td></tr>";
      }
      $strTbl .= "</table>";
      $strTbl .= "<a href='index.php'>Kembali ke Index</a>";
      // tampilkan tabel pada halaman
      print($strTbl);
     ?>
     <p>Copyright @ Localhost</p>
  </body>
</html>

Buka kembali project anda dengan alamat URL http://localhost/todo/index.php dan tekan link "Lihat Detail", maka jika tidak terjadi Error akan terlihat seperti tampilan dibwah ini

Sesi belajar PHP dan Database MySQLi ini akan terus di Update, jangan sampai ketinggalan dengan cara berlangganan melalui Email dan Follow juga sosial media kode ajaib.

See you next lessons and happy coding ....

KODE AJAIB

Header$type=social_icons

Belajar PHP MySQLi #3 : Menampilkan Data & Detail Data dari Database pada Tabel

Menampilkan Data Pada Tabel

Koneksi Ke Database

Menampilkan Detail Data dari Database

COMMENTS

/fa-youtube-play/ Video's List

Localhost