Tugas 12 Table Pegawai
Muhammad Faizul Muttaqin Wahyudi
5053231005
Tugas 12 Table Pegawai
Code :
<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Guru | SMK</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
color: #0f2027;
}
header {
text-align: center;
padding: 20px;
background-color: transparent;
}
header h3 {
color: #ffffff;
font-size: 2rem;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
nav {
text-align: center;
margin: 20px 0;
}
nav a {
display: inline-block;
padding: 12px 25px;
background-color: rgb(41, 57, 194);
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease-in-out;
margin: 0 10px;
}
nav a:hover {
background-color: rgb(50, 72, 219);
transform: translateY(-3px);
}
table {
width: 95%;
margin: 30px auto;
border-collapse: collapse;
background: whitesmoke;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
th, td {
text-align: center;
padding: 15px;
border-bottom: 1px solid #dddddd;
font-size: 14px;
}
th {
background-color: rgb(41, 57, 194);
color: white;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #d4e4f7;
transition: background-color 0.2s ease-in-out;
}
img {
max-width: 80px;
max-height: 80px;
object-fit: cover;
border-radius: 5px;
border: 2px solid #ddd;
}
.actions a {
color: rgb(41, 57, 194);
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease-in-out;
}
.actions a:hover {
text-decoration: underline;
color: #2a45c2;
}
p {
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 1.2rem;
}
</style>
</head>
<body>
<header>
<h3>Data Guru</h3>
</header>
<nav>
<a href="guru-pdf.php" class="btn">Download File PDF</a>
<a href="form-tambah-guru.php">[+] Tambah Guru</a>
</nav>
<br>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Foto</th>
<th>Jenis Kelamin</th>
<th>Mata Pelajaran</th>
<th>Nomor Telepon</th>
</tr>
</thead>
<tbody>
<?php
// Query untuk mengambil data guru
$sql = "SELECT * FROM tabel_guru";
$query = mysqli_query($db, $sql);
$no = 1; // Nomor urut tabel
// Looping data guru
while($guru = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$no++."</td>";
echo "<td>".$guru['nama']."</td>";
echo "<td>".$guru['alamat']."</td>";
echo "<td><img src='gambar/" . $guru['foto'] ."' width='80' height='80'></td>";
echo "<td>".$guru['jenis_kelamin']."</td>";
echo "<td>".$guru['mata_pelajaran']."</td>";
echo "<td>".$guru['nomor_telepon']."</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p>Total Guru: <?php echo mysqli_num_rows($query) ?></p>
</body>
</html>
Komentar
Posting Komentar