Gabung Database
Langkah – Langkah :
2. Buka Google Chrome dan ketikkan http://localhost/phpmyadmin/
3. Buat Database dengan nama “masakan”.
Klik tab menu SQL yang berada di sebelah atas, kemudian ketik kode berikut :
CREATE DATABASE masakan;
4. Kemudian pada database masakan isikan table masakan dengan kolom :
Table Masakan |
5. Lalu, isikan kolom pada masing-masing table, dengan mengetikan kode pada tab sql seperti berikut :
INSERT INTO `masakan` (`id_masakan`, `nama_masakan`, `daerah_asal`) VALUES
(NULL, 'Gudeg', 'Yogyakarta'),
(NULL, 'Rendang', 'Padang'),
(NULL, 'Sate Ayam', 'Madura'),
(NULL, 'Kerak Telor', 'Betawi'),
(NULL, 'Soto lamongan', 'Lamongan');
6. 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 “belajar”. Dan ikuti langkah-langkah berikut :
a. Pertama tama, buat sebuah file php dan simpan pada direktori htdocs pada folder “belajar”. Pada contoh kali ini saya memberi nama file tersebut “belajar.php”. Selanjutnya ketik kode berikut pada code editor kalian masing-masing :
<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'masakan';
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Gagal terhubung dengan MySQL: ' . mysqli_connect_error());
}
$sql = 'SELECT * FROM masakan';
$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 Masakan Tradisional dan Daerah Asalnya</h1><table class="data-table">
<caption class="title">Daftar Masakan</caption><thead>
<tr>
<th>No</th>
<th>Nama Masakan</th>
<th>Daerah Asal</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<tr>
<td>'.$row['id_masakan'].'</td>
<td>'.$row['nama_masakan'].'</td><td>'.$row[‘daerah_asal'].'</td></tr>';
}?>
</tbody>
</table>
</body>
</html>
b. Kedua, buat sebuah file css dan simpan pada direktori htdocs pada folder “belajar” dengan nama file “style.css”. Selanjutnya ketik kode berikut pada code editor kalian masing-masing :
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;
}
.data-table thead th {
background-color: #508abb;
color: #000;
}
7. Kemudian, kita lihat file yang sudah kita buat pada browser kesayangan kalian. Ketik url pada tab pencarian “localho/belajar/belajar.php/” (localhost/nama_folder/nama_file/) . Dan hasilnya akan seperti berikut :
8. Selesai.
Komentar
Posting Komentar