Tugas 9 PHP

Untuk penugasan ini, kami diminta membuat CRUD untuk pendaftaran menggunakan PHP. Untuk fungsi yang harus ada yaitu calon siswa bisa mendaftar, admin bisa melihat, mengubah, dan menghapus data di database.

Bagian Front-End

  • Index.html
          Halaman ini digunakan untuk navigasi awal user untuk memilih mendaftar atau melihat pendaftar
    <!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">
    <title>Welcome</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
    body
    {
    background-color: #18181B;
    font-family: 'Open Sans', sans-serif;
    color: white;
    }
    .card
    {
    background-color: #27272A;
    color: white;
    padding: 1rem;
    border-radius: 1.5rem;
    }
    </style>
    <body>
    <div class="template_bg d-flex" style="height: 92.1vh;">
    <div class="container align-self-center">
    <div class="m-auto">
    <div class="card">
    <h1>Selamat datang di pendaftaran Kampung Ngoding</h1>
    <p style="font-size: 1.5rem;">
    Di tempat ini kalian akan mengeksplor kemampuan diri kalian sebaik mungkin tentang ngoding. kami para fasilitator akan membantu mengembangkan diri kalian sebaik mungkin! Silahkan melakukan pendaftaran dengan masuk ke formulir pendaftaran di bawah ini.
    </p>
    <nav class="d-flex justify-content-center">
    <a href="formDaftar.php"><button type="button" class="btn btn-light mx-2">Daftarkan dirimu!</button></a>
    <a href="pendaftar.php"><button type="button" class="btn btn-light mx-2">Lihat calon siswa</button></a>
    </nav>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • pendaftar.php
          Halaman ini digunakan untuk melihat pendaftar dan sebagai CRUD tabel
    <?php include("config.php"); ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Daftar calon siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
    body
    {
    background-color: #18181B;
    font-family: 'Open Sans', sans-serif;
    color: white;
    }
    .container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    }
    a{
    text-decoration: none;
    color: white;
    }
    h1 {
    font-size: 3.5rem;
    margin: 20px 0;
    text-align: center;
    }
    .responsive-table li {
    border-radius: 3px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    }
    .responsive-table .table-header {
    background-color: #95a5a6;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    }
    .responsive-table .table-row {
    background-color: #27272A;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
    }
    .responsive-table .col-no{
    flex-basis: 3%;
    }
    .responsive-table .col-ext {
    flex-basis: calc(97% / 6);
    }
    @media all and (max-width: 767px) {
    .responsive-table .table-header {
    display: none;
    }
    .responsive-table li {
    display: block;
    }
    .responsive-table .col {
    flex-basis: 100%;
    }
    .responsive-table .col {
    display: flex;
    padding: 10px 0;
    }
    .responsive-table .col:before {
    color: #6c7a89;
    padding-right: 10px;
    content: attr(data-label);
    flex-basis: 50%;
    text-align: right;
    }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Calon siswa yang telah mendaftar</h1>
    <ul class="responsive-table mt-5">
    <li class="table-header">
    <div class="col col-no text-center">No</div>
    <div class="col col-ext text-center">Nama</div>
    <div class="col col-ext text-center">Alamat</div>
    <div class="col col-ext text-center">Jenis kelamin</div>
    <div class="col col-no text-center ">Agama</div>
    <div class="col col-ext text-center">Sekolah asal</div>
    <div class="col col-no text-center">Tindakan</div>
    </li>
    <?php
    $sql = "SELECT * FROM calon_siswa";
    $query = mysqli_query($db, $sql);
    while ($siswa = mysqli_fetch_array($query))
    {
    echo "<li class='table-row'>";
    echo "<div class='col col-no text-center'>" . $siswa['id'] . "</div>";
    echo "<div class='col col-ext text-center'>" . $siswa['nama'] . "</div>";
    echo "<div class='col col-ext text-center'>" . $siswa['alamat'] . "</div>";
    echo "<div class='col col-ext text-center'>" . $siswa['jenis_kelamin'] . "</div>";
    echo "<div class='col col-no text-center'>" . $siswa['agama'] . "</div>";
    echo "<div class='col col-ext text-center'>" . $siswa['sekolah_asal'] . "</div>";
    echo "<div class='col col-no text-center'>";
    echo "<a href='formEdit.php?id=" . $siswa['id'] . "'>Edit</a> ";
    echo "<a href='delete.php?id=" . $siswa['id'] . "'>Hapus</a>";
    echo "</div>";
    echo "</li>";
    }
    ?>
    <p>Total: <?php echo mysqli_num_rows($query) ?></p>
    </ul>
    </div>
    </body>
    </html>
    view raw pendaftar.php hosted with ❤ by GitHub
  • formDaftar.php
          Halaman ini digunakan untuk formulir siswa yang ingin mendaftarkan diri
    <!doctype html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Formulir Pendaftaran</title>
    </head>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
    body {
    background-color: #18181B;
    font-family: 'Open Sans', sans-serif;
    color: white;
    }
    h1 {
    margin-bottom: 40px;
    }
    label {
    color: #333;
    }
    .btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 80%;
    margin-left: 3px;
    }
    .help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
    }
    .card {
    background-color: #27272A;
    border-radius: 2rem;
    margin-left: 10px;
    margin-right: 10px;
    }
    </style>
    <body>
    <div class="container">
    <div class=" text-center mt-5 ">
    <h1>Formulir Pendaftaran Peserta Didik</h1>
    </div>
    <div class="row">
    <div class="col-lg-7 mx-auto">
    <div class="card mt-2 mx-auto p-4">
    <div class="card-body">
    <div class="container">
    <form id="form-daftar" role="form" method="POST" action="daftar.php">
    <div class="controls">
    <div class="row">
    <div class="col-md-12">
    <div class="form-group"> <label for="form_nama" style="color: #FFFFFF">Nama</label>
    <input id="form_nama" type="text" name="nama" class="form-control" placeholder="Nama lengkap" required="required" data-error="Nama diperlukan." />
    </div>
    </div>
    <!-- <div class="col-md-12">-->
    <!-- <div class="form-group"> <label for="form_foto">Pas Foto</label>-->
    <!-- <input id="form_foto" type="file" accept="image/png, image/jpg, image/jpeg" name="foto" class="form-control" placeholder="Pilih file" required="required" data-error="Pas foto diperlukan." />-->
    <!-- </div>-->
    <!-- </div>-->
    <div class="col-md-12 mt-3 mt-3">
    <div class="form-group">
    <label for="form_kelamin" style="color: #FFFFFF">Jenis kelamin</label>
    <select id="form_kelamin" name="kelamin" class="form-control" required="required">
    <option value="L">Laki-laki</option>
    <option value="P">Perempuan</option>
    </select>
    </div>
    </div>
    <div class="col-md-12 mt-3">
    <div class="form-group">
    <label for="form_agama" style="color: #FFFFFF">Agama</label>
    <select id="form_agama" name="agama" class="form-control" required="required">
    <option value="Islam">Islam</option>
    <option value="Hindu">Hindu</option>
    <option value="Buda">Buddha</option>
    <option value="Kristen">Kristen</option>
    <option value="Katolik">Katolik</option>
    <option value="Kong Hu Cu">Kong Hu Cu</option>
    </select>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12 mt-3">
    <div class="form-group"> <label for="form_sekolah" style="color: #FFFFFF">Sekolah Asal</label>
    <input id="form_sekolah" type="text" name="sekolah" class="form-control" placeholder="Sekolah asal" required="required" data-error="Sekolah asal diperlukan." />
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12 mt-3">
    <div class="form-group">
    <label for="form_alamat" style="color: #FFFFFF">Alamat lengkap</label>
    <textarea id="form_alamat" name="alamat" class="form-control"
    placeholder="Alamat lengkap" rows="4" required="required"
    data-error="Silahkan isi alamat lengkap"></textarea>
    </div>
    </div>
    <div class="col-md-12 mt-3">
    <button id="submit-btn" type="submit" class="btn btn-light pt-2 btn-block" value="Daftar">Daftar</button>
    </div>
    </div>
    <?php
    if(isset($_GET["STATUS"]))
    {
    if($_GET["STATUS"] == "success")
    {
    echo "success";
    }
    }
    ?>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
    </body>
    </html>
    view raw formDaftar.php hosted with ❤ by GitHub
  • formEdit.php
          Halaman ini digunakan ini untuk formulir edit data pendaftar

