5.10 PHP Praktik Membuat Aplikasi Pegawai

5.
10 Praktik Membuat Aplikasi Pegawai

Walaupun telah menguasai seluruh teori tentang PHP, tidak ada jaminan langsung bisa membuat aplikasi.
Untuk itu, pada subbab ini akan dibahas praktik membuat aplikasi sederhana yang terdiri dari login, logout
dan operasi CRUD. Dengan menguasai praktik ini, pembaca akan lebih mudah memahami proses pembuatan
aplikasi dengan PHP.
Praktik ini menggunakan template yang telah dibuat pada pembahasan CSS, sehingga tidak perlu membuat
desain dari awal. Copy saja folder template ke folder xampp/htdocs, dan ubah namanya menjadi pegawai
sebagai folder aplikasi.Bagaimana PHP dan MySQL dihubungkan?
5.10.1 Membuat Koneksi ke Database

Database yang digunakan pada aplikasi ini adalah database pegawai yang telah dibuat sebelumnya, dimana di
dalamnya terdapat tabel user, pegawai dan jabatan. Agar terkoneksi dengan database, buat folder library dan
file config.php di dalamnya dengan skrip sebagai berikut:
File library/config.php
Jalankan dengan mengetik localhost/pegawai/library/config.php. Jika tidak ada error, berarti koneksi
berhasil.
5.10.2 Membuat File Login dan Logout
Untuk membuat halaman login, ubah file login.html menjadi file login.php, tanpa mengubah skrip di
dalamnya. Jika diperhatikan, pada file tersebut terdapat baris skrip sebagai berikut:
<form method="post" action="ceklogin.php">
Dari skrip di atas, dibutuhkan file ceklogin.php yang akan memproses data yang dikirim melalui form login.
Buat file tersebut dengan skrip sebagai berikut:
File ceklogin.php
Inti dari skrip di atas yaitu mengecek apakah ada data pada tabel user yang memiliki username dan password
sama dengan data yang dikirim. Untuk password menggunakan enkripsi md5. Jika data ditemukan, ditandai
dengan jumlah data lebih dari 0, kemudian membuat session username dan password untuk digunakan sebagai
penanda pada halaman lain bahwa user sudah login. Selanjutnya, function header() akan mengarahkan ke
halaman index. Selanjutnya buat file logout.php sebagai berikut:
File logout.php
Inti dari file ini adalah skrip session_destroy() yang akan menghapus data session username dan password
yang dibuat pada file ceklogin.php.
5.10.3 Membuat Halaman Dashboard
Untuk membuat halaman dashboard dibutuhkan 3 file yaitu file index.php berisi template yang digunakan
oleh semua halaman, file konten.php yang berisi skrip untuk mengatur halaman mana yang akan ditampilkan
dan file dashboard.php yang akan ditampilkan pada bagian konten.
Langsung saja ubah file dashboard.html menjadi index.php, lalu ubah skripnya menjadi seperti berikut:
File index.php
1. <?php
2. session_start();
3. ob_start ();
4.
5. include "library/config.php";
6.
7. if (empty ($_SESSION['username']) or empty ($_SESSION ['password'])) {
8. echo "<p align='center'> Anda harus login terlebih dahulu!</p>";
9. echo "<meta http-equiv='refresh' content='2;url=login.php'>";
10. }else{
11. define('INDEX', true);
12. ?>
13.
14. <!DOCTYPE HTML>
15. <html>
16.
17. <head>
18. <title>Dashboard</title>
19. <meta charset="UTF-8">
20. <meta name="viewport" content="width=device-width, initial-scale=1">
21. <link rel="stylesheet" href="css/style.css">
22. </head>
23.
24. <body>
25. <header> Aplikasi Manajemen Pegawai</header>
26. <div class="container">
27. <aside>
28. <ul class="menu">
29. <li> <a href="?hal=dashboard" class="aktif">Dashboard</a> </li>
30. <li> <a href="?hal=pegawai">Data Pegawai</a> </li>
31. <li> <a href="?hal=jabatan">Data Jabatan</a> </li>
32. <li> <a href="logout.php">Keluar</a> </li>
33. </ul>
34. </aside>
35. <section class="main">
36. <?php include "konten.php"; ?>
37. </section>
38. </div>
39. <footer>
40. Copyright © Rohi Abdulloh
41. </footer>
42. </body>
43.
44. </html>
45. <?php
46. }
47. ?>
Pada bagian atas terdapat skrip untuk mengecek apakah terdapat session username dan password yang
menandakan user sudah login. Jika tidak ada, ditampilkan pesan dan langsung diarahkan ke halaman login.
Jika sudah login, baru ditampilkan halaman aplikasi. Sebelum skrip HTML, dibuat dulu konstanta dengan
nama INDEX yang akan digunakan untuk memastikan halaman lain hanya dapat dibuka melalui file
index.php. Isi tag <section> semuanya dihapus dan diganti dengan memanggil file konten.php yang akan
mengatur file mana yang akan tampil pada bagian tersebut sesuai dengan menu yang diklik. Pada bagian
bawah, jangan lupa menutup kurung kurawal sebagai akhir dari if().
Selanjutnya buat file konten.php dengan skrip sebagai berikut:
File konten.php
Pada awal skrip di cek apakah telah dibuat konstanta INDEX. Jika tidak mengenali konstanta tersebut, artinya
file ini diakses secara langsung, maka ditampilkan saja halaman kosong. Pada baris berikutnya, variabel
$halaman menyimpan daftar nama file yang akan ditampilkan pada bagian konten dalam array. Selanjutnya
mengecek data hal pada URL yang dikirim pada setiap link menu. Jika ada, variabel $hal diisi data tersebut,
sedangkan jika kosong variabel $hal diisi dashboard sebagai halaman default. Terakhir, mengecek setiap
array halaman, jika sama dengan variabel $hal, artinya nama halaman tersebut sedang dibuka, maka panggil
file tersebut dengan include dari folder content.
Selanjutnya buat folder content dan file dashboard.php di dalamnya dengan skrip sebagai berikut:
File content/dashboard.php
Pada skrip di atas juga dicek konstanta INDEX untuk memastikan file ini dibuka melalui menu, tidak diakses
secara langsung. Coba login ke aplikasi, jika semua skrip benar akan tampil sebagai berikut:
:
5.10.4 Membuat Halaman Jabatan
File pada halaman jabatan terdiri dari 6 file yang memiliki fungsi masing masing sebagai berikut:
 jabatan.php, merupakan halaman awal yang akan tampil ketika menu Data Jabatan diklik, akan
