Tugas 9 - PWEB B : CRUD Pendaftaran Siswa (Lanjutan)

Tugas 9 - Pemrograman Web : CRUD Pendaftaran Siswa (Lanjutan)

Melanjutkan program CRUD Pendaftaran Siswa sebelumnya, pada aplikasi web ini ditambahkan fitur untuk mengupload foto profil ketika menambah data siswa baru. Untuk tampilannya menjadi seperti berikut :


Berikut source code untuk menghandle proses pendaftaran, menampilkan list siswa, dan form untuk mendaftar :


<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Pendaftaran Siswa Baru</title>
</head>
<body>
<header class="p-2 bg-info">
<h3>Pendaftaran Siswa Baru</h3>
<h1>Coder School</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./form-daftar.php">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./list-siswa.php">Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<div class="row justify-content-center">
<form class="col-4" action="proses-pendaftaran.php" method="POST" enctype="multipart/form-data">
<fieldset>
<div class="row mt-3">
<label for="nama" class="form-label">Nama: </label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" required />
</div>
<div class="row mt-3">
<label for="alamat" class="form-label">Alamat: </label>
<textarea name="alamat" class="form-control" required></textarea>
</div>
<div class="row mt-3">
<label for="jenis_kelamin" class="form-label">Jenis Kelamin: </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="laki-laki" value="laki-laki">
<label class="form-check-label" for="laki-laki">
Laki-laki
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="perempuan" value="perempuan">
<label class="form-check-label" for="perempuan">
Perempuan
</label>
</div>
</div>
<div class="row mt-3">
<label for="agama" class="form-label">Agama: </label>
<select name="agama" class="form-select" aria-label="Default select example" required>
<option selected>Agama</option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Konghucu">Konghucu</option>
</select>
</div>
<div class="row mt-3">
<label for="sekolah_asal" class="form-label">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="Nama Sekolah" class="form-control" required />
</div>
<div class="row mt-3">
<label for="foto" class="form-label">Foto: </label>
<input type="file" name="foto" placeholder="Foto" class="form-control" required />
</div>
<div class="row mt-3">
<button class="btn btn-info" type="submit" name="daftar">Daftar</button>
</div>
</fieldset>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
view raw form-daftar.php hosted with ❤ by GitHub
<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Pendaftaran Siswa Baru</title>
</head>
<body>
<header class="p-2 bg-info">
<h3>Pendaftaran Siswa Baru</h3>
<h1>Coder School</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-daftar.php">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./list-siswa.php">Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses') {
echo "<div class=\"alert alert-success mt-4\" role=\"alert\">";
echo "Pendaftaran siswa baru berhasil!";
echo "</div>";
} else {
echo "<div class=\"alert alert-danger mt-4\" role=\"alert\">";
echo "Pendaftaran gagal";
echo "</div>";
}
?>
</p>
<?php endif; ?>
</div>
<div class="container mt-4">
<p>
<a href="./form-daftar.php"><i class="fa-solid fa-circle-plus text-success"></i> Tambah Baru</a>
</p>
<br>
<table class="table caption-top table-bordered">
<caption>List Pendaftar</caption>
<thead class="table-success">
<tr>
<th scope="col">No</th>
<th scope="col">Foto</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Agama</th>
<th scope="col">Sekolah Asal</th>
<th scope="col">Tindakan</th>
</tr>
</thead>
<tbody class="table-info">
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
$no = 1;
while($siswa = mysqli_fetch_array($query)) {
echo "<tr>";
echo "<td>".$no."</td>";
echo "<td><img src='images/".$siswa['foto']."' width='100' height='100'></td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'><i class=\"fa-solid fa-pen-to-square text-info\"></i></a> ";
echo "<a href='hapus.php?id=".$siswa['id']."' data-bs-toggle=\"modal\" data-bs-target=\"#deleteModal\"><i class=\"fa-solid fa-trash text-danger\"></i></a>";
echo "</td>";
echo "</tr>";
echo "
<!-- Modal -->
<div class=\"modal fade\" id=\"deleteModal\" tabindex=\"-1\" aria-labelledby=\"deleteModalLabel\" aria-hidden=\"true\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<h5 class=\"modal-title\" id=\"deleteModalLabel\">Delete Data</h5>
<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>
</div>
<div class=\"modal-body\">
Apakah kamu yakin ingin menghapus data?
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>
<a href='hapus.php?id=".$siswa['id']."'><button type=\"button\" class=\"btn btn-danger\">Delete</button></a>
</div>
</div>
</div>
</div>
";
$no = $no + 1;
}
?>
</tbody>
</table>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
view raw list-siswa.php hosted with ❤ by GitHub
<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if (isset($_POST['daftar'])) {
// ambil data dari formulir
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
$fotobaru = date('d-m-Y_H-i-s').$foto;
$path = "images/".$fotobaru;
if (move_uploaded_file($tmp, $path)) {
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal, foto) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah', '$fotobaru')";
$query = mysqli_query($db, $sql);
// apakah query simpan berhasil?
if ( $query ) {
// kalau berhasil alihkan ke halaman index.php dengan status=sukses
header('Location: list-siswa.php?status=sukses');
} else {
// kalau gagal alihkan ke halaman indek.php dengan status=gagal
header('Location: list-siswa.php?status=gagal');
}
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-pendaftaran.php hosted with ❤ by GitHub

Untuk source code lebih lengkapnya bisa dilihat pada link berikut : 

Comments

Post a Comment