<?php
include("config.php");
// kalau tidak ada id di query string
if (!isset($_GET['id'])) {
header('Location: pendaftar.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>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Formulir Edit</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body
{
background-color: #18181B;
font-family: 'Open Sans', sans-serif;
color: white;
}
form
{
color: black;
}
.card
{
background-color: #27272A;
/* color: white; */
padding: 1rem;
border-radius: 1.5rem;
}
</style>
<body>
<div class="d-flex flex-column pt-5 min-vh-100 text-center border-bottom align-items-center overflow-hidden">
<div class="container row card">
<div class="col-lg">
<form action="edit.php" method="POST">
<div class="card shadow align-center">
<div class="card-body">
<h2 class="card-title mb-4" style="color: white;">Formulir Edit Peserta Didik</h2>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<div class="row g-2">
<div class="col-md">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingNama" name="nama" value="<?php echo $siswa['nama'] ?>">
<label for="floatingNama">Nama</label>
</div>
</div>
<div class="col-md">
<div class="form-floating mb-3">
<select class="form-select" id="floatingJenisKelamin" aria-label="Floating label select" name="jenis_kelamin">
<?php $jenis_kelamin = $siswa['jenis_kelamin']; ?>
<option disabled>Pilih menu</option>
<option value="L" <?php echo ($jenis_kelamin == 'L') ? "selected" : "" ?>>Laki-laki</option>
<option value="P" <?php echo ($jenis_kelamin == 'P') ? "selected" : "" ?>>Perempuan</option>
</select>
<label for="floatingJenisKelamin">Jenis Kelamin</label>
</div>
</div>
</div>
<div class="row g-2">
<div class="form-floating mb-3">
<select class="form-select" id="floatingAgama" aria-label="Floating label select" name="agama">
<?php $agama = $siswa['agama']; ?>
<option disabled>Pilih menu</option>
<option <?php echo ($agama == 'islam') ? "selected" : "" ?>>Islam</option>
<option <?php echo ($agama == 'katolik') ? "selected" : "" ?>>Kristen Katolik</option>
<option <?php echo ($agama == 'protestan') ? "selected" : "" ?>>Kristen Protestan</option>
<option <?php echo ($agama == 'hindu') ? "selected" : "" ?>>Hindu</option>
<option <?php echo ($agama == 'budha') ? "selected" : "" ?>>Budha</option>
<option <?php echo ($agama == 'konghucu') ? "selected" : "" ?>>Kong Hu Cu</option>
<option <?php echo ($agama == 'atheis') ? "selected" : "" ?>>Atheis</option>
</select>
<label for="floatingAgama">Agama</label>
</div>
</div>
<div class="row g-2">
<div class="col-md">
<div class="form-floating mb-3">
<textarea class="form-control" id="floatingAlamat" style="height: 100px" name="alamat"><?php echo $siswa['alamat'] ?></textarea>
<label for="floatingAlamat">Alamat</label>
</div>
</div>
</div>
<div class="row g-2">
<div class="col-md">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingSekolah" name="sekolah_asal" value="<?php echo $siswa['sekolah_asal'] ?>">
<label for="floatingSekolah">Sekolah Asal</label>
</div>
</div>
<button type="submit" value="Daftar" name="simpan" class="btn btn-light">Simpan</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw formEdit.php hosted with ❤ by GitHub

Bagian Back-End
  • config.php
          Set Database
<?php
$server = "localhost";
$user = "root";
$password = "";
$nama_database = "pweb";
$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
  • daftar.php
          Proses untuk pendaftaran
<?php
include("config.php");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$nama = str_replace("'", "\'", $_POST['nama']);
$kelamin = str_replace("'", "\'", $_POST['kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah = str_replace("'", "\'", $_POST['sekolah']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$sql = "INSERT INTO calon_siswa (nama, jenis_kelamin, agama, sekolah_asal, alamat) VALUE ('$nama', '$kelamin', '$agama', '$sekolah', '$alamat')";
$query = mysqli_query($db, $sql);
if ($query) {
header('location: formDaftar.php');
die("success");
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
view raw daftar.php hosted with ❤ by GitHub
  • delete.php
          Proses untuk menghapus data di database
<?php
include("config.php");
if (isset($_GET['id'])) {
// ambil id dari query string
$id = $_GET['id'];
// buat query hapus
$sql = "DELETE FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query hapus berhasil?
if ($query) {
header('Location: pendaftar.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
view raw delete.php hosted with ❤ by GitHub
  • edit.php
          Proses untuk mengedit data di database
<?php
include("config.php");
// cek apakah tombol simpan sudah diklik atau blum?
if (isset($_POST['simpan'])) {
$id = $_POST['id'];
$nama = str_replace("'", "\'", $_POST['nama']);
$jenis_kelamin = str_replace("'", "\'", $_POST['jenis_kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jenis_kelamin', 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: pendaftar.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
view raw edit.php hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling

Exception merupakan subkelas dari kelas java.lang.Throwable. Karena Exception adalah sebuah kelas maka hakikatnya ketika program berjalan dan muncul sebuah bug atau kesalahan maka bug tersebut dapat dianggap sebuah object. Sehingga ketika object ini di tampilkan di layar maka java akan secara otomatis memanggil method toString yang terdapat dalam object bertipe Exception ini. Java memberikan akses kepada developer untuk mengambil object bug yang terjadi ini dengan mekanisme yang dikenal Exception Handling. Exception handling merupakan fasilitas di java yang memberikan flexibilitas kepada developer untuk menangkap bug atau kesalahan yang terjadi ketika program berjalan. Ada 3 keyword penting dalam java dalam hal exception handling : 1. try      Keyword try biasanya digunakan dalam suatu block program. Keyword ini digunakan untuk mencoba menjalankan block program kemudian mengenai sasaran dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangka...
Baca selengkapnya