Skip to content

Membuat Halaman Pegawai

Halaman pegawai berisi skrip yang lebih kompleks, maka untuk bisa melanjutkan, pahami dulu konsep CRUD pada halaman jabatan. Kita perlu menyiapkan 6 file, yaitu:

  • pegawai.php
  • pegawai_tambah.php
  • pegawai_insert.php
  • pegawai_edit.php
  • pegawai_update.php
  • pegawai_hapus.php

Halaman pegawai.php

<?php
if(!defined('INDEX')) die();
?>

<h2 class="judul">Data Pegawai</h2>
<a href="?hal=pegawai_tambah" class="tombol">Tambah</a>

<table class="table">
    <thead>
        <tr>
            <th>No</th>
            <th>Foto</th>
            <th>Nama</th>
            <th>Jenis Kelamin</th>
            <th>Tanggal Lahir</th>
            <th>Jabatan</th>
            <th>Keterangan</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
<?php
$query = "SELECT * FROM pegawai ";
$query .= "LEFT JOIN jabatan ";
$query .= "ON pegawai.id_jabatan = jabatan.id_jabatan ";
$query .= "ORDER BY pegawai.id_jabatan DESC";
$result = mysqli_query($con,$query);
$no = 0;

while($data = mysqli_fetch_assoc($result)){
    $no++;
?>

<tr>
    <td><?=$no;?></td>
    <td><img src="images/<?=$data['foto']?>" alt="" width="100"></td>
    <td><?=$data['nama_pegawai']?></td>
    <td><?=$data['jenis_kelamin']?></td>
    <td><?=$data['tgl_lahir']?></td>
    <td><?=$data['nama_jabatan']?></td>
    <td><?=$data['keterangan']?></td>
    <td>
        <a href="?hal=pegawai_edit&id=<?=$data['id_pegawai']?>"
        class="tombol edit">Edit</a>
        <a href="?hal=pegawai_hapus&id=<?=$data['id_pegawai']?>&foto=<?=$data['foto']?>"
        class="tombol hapus">Hapus</a>
    </td>
</tr>

<?php
}
?>
    </tbody>
</table>

Perhatian

Yang perlu diperhatikan adalah penggunakan query LEFT JOIN dan pada tombol Hapus mengirimkan data foto melalui URL yang berisi nama foto yang akan dihapus.

Halaman pegawai_tambah.php

<?php
if(!defined('INDEX')) die();
?>

<h2 class="judul">Tambah Pegawai</h2>
<form action="?hal=pegawai_insert" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="foto">Foto</label>
        <div class="input">
            <input type="file" name="foto" id="foto">
        </div>
    </div>

    <div class="form-group">
        <label for="nama">Nama</label>
        <div class="input">
            <input type="text" name="nama" id="nama">
        </div>
    </div>

    <div class="form-group">
        <label for="jk">Jenis Kelamin</label>
        <input type="radio" name="jk" id="jk" value="L"> Laki-laki
        <input type="radio" name="jk" id="jk" value="P"> Perempuan
    </div>

    <div class="form-group">
        <label for="tanggal">Tanggal</label>
        <div class="input">
            <input type="date" name="tanggal" id="tanggal">
        </div>
    </div>

    <div class="form-group">
        <label for="jabatan">Jabatan</label>
        <div class="input">
            <select name="jabatan" id="jabatan">
                <option value=""> - Pilih Jabatan - </option>
<?php
$query = "SELECT * FROM jabatan";
$result = mysqli_query($con,$query);
while($data = mysqli_fetch_assoc($result)){
    echo "<option value='$data[id_jabatan]'> $data[nama_jabatan] </option>";
}
?>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="keterangan">Keterangan</label>
        <div class="input">
            <textarea name="keterangan" id="keterangan" style="width:100%" rows="5" ></textarea>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" value="Simpan" class="tombol simpan">
        <input type="reset" value="Batal" class="tombol reset">
    </div>
</form>

Catatan

  • Perhatikan pada tag <form>, di dalamnya ditambahkan atribut enctype="multipart/form-data agar bisa memproses file.
  • Berikutnya kita perlu menyiapkan file pegawai_insert.php untuk memproses form.

Halaman pegawai_insert.php

Buat kode berikut, namun sebelum dijalankan buat dulu folder images di dalam folder proyek untuk menyimpan foto profil pegawai.

<?php
if(!defined('INDEX')) die();

$foto   = $_FILES['foto']['name'];
$lokasi = $_FILES['foto']['tmp_name'];
$tipe   = $_FILES['foto']['type'];
$ukuran = $_FILES['foto']['size'];

