Tugas 10 PWEB-B: Membuat Form Pendaftaran Siswa Baru dengan PHP

on

Pada tugas ini diminta untuk menambahkan section untuk mengupload foto pada form pendaftaran dan menampilkan foto tersebut pada list pendaftar. Berikut adalah dokumentasi tampilan halaman form pendaftaran dan list pendaftar, serta source code yang mengalami perubahan.

Link website :

Website

Dokumentasi tampilan:

1. Form Pendaftaran


2. List Pendaftar




Source code

1. form-daftar.php

<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
/*padding-left: 4rem;*/
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
.formdaftar{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:3rem;
margin-top: 4rem;
margin-left:25rem;
margin-right:25rem;
padding-right:5rem;
background-color: #eff8ff;
}
</style>
</head>
<body>
<header>
<h1 style="text-align: center; color:white;"><b>Formulir Pendaftaran Siswa Baru</b></h1>
</header>
<div class="formdaftar">
<form action="proses-pendaftaran.php" method="POST" enctype = "multipart/form-data">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="Nama lengkap" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
</p>
<p>
<!--<label for="jenis_kelamin">Jenis Kelamin: </label>-->
<label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="Nama sekolah Asal" />
</p>
<p>
<label for="foto">Foto : </label>
<input type="file" name="foto">
</p>
<p>
<input type="submit" value="Daftar" name="daftar" style="margin-left:6rem;margin-top:2rem;"/>
</p>
</fieldset>
</form>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
</html>
view raw form-daftar.php hosted with ❤ by GitHub

2. proses-pendaftaran.php

<?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'];
// echo "<pre>";
// print_r($_FILES);
// echo "</pre>";
// $foto = isset ($_FILES['foto']['name']) ? $_FILES['foto']['name'];:'';
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
if(move_uploaded_file($tmp, $path)){
// query to insert new data
$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);
// if success
if( $query ) {
//redirect to index.php with status=sukses
header('Location: index.php?status=sukses');
} else {
// if fail, redirect with status gagal
header('Location: index.php?status=gagal');
}
}
} else {
die("Akses dilarang...");
}
?>
view raw proses-pendaftaran.php hosted with ❤ by GitHub

3.proses-edit.php

<?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'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
// Rename nama fotonya dengan menambahkan tanggal dan jam upload
$fotobaru = date('dmYHis').$foto;
// Set path folder tempat menyimpan fotonya
$path = "images/".$fotobaru;
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah', foto='$fotobaru'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

3.list-siswa.php

<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style type="text/css">
body{
/*padding-left: 20rem;*/
/*padding-top: 5rem;*/
padding-bottom: 5rem;
background-color: #a4c9e4;
font-family: 'Open Sans', sans-serif;
}
table{
/*margin-left:3rem;*/
border: 1px solid black;
width: 88%;
border-collapse: collapse;
height: 50px;
vertical-align: bottom;
}
tr:nth-child(even) {background-color: #a4c9e4;}
.button {
/*margin-top:2rem;*/
margin-bottom:2rem;
background-color: #40627d; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
/*margin: 4px 2px;*/
transition-duration: 0.4s;
cursor: pointer;
border-radius:10px;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #40627d;
}
.button1:hover {
background-color: #40627d;
color: white;
}
.lists{
border-radius:20px;
padding-top:3rem;
padding-left:5rem;
padding-bottom:3rem;
margin-top: 4rem;
margin-left:10rem;
margin-right:10rem;
/*padding-right:2rem;*/
background-color: #eff8ff;
}
</style>
</head>
<body>
<header style="text-align: center; color:white;">
<h1 ><b>Daftar Calon Siswa Baru</b></h1>
<h3><b>SMK Coding 2021</b></h3>
</header>
<div class="lists">
<a href="form-daftar.php">
<button class="button button1">Daftar Baru</button>
</a>
<br>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th>Foto</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$siswa['id']."</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='images/".$siswa['foto']."' width='100' height='100'></td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p style="padding-top:2rem;">Total Pendaftar: <?php echo mysqli_num_rows($query) ?></p>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
</html>
view raw list-siswa.php hosted with ❤ by GitHub
Source code selengkapnya terdapat pada link berikut : https://github.com/erzajanitra/pweb-tugas-9

Comments

Post a Comment