Tugas 9 - PHP & MySQL – Christopher Baptista

Tiap mahasiswa diberikan tugas untuk membuat website menggunakan PHP dan MySQL berdasarkan tutorial yang diberikan.
Deployment website Tugas 9 yaitu web pendaftaran siswa dapat diakses melalui click here.
Seluruh source code pada website ini dapat diakses melalui source code here.

Tampilan Website

Di bawah ini merupakan tampilan dari index.php.

Tampilan Form Pendaftaran

Di bawah ini merupakan tampilan dari Form Pendaftaran yang akan digunakan siswa untuk mendaftar.

Tampilan Form Edit

Di bawah ini merupakan tampilan dari Form Edit yang akan digunakan siswa untuk mengedit data yang telah disubmit.

Tampilan List Data

Di bawah ini merupakan tampilan dari List Data yang menampilkan data siswa yang telah terdaftar ke dalam database.

Source Code

Di bawah ini merupakan code pada file config.php untuk menghubungkan PHP dengan MySQL, kita menggunakan fungsi mysqli_connect() dengan parameter alamat server, user, password, dan nama database.

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());
}
?>

Selanjutnya merupakan code pada file index.php untuk tampilan awal website.

index.php

<h1>Pendaftaran
        <div>Siswa Baru</div>
</h1>
<p>ITS Coding</p>
<div class="cta">
    <a href="form-daftar.php"><button>Daftar Baru</button></a>
    <a href="list-siswa.php"><button>Pendaftar</button></a>
</div>

<?php if(isset($_GET['status'])): ?>
<p>
    <?php
        if($_GET['status'] == 'sukses'){
            echo "Pendaftaran siswa baru berhasil!";
        } else {
            echo "Pendaftaran gagal!";
        }
    ?>
</p>
<?php endif; ?>

Selanjutnya menampilkan data tabel mySQL pada file list-siswa.php.

list-siswa.php

<header>
    <h3>Siswa yang sudah mendaftar</h3>
</header>
<nav>
    <a href="form-daftar.php">[+] Tambah Baru</a>
</nav><br>
<table border="1">
<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>".$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 "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
        echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
        echo "</td>";

        echo "</tr>";
    }
    ?>
</tbody>
</table>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
<a href="index.php"><button type="button" class="button-70">Kembali</button></a>

Lalu menambahkan data pada file form-daftar.php sebagai halaman untuk form input.

form-daftar.php

<form action="proses-pendaftaran.php" method="POST">
    <div class="row">
    <h1>Formulir Pendaftaran Siswa Baru</h1>
    <h4>Nama Lengkap</h4>
    <div class="input-group input-group-icon">
        <input for="nama" type="text" name="nama" placeholder="Full Name"/>
        <div class="input-icon"></div>
    </div>
    <h4>Alamat</h4>
    <div class="input-group input-group-icon">
        <input for="alamat" name="alamat" type="text" placeholder="Address"/>
        <div class="input-icon"></div>
    </div>
    </div>
    <div class="row">
    <div class="col-half">
        <h4>Jenis Kelamin</h4>
        <div class="input-group">
        <input id="gender_male" type="radio" name="jenis_kelamin" value="laki-laki"/>
        <label for="gender_male">Male</label>
        <input id="gender_female" type="radio" name="jenis_kelamin" value="perempuan"/>
        <label for="gender_female">Female</label>
        </div>
    </div>
    </div>
    <div class="row">
    <h4>Agama</h4>
    <div class="input-group">
    <select for="agama" name="agama">
        <option>Islam</option>
        <option>Kristen</option>
        <option>Hindu</option>
        <option>Buddha</option>
        <option>Atheis</option>
    </select>
    </div>
    <h4>Sekolah Asal</h4>
    <div class="input-group input-group-icon">
    <input type="text" for="sekolah_asal" name="sekolah_asal" placeholder="School" />
        <div class="input-icon"></div>
    </div>
    </div>
    <div class="row">
    <h4>Terms and Conditions</h4>
    <div class="input-group">
        <input id="terms" type="checkbox"/>
        <label for="terms">I accept the terms and conditions for registering to this ITS Campus, and hereby confirm I have read the privacy policy.</label>
    </div></br>
    <div class="row">
        <button type="submit" value="Daftar" name="daftar" class="button-42">Daftar</button>
        <a href="index.php"><button type="button" class="button-42">Batal</button></a>
    </div>
    </div>
</form>

Menambahkan skrip untuk memproses data yang diinputkan pada file proses-pendaftaran.php.

proses-pendaftaran.php

<?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'];
    // buat query
    $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
    $query = mysqli_query($db, $sql);
    // apakah query simpan berhasil?
    if( $query ) {
        // kalau berhasil alihkan ke halaman index.php dengan status=sukses
        header('Location: index.php?status=sukses');
    } else {
        // kalau gagal alihkan ke halaman indek.php dengan status=gagal
        header('Location: index.php?status=gagal');
    }
} else {
    die("Akses dilarang...");
}
?>

Selanjutnya membuat skrip untuk menghapus data pada file hapus.php.

hapus.php

<?php
include("config.php");
if( isset($_GET['id']) ){
    // ambil id dari query string
    $id = $_GET['id'];
    // buat query hapus
    $sql = "DELETE FROM calon_siswa WHERE id=$id";
    $query = mysqli_query($db, $sql);
    // apakah query hapus berhasil?
    if( $query ){
        header('Location: list-siswa.php');
    } else {
        die("gagal menghapus...");
    }
} else {
    die("akses dilarang...");
}
?>

Kemudian membuat form untuk update data pada file form-edit.php.

form-edit.php

<form action="proses-edit.php" method="POST">
<div class="row">
    <h1>Formulir Edit Siswa</h1>
        <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
    <h4>Nama Lengkap</h4>
    <div class="input-group input-group-icon">
        <input for="nama" type="text" name="nama" placeholder="Full Name" value="<?php echo $siswa['nama'] ?>"/>
        <div class="input-icon"></div>
    </div>
    <h4>Alamat</h4>
    <div class="input-group input-group-icon">
        <input for="alamat" name="alamat" type="text" placeholder="Address" value="<?php echo $siswa['alamat'] ?>"/>
        <div class="input-icon"></div>
    </div>
    </div>
    <div class="row">
    <div class="col-half">
        <h4>Jenis Kelamin</h4>
        <div class="input-group">
        <?php $jk = $siswa['jenis_kelamin']; ?>
        <input id="gender_male" type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>/>
        <label for="gender_male">Male</label>
        <input id="gender_female" type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>/>
        <label for="gender_female">Female</label>
        </div>
    </div>
    </div>
    <div class="row">
    <h4>Agama</h4>
    <div class="input-group">
    <?php $agama = $siswa['agama']; ?>
    <select for="agama" 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": "" ?>>Buddha</option>
        <option <?php echo ($agama == 'Atheis') ? "selected": "" ?>>Atheis</option>
    </select>
    </div>
    <h4>Sekolah Asal</h4>
    <div class="input-group input-group-icon">
    <input type="text" for="sekolah_asal" name="sekolah_asal" placeholder="School" value="<?php echo $siswa['sekolah_asal'] ?>"/>
        <div class="input-icon"></div>
    </div>
    </div>
    <div class="row"></br>
        <button type="submit" value="Simpan" name="simpan" class="button-42">Simpan</button>
        <a href="list-siswa.php"><button type="button" class="button-42">Batal</button></a>
</div>
</form>

Menambahkan skrip untuk memproses update data pada file proses-edit.php.

proses-edit.php

<?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...");
}
?>

Resource

Github Repository

Tugas 9 - PHP & MySQL