Home PWEB-B Tugas 8: Membuat Form Pendaftaran Siswa Dengan PHP

Tugas 8: Membuat Form Pendaftaran Siswa Dengan PHP

By
November 30, 2021
1 minuteRead
Add Comment

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119
Kelas: PWEB-B

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

Introduction

Pada penugasan ke-8, kami diminta untuk berlatih membuat form pendaftaran menggunakan PHP. 

PHP adalah bahasa penulisan skrip open-source yang biasanya digunakan dalam pemrograman atau pengembangan website. PHP atau Hypertext Preprocessor sebenarnya mirip dengan JavaScript dan Python, perbedaannya adalah PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server (backend). 

PHP sering kali digunakan untuk pengembangan web. Hal ini dikarenakan PHP memiliki sebuah fitur yang dirasa sangat berguna, yaitu kemampuannya untuk disematkan ke file HTML.

Tools Yang Digunakan: 

Untuk membuat, saya menggunakan HTML, CSS dan PHP. 

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari tugas. 

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat beberapa internal CSS untuk menambahkan sedikit detail. 

PHP sebagai bahasa scripting, yang disematkan ke dalam file HTML yang telah dibuat. Selain itu, untuk melakukan koneksi kepada database, saya menggunakan phpMyAdmin. 

Gambar Website: 













Source Code

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

config.php
Copy
<?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());
}
?>