$nama       = $_POST['nama'];
$jk         = $_POST['jk'];
$tgl        = $_POST['tanggal'];
$id_jabatan = $_POST['jabatan'];
$ket        = $_POST['keterangan'];

$error = "";

if($foto == ""){
    $query  = "INSERT INTO pegawai SET ";
    $query .= "foto = '$foto', ";
    $query .= "nama_pegawai = '$nama', ";
    $query .= "jenis_kelamin = '$jk', ";
    $query .= "tgl_lahir = '$tgl', ";
    $query .= "id_jabatan = '$id_jabatan', ";
    $query .= "keterangan = '$ket'";

    $result = mysqli_query($con,$query);
} else {
    if($tipe != "image/jpeg" and $tipe != "image/jpg" and $tipe != "image/png"){
        $error = "Maaf, tipe file tidak didukung!";
    } elseif($ukuran >= 1000000){
        echo $ukuran;
        $error = "Ukuran file terlalu besar (lebih dari 1 MB)!";
    } else {
        move_uploaded_file($lokasi,"images/".$foto);

        $query  = "INSERT INTO pegawai SET ";
        $query .= "foto = '$foto', ";
        $query .= "nama_pegawai = '$nama', ";
        $query .= "jenis_kelamin = '$jk', ";
        $query .= "tgl_lahir = '$tgl', ";
        $query .= "id_jabatan = '$id_jabatan', ";
        $query .= "keterangan = '$ket'";

        $result = mysqli_query($con,$query);
    }
}

if($error != ""){
    echo $error;
    echo "<meta http-equiv='refresh' content='2; url=?hal=pegawai_tambah'>";
} elseif ($query){
    echo "Berhasil menambahkan data pegawai <b>$nama</b>";
    echo "<meta http-equiv='refresh' content='1; url=?hal=pegawai'>";
} else {
    echo "Tidak dapat menyimpan data!<br>";
    echo mysqli_error();
}
?>

Perhatian

Skrip di atas lebih panjang daripada file jabatan_insert.php karena memang saat menambahkan data pegawai ada banyak input yang perlu dimasukkan ke dalam database, selain itu juga dilakukan pengecekan, apakah menyertakan file foto atau tidak, validasi tipe file dan ukuran maksimal file foto.

Halaman pegawai_edit.php

<?php
if(!defined('INDEX')) die();

$id = $_GET['id'];
$query = "SELECT * FROM pegawai WHERE id_pegawai = '$id'";
$result = mysqli_query($con,$query);
$data = mysqli_fetch_assoc($result);
?>

<h2 class="judul">Edit Pegawai</h2>
<form action="?hal=pegawai_update" method="post" enctype="multipart/form-data">

    <!-- Input ID -->
    <input type="hidden" name="id" value="<?=$data['id_pegawai']?>">

    <!-- Input Foto -->
    <div class="form-group">
        <label for="foto">Foto</label>
        <div class="input">
            <input type="file" name="foto" id="foto">
            <img src="images/<?=$data['foto']?>" width="100"  alt="">
        </div>
    </div>

    <!-- Input Nama -->
    <div class="form-group">
        <label for="nama">Nama</label>
        <div class="input">
            <input type="text" name="nama" id="nama" value="<?=$data['nama_pegawai']?>">
        </div>
    </div>

    <!-- Input Gender -->
    <div class="form-group">
        <label for="jk">Jenis Kelamin</label>

        <!-- Pengecekan gender -->
        <?php
        if($data['jenis_kelamin']=="L"){
            $l=" checked";
            $p="";
        }else{
            $l="";
            $p=" checked";
        }
        ?>

        <input type="radio" name="jk" id="jk" value="L" <?= $l ?>> Laki-laki
        <input type="radio" name="jk" id="jk" value="P" <?= $p ?>> Perempuan
    </div>

    <!-- Input Tanggal Lahir -->
    <div class="form-group">
        <label for="tanggal">Tanggal</label>
        <div class="input">
            <input type="date" name="tanggal" id="tanggal" value="<?=$data['tgl_lahir']?>">
        </div>
    </div>

    <!-- Input Jabatan -->
    <div class="form-group">
        <label for="jabatan">Jabatan</label>
        <div class="input">
            <select name="jabatan" id="jabatan">
                <option value=""> - Pilih Jabatan - </option>