menampilkan tabel yang berisi daftar jabatan yang telah dimasukkan.
 jabatan_tambah.php, menampilkan formulir untuk menambah data jabatan yang akan tampil ketika
tombol Tambah diklik.
 jabatan_insert.php, berfungsi memproses data yang dikirim dari formulir tambah jabatan untuk
dimasukkan ke database.
 jabatan_edit.php, menampilkan formulir untuk edit data jabatan yang akan tampil ketika tombol Edit
diklik.
 jabatan_update.php, berfungsi memproses data yang dikirim dari formulir edit data jabatan untuk
dimasukkan ke database.
 jabatan_hapus.php, berfungsi untuk menghapus data jabatan dari database, yang akan diakses ketika
tombol Hapus diklik.
Semua file di atas diletakkan pada folder content. Adapun isi skrip dari masing-masing file sebagai berikut:
File content/jabatan.php
Skrip di atas diambil dari konten file table.html pada template, array ditambahkan skrip SQL untuk
mengambil data dari database. Setiap baris. data yang dihasilkan dikonversi ke dengan mysqli_fetch_array()
dan dilakukan perulangan hingga akhir baris dengan while. Tanda <?= pada skrip di atas sama fungsinya
dengan <?= echo. Pada tombol edit dan hapus pastikan setelah &id= tidak ada spasi.
File content/jabatan_tambah.php
Skrip di atas diambil dari konten file form.html disesuaikan dengan kebutuhan input data. Atribut action tag
<form> diisi link halaman yang memproses data.
File content/jabatan_insert.php
Skrip utama yaitu yang dicetak tebal, berfungsi untuk memasukkan data ke database. Skrip berikutnya untuk
menampilkan pesan ketika skrip berhasil diproses atau ketika gagal diproses.
File content/jabatan_edit.php
Skrip di atas pada intinya sama dengan file jabatan_tambah.php. Pada bagian atas ditambah skrip untuk
mengambil data dari database sesuai id yang dikirim dari tombol Edit, untuk ditampilkan pada form. Nilai
atribut action disesuaikan dengan nama file yang memproses. Pada awal form, ditambahkan tag <input>
dengan type hidden, untuk menampung data id jabatan yang digunakan untuk menentukan data mana yang
akan diedit pada file jabatan_update.php. Pada setiap input ditambahkan atribut value untuk menampilkan
data yang telah diinput ke database.
File content/jabatan_update.php
Skrip di atas hampir sama dengan skrip file jabatan_insert.php. Bedanya pada skrip yang dicetak tebal, yang
berfungsi untuk mengubah data yang telah ada pada database.
File content/jabatan_hapus.php
Tak jauh berbeda dengan file jabatan_update.php maupun jabatan_insert.php. Hanya disesuaikan skrip SQL-
nya.
Coba buka menu Data Jabatan untuk melihat hasilnya. Coba juga klik tombol Tambah, Edit dan Hapus untuk
melihat fungsi file lain. Jika skrip benar, hasilnya sebagai berikut:
Tampilan halaman data jabatan