index.php
Copy
<!DOCTYPE html>
<html>
<head>
 <title>Pendaftaran Siswa Baru</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <style>
 body {
 background-image: linear-gradient(120deg, #FFE599 0%, #F1C232 100%);
 }
 </style>
</head>
<body class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center text-center">
 <header>
 <h3>Pendaftaran Siswa Baru</h3>
 <h1>Universitas</h1>
 </header>
<div class="container p-0 card shadow border-0 rounded" style="max-width: 30rem;">
 <div class="card-header bg">
 <h3>Menu</h3>
 </div>
 <nav>
 <div class="px-3 border-top py-4 text-center">
 <a href="form-daftar.php" class="btn btn-dark">Daftar Baru</a>
 <a href="list-siswa.php" class="btn btn-dark">List Pendaftar</a>
 </div>
 </nav>
 <?php if (isset($_GET['status'])) : ?>
 <p>
 <?php
 if ($_GET['status'] == 'sukses') {
 echo "Pendaftaran siswa baru berhasil!";
 } else {
 echo "Pendaftaran gagal!";
 }
 ?>
 </p>
 <?php endif; ?>
</body>
</html>

form-daftar.php
Copy
<!DOCTYPE html>
<html>
<head>
 <title>Formulir Pendaftaran Siswa Baru</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <style>
 .a {
 width: 100%;
 }
body {
 background-image: linear-gradient(120deg, #FFE599 0%, #F1C232 100%);
 }
 </style>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container-fluid">
 <a class="navbar-brand" href="pendaftaran">Pendaftaran Siswa</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 <li class="nav-item">
 <a class="nav-link active" aria-current="page" href="index.php">Home</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
 <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
 <div class="container p-0 card shadow border-0 rounded" style="max-width: 30rem;">
 <div class="card-header bg">
 <h3>Formulir Siswa Baru</h3>
 </div>
 <form action="proses-pendaftaran.php" method="POST" enctype = "multipart/form-data">
 <div class="form-group mt-3 mx-2">
 <p>
 <label for="nama">Nama: </label>
 <input required class="a" type="text" name="nama" placeholder="Nama Lengkap" />
 </p>
 </div>
 <div class="form-group mt-3 mx-2">
 <p>
 <label for="alamat">Alamat: </label>
 <textarea required class="a" name="alamat"></textarea>
 </p>
 </div>
 <div class="form-group mt-3 mx-2">
 <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>
 </div>
 <div class="form-group mt-3 mx-2">
 <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>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <p>
 <label for="sekolah_asal">Sekolah Asal: </label>
 <input class="a" required type="text" name="sekolah_asal" placeholder="Nama Sekolah" />
 </p>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <p>
 <label for="foto">Pas Foto: </label>
 <input type="file" name="foto"/>
 </p>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <input class="a btn btn-dark" type="submit" value="Daftar" name="daftar"/>
 </div>
</form>
 </div>
 </div>
</body>
</html>

form-edit.php
Copy
<?php
include("config.php");
// if error
if (!isset($_GET['id'])) {
 header('Location: list-siswa.php');
}
// get id from query
$id = $_GET['id'];
// select query to get data from id
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
// if not found
if (mysqli_num_rows($query) < 1) {
 die("data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Formulir Edit Siswa</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <style>
 textarea {
 width: 100%;
 }
input.a {
 width: 100%;
 }
body {
 background-image: linear-gradient(120deg, #FFE599 0%, #F1C232 100%);
 }
 </style>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container-fluid">
 <a class="navbar-brand" href="pendaftaran">Pendaftaran Siswa</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 <li class="nav-item">
 <a class="nav-link active" aria-current="page" href="index.php">Home</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
 <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
 <div class="container p-0 card shadow border-0 rounded" style="max-width: 30rem;">
 <div class="card-header text-white bg-dark bg">
 <h3>Formulir Edit Siswa</h3>
 </div>
 <form action="proses-edit.php" method="POST" class="form-group" enctype = "multipart/form-data">
 <div class="form-group mt-3 mx-2">
 <input class="a" type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
 <label for="nama">Nama: </label><br>
 <input class="a" type="text" name="nama" placeholder="nama lengkap" size="55" value="<?php echo $siswa['nama'] ?>" />
 </div>
 <div class="form-group mt-3 mx-2">
 <p>
 <label for="alamat">Alamat: </label><br>
 <textarea name="alamat"><?php echo $siswa['alamat'] ?></textarea>
 </p>
 </div>
 <div class="form-group mt-3 mx-2">
 <p>
 <label for="jenis_kelamin">Jenis Kelamin: </label>
 <?php $jk = $siswa['jenis_kelamin']; ?>
 <br>
 <label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked" : "" ?>> Laki-laki</label>
 <label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked" : "" ?>> Perempuan</label>
 </p>
 </div>
 <div class="form-group mt-3 mx-2">
 <p>
 <label for="agama">Agama: </label><br>
 <?php $agama = $siswa['agama']; ?>
 <select name="agama">
 <option <?php echo ($agama == 'Islam') ? "selected" : "" ?>>Islam</option>
 <option <?php echo ($agama == 'Kristen') ? "selected" : "" ?>>Kristen</option>
 <option <?php echo ($agama == 'Hindu') ? "selected" : "" ?>>Hindu</option>
 <option <?php echo ($agama == 'Budha') ? "selected" : "" ?>>Budha</option>
 <option <?php echo ($agama == 'Atheis') ? "selected" : "" ?>>Atheis</option>
 </select>
 </p>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <p>
 <label for="sekolah_asal">Sekolah Asal: </label><br>
 <input class="a" size="55" type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
 </p>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <p>
 <label for="foto">Foto: </label><br>
 <input class="a" type="file" name="foto"/>
 </p>
 </div>
<div class="form-group mt-3 mx-2 my-4">
 <input class="a btn btn-dark" type="submit" value="Simpan" name="simpan" />
 </div>
</form>
 </div>
 </div>
</body>
</html>

list-siswa.php
Copy
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
 <title>Pendaftaran Siswa Baru</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <style>
 body {
 background-color: #FFE599;
 }
table {
 background-color: white;
 border-radius: 10px;
 }
 </style>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container-fluid">
 <a class="navbar-brand" href="pendaftaran">Pendaftaran Siswa</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 <li class="nav-item">
 <a class="nav-link active" aria-current="page" href="index.php">Home</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
<div class="p-5">
 <header>
 <h2>List Pendaftar</h2>
 </header>
 <nav>
 <a class="btn btn-dark" href="form-daftar.php">Tambah Baru</a>
 </nav>
 <table class="table mt-4">
 <thead>
 <tr>
 <th>No</th>
 <th>Nama</th>
 <th>Alamat</th>
 <th>Jenis Kelamin</th>
 <th>Agama</th>
 <th>Sekolah Asal</th>
 <th>Pas Foto</th>
 <th>Tindakan</th>
 </tr>
 </thead>
 <tbody>
<?php
 $sql = "SELECT * FROM calon_siswa"; // query to get all data
$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 style='width: 20%'>" . $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 class='btn btn-dark mx-1' href='form-edit.php?id=" . $siswa['id'] . "'>Edit</a>";
 echo "<a class='btn btn-danger' href='hapus.php?id=" . $siswa['id'] . "'>Hapus</a>";
 echo "</td>";
echo "</tr>";
 }
 ?>
</tbody>
 </table>
<h5>Total: <?php echo mysqli_num_rows($query) ?></h5>
 </div>
</body>
</html>

proses-pendaftaran.php
Copy
<?php
include("config.php");
// if register is successful
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...");
}
?>

proses-edit.php
Copy
<?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'];
// Ambil data foto yang dipilih dari form
 $foto = $_FILES['foto']['name'];
 $tmp = $_FILES['foto']['tmp_name'];
if(empty($foto)){
 // 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);
// if success
 if( $query ) {
 header('Location: list-siswa.php');
 } else {
 // if failed
 die("Gagal menyimpan perubahan...");
 }
 }
 else{
 // Lakukan proses update termasuk mengganti foto sebelumnya
 // 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)){
 // // get id from query
 // $ids = $_GET['id'];
// select query to get data from id
$sql = "SELECT foto FROM calon_siswa WHERE id=$id";
 $query = mysqli_query($db, $sql);
 $data = $query->fetch_assoc();
if(is_file("images/".$data['foto'])) // Jika foto ada
 unlink("images/".$data['foto']);
$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);
// if success
 if( $query ) {
 header('Location: list-siswa.php');
 } else {
 // if failed
 die("Gagal menyimpan perubahan...");
 }
}
}
} else {
 die("Akses dilarang...");
}
?>

hapus.php
Copy
<?php
include("config.php");
if( isset($_GET['id']) ){
// get id from query
 $id = $_GET['id'];
// select query to get data from id
$sql = "SELECT foto FROM calon_siswa WHERE id=$id";
 $query = mysqli_query($db, $sql);
 $data = $query->fetch_assoc();
if(is_file("images/".$data['foto'])) // Jika foto ada
 unlink("images/".$data['foto']);
// delete query
 $sql = "DELETE FROM calon_siswa WHERE id=$id";
 $query = mysqli_query($db, $sql);
// if success
 if( $query ){
 header('Location: list-siswa.php');
 } else {
 die("gagal menghapus...");
 }
} else {
 die("akses dilarang...");
}
?>

Tags :
Subscribe to: Post Comments ( Atom )

Leave a Comment

No comments:

Powered by Blogger.

Created By ThemeXpose · Powered by Blogger
All rights reserved