TUGAS-9-PWEB--PHP & MYSQL
Tugas Pemrograman Web
Web Pendafataran Siswa Dengan PHP dan MySQL
Kali ini saya akan membuat web pendafataran siswa dengan php dan mysql. Saya melanjutkan tugas sebelumnya mengenai PHP. Kali ini saya telah mengintegrasikan dengan Database MySQL. Berikut soure code dan tampilan akhirnya.
1. Source Code index.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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()); | |
| } | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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..."); | |
| } | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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..."); | |
| } | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Dan berikut adalah hasil tampilannya
Comments
Post a Comment