Langkah-Langkah

  1. Aktifkan XAMPP kemudian buatlah database pada http://localhost/phpmyadmin/.   
  2. Pada menu 'Database', silahkan masukkan nama database dengan nama 'pendidikan', kemudian klik 'create'
  3. Kemudian bualah tabel dengan nama 'pelajar' dan 'sekolah'. Setelah itu isi struktur seperti berikut :
     
    1. Pelajar


    2. Sekolah
  4. Kemudian isi struktur tersebut
    1. Pelajar


    2. Sekolah


  5. Setelah selesai membuat data pada database selanjutnya kita akan menampilkan data MySQL ke dalam tabel HTML.
    1. Pertama tama, buat sebuah file php dan simpan pada direktori htdocs dan simpan folder yang telah dibuat. Pada contoh kali ini saya memberi nama file tersebut tabel.php

      Berikut adalah codenya : 

       
      <?php

$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'pendidikan';

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

if (!$conn) 
{
    die('Gagal terhubung dengan MySQL: ' . mysqli_connect_error());
}

$sql = 'SELECT * FROM pelajar INNER JOIN sekolah ON sekolah.id_sekolah=pelajar.id_pelajar';

$query = mysqli_query($conn, $sql);

if (!$query) 
{
    die('SQL Error: ' . mysqli_error($conn));
}

?>


<html>

<head>
    <title>Menampilkan Data MySQL Ke Dalam Tabel HTML</title>
    <link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>
    <h1>Daftar Pelajar Kabupaten Karanganyar</h1>
    <table class="data-table">
        <caption class="title">Data Tahun Ajaran 2018/2019</caption>
        <thead>
            <tr>
                <th>NO</th>
                <th>Nama Siswa</th>
                <th>TTL</th>
                <th>Alamat</th>
                <th>Sekolah</th>
                <th>Alamat Sekolah</th>
            </tr>
        </thead>
        <tbody>
            <?php
            while ($row = mysqli_fetch_array($query)) {
                echo '<tr>
                        <td>' . $row['id_pelajar'] . '</td>
                        <td>' . $row['nama'] . '</td>
                        <td>' . $row['TTL'] . '</td>
                        <td>' . $row['alamat'] . '</td>
                        <td>' . $row['pendidikan'] . '</td>
                        <td>' . $row['alamat_skul'] . '</td>
                </tr>';
            } ?>
        </tbody>
    </table>

</html>


    2. Selanjutnya, buat sebuah file css. Pada contoh kali ini saya memberi nama file tersebut style.css 

      Berikut adalah codenya : 

       
      body {
   font-size: 15px;
}
table {
   margin: auto;
   font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
   font-size: 12px;
}
 
h1 {
   margin: 25px auto 0;
   text-align: center;
   font-size: 25px;
}
 
/* Table */
.data-table {
   border-collapse: collapse;
   font-size: 14px;
   min-width: 537px;
}
 
.data-table th,
.data-table td {
   border: 1px solid #e1edff;
   padding: 7px 17px;
}
.data-table caption {
   margin: 7px;
}
 
/* Table Header */
.data-table thead th {
   background-color: #508abb;
   color: #000;
}

       

  6. Setelah selesai simpan. Kemudian buka pada browser dengan cara, ketik pada url
    http://localhost/nama folder/nama file.php
  7. Berikut untuk hasil tampilannya





Credit

  1. Photo from imaginedidea courses Mastering Frontend Development

Categories: Technology

Tags: #Programming #Website #Database #HTML #Development

0 Comments

Leave a comment