Tampilan halaman tambah jabatan
Tampilan halaman edit jabatan

5.10.5 Membuat Halaman Pegawai
Halaman pegawai berisi skrip yang lebih kompleks. Untuk memahami skrip pada halaman ini, pastikan telah
memahami konsep CRUD pada halaman jabatan. Sama seperti halaman jabatan, halaman pegawai juga terdiri
dari 6 file yang fungsinya juga sama.
File content/pegawai.php
1. <?php
2. if (!defined('INDEX')) die("");
3. ?>
4. <h2 class="judul">Data Pegawai</h2>

5. <a class="tombol" href="?hal=pegawai_tambah">Tambah</a>
6.
7. <table class="table">
8. <thead>
9. <tr>
10. <th>No</th>
11. <th>Foto</th>
12. <th>Nama</th>
13. <th>Jabatan</th>
14. <th>Keterangan</th>
15. <th>Jenis Kelamin</th>
16. <th>Tanggal Lahir</th>
17. <th>Aksi</th>
18. </tr>
19. </thead>
20. <tbody>
21.
22. <?php
23.
24. $query = mysqli_query($con, "SELECT * FROM pegawai
25. LEFT JOIN jabatan ON pegawai.id_jabatan=jabatan.id_jabatan
26. ORDER BY pegawai.id_pegawai DESC");
27. $no = 0;
28.
29. while ($data = mysqli_fetch_array($query)) {
30. $no++;
31. ?>
32. <tr>
33. <td><?= $no ?></td>
34. <td><img src="images/<?= $data['foto'] ?>" width="100"></td>
35. <td><?= $data['nama_pegawai'] ?></td>
36. <td><?= $data['jenis_kelamin'] ?></td>
37. <td><?= $data['tgl_lahir'] ?></td>
38. <td><?= $data['nama_jabatan'] ?></td>
39. <td><?= $data['keterangan'] ?></td>
40. <td>
41. <a class="tombol edit" href="?hal=pegawai_edit&id=<?= $data[
'id_pegawai'] ?>"> Edit </a>
42. <a class="tombol hapus" href="?hal=pegawai_hapus&id=<?= $dat
a['id_pegawai'] ?>&foto=<?= $data['foto'] ?>" onclick="return confirm('Anda yaki
n ingin menghapus data ini?')"> Hapus </a>
43. </td>
44. </tr>
45. <?php
46. }
47. ?>
48. </tbody>
49. </table>
Yang perlu diperhatikan pada skrip di atas yaitu penggunaan LEFT JOIN pada skrip SQL untuk mengambil
data dari tabel pegawai dan jabatan sekaligus. Pada tombol Hapus juga mengirimkan data foto melalui URL
yang berisi nama file foto yang akan dihapus.
File content/pegawai_tambah.php
1. <?php
3. ?>
4.
5. <h2 class="judul">Tambah Pegawai</h2>
6. <form method="post" action="?hal=pegawai_insert" enctype="multipart/form-data">
7.
8. <div class="form-group">
9. <label for="foto">Foto</label>
10. <div class="input">
11. <input type="file" id="foto" name="foto">
12. </div>
13. </div>
14.
16. <label for="nama">Nama</label>
18. <input type="text" id="nama" name="nama">
19. </div>
20. </div>
21.
23. <label for="jk">Jenis Kelamin</label>
24. <input type="radio" id="jk" name="ik" value="L"> Laki-laki
25. <input type="radio" id="jk" name="jk" value="P"> Perempuan
26. </div>
27.
29. <label for="tanggal">Tanggal </label>
31. <input type="date" id="tanggal" name="tanggal">
32. </div>
33. </div>
34.
36. <label for="jabatan">Jabatan</label>
38. <select id="jabatan" name="jabatan">
39. <option value="">-Pilih Jabatan-</option>
40. <?php
41. $queryjabatan = mysqli_query($con, "SELECT * FROM jabatan");
42. while ($j = mysqli_fetch_array($queryjabatan)) {
43. echo "<option value='$j[id_jabatan] '> $j[nama_jabatan]</opt
ion>";
44. }
45. ?>
46. </select>
47. </div>
48. </div>
49.
51. <label for="keterangan">Keterangan</label>
53. <textarea style="width: 100%" rows="5" id="keterangan" name="keteran
gan"></textarea>
54. </div>
55. </div>
56.
58. <input type="submit" value="Simpan" class="tombol simpan">
59. <input type="reset" value="Batal" class="tombol reset">
60. </div>
61. </form>
Perhatikan penambahan atribut enctype pada tag <form> karena berisi input dengan tipe file untuk upload foto.
Perhatikan juga pada input jabatan, data jabatan diambil dari tabel jabatan pada database.
File content/pegawai_insert.php
1. <?php
2.
3. if (!defined ('INDEX')) die ("");
4.
5. $foto = $_FILES['foto']['name'];
6. $lokasi = $_FILES['foto']['tmp name'];
7. $tipefile = $_FILES['foto']['type'];
8. $ukuranfile = $_FILES['foto']['size'];
9.
10. $error = "";
11. if ($foto == "") {
12. $query = mysqli_query($con, "INSERT INTO pegawai SET
13. nama_pegawai = '$_POST[nama]',
14. jenis_kelamin = '$_POST[jk]',
15. tgl_lahir= '$_POST[tanggal]',
16. id_jabatan = '$_POST[jabatan]',
17. keterangan = '$_POST[keterangan]'
18. ");
19. }else{
20. if ($tipefile != "image/jpeg" and $tipefile != "image/jpg" and $tipefile !=
"image/png") {
21. $error = "Tipe file tidak didukung!";
22. }elseif ($ukuranfile >= 1000000) {
23. echo $ukuranfile;
24. $error = "Ukuran file terlalu besar (lebih dari 1MB) !";
25. }else{
26. move_uploaded_file($lokasi, "images/".$foto);
27. $query = mysqli_query($con, "INSERT INTO pegawai SET
28. foto = '$foto',
31. tgl_lahir = '$_POST[tanggal]',
34. ");
35. }
36. }
37.
38. if ($error != ""){
39. echo $error;
40. echo "<meta http-equiv='refresh' content='2;url=?hal=pegawai_tambah'>";
41. } elseif ($query) {
42. echo "Data berhasil disimpan!";
43. echo "<meta http-equiv='refresh' content='1;url=?hal=pegawai'>";
44. }else{
45. echo "Tidak dapat menyimpan data! <br>";
46. echo mysqli_error($con);
47. }
Pada skrip di atas terdapat validasi tipe file dan ukuran file. Perhatikan saja pada skrip yang dicetak tebal.
File content/pegawai_edit.php
1. <?php
3.
4. $query = mysqli_query($con, "SELECT * FROM pegawai WHERE id_pegawai= '$_GET[id]’
");
5. $data = mysqli_fetch_array($query);
6. ?>
7. <h2 class="judul">Tambah Pegawai</h2>
8. <form method="post" action="?hal=pegawai_update" enctype="multipart/form-data">
9. <input type="hidden" name="id" value="<?= $data['id_pegawai'] ?>">
10.
12. <label for="foto">Foto</label>
14. <input type="file" id="foto" name="foto">
15. <img src="images/<?= $data['foto'] ?>" width="150">
16. </div>
17. </div>
18.
20. <label for="nama">Nama</label>
22. <input type="text" id="nama" name="nama" value="<?= $data['nama_pega
wai'] ?>">
23. </div>
24. </div>
25.
27. <label for="jk">Jenis Kelamin</label>
28. <?php
29. if ($data['jenis_kelamin'] == "L") {
30. $l = " checked";
31. $p = "";
32. } else {
33. $l = "";
34. $p = "checked";
35. } ?>
36. <input type="radio" id="jk" name="jk" value="L" <?= $l ?>> Laki-laki
37. <input type="radio" id="jk" name="jk" value="p" <?= $p ?>> Perempuan
38. </div>
39.
41. <label for="tanggal">Tanggal </label>
43. <input type="date" id="tanggal" name="tanggal" value="<?= $data['tgl
_lahir'] ?>">
44. </div>
45. </div>
46.
48. <label for="jabatan">Jabatan</label>
50. <select id="jabatan" name="jabatan">
51. <option value=""> -Pilih Jabatan-</option>
52. <?php
53. $queryjabatan = mysqli_query($con, "SELECT * FROM jabatan");
54. while ($j = mysqli_fetch_array($queryjabatan)) {
55. echo "<option value='$j[id_jabatan]'";
56. if ($j['id_jabatan'] == $data['id_jabatan']) echo "selected";
57. echo ">$j[nama_jabatan]</option>";
58. }
59. ?>
60. </select>
61. </div>
62. </div>
64. <label for="keterangan">Keterangan</label>
66. <textarea style="width: 100%" rows="5" id="keterangan" name="keteran
gan">
67. <?= $data['keterangan'] ?>
68. </textarea>
69. </div>
70. </div>
71.
73. <input type="submit" value="Simpan" class="tombol simpan">
74. <input type="reset" value="Batal" class="tombol reset">
75. </div>
76. </form>
Perhatikan cara menampilkan data pada input jenis kelamin dan jabatan. Pada input jenis kelamin, jika data
sesuai dengan database ditampilkan atribut checked. Sedangkan pada input jabatan, jika data sesuai dengan
database ditambahkan atribut selected.
File content/pegawai_update.php
1. <?php
2. if (!defined ('INDEX')) die("");
3.
4. $foto = $_FILES['foto']['name'];
5. $lokasi = $_FILES['foto']['tmp_name'];
6. $tipefile = $_FILES['foto']['type'];
7. $ukuranfile = $_FILES['foto']['size'];
8.
9. $error = "";
10. if($foto == ""){
11. $query= mysqli_query($con, "UPDATE pegawai SET
14. tgl_lahir = '$_POST[tanggal]',
17. WHERE id_pegawai='$_POST[id]'");
18. }else{
19. if ($tipefile != "image/jpeg" and $tipefile != "image/jpg" and $tipefile !=
"image/png") {
20. $error = "Tipe file tidak didukung!";
21. }elseif ($ukuranfile >= 1000000) {
22. echo $ukuranfile;
23. $error = "Ukuran file terlalu besar (lebih dari 1MB) !";
24. }else{
25. $query= mysqli_query($con, "SELECT * FROM pegawai WHERE id_pegawai= '$_P
OST[id]’");
26. $data = mysqli_fetch_array($query);
27.
28. if (file_exists("images/$data[foto]")) unlink("images/$data[foto]");
29.
30. move_uploaded_file($lokasi, "images/".$foto);
31. $query= mysqli_query($con, "UPDATE pegawai SET
32. foto= '$foto',
34. jenis_kelamin = ’$_POST[jk]',
35. tgl_lahir= '$_POST[tanggal]',
36. id_jabatan = '$_POST[jabatan]’,
37. keterangan = '$_POST[keterangan]’
38. WHERE id_pegawai = ’$_POST[id]’");
39. }
40. }
41. if ($error != "") {
42. echo $error;
43. echo "<meta http-
equiv='refresh' content='2; url=?hal=pegawai_edit&id=$_POST[id]'>";
44. }elseif ($query) {
45. echo "Data berhasil disimpan!";
46. echo "<meta http-equiv='refresh' content='1;url=?hal_pegawai'>";
47. }else{
48. echo "Tidak dapat menyimpan data! <br>";
49. echo mysqli_error($con);
50. }
Perhatikan pada skrip yang dicetak tebal, jika user mengisi data foto, tidak hanya meng-upload foto baru
tetapi juga menghapus foto yang lama.
File content/pegawai_hapus.php
Sama seperti file pegawai_update.php, skrip di atas juga terdapat skrip untuk menghapus file foto. Hanya saja
nama foto diambil dari data foto pada URL.
Jika semua skrip benar, hasilnya seperti berikut:
Tampilan halaman data pegawai

Tampilan halaman tambah pegawai
Tampilan halaman edit pegawai

5.10 PHP Praktik Membuat Aplikasi Pegawai

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

5.10 PHP Praktik Membuat Aplikasi Pegawai

Diunggah oleh

Hak Cipta:

Format Tersedia

5.

10 Praktik Membuat Aplikasi Pegawai

5.10.1 Membuat Koneksi ke Database

<form method="post" action="ceklogin.php">

Tampilan halaman data jabatan

Tampilan halaman edit jabatan

4. <h2 class="judul">Data Pegawai</h2>

Tampilan halaman data pegawai

Tampilan halaman edit pegawai

Anda mungkin juga menyukai