Pemrograman Web Tugas 7 - Membuat Program CRUD Sederhana dengan PHP dan MySQL untuk Pendaftaran Siswa

Muhammad Lintang Panjerino
5025201045
Pemrograman Web Kelas B

Tugas 7 mata kuliah Pemrograman Web Kelas B adalah latihan membuat program pendaftaran siswa dengan menggunakan PHP dan MySQL. Website ini saya buat dengan menggunakan 8 file PHP yang terhubung dengan local database. File tersebut antara lain: config.php, index.php, list-siswa.php, form-daftar.php, proses-pendaftaran.php, form-edit.php, proses-edit.php, hapus.php. Untuk mempercantik tampilan website saya menggunakan framework Bootstrap yang terhubung melalui CDN. Source code dari website ini terletak pada sebuah repository di akun Github saya.


Link Repository Github: https://github.com/mlintang20/pemrograman-web-tugas-7

Berikut adalah screenshot dari website tersebut:











Berikut adalah potongan source code: 

config.php

<?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

<!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>Pendaftaran Siswa</title>

  <!-- CDN Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-dark text-light d-flex flex-column align-items-center">
  <div class="row" style="height: 100vh">
    <div class="col d-flex flex-column justify-content-center align-items-center mb-5">

      <header>
        <h1>Pendaftaran Siswa Baru</h1>
      </header>

      <h3 class="mb-4">Menu</h3>
      <nav class="d-flex justify-content-center">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary"><a href="form-daftar.php" class="text-light text-decoration-none">Daftar Baru</a></button>
          <button type="button" class="btn btn-primary"><a href="list-siswa.php" class="text-light text-decoration-none">Pendaftar</a></button>
        </div>
      </nav>

      <?php if(isset($_GET['status'])): ?>
        <div>
          <?php
            if($_GET['status'] == 'sukses') {
              echo "<p class='fw-bold fs-3 text-success'>Pendaftaran berhasil!</p>";
            } else {
              echo "<p class='fw-bold fs-3 text-danger'>Pendaftaran gagal!</p>";
            }
            ?>
        </div>
      <?php endif; ?>

    </div>
  </div>

  <!-- cdn Bootstrap js -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
</body>
</html>

list-siswa.php

<?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">
  <title>List Siswa</title>

  <!-- CDN Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-dark text-light">
  <header class="text-center">
    <h1 class="my-3">List Siswa yang Sudah Mendaftar</h1>
  </header>

  <div class="d-flex flex-column justify-content-center mx-5">

    <nav>
      <button type="button" class="btn btn-primary my-2">
        <a href="form-daftar.php" class="text-light text-decoration-none">Tambah Siswa</a>
      </button>
    </nav>

    <?php if(isset($_GET['status'])): ?>
      <div>
        <?php
          if($_GET['status'] == 'sukses') {
            echo "<p class='fw-bold fs-3 text-success'>Perubahan berhasil!</p>";
          } else {
            echo "<p class='fw-bold fs-3 text-danger'>Perubahan gagal!</p>";
          }
          ?>
      </div>
    <?php endif; ?>

    <table style="border: 1px solid white;">
      <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 calon_siswa";
          $query = mysqli_query($db, $sql);

          while($siswa = mysqli_fetch_array($query)){
            echo "<tr>";

            /*echo "<td>" . <?php for($i=0; $i < 10; $i++) {} ?> . "</td>";*/
            echo "<td>" . $siswa['id'] . "</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>";
            echo "<div class='btn-group' role='group'>";
            echo "<button type='button' class='btn btn-warning'><a href='form-edit.php?id=".$siswa['id']."' class='text-dark text-decoration-none'>Edit</a></button>";
            echo "<button type='button' class='btn btn-danger'><a onClick=\"javascript: return confirm('Hapus data ini?');\" href='hapus.php?id=".$siswa['id']."' class='text-light text-decoration-none'>Hapus</a></button>";
            echo "</div>";
            echo "</td>";

            echo "</tr>";
          }

        ?>
      </tbody>
    </table>

    <h5 class="fw-bold mt-3">Total jumlah siswa: <?= mysqli_num_rows($query); ?> siswa</h5>

    <div>
      <button type="button" class="btn btn-info my-2">
        <a href="index.php" class="text-dark text-decoration-none">Kembali Ke Menu Utama</a>
      </button>
    </div>

  </div>

  <!-- CDN Bootstrap JS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
