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 :
  1. Database - Silahkan Baca disini
  2. koneksi.php - Menghubungkan aplikasi PHP dengan Database
  3. index.php - Menampilkan Data dari Database kedalam Tabel
  4. 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 ....

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Belajar PHP MySQLi #3 : Menampilkan Data & Detail Data dari Database pada Tabel
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
https://3.bp.blogspot.com/-ZrIplBxxV1A/W_heyPJMyWI/AAAAAAAAFU0/YQsMJNualz4inFA4XAYshXZEV1Qu9GzBQCLcBGAs/s320/menampilkan-detail-data-dari-database.jpg
https://3.bp.blogspot.com/-ZrIplBxxV1A/W_heyPJMyWI/AAAAAAAAFU0/YQsMJNualz4inFA4XAYshXZEV1Qu9GzBQCLcBGAs/s72-c/menampilkan-detail-data-dari-database.jpg
KODE AJAIB
https://www.kodeajaib.com/2018/11/php-mysqli-menampilkan-data-dari-database.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2018/11/php-mysqli-menampilkan-data-dari-database.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy