MODUL PRAKTIKUM
PEMROGRAMAN
WEB II (PART 1)
Edisi 2 V1.4 200420
MODUL PRAKTIKUM PEMROGRAMAN PHP CRUD DENGAN
FRONTEND BACKEND BASE. Modul
Modul Praktikum Web II dengan menggunakan bahasa Praktikum Web II
pemrograman PHP. Untuk Mahasiswa Universitas Islam
Disusun oleh:
Kalimantan (UNISKA) Muhammad Arsyad Al Banjari yang telah
mengikuti Praktikum Web I dan atau telah mengambil mata kuliah Fathul Hafidh, [Link]., [Link]
pemrograman web II.
Modul Praktikum Pemrograman Web II 1
Kata Pengantar
Puji Syukur kehadirat Allah SWT karena atas limpahan rahmat-Nya sehingga
Modul Praktikum Pemrograman Web II dapat terselesaikan dan digunakan untuk
mahasiswa-mahasiswi yang mengambil praktikum pemrograman web II. Modul ini
disusun berdasarkan Standar yang mengacu pada Create Read Update Delete
(CRUD) sebagai dasar pondasi dari pemrograman. Modul ini juga dilengkapi
dengan fitur tambahan untuk menguji pemahaman mahasiswa terhadap fitur
ataupun fungsi pemrograman yang dituliskan dalam modul ini.
Adapun terselesaikannya modul ini bukan berarti telah sempurna tetapi
tentunya masih perlu perbaikan dalam metode penulisan, algoritma
pemrograman ataupun tata bahasa yang digunakan pada modul, diharapkan
adanya kritik dan saran untuk kesempurnaan modul ini.
Terima kasih kepada Ibu Dr. Hj. Silvia Ratna, [Link]., [Link] selaku Dekan
Fakultas Teknologi Informasi yang telah memberikan kepercayaan untuk
mengampu mata kuliah pemrograman web serta seluruh pihak akademisi yang
telah membantu hingga selesainya modul praktikum ini. Semoga modul ini dapat
bermanfaat bagi seluruh peserta didik dan juga pelajar lainnya.
Banjarbaru, April 2020
Penyusun
Fathul Hafidh, [Link]., [Link]
Modul Praktikum Pemrograman Web II 2
Daftar Isi
Kata Pengantar ................................................................................................ 2
Daftar Isi.......................................................................................................... 3
1. Pengantar Modul ..................................................................................... 3
2. Database .................................................................................................. 5
3. Coding Frontend....................................................................................... 7
File Index................................................................................................... 7
Memisahkan File Index ............................................................................. 8
Mencoba Multiple Pages .......................................................................... 9
Daftar Pustaka ............................................................................................... 11
1. Pengantar Modul
Pada praktikum ini, mahasiswa telah menginstall XAMPP dan editor notepad++,
mahasiswa juga telah memiliki pengetahuan dasar pemrograman web. HTML, CSS
dan PHP.
Download file master dari [Link]
orv2L5M4TqazJ2RGFkWkY5Y2c kemudian simpan file (latihan_app.rar) ke dalam
htdocs, pastikan dalam folder tersebut terdapat folder dan file seperti gambar
dibawah ini.
Modul Praktikum Pemrograman Web II 3
Seperti anda lihat terdapat folder css dan js, yang telah terdapat bootstrap
didalamnya. Sehingga untuk tampilan anda telah dapat menggunakan berbagai
class dan id yang biasa digunakan oleh bootstrap.
Modul Praktikum Pemrograman Web II 4
2. Database
Database memegang peranan penting pada pembuatan aplikasi, sering sekali kita
tidak bisa mendesain database dengan benar atau tidak bisa memanipulasi
database dengan baik sesuai kebutuhan kita terhadap data tersebut.
Pada bagian 3 ini, komputer kita pastikan telah terinstall XAMPP dan modul
Apache dan MySql telah berjalan.
Buka web dengan alamat [Link] klik Tab Databases buat
database baru dengan nama uniska_latihan_app.
Modul Praktikum Pemrograman Web II 5
Buat tabel karyawan dengan jumlah kolom 8, perhatikan gambar berikut:
Kemudian buat tabel karyawan (Pastikan nik sebagai primary key) seperti gambar
berikut :
Modul Praktikum Pemrograman Web II 6
3. Coding Frontend
File Index
File index merupakan file utama yang dibaca oleh web server sebagai acuan
bagaimana sebuah web akan ditampilkan. Pada folder latihan_app yang telah
disalin dan diextract sebelumnya tambahkan file [Link] dengan cara klik kanan
pada desktop dan buat text dokumen baru yang disimpan sebagai [Link].
Kemudian gunakan notepad++ atau text editor lainnya untuk menambahkan
koding pada file tersebut, dengan koding sebagai berikut:
Modul Praktikum Pemrograman Web II 7
Setelah selesai, coba kita preview pada web browsur, ketikkan alamatnya
[Link] akan menampilkan web seperti gambar berikut:
Memisahkan File Index
Memisahkan file index berfungsi memudahkan penerapan multiple pages pada
suatu web. File index akan dipisahkan menjadi tiga (3) bagian (header, index dan
footer) dengan meninjau bahwa bagian header dan footer tidak perlu berubah
pada halaman lainnya, maka cukup membuat satu kodingan tersebut.
[Link]
[Link]
Pada baris 1-30 menjadi [Link], pada baris 36-41 menjadi [Link].
Sehingga file [Link] hanya akan menyisakan koding sebagai berikut:
Kemudian file [Link] dan [Link] dipanggil kembali dengan fungsi include
pada pemrograman PHP, Yang mana memudahkan kita nantinya membuat
halaman lain hanya dengan menambahkan include file [Link] dan
[Link], tambahkan seperti kode berikut:
Modul Praktikum Pemrograman Web II 8
Mencoba Multiple Pages
Untuk mengetahui bagaimana Multiple Pages bekerja, buat file baru kembali
dengan nama [Link], seperti gambar berikut:
Tulislah koding didalamnya seperti koding berikut:
Modul Praktikum Pemrograman Web II 9
Setelah koding tersebut selesai, maka menu navigasi pada web perlu dirubah
untuk ditambahkan navigasi menuju halaman [Link], perhatikan baris
ke 24 adalah bagian yang ditambahkan
Setelah itu refresh web tersebut [Link] klik menu Tentang
Saya akan tampil seperti halaman berikut:
• Apakah gambar tidak terlihat? Pastikan linknya benar dan fotonya
ada.
• Gantilah dengan foto profil Anda sendiri, ubahlah halaman
tersebut agar terlihat lebih menarik
• Buatlah halaman lainnya, tingkatkan kreatifitas Anda!
Modul Praktikum Pemrograman Web II 10
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 11
