TUGAS PWEB-8--PHP

  Tugas Pemrograman Web

Web Pendafataran Siswa Dengan PHP

Kali ini saya akan membuat web pendafataran siswa dengan bootstrap. Berikut soure code dan tampilan akhirnya.

1. Source Code index.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>
<?php include('navbar.php'); ?>
<div class="header-img">
</div>
<div class="p-5 rounded-lg m-3">
<h2 class="font-weight-bold">Selamat Datang di SMA CERIA CERIA MANTAP 😍</h2>
<p class="lead">Sekolah unggulan yang memiliki Akreditasi A dan berhasil menciptakan siswa-siswa berprestasi</p>
<p>Segera daftarkan dirimu!</p>
<a class="btn btn-info btn-lg" href="./form-daftar.php" role="button">Daftar</a>
</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 index.php hosted with ❤ by GitHub


2. Source Code list-siswa.php, form-daftar.php, form-edit.php, header.php, navbar.php, proses-edit.php, dan proses-pendaftaran.php style.css
<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "pendaftaran_siswa";
$db = mysqli_connect($server, $user, $password, $nama_database);
if (!$db) {
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
view raw config.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>
<?php include('navbar.php'); ?>
<div class="container mt-4 mb-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="sekolah_asal" class="form-label">Sekolah Asal: </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");
// kalau tidak ada id di query string
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
//ambil id dari query string
$id = $_GET['id'];
// buat query untuk ambil data dari database
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
// jika data yang di-edit tidak ditemukan
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>
<!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>Formulir Edit Siswa</title>
</head>
<body>
<?php include('navbar.php'); ?>
<div class="container mt-4 mb-4">
<div class="row justify-content-center">
<form class="col-6" action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<div class="row mt-3">
<label for="nama" class="form-label">Nama: </label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" value="<?php echo $siswa['nama'] ?>" required />
</div>
<div class="row mt-3">
<label for="alamat" class="form-label">Alamat: </label>
<textarea name="alamat" class="form-control" required><?php echo $siswa['alamat'] ?></textarea>
</div>
<div class="row mt-3">
<label for="jenis_kelamin" class="form-label">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<div class="form-check">
<input class="form-check-input" type="radio" name="jenis_kelamin" id="laki-laki" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>>
<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" <?php echo ($jk == 'perempuan') ? "checked": "" ?>>
<label class="form-check-label" for="perempuan">
Perempuan
</label>
</div>
</div>
<div class="row mt-3">
<label for="agama" class="form-label">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama" class="form-select" aria-label="Default select example" required>
<option selected>Agama</option>
<option value="Islam" <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option value="Kristen" <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
<option value="Katolik" <?php echo ($agama == 'Katolik') ? "selected": "" ?>>Katolik</option>
<option value="Hindu" <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
<option value="Budha" <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
<option value="Konghucu" <?php echo ($agama == 'Konghucu') ? "selected": "" ?>>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" value="<?php echo $siswa['sekolah_asal'] ?>" required />
</div>
<div class="row mt-3 d-grid gap-2">
<button class="btn btn-primary" type="submit" name="simpan">Simpan</button>
<button class="btn btn-secondary" type="button" name="simpan" onclick="window.location.href='./list-siswa.php'">Batal</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-edit.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>
<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 table-striped">
<thead>
<tr>
<th scope="col">No</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">Foto</th>
<th scope="col">Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
$i=1;
while($siswa = mysqli_fetch_array($query)) {
echo "<tr>";
echo "<td>".$i++."</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><img src=\"gambar/".$siswa['foto']. "\" width=\"35px\"></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>
";
}
?>
</tbody>
</table>
<div class="text-right">Total Records: <span class="badge bg-primary"><?php echo mysqli_num_rows($query) ?> </span></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 list-siswa.php hosted with ❤ by GitHub
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">CCM</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 active" 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" href="./list-siswa.php">Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
view raw navbar.php hosted with ❤ by GitHub
<?php
include("config.php");
// cek apakah tombol simpan sudah diklik atau blum?
if(isset($_POST['simpan'])) {
// ambil data dari formulir
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query update berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman list-siswa.php
header('Location: list-siswa.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-edit.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'];
$rand = rand();
$ekstensi = array('png','jpg','jpeg','gif');
$filename = $_FILES['foto']['name'];
$ukuran = $_FILES['foto']['size'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$ekstensi) ) {
header("location:index.php?alert=gagal_ekstensi");
}else{
if($ukuran < 1044070){
$xx = $rand.'_'.$filename;
move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename);
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal, foto) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah','$xx')";
$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{
header("location:index.php?alert=gagal_ukuran");
}
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-pendaftaran.php hosted with ❤ by GitHub
@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Source+Code+Pro&display=swap");
body {
font-family: "Oxygen", sans-serif;
background-color: snow;
}
header {
font-family: "Source Code Pro", monospace;
}
a {
text-decoration: none;
}
h2 {
font-weight: 600;
}
view raw style.css hosted with ❤ by GitHub

Dan berikut adalah hasil tampilannya

















Comments

Post a Comment

Popular Posts