</body>
</html>

form-daftar.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">
  <title>Formulir Pendaftaran Siswa Baru</title>

  <!-- CDN Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-dark text-light">
  <header>
    <h1 class="text-center my-3">Formulir Pendaftaran Siswa Baru</h1>
  </header>

  <form action="proses-pendaftaran.php" method="POST" class="d-flex justify-content-center mt-5">
    <fieldset class="p-4 border border-3 border-secondary rounded">

      <div class="my-3">
        <label for="nama">Nama: </label>
        <input type="text" name="nama" placeholder="Nama Lengkap" class="bg-dark text-light" />
      </div>
      <div class="my-3">
        <label for="alamat">Alamat: </label>
        <textarea name="alamat" class="bg-dark text-light"></textarea>
      </div>
      <div class="my-3">
        <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>
      </div>
      <div class="my-3">
        <label for="agama">Agama: </label>
        <select name="agama" class="bg-dark text-light">
            <option>Islam</option>
            <option>Kristen</option>
            <option>Katolik</option>
            <option>Hindu</option>
            <option>Budha</option>
        </select>
      </div>
      <div class="my-3">
        <label for="sekolah_asal">Sekolah Asal: </label>
        <input type="text" name="sekolah_asal" placeholder="Nama Sekolah" class="bg-dark text-light" />
      </div>
      <div class="d-flex justify-content-center">
        <input type="submit" value="Daftar" name="daftar" class="mt-3 bg-success text-light">
      </div>

    </fieldset>
  </form>

  <!-- CDN Bootstrap JS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
</body>
</html>

proses-pendaftaran.php

<?php

  include('config.php');

  if (isset($_POST['daftar'])) {
    $nama = $_POST['nama'];
    $alamat = $_POST['alamat'];
    $jk = $_POST['jenis_kelamin'];
    $agama = $_POST['agama'];
    $sekolah = $_POST['sekolah_asal'];

    $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
    $query = mysqli_query($db, $sql);

    if($query){
      header('Location: index.php?status=sukses');
    } else {
      header('Location: index.php?status=gagal');
    }
  } else {
    die("Akses dilarang!!!");
  }

?>

form-edit.php

<?php

  include('config.php');

  if(!isset($_GET['id']) ){
    header('Location: list-siswa.php');
  }

  $id = $_GET['id'];

  $sql = "SELECT * FROM calon_siswa WHERE id=$id";
  $query = mysqli_query($db, $sql);
  $siswa = mysqli_fetch_assoc($query);

  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">
  <title>Formulir Edit Siswa</title>

  <!-- CDN Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<body class="bg-dark text-light">
  <header>
    <h1 class="text-center my-3">Formulir Edit Siswa</h1>
  </header>

  <form action="proses-edit.php" method="POST" class="d-flex justify-content-center mt-5">
    <fieldset class="p-4 border border-3 border-secondary rounded">

      <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />

      <div class="my-3">
          <label for="nama">Nama: </label>
          <input type="text" name="nama" placeholder="Nama Lengkap" class="bg-dark text-light" value="<?php echo $siswa['nama'] ?>" />
      </div>
      <div class="my-3">
          <label for="alamat">Alamat: </label>
          <textarea name="alamat" class="bg-dark text-light"><?php echo $siswa['alamat'] ?></textarea>
      </div>
      <div class="my-3">
          <label for="jenis_kelamin">Jenis Kelamin: </label>
          <?php $jk = $siswa['jenis_kelamin']; ?>
          <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>
      </div>
      <div class="my-3">
          <label for="agama">Agama: </label>
          <?php $agama = $siswa['agama']; ?>
          <select name="agama" class="bg-dark text-light">
              <option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
              <option <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
              <option <?php echo ($agama == 'Katolik') ? "selected": "" ?>>Katolik</option>
              <option <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
              <option <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
            </select>
      </div>
      <div class="my-3">
          <label for="sekolah_asal">Sekolah Asal: </label>
          <input type="text" name="sekolah_asal" placeholder="Nama Sekolah" class="bg-dark text-light" value="<?php echo $siswa['sekolah_asal'] ?>" />
      </div>
      <div class="d-flex justify-content-center">
        <input type="submit" value="Simpan" name="simpan" class="mt-3 bg-warning text-dark" />
      </div>
    </fieldset>
  </form>

  <!-- CDN Bootstrap JS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
