Tugas 8 dan 9
Untuk tugas ini saya membuat web yang dapat melakukan CRUD. Pembuatan Web ini dibuat dengan menggunakan php untuk mendaftarkan siswa. Page ini dibuat dengan Boostrap5 dan mysql sebagai database.
Source Code Website :
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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <title>index</title> | |
| </head> | |
| <body class="min-vh-100 d-flex flex-column"> | |
| <div class="container-fluid content flex-grow-1 d-flex flex-column justify-content-center"> | |
| <div class="jumbotron m-auto"> | |
| <h1 class="display-3">Dibuka Pendaftaran Siswa SMA 1!</h1> | |
| <p class="lead">Silahkan klik button dibawah untuk mendaftar</p> | |
| <section class="mb-4 d-flex flex-column align-items-center justify-content-center"> | |
| <div class="justify-content-center"> | |
| <a class="btn btn-primary mx-5" href="daftar.php">New Student</a> | |
| <a class="btn btn-primary mx-5" href="listregister.php">Registered Students</a> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <?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> |
config.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
| <?php | |
| $servername = "localhost"; | |
| $database = "pwebsiswa"; | |
| $username = "root"; | |
| $password = ''; | |
| // Create connection | |
| $db = mysqli_connect($servername, $username, $password, $database); | |
| // Check connection | |
| if ($db->connect_error) { | |
| die("Connection failed: " . $conn->connect_error); | |
| } | |
| echo "Connected successfully"; | |
| ?> |
daftar.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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <title>index</title> | |
| </head> | |
| <body class="min-vh-100 d-flex flex-column"> | |
| <div class="container-fluid content flex-grow-1 d-flex flex-column justify-content-center"> | |
| <div class="m-auto justify-content-center"> | |
| <h1>Form Pendaftaran</h1> | |
| <div class="jumbotron m-auto p-4 justify-content-center"> | |
| <form action="daftar-post.php" method="POST"> | |
| <div class="form-group mt-3 mx-2"> | |
| <label for="nama">Nama: </label> | |
| <input required class="a" type="text" name="nama" placeholder="Nama Lengkap" /> | |
| </div> | |
| <div class="form-group mt-3 mx-2"> | |
| <label for="alamat">Alamat: </label> | |
| <textarea required class="a" name="alamat"></textarea> | |
| </div> | |
| <div class="form-group mt-3 mx-2"> | |
| <label for="kelamin">Jenis Kelamin: </label> | |
| <label><input type="radio" name="kelamin" value="laki-laki"> Laki-laki</label> | |
| <label><input type="radio" name="kelamin" value="perempuan"> Perempuan</label> | |
| </div> | |
| <div class="form-group mt-3 mx-2"> | |
| <label for="agama">Agama: </label> | |
| <select name="agama"> | |
| <option>Islam</option> | |
| <option>Kristen</option> | |
| <option>Hindu</option> | |
| <option>Budha</option> | |
| </select> | |
| </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"> | |
| <input class="a btn btn-dark" type="submit" value="Daftar" name="daftar" /> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
daftar-post.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
| <?php | |
| include("config.php"); | |
| // if register is successful | |
| if(isset($_POST['daftar'])){ | |
| // ambil data dari formulir | |
| $nama = $_POST['nama']; | |
| $alamat = $_POST['alamat']; | |
| $jk = $_POST['kelamin']; | |
| $agama = $_POST['agama']; | |
| $sekolah_asal = $_POST['sekolah_asal']; | |
| // query to insert new data | |
| $sql = "INSERT INTO siswa (nama, alamat, kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')"; | |
| $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..."); | |
| } | |
| ?> |
list-register.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> | |
| <?php include("config.php"); ?> | |
| <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <title>index</title> | |
| </head> | |
| <body class="min-vh-100 d-flex flex-column"> | |
| <div class="container-fluid content flex-grow-1 d-flex flex-column justify-content-center"> | |
| <div class="m-5 justify-content-center"> | |
| <h1>List Terdaftar</h1> | |
| <div class="jumbotron justify-content-center"> | |
| <div class> | |
| <header> | |
| <h2>List Pendaftar</h2> | |
| </header> | |
| <nav> | |
| <a class="btn btn-dark" href="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>Tindakan</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <?php | |
| $sql = "SELECT * FROM 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 style='width: 20%'>" . $siswa['alamat'] . "</td>"; | |
| echo "<td>" . $siswa['kelamin'] . "</td>"; | |
| echo "<td>" . $siswa['agama'] . "</td>"; | |
| echo "<td>" . $siswa['sekolah_asal'] . "</td>"; | |
| echo "<td>"; | |
| echo "<a class='btn btn-dark mx-1' href='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> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
edit.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> | |
| <?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 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..."); | |
| } | |
| ?> | |
| <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <title>index</title> | |
| </head> | |
| <body class="min-vh-100 d-flex flex-column"> | |
| <div class="container-fluid content flex-grow-1 d-flex flex-column justify-content-center"> | |
| <div class="m-auto justify-content-center"> | |
| <h1>Form Edit</h1> | |
| <div class="jumbotron m-auto p-4 justify-content-center"> | |
| <form action="edit-post.php" method="POST" class="form-group"> | |
| <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="kelamin">Jenis Kelamin: </label> | |
| <?php $jk = $siswa['kelamin']; ?> | |
| <br> | |
| <label><input type="radio" name="kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked" : "" ?>> Laki-laki</label> | |
| <label><input type="radio" name="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> | |
| </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"> | |
| <input class="a btn btn-dark" type="submit" value="Simpan" name="simpan" /> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
edit-post.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
| <?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['kelamin']; | |
| $agama = $_POST['agama']; | |
| $sekolah = $_POST['sekolah_asal']; | |
| // query update | |
| $sql = "UPDATE siswa SET nama='$nama', alamat='$alamat', kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id"; | |
| $query = mysqli_query($db, $sql); | |
| // if success | |
| if( $query ) { | |
| header('Location: listregister.php'); | |
| } else { | |
| // if failed | |
| die("Gagal menyimpan perubahan..."); | |
| } | |
| } else { | |
| die("Akses dilarang..."); | |
| } | |
| ?> |
hapus.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
| <?php | |
| include("config.php"); | |
| if( isset($_GET['id']) ){ | |
| // get id from query | |
| $id = $_GET['id']; | |
| // delete query | |
| $sql = "DELETE FROM siswa WHERE id=$id"; | |
| $query = mysqli_query($db, $sql); | |
| // if success | |
| if( $query ){ | |
| header('Location: listregister.php'); | |
| } else { | |
| die("gagal menghapus..."); | |
| } | |
| } else { | |
| die("akses dilarang..."); | |
| } | |
| ?> |
Comments
Post a Comment