Membuat CRUD Form pendaftaran siswa menggunakan PHP dan Bootstrap part 2 ( Form View data )

May 14, 2024

 Mari Membuat halaman yang menampilkan data siswa dari database MySQL dalam sebuah tabel menggunakan PHP dan Bootstrap. Setelah anda membuat formulir siswa sebelumnya

Langkah 1: Buat File view_data.php

Buat file view_data.php yang akan mengambil data dari database dan menampilkannya dalam sebuah tabel.

Menjalankan Aplikasi

  1. Pastikan server lokal seperti XAMPP atau WAMP sudah berjalan.
  2. Letakkan file view_data.php di dalam folder proyek Anda di dalam direktori root server lokal Anda (misalnya, htdocs untuk XAMPP).
  3. Akses halaman melalui browser dengan mengunjungi http://localhost/view_data.php


Berikut adalah penjelasan langkah demi langkah dari setiap bagian kode dalam file view_data.php:

Langkah 1: Membuka Koneksi ke Database

php
<?php
include 'db_connection.php';

Kode ini menyertakan file db_connection.php, yang berisi kode untuk mengatur koneksi ke database MySQL. Ini memastikan bahwa kita dapat menggunakan koneksi yang sudah dibuat di seluruh file ini.

Langkah 2: Mengambil Data dari Database

php
// Mengambil data dari database 
$sql = "SELECT id, nama, email, telepon, alamat FROM siswa"; 
$result = $conn->query($sql);
  • $sql: Berisi perintah SQL untuk mengambil data dari tabel siswa.
  • $result: Menyimpan hasil query yang dijalankan pada objek koneksi $conn. Metode query mengirimkan perintah SQL ke database.

Langkah 3: Membuat Struktur Dasar HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Siswa</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  • <!DOCTYPE html>: Deklarasi tipe dokumen HTML5.
  • <html lang="en">: Tag pembuka untuk dokumen HTML, dengan atribut bahasa Inggris.
  • <head>: Bagian untuk metadata dokumen, termasuk pengaturan karakter dan viewport.
  • <title>Data Siswa</title>: Menentukan judul halaman yang akan ditampilkan di tab browser.
  • <link href="...">: Menyertakan file CSS dari Bootstrap untuk styling.

Langkah 4: Membuat Container dan Tabel

html
<div class="container mt-5"> 
<h2>Data Siswa</h2> 
<table class="table table-bordered"> 
<thead>
            <tr> 
            <th>ID</th> 
            <th>Nama</th> 
            <th>Email</th> 
            <th>Telepon</th> 
            <th>Alamat</th> 
            </tr> 
</thead> 
<tbody>
  • <div class="container mt-5">: Membuat sebuah div dengan kelas Bootstrap container untuk pengaturan tata letak dan mt-5 untuk margin top.
  • <h2>Data Siswa</h2>: Header untuk halaman yang menunjukkan judul tabel.
  • <table class="table table-bordered">: Membuat tabel dengan kelas Bootstrap table untuk styling dan table-bordered untuk border di sekitar tabel dan sel-selnya.
  • <thead>: Bagian untuk header tabel.
  • <tr>: Membuat baris dalam tabel.
  • <th>: Membuat header sel di setiap kolom tabel.

Langkah 5: Menampilkan Data dari Database ke Tabel

php
<?php
if ($result->num_rows > 0) 
{
    // Output data dari setiap row 
while($row = $result->fetch_assoc()) 
{ 
echo "<tr>
                <td>" . htmlspecialchars($row["id"]) . "</td>
                <td>" . htmlspecialchars($row["nama"]) . "</td>
                <td>" . htmlspecialchars($row["email"]) . "</td>
                <td>" . htmlspecialchars($row["telepon"]) . "</td>
                <td>" . htmlspecialchars($row["alamat"]) . "</td>
              </tr>"; 
} 
} else 
{
    echo "<tr><td colspan='5' class='text-center'>Tidak ada data</td></tr>";
} 
$conn->close();
?>
  • if ($result->num_rows > 0): Memeriksa apakah ada data yang diambil dari database.
  • while($row = $result->fetch_assoc()): Mengulangi setiap baris data yang diambil dari hasil query. fetch_assoc mengembalikan baris sebagai array asosiatif.
  • htmlspecialchars($row["field"]): Mengonversi karakter khusus menjadi entitas HTML untuk keamanan.
  • echo "<tr>...</tr>": Menambahkan baris ke tabel HTML dengan data yang diambil.
  • else: Jika tidak ada data, menampilkan pesan bahwa tidak ada data.
  • $conn->close(): Menutup koneksi ke database.

Langkah 6: Menutup Tabel, Container, dan Menambahkan Script

html
        </tbody> 
</table> 
</div> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
</body> 
</html>
  • </tbody>: Menutup bagian body tabel.
  • </table>: Menutup tag tabel.
  • </div>: Menutup div container.
  • <script src="...">: Menyertakan file JavaScript dari jQuery, Popper.js, dan Bootstrap untuk fungsionalitas tambahan.

Menjalankan Aplikasi

  1. Setup Koneksi Database: Pastikan db_connection.php memiliki informasi koneksi yang benar.
  2. Upload File ke Server: Letakkan view_data.php dan db_connection.php di direktori root server lokal Anda (misalnya, htdocs untuk XAMPP).
  3. Akses Halaman: Buka browser dan akses http://localhost/view_data.php untuk melihat data siswa dalam tabel.

Leave a Comment

No comments

Subscribe to: Post Comments ( Atom )

Yang Sering Dikunjungi

Perangkat Keras Jaringan komputer

Powered by Blogger.