</body>
</html>

proses-edit.php

<?php

  include('config.php');

  if(isset($_POST['simpan'])){
    $id = $_POST['id'];
    $nama = $_POST['nama'];
    $alamat = $_POST['alamat'];
    $jk = $_POST['jenis_kelamin'];
    $agama = $_POST['agama'];
    $sekolah = $_POST['sekolah_asal'];

    $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( $query ) {
      header('Location: list-siswa.php?status=sukses');
    } else {
      header('Location: list-siswa.php?status=gagal');
    }
  } else {
    die("Akses dilarang!");
  }

?>

hapus.php

<?php

  include('config.php');

  if(isset($_GET['id'])){
    $id = $_GET['id'];

    $sql = "DELETE FROM calon_siswa WHERE id=$id";
    $query = mysqli_query($db, $sql);

    if($query){
      header('Location: list-siswa.php');
    } else {
      die("Data gagal untuk dihapus!");
    }
  } else {
    die("Akses dilarang!");
  }

?>



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PPB

Gambar
  TUGAS 2 PPB PROJEK PERTAMA JETPACK COMPOSE - GREETING Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 2 - Greeting Pada Tugas 2 PPB, diberikan tugas untuk membuat projek pertama aplikasi mobile sederhana dengan Jetpack Compose. Projek pertama yang dibuat adalah projek sederhana untuk memperkenalkan diri. Projek ini hanya mengubah sedikit dari template awal yang sudah disediakan. Pada projek ini, digunakan software berupa Android Studio dan memakai bahasa Kotlin. Berikut adalah langkah untuk mengerjakan projek ini Setelah membuat projek baru pada Android Studio, tampilan akan langsung diarahkan ke file MainActivity.kt yang merupakan file utama projek yang dapat digunakan untuk mengubah dan memodifikasi projek. Untuk melihat tampilan sementara dari aplikasi Android yang dibuat, dapat melakukan preview dengan menggunakan emulator dari Android Studio. Caranya adalah dengan memilih menu "Device Manager" di sebelah kanan sisi Android
Baca selengkapnya

Tugas 3 PPB

Gambar
  TUGAS 3 PPB MEMBUAT BIRTHDAY CARD Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 3 - Birthday Card Pada Tugas 3 PPB kali ini, diberikan tugas mengenal lebih dalam tentang “Composable” pada Jetpack Compose. Untuk memahami konsep “Composable” lebih mendalam secara langsung, dibuat proyek sederhana yang berupa aplikasi ucapan selamat ulang tahun sederhana. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0 yang kemudian dimodifikasi. Berikut adalah langkah untuk mengerjakan projek ini. Langkah pertama adalah membuat proyek baru pada Android Studio dan pilih proyek kosong “Empty Activity”. Kemudian, isi nama proyek, lokasi proyek, dan minimum SDK pada window “Empty Activity”. Setelah mengisi detail proyek, maka akan diarahkan langsung ke file MainActivity.kt yang merupakan fi
Baca selengkapnya

Tugas 4 PPB

Gambar
  TUGAS 4 PPB DICE ROLLER APPLICATION Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 4 - Dice Roller Pada Tugas 4 PPB kali ini, diberikan tugas memahami materi “Interaksi Button” pada Jetpack Compose. Untuk memahami konsep “Interaksi Button” lebih mendalam secara langsung, dibuat proyek sederhana yaitu aplikasi “Dice Roller” interaktif. Aplikasi ini berjalan dengan cara menekan button kemudian dadu akan menampilkan angka dadu secara acak. Dalam proyek “Dice Roller” ini akan dipelajari beberapa hal, antara lain cara menambahkan composable Button ke aplikasi Android dengan Compose, cara menambahkan perilaku ke composable Button di aplikasi Android dengan Compose, cara membuka dan mengubah kode Activity untuk aplikasi Android. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs Codelab berjudul “Membuat Aplikasi Dice Roller Interaktif” berikut https://developer.android.
Baca selengkapnya