Part 2 : Cara Membuat Halaman Menampilkan Data dari Database

Share:

Pada tutorial kali ini kita akan mempelajari cara menampilkan data dari database dengan menggunakan table yang sangat sederhana. Ikuti tahapan-tahapan berikut ini, dan pastikan syarat-syarat di bawah ini terpenuhi

1. Persyaratan

  • Pastikan anda sudah menginstall web server di komputer/laptop anda. Ada banyak webserver yang dapat anda gunakan, pada tutorial-tutorial saya, saya menggunakan xampp. klik link berikut ini untuk download xampp https://www.apachefriends.org/download.html
  • Database yang sudah mendukung MySQLi
  • Pastikan versi php anda 5,4 ke atas karena kita akan menggunakan fungsi Mysqli.
Persyaratan-persyaratan di atas dapat anda cover dengan hanya mendownload web server versi terbaru. Karena biasanya web server versi terbaru sudah mengcover teknologi-teknologi tersebut

2. Buat Database

  • 1. Hidupkan webservice dan mysql terlebih dahulu
  • 2. Buka browser lalu ketik localhost/phpmyadmin
  • 3. Buat database projekcrud
  • 4. Buat table dengan nama identitas dan buat field seperti gambar di bawah ini, jika sudah klik save untuk membuat tabel



  • 5. Isilah beberapa data di dalam tabel identitas, dengan cara klik insert, isi id,nama, jenis kelamin, dan alamat dengan sembarang data


3. Buat File Koneksi

Sebelum kita dapat menampilkan data dari database di sebuah halaman website, hal pertama yang harus kita lakukan adalah membuat file koneksi. Tujuannya adalah untuk menghubungkan file php ke database yang kita buat. 
  • 1. Buat sebuah folder baru di dalam htdocs dengan nama projekcrud
  • 2. Buka teks editor kesayangan kalian, copy paste script di bawah ini dan simpan dengan nama koneksi.php di dalam folder projekcrud

<?php

    $mysqli = new mysqli("localhost","root","","projekcrud");

?>

penjelasan : di atas adalah fungsi untuk menghubungkan database, fungsi mysqli kita masukkan ke dalam variabel $mysqli. Lalu "localhost" adalah host yang kita gunakan, "root" adalah user database, "" adalah password database, secara default xampp tidak memberikan password, dan "projekcrud" adalah nama database kita.

4. Buat file tampil_data

  • 1. Buka teks editor kesayangan kalian, copy paste script di bawah ini dan simpan file dengan nama tampil_data.php di dalam folder projekcrud

<?php

    include "koneksi.php";

?>
<h2>LATIHAN MENAMPILKAN DATA DARI DATABASE DENGAN TABEL</h2>
<table border="1">
    <tr>
        <td>Nomor</td>
        <td>Nama</td>
        <td>jenis Kelamin</td>
        <td>Alamat</td>
        <td>Aksi</td>
    </tr>
    <?php

        $tampil = mysqli_query($mysqli, "select * from identitas");
        $no = 1;
        while($hasil = mysqli_fetch_array($tampil)){
    ?>
    <tr>
        <td><?php echo $no++;?></td>
        <td><?php echo $hasil['nama'];?></td>
        <td><?php echo $hasil['jeniskelamin']?></td>
        <td><?php echo $hasil['alamat']?></td>
        <td>
            <a>edit</a>|
            <a>hapus</a>
        </td>
    </tr>
    <?php
        }
    ?>
</table>

penjelasan :

  • include "koneksi.php" adalah fungsi untuk mengimpor file, jadi kita tidak perlu membuat file koneksi lagi untuk setiap halaman yang membutuhkan koneksi ke database. Cukup panggil filenya lewat perintah include
  • $tampil = mysqli_query(...) adalah fungsi untuk berinteraksi dan  memanipulasi data yang ada di dalam database
  • "select * from identitas" adalah perintah atau query untuk menampilkan data dari tabel identitas
  • while (...) fungsi while digunakan untuk melakukan perulangan pada data yang ada di dalam database
  • edit adalah button yang digunakan untuk mengedit dan menghapus data nantinya. Pembahasannya edit ada di part 3
Ok sampai sini anda sudah berhasil menampilkan data dari database. Cukup mudah mempraktekkannya (kalo sudah paham). jika semua tahapan di atas sudah dipraktekkan maka hasilnya akan seperti gambar di bawah ini



Cukup sekian tutorial membuat halaman menampilkan data dari database, mudah-mudahan bermanfaat bagi kita semua saya ucapkan assalamualaikum warahmatullahi wabarakaatuh, happy coding!.


Dan jangan lupa ikuti part-part selanjutnya :

No comments