MODUL PRAKTIKUM
PEMROGRAMAN
WEB II (PART II)
Edisi 2 V1.4 190919
MODUL PRAKTIKUM PEMROGRAMAN PHP CRUD DENGAN
FRONTEND BACKEND BASE.
Modul Praktikum Web II dengan menggunakan bahasa
pemrograman PHP. Untuk Mahasiswa Universitas Islam Modul
Kalimantan (UNISKA) Muhammad Arsyad Al Banjari yang telah Praktikum Web II
mengikuti Praktikum Web I dan atau telah mengambil mata kuliah
pemrograman web II. Disusun oleh:
Fathul Hafidh, [Link]., [Link]
Modul Praktikum Pemrograman Web II 1
Daftar Isi
Daftar Isi.......................................................................................................... 2
3. FRONTEND ............................................................................................... 3
Frontend Data Karyawan .......................................................................... 3
Frontend Tambah Data Karyawan............................................................ 4
Frontend Edit Data Karyawan .................................................................. 6
Frontend Hapus Data Karyawan............................................................... 8
Frontend Cetak Data Karyawan................................................................ 9
Frontend Halaman Login ........................................................................ 10
Halaman Admin ...................................................................................... 10
Daftar Pustaka ............................................................................................... 12
Modul Praktikum Pemrograman Web II 2
3. FRONTEND
Frontend Data Karyawan
Bagian front-end dari sebuah website adalah bagian yang langsung dilihat oleh
user. User juga bisa langsung berinteraksi pada bagian ini. Bagian ini dibangun
menggunakan HTML, CSS, dan JavaScript. Pertama yang dibuat adalah halaman
karyawan_data.php. Halaman ini berfungsi sebagai halaman utama dari master
data karyawan, didalamnya akan ada form CRUD (Create Read Update Delete).
Kemudian update [Link] dengan menambahkan link kedalam menu navigasi
yang telah dibuat, perhatikan gambar berikut:
Modul Praktikum Pemrograman Web II 3
Jika link menu tersebut di klik pada web, maka akan tampil halaman
karyawan_data.php seperti tampilan berikut:
Frontend Tambah Data Karyawan
Selanjutnya membuat karyawan_add.php yang mana halaman ditampilkan jika
menekan link Tambah Data. Berikut koding untuk karyawan_add.php:
Duplicate
(Ctrl+D) pada
notepad++
Modul Praktikum Pemrograman Web II 4
Untuk mempercepat pengetikan dapat dilakukan duplikasi pada bagian yang telah
ditandai diatas, dengan tetap memperhatikan bagian-bagian yang berbeda pada
setiap form-group yang dibuat.
Setelah selesai, preview pada link Tambah Data akan menghasilkan tampilan
seperti gambar berikut:
Modul Praktikum Pemrograman Web II 5
Jika bagian Tanggal Lahir tidak menampilkan plugin kalender, update Browser
yang digunakan atau pergunakan browser lain.
Frontend Edit Data Karyawan
Selanjutnya pada karyawan_data.php terdapat link edit data karyawan yang mana
menuju file karyawan_edit.php yang mana source code-nya tidak jauh berbeda
dari karyawan_add.php, koding dapat dilakukan dengan cara menyalin atau
menyinpan ulang karyawan_add.php menjadi karyawan_edit.php kemudian
mengedit ulang menyesuaikan dengan koding berikut, perhatikan perbedaannya
dengan seksama.
Modul Praktikum Pemrograman Web II 6
Modul Praktikum Pemrograman Web II 7
Setelah selesai, hasil karyawan_edit dapat dilihat seperti pada gambar berikut:
Frontend Hapus Data Karyawan
Link terakhir yang ada pada karyawan_data.php adalah karyawan_delete.php,
untuk file ini cukup buat file kosong, karena tidak ada tampilan untuk menghapus
pada master data tersebut. Buat file kosong dan simpan dengan nama
karyawan_delete.php
Modul Praktikum Pemrograman Web II 8
Frontend Cetak Data Karyawan
Bagian akhir frontend kali ini adalah membuat bagian cetak data karyawan yang
ada pada menu Laporan. Buat file baru dengan nama karyawan_cetak.php
kemudian isi dengan koding sebagai berikut, bisa juga duplikasi dari
karyawan_data.php.
Setelah selesai, update menu navigasi pada bagian laporan – Cetak Data Karyawan
Kemudian akses halaman tersebut dan akan menampilkan halaman cetak data
karyawan seperti gambar berikut:
Modul Praktikum Pemrograman Web II 9
Lalu cobalah klik bagian gambar print untuk melihat hasil cetak dari halaman
tersebut. Jika telah berhasil akan menampilkan sesuai gambar berikut:
Frontend Halaman Login
Pertama-tama kita akan membuat halaman login, dengan nama file [Link],
ketikkan kode berikut didalamnya :
Halaman Admin
Halaman admin menjadi pembeda antara akses yang telah login dengan yang
belum login. Selanjutnya ketikkan kode berikut (bisa copas dari file [Link])
kedalam file [Link] :
Modul Praktikum Pemrograman Web II 10
Perhatikan kode pada line 2, dimana terdapat file yang harusnya di include kan
dengan nama file [Link]. File ini berbeda dengan sebelumnya yaitu
file [Link], karena file tersebut belum ada maka kita akan buat dan ketikkan
didalamnya kode seperti berikut (bisa copas dari [Link]) :
Modul Praktikum Pemrograman Web II 11
Daftar Pustaka
Adi, A. P. (2019). 111 Kode HTML untuk Belajar Kilat. Jakarta: PT Elex media
Komputindo.
Enterprise, J. (2016). Pemrograman Bootstrap untuk Pemula. Jakarta: PT Elex
Media Komputindo.
Prasetio, A. (2010). Cara Mudah Mendesain Web untuk Pemula. Jakarta: PT.
Transmedia.
Subagia, A. (2016). Membuat Web dengan PHP 7 dan Database PDO MySQLi.
jakarta: PT. Elex Media Komputindo.
Wellman, D. (2011). JQuery UI 1. 8: The User Interface Library for JQuery.
Birmingham: Packt Publishing.
Modul Praktikum Pemrograman Web II 12