<?php
$queryj = "SELECT * FROM jabatan";
$resultj = mysqli_query($con,$queryj);
while($j = mysqli_fetch_assoc($resultj)){
    echo "<option value='$j[id_jabatan]'";
    if($j['id_jabatan'] == $data['id_jabatan']) echo " selected";
    echo "> $j[nama_jabatan] </option>";
}
?>
            </select>
        </div>
    </div>

    <!-- Input Keterangan -->
    <div class="form-group">
        <label for="keterangan">Keterangan</label>
        <div class="input">
            <textarea name="keterangan" id="keterangan"
            style="width:100%" rows="5"><?= $data['keterangan'] ?></textarea>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" value="Simpan" class="tombol simpan">
        <input type="reset" value="Batal" class="tombol reset">
    </div>
</form>

Perhatian

  • Perhatikan dan pahami cara menampilkan data paad input jenis kelamin dan jabatan.
  • Pada input jenis kelamin, jika data sesuai dengan database, maka ditampilkan atribut checked.
  • Pada input jabatan, jika data sesuai dengan database, ditambahkan atribut selected.

Halaman pegawai_update.php

Perhatian

  • Silahkan copy dari file pegawai_insert.php dan sesuaikan perubahannya.
  • Menyimpan id dengan variabel $id
  • Merubah query dari INSERT INTO menjadi UPDATE ... WHERE
  • Menghapus foto asli dengan fungsi unlink()
<?php
if(!defined('INDEX')) die();

$foto   = $_FILES['foto']['name'];
$lokasi = $_FILES['foto']['tmp_name'];
$tipe   = $_FILES['foto']['type'];
$ukuran = $_FILES['foto']['size'];

$id         = $_POST['id'];
$nama       = $_POST['nama'];
$jk         = $_POST['jk'];
$tgl        = $_POST['tanggal'];
$id_jabatan = $_POST['jabatan'];
$ket        = $_POST['keterangan'];

$error = "";

if($foto == ""){
    $query  = "UPDATE pegawai SET ";
    $query .= "nama_pegawai = '$nama', ";
    $query .= "jenis_kelamin = '$jk', ";
    $query .= "tgl_lahir = '$tgl', ";
    $query .= "id_jabatan = '$id_jabatan', ";
    $query .= "keterangan = '$ket' ";
    $query .= "WHERE id_pegawai = '$id'";

    $result = mysqli_query($con,$query);
} else {
    if($tipe != "image/jpeg" and $tipe != "image/jpg" and $tipe != "image/png"){
        $error = "Maaf, tipe file tidak didukung!";
    } elseif($ukuran >= 1000000){
        echo $ukuran;
        $error = "Ukuran file terlalu besar (lebih dari 1 MB)!";
    } else {

        // Menghapus foto sebelumnya
        $query = "SELECT * FROM pegawai WHERE id_pegawai ='$id'";
        $result = mysqli_query($con,$query);
        $data = mysqli_fetch_assoc($result);

        if(file_exists("images/$data[foto]")){
            unlink("images/$data[foto]");
        }

        move_uploaded_file($lokasi,"images/".$foto);

        $query  = "UPDATE pegawai SET ";
        $query .= "foto = '$foto', ";
        $query .= "nama_pegawai = '$nama', ";
        $query .= "jenis_kelamin = '$jk', ";
        $query .= "tgl_lahir = '$tgl', ";
        $query .= "id_jabatan = '$id_jabatan', ";
        $query .= "keterangan = '$ket'";
        $query .= "WHERE id_pegawai = '$id'";

        $result = mysqli_query($con,$query);
    }
}

if($error != ""){
    echo $error;
    echo "<meta http-equiv='refresh' content='2; url=?hal=pegawai_edit'>";
} elseif ($query){
    echo "Berhasil memperbaharui data pegawai <b>$nama</b>";
    echo "<meta http-equiv='refresh' content='1; url=?hal=pegawai'>";
} else {
    echo "Tidak dapat menyimpan data!<br>";
    echo mysqli_error();
}
?>

Halaman pegawai_hapus.php

<?php
if(!defined('INDEX')) die();

$id   = $_GET['id'];
$foto = $_GET['foto'];

if(file_exists("images/$foto")){
    unlink("images/$foto");
}

$query  = "DELETE FROM pegawai WHERE id_pegawai = '$id'";
$result = mysqli_query($con,$query);

if($result){
    echo "Data pegawai berhasil dihapus!";
    echo "<meta http-equiv='refresh' content='1; url=?hal=pegawai'>";
}else{
    echo "Tidak dapat menghapus data pegawai!<br>";
    echo mysqli_error();
}

?>

Catatan

Pada skrip di atas sama dengan pegawai_update.php, yaitu terdapat skrip untuk menghapus foto file, hanya saja data foto diambil dari query string pada URL.