Langkah-Langkah

  1. Buat Database dengan nama “pendidikan” pada http://localhost/phpmyadmin/ (Jangan Lupa Aktifkan Xampp Controller pada PC Anda).
    Klik tab menu SQL yang berada di sebelah atas, kemudian ketik kode berikut: 

    CREATE DATABASE pendidikan;


  2. Kemudian pada database pendidik isikan table pelajar dan sekolah. Dengan kolom :
     
    1. Pelajar



    2. Sekolah



  3. Lalu,  isikan kolom pada masing-masing table, dengan mengetikan kode pada tab sql seperti berikut :
    1. Pelajar
       
      INSERT INTO `pelajar` (`id_pelajar`, `nama`, `TTL`, `alamat`) VALUES
(1, 'Dewi Masyitoh', 'Karanganyar, 14 Desember 2001', 'Pokoh TR01/04, Ngijo, Tasikmadu, Kra'),
(2, 'Safira Intan A', 'Karanganyar, 24 Juli 2002', 'Ngijo Tengah RT05/01, Ngijo, Tasikmadu, Kra'),
(3, 'Innama Syahdani Rahmatania', 'Karanganyar, 23 April 2002', 'Nangsri Lor RT03/03, Nangsri, Kebakkramat, Kra'),
(4, 'Meiresa Pawestri', 'Karanganyar, 12 Mei 2002', 'Manggis Blok 17, Lalung, Karanganyar, Kra'),
(5, 'Fatimah Dwi I', 'Karanganyar, 18 Januari 2002', 'Getasan, Tasikmadu, Kra'),
(6, 'Windi Yusanti', 'Karanganyar, 2 Agustus 2002', 'Pokoh, Ngijo, Tasikmadu, Kra');


    2. Sekolah
       
      INSERT INTO `sekolah` (`id_sekolah`, `pendidikan`, `alamat_skul`) VALUES
(1, 'SMK Negeri 2 Karanganyar', 'Jl. Yos Sudarso, Bejen, Karanganyar'),
(2, 'SMA Negeri 2 Karanganyar', 'Karanganyar, Jawa Tengah'),
(3, 'SMK Negeri 2 Karanganyar', 'Jl. Yos Sudarso, Bejen, Kra'),
(4, 'SMK Negeri 2 Karanganyar', 'Jl. Yos Sudarso, Bejen, Kra'),
(5, 'SMA Neheri Kebakkramat', 'Nayan, Nangsri, Kebakkramat, Kra'),
(6, 'SMA Negeri 1 Karanganyar', 'Karanganyar, Jawa Tengah');


  4. Setelah selesai mempersiapkan data seperti diatas, kemudian kita akan menampilkan data MySQL ke dalam tabel HTML. Sebelumnya kita buat dulu folder baru pada direktori htdocs kita dengan nama “gabung database”. Dan ikuti langkah-langkah berikut :
    1. Pertama tama, buat sebuah file php dan simpan pada direktori htdocs pada folder “gabung database”. Pada contoh kali ini saya memberi nama file tersebut “gabung.php”. Selanjutnya ketik kode berikut pada code editor kalian 

      masing-masing :


       
      <?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="style.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;
}

       

  5. Kemudian, kita lihat file yang sudah kita buat pada browser kesayangan kalian. Ketik url pada tab pencarian “localhost/nama_folder/nama_file/”. Dan hasilnya akan seperti berikut :



  6. Selesai





Credit

  1. Photo from imaginedidea courses Mastering Frontend Development
  2. https://jagowebdev.com/menampilkan-data-mysql-ke-dalam-tabel-html-dengan-php/

Categories: Motivation

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

0 Comments

Leave a comment