Tugas 10 Query

 Pada tugas ini kami diminta untuk menambahkan fungsional dari tugas 9 yaitu menambahkan foto ke dalam fitur pendaftaran dan lihat list pendaftar.

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% / 7);
    }
    @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">Foto</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'> <img width='200px' src='" . $siswa['foto'] . "'/></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" enctype="multipart/form-data">
    <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="file" 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" enctype="multipart/form-data">
<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="kelamin">
<?php $kelamin = $siswa['kelamin']; ?>
<option disabled>Pilih menu</option>
<option value="L" <?php echo ($kelamin == 'L') ? "selected" : "" ?>>Laki-laki</option>
<option value="P" <?php echo ($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="form-floating mb-3">
<input id="form_foto" type="file" accept="image/png, image/jpg, image/jpeg" name="file" class="form-control" placeholder="Pilih file" required="required" data-error="Pas foto diperlukan." />
<label for="floatingFoto">Foto</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");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
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']);
$url_foto = "";
$location= "";
if(isset($_FILES['file']['name'])){
if($_FILES['file']['size'] > 3*1048576) { //3 MB (size is also in bytes)
die(json_encode([
"error" => 500,
"status" => "File too large (> 3 MB)"
]));
exit;
}
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "img/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
$location = "img/".md5(time()).".".$imageFileType;
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
$response = $location;
$url_foto = $location;
}
}else{
die(json_encode([
"error" => 500,
"status" => "Invalid file type"
]));
exit;
}
}
$sql = "INSERT INTO calon_siswa (nama, jenis_kelamin, agama, sekolah_asal, alamat, foto) VALUE ('$nama', '$kelamin', '$agama', '$sekolah', '$alamat', '$url_foto')";
// die($sql);
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} 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");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$id = str_replace("'", "\'", $_GET['id']);
$sql = "DELETE FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
view raw delete.php hosted with ❤ by GitHub
  • edit.php
          Proses untuk mengedit data di database
<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$id = str_replace("'", "\'", $_POST['id']);
$nama = str_replace("'", "\'", $_POST['nama']);
$kelamin = str_replace("'", "\'", $_POST['kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$url_foto = "";
$location= "";
// var_dump($_POST);
// var_dump($_FILES);
if(isset($_FILES['file']['name'])){
// die("masuk sini");
if($_FILES['file']['size'] > 3*1048576) { //3 MB (size is also in bytes)
die(json_encode([
"error" => 500,
"status" => "File too large (> 3 MB)"
]));
exit;
}
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "img/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
$location = "img/".md5(time()).".".$imageFileType;
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
$response = $location;
$url_foto = $location;
}
}else{
die(json_encode([
"error" => 500,
"status" => "Invalid file type"
]));
exit;
}
}
// Get old file url
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$old_url_foto = "";
while ($siswa = mysqli_fetch_array($query)) {
$old_url_foto = $siswa["foto"];
break;
}
if(file_exists($old_url_foto)){
unlink($old_url_foto);
}
$sql = "UPDATE calon_siswa SET nama='$nama', jenis_kelamin='$kelamin', agama='$agama', sekolah_asal='$sekolah', alamat='$alamat', foto='$location' WHERE id=$id";
// die($sql);
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}
view raw edit.php hosted with ❤ by GitHub

Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling