Langsung ke konten utama

Tugas 9 Pemrograman Web A

 

Studi Kasus PHP & MySQL : Pendaftaran Siswa Baru + Upload Foto + Login Form

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


Pada pertemuan ke-15 kelas PWEB A, kami diberikan tugas untuk mengimplemetasikan penggunaan PHP dan MySQL untuk mengembangkan program Pendaftaran Siswa Baru yang telah dibuat sebelumnya, agar bisa mengelola Foto pada databasenya dan memiliki fitur login. Sama seperti sebelumnya, website disusun menggunakan HTML, CSS dan library Bootstrap, kemudian untuk backendnya menggunakan PHP, dan databasenya menggunakan MySQL. 

Berikut adalah tampilan dari hasil websitenya :






Source Code

Terdapat 11 source code yang saya gunakan untuk membangun 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="menu.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" enctype="multipart/form-data">
    <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>
    <div class="form-group">
    <label for="foto">Foto</label><br><br>
    <input type="file" name="foto" value=""><br><br>
    <input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin menambahkan foto<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="menu.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" enctype="multipart/form-data">
    <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>
    <div class="form-group">
    <label for="foto">Foto</label><br><br>
    <input type="file" name="foto" value=""><br><br>
    <input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto<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 = "Select * from calon_siswa Where id=$id";
    $query = mysqli_query($db, $sql);
    $data = mysqli_fetch_array($query);
    if(is_file("images/".$data['foto'])){
    unlink("images/".$data['foto']);
    }
    $sql2 = "Delete from calon_siswa Where id=$id";
    $query2 = mysqli_query($db, $sql2);
    if ($query2) {
    echo 'alert("Penghapusan data berhasil!")';
    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>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=""><img src="images/sso.png" alt="gambar"></a>
    </header>
    <div class=" formContainer" style="margin-top: 80px; margin-bottom: 80px">
    <h1 style="margin-bottom: 40px;">Login</h1>
    <div class="container">
    <form id="formMahasiswa" autocomplete="off" action="proses-login.php" method="POST">
    <div class="form-group">
    <label for="username">Username</label>
    <input type="text" name="username" class="form-control" minlength="1" maxlength="15">
    </div>
    <div class="form-group">
    <label for="Password">Password</label>
    <input type="password" name="password" class="form-control" minlength="1" maxlength="20">
    </div>
    <button name="login" type="submit" class="btn btn-primary" style="margin-top: 20px; width: 100%;">Login</button>
    </form>
    </div>
    <?php if (isset($_GET['status'])) : ?>
    <br><br>
    <p>
    <?php
    if ($_GET['status'] == 'gagal') {
    echo "<h5 style='color: red;'>Informasi Login Salah!</h5>";
    }
    ?>
    </p>
    <?php endif; ?>
    </div>
    </div>
    </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="menu.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>Foto</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>";
    if($siswa['foto'] != NULL){
    echo "<td><img src='images/".$siswa['foto']."' width='100' height='100'></td>";
    } else{
    echo "<td><p>Tidak ada foto!</p></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. menu.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="menu.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 menu.php hosted with ❤ by GitHub
  8. 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'];
    if(isset($_POST['ubah_foto'])){
    $foto = $_FILES['foto']['name'];
    $tmp = $_FILES['foto']['tmp_name'];
    $fotobaru = date('dmYHis').$foto;
    $path = "images/".$fotobaru;
    if(move_uploaded_file($tmp, $path)){
    $sql= "Select * From calon_siswa WHERE id='$id'";
    $query = mysqli_query($db, $sql);
    $data = mysqli_fetch_array($query);
    if(is_file("images/".$data['foto']))
    unlink("images/".$data['foto']);
    $sql = "Update calon_siswa set nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah', foto='$fotobaru' Where id='$id'";
    $query = mysqli_query($db, $sql);
    if ($query) {
    header('Location: list-siswa.php');
    } else {
    die("Gagal menyimpan perubahan...");
    }
    } else{
    echo "alert(Maaf, Gambar gagal untuk diupload.)";
    header('Location: list-siswa.php');
    }
    }
    else {
    $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
  9. proses-login.php
    <?php
    include("config.php");
    if (isset($_POST['login'])){
    $username = $_POST['username'];
    $password = $_POST['password'];
    $sql = "Select * from akun where username='$username' && password='$password'";
    $query = mysqli_query($db, $sql);
    $cek = mysqli_num_rows($query);
    if ($cek > 0) {
    header('Location: menu.php');
    } else {
    header('Location: index.php?status=gagal');
    }
    }
    ?>
    view raw proses-login.php hosted with ❤ by GitHub
  10. proses-pendaftaran
    <?php
    include("config.php");
    if (isset($_POST['daftar'])) {
    $id = $_POST['id'];
    $nama = $_POST['nama'];
    $alamat = $_POST['alamat'];
    $jk = $_POST['jenis_kelamin'];
    $agama = $_POST['agama'];
    $sekolah = $_POST['sekolah_asal'];
    if(isset($_POST['ubah_foto'])){
    $foto = $_FILES['foto']['name'];
    $tmp = $_FILES['foto']['tmp_name'];
    $fotobaru = date('dmYHis').$foto;
    $path = "images/".$fotobaru;
    if(move_uploaded_file($tmp, $path)){
    $sql = "Insert into calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal, foto) values ('$nama', '$alamat', '$jk', '$agama', '$sekolah', '$fotobaru')";
    $query = mysqli_query($db, $sql);
    if ($query) {
    header('Location: menu.php?status=sukses');
    } else {
    header('Location: menu.php?status=gagal');
    }
    } else{
    echo 'alert("Maaf, Gambar gagal untuk diupload")';
    echo "<br><a href='form-daftar.php'>Kembali Ke Form</a>";
    }
    }
    else{
    $sql = "Insert into calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) values ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
    $query = mysqli_query($db, $sql);
    if ($query) {
    header('Location: menu.php?status=sukses');
    } else {
    header('Location: menu.php?status=gagal');
    }
    }
    }
    else{
    die("Akses dilarang...");
    }
    view raw proses-pendaftaran.php hosted with ❤ by GitHub
  11. 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