Langsung ke konten utama

Tugas 8 Pemrograman Web A

Studi Kasus PHP & MySQL : Pendaftaran Siswa Baru

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Pada pertemuan ke-13 & ke-14 kelas PWEB A, kami diberikan tugas untuk mengimplemetasikan penggunaan PHP dan MySQL untuk membuat sebuah program web yang dapat mengatasi pendaftaran siswa baru. Website disusun menggunakan HTML, CSS dan library Bootstrap, kemudian untuk backendnya menggunakan PHP, dan databasenya menggunakan MySQL. Setelah web berhasil di susun secara lokal, web tersebut kemudian perlu di hosting - kan.

Webnya dapat diakses melalui link ini : klik disini.

Berikut adalah tampilan dari hasil websitenya :




Source Code

Terdapat 9 source code yang saya gunakan untuk membangung website ini, yaitu :
  1. 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());
    }
    view raw config.php hosted with ❤ by GitHub
  2. 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 | SMK Coding</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <header>
    <a href="index.php"><img src="images/sso.png" alt="gambar"></a>
    </header>
    <div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
    <h1 style="margin-bottom: 40px;">Form Pendaftaran Calon Siswa</h1>
    <div class="container">
    <form id="formMahasiswa" autocomplete="off" action="proses-pendaftaran.php" method="POST">
    <div class="form-group">
    <label for="nama">Nama</label>
    <input type="text" name="nama" placeholder="Nama Lengkap Calon Siswa" class="form-control" minlength="3" maxlength="40">
    </div>
    <div class="form-group">
    <label for="alamat">Alamat</label>
    <textarea name="alamat" class="form-control" placeholder="Alamat Lengkap Siswa"></textarea>
    </div>
    <div class="form-group">
    <label for="sekolah_asal">Sekolah Asal</label>
    <input type="text" name="sekolah_asal" placeholder="Sekolah Asal Calon Siswa" class="form-control" minlength="1">
    </div>
    <div class="form-group">
    <label for="agama">Agama</label>
    <select name="agama" class="form-control">
    <option>Pilih Agama Calon Siswa</option>
    <option>Islam</option>
    <option>Kristen</option>
    <option>Hindu</option>
    <option>Budha</option>
    <option>Atheis</option>
    </select>
    </div>
    <div class="form-group">
    <label for="jenis_kelamin">Jenis Kelamin</label><br>
    <input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki<br>
    <input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan<br>
    </div>
    <button name="daftar" type="submit" class="btn btn-primary" style="margin-top: 20px;">Daftar</button>
    </form>
    </div>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw form-daftar.php hosted with ❤ by GitHub
  3. 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 | SMK Coding</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <header>
    <a href="index.php"><img src="images/sso.png" alt="gambar"></a>
    </header>
    <div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
    <h1 style="margin-bottom: 40px;">Form Edit Data Siswa</h1>
    <div class="container">
    <form id="formMahasiswa" autocomplete="off" action="proses-edit.php" method="POST">
    <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>">
    <div class="form-group">
    <label for="nama">Nama</label>
    <input type="text" name="nama" placeholder="Nama Lengkap Calon Siswa" class="form-control" minlength="3" maxlength="40" value="<?php echo $siswa['nama'] ?>">
    </div>
    <div class="form-group">
    <label for="alamat">Alamat</label>
    <textarea name="alamat" class="form-control" placeholder="Alamat Lengkap Siswa"><?php echo $siswa['alamat'] ?></textarea>
    </div>
    <div class=" form-group">
    <label for="sekolah_asal">Sekolah Asal</label>
    <input type="text" name="sekolah_asal" placeholder="Sekolah Asal Calon Siswa" class="form-control" minlength="1" value="<?php echo $siswa['sekolah_asal'] ?>">
    </div>
    <div class=" form-group">
    <label for="agama">Agama</label>
    <?php $agama = $siswa['agama']; ?>
    <select name="agama" class="form-control">
    <option>Pilih Agama Calon Siswa</option>
    <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>
    <option <?php echo ($agama == 'Atheis') ? "selected" : "" ?>>Atheis</option>
    </select>
    </div>
    <div class="form-group">
    <label for="jenis_kelamin">Jenis Kelamin</label><br>
    <?php $jk = $siswa['jenis_kelamin']; ?>
    <input type="radio" name="jenis_kelamin" value="Laki-laki" <?php echo ($jk == 'laki-laki') ? "checked" : "" ?>> Laki-laki<br>
    <input type="radio" name="jenis_kelamin" value="Perempuan" <?php echo ($jk == 'perempuan') ? "checked" : "" ?>> Perempuan<br>
    </div>
    <button name="simpan" type="submit" class="btn btn-primary" style="margin-top: 20px;">Simpan</button>
    </form>
    </div>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw form-edit.php hosted with ❤ by GitHub
  4. 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("Gagal menghapus...");
    }
    } else {
    die("Akses Dilarang...");
    }
    view raw hapus.php hosted with ❤ by GitHub
  5. 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 Baru | SMK Coding</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <header>
    <a href="index.php"><img src="images/sso.png" alt="gambar""></a>
    </header>
    <div class=" formContainer" style="margin-top: auto; margin-bottom: auto;">
    <h1>Pendaftaran Siswa Baru </h1>
    <br><br>
    <div class="d-flex justify-content-center">
    <a href="form-daftar.php"><button class="mr-3 btn btn-primary"> Daftar Baru</button></a>
    <a href="list-siswa.php"><button class="btn btn-primary">Pendaftar</button></a>
    </div>
    <?php if (isset($_GET['status'])) : ?>
    <br><br><br>
    <p>
    <?php
    if ($_GET['status'] == 'sukses') {
    echo "<h3>Pendaftaran siswa baru berhasil!</h3>";
    } else {
    echo "<br><br><h3>Pendaftaran gagal!</h3>";
    }
    ?>
    </p>
    <?php endif; ?>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw index.php hosted with ❤ by GitHub
  6. 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>Pendaftaran Siswa Baru | SMK Coding</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
    .custab {
    border: 1px solid #ccc;
    padding: 5px;
    transition: 0.5s;
    }
    .custab:hover {
    box-shadow: 3px 3px 0px transparent;
    transition: 0.5s;
    }
    </style>
    </head>
    <body>
    <header style="margin-bottom: 20px;">
    <a href="index.php"><img src="images/sso.png" alt="gambar""></a>
    </header>
    <h1>List Daftar Calon Siswa</h1>
    <div class=" container" style="margin-top:20px; margin-bottom: 40px">
    <p style="text-align: right; margin:15px">
    <a href=" form-daftar.php" class="btn btn-primary btn-xs col-md-3">[+] Tambah Baru</a>
    </p>
    <div class="col-md-12 col-md-offset-2 custyle">
    <table class="table table-striped custab">
    <thead>
    <tr>
    <th>ID</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>" . $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 class='text-center'>";
    echo "<a class='btn btn-info btn-xs' href='form-edit.php?id=" . $siswa['id'] . "' ><span class='glyphicon glyphicon-edit'></span>Edit</a> | ";
    echo "<a class='btn btn-danger btn-xs' href='hapus.php?id=" . $siswa['id'] . "'><span class='glyphicon glyphicon-remove'></span>Hapus</a>";
    echo "</td>";
    echo "</tr>";
    }
    ?>
    </tbody>
    </table>
    <p style="font-weight : bolder">Total : <?php echo mysqli_num_rows($query) ?></p>
    </div>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw list-siswa.php hosted with ❤ by GitHub
  7. 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');
    } else {
    die("Gagal menyimpan perubahan...");
    }
    } else {
    die("Akses dilarang...");
    }
    view raw proses-edit.php hosted with ❤ by GitHub
  8. proses-pendaftaran
    <?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...");
    }
    view raw proses-pendaftaran.php hosted with ❤ by GitHub
  9. style.css
    .formContainer {
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    background-color: #f2f5f5;
    border-radius: 20px;
    height: auto;
    padding: 70px;
    }
    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    }
    h1 {
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    color: #013880;
    }
    h3 {
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    color: #013880;
    }
    h2 {
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    color: #013880;
    }
    header {
    background-color: #013880;
    }
    header img {
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 60px;
    }
    footer {
    background-color: #013880;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    }
    footer h6 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: whitesmoke;
    font-family: Georgia;
    font-weight: bold;
    }
    .btn-primary {
    font-weight: 400;
    color: whitesmoke;
    background-color: #013880;
    border-color: #013880;
    }
    .btn-primary:hover {
    color: whitesmoke;
    background-color: #f39c12;
    border-color: #f39c12;
    }
    label {
    font-weight: bolder;
    }
    .form-group {
    margin: 5px 0px 15px 0px;
    }
    #prevLink {
    text-align: center;
    font-family: Arial;
    font-weight: 400;
    color: #013880;
    }
    view raw style.css hosted with ❤ by GitHub
Sekian pengerjaan tugas yang telah saya lakukan. Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Terima kasih atas perhatiannya.

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5 Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel  dan video player  pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat  Warung Tegal Website . Berikut adalah tampilan dari hasilnya : Tampilan Beranda Tampilan Daftar Masakan Tampilan Katering Tampilan Tentang Tampilan Kontak Source Code Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas : Halaman Beranda Halaman Daftar Masakan Halaman Katering Halaman Tentang Halaman Ko...
Posting Komentar
Baca selengkapnya