PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK DAN INFORMATIKA

UNIVERSITAS MULTIMEDIA NUSANTARA
Gedung A Lantai 5, Kampus UMN
Jl. Scientia Boulevard, Gading Serpong, Tangerang, Banten-15811 Indonesia
Telp: +62-21.5422.0808 web: www.umn.ac.id

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 2 dari 127

 DAFTAR ISI

CAPAIAN PEMBELAJARAN PRAKTIKUM 5

MINGGU 1
PERKENALAN DENGAN SERVER-SIDE PROGRAMMING
MENGGUNAKAN BAHASA SCRIPTING PHP 6
MINGGU 2
DASAR-DASAR PEMROGRAMAN PHP 10
MINGGU 3
PHP FORMS, SESSION, COOKIE 13
MINGGU 4
PHP OBJECT ORIENTED PROGRAMMING (OOP) 21
MINGGU 5
UPLOAD DAN MANIPULASI FILE 27
MINGGU 6
PHP & MYSQL 34
MINGGU 7
PHP SECURITY & AUTHENTICATION 43
MINGGU 8
DASAR-DASAR FRAMEWORK LARAVEL 49
MINGGU 9
CONTROLLER & VIEW 54
MINGGU 10
MODEL & MIGRATION 66
MINGGU 11
ELOQUENT RELATIONSHIP 98
MINGGU 12
FORMS & VALIDATION 107
MINGGU 13
SECURITY & AUTHENTICATION 122

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 3 dari 127

 CAPAIAN PEMBELAJARAN PRAKTIKUM

1. Mahasiswa mampu menjelaskan perbedaan client-side dan server-side scripting serta

teknologi-teknologi yang dapat digunakan (C2)
2. Mahasiswa mampu menjelaskan dasar-dasar pemrograman web dan menggunakan
struktur control dengan Bahasa pemrograman PHP (C2, C3)
3. Mahasiswa mampu menggunakan pre-defined variables dan functions pada PHP dan
menggunakan fungsionalitas PHP untuk memproses data dari web form (C3)
4. Mahasiswa mampu menerapkan konsep pemrograman berbasis obyek pada PHP (C3)
5. Mahasiswa mampu merancang dan membangun aplikasi web untuk melakukan
upload dan manipulasi file menggunakan PHP (C5, C6)
6. Mahasiswa mampu merancang dan membangun aplikasi web yang terkoneksi dengan
basis data MySQL dan melakukan proses CRUD pada basis data tersebut (C5, C6)
7. Mahasiswa mampu merancang dan membangun aplikasi web yang aman dengan fitur
autentikasi pengguna (C5, C6)
8. Mahasiswa mampu menjelaskan dasar-dasar pengembangan web menggunakan
Laravel Framework (C2)
9. Mahasiswa mampu menerapkan Controller dan View menggunakan Framework
Laravel (C3)
10. Mahasiswa mampu menerapkan Model dan Migration menggunakan Framework
Laravel (C3)
11. Mahasiswa mampu menerapkan Eloquent Relationship menggunakan Framework
Laravel (C3)
12. Mahasiswa mampu menerapkan form, upload file dan validasi menggunakan
Framework Laravel (C3)
13. Mahasiswa mampu merancang dan membangun aplikasi web yang aman
menggunakan Framework Laravel (C5, C6)
14. Mahasiswa mampu merancang dan membangun RESTful API menggunakan
Framework Laravel (C5, C6)

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 4 dari 127

 MINGGU 1
PERKENALAN DENGAN SERVER-SIDE PROGRAMMING
MENGGUNAKAN BAHASA SCRIPTING PHP

DESKRIPSI TEMA
Mahasiswa mempersiapkan development environment untuk melakukan pengembangan aplikasi
berbasis web, yaitu melakukan installasi XAMPP sebagai local web server, Visual Studio Code sebagai
code editor dan Postman untuk melakukan pengujian API.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menjelaskan perbedaan client-side dan server-side scripting serta
teknologi-teknologi yang dapat digunakan (C2)

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. VS Code
3. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
PHP merupakan salah satu Bahasa scripting sisi server yang paling popular saat ini. Kode PHP dapat
berdiri sendiri atau disisipkan pada kode HTML. Kode PHP diproses oleh sebuah interpreter PHP yang
didukung oleh Zend Engine.

Fakta Seputar PHP:

- PHP awalnya merupakan singkatan dari “Personal Home Page”, yang sekarang dikenal sebagai
“Hypertext Preprocessor” dirilis pada tahun 1995 oleh Rasmus Lerdorf.
- PHP merupakan Free Open Source Software (FOSS) yang dirilis dibawah lisensi PHP.
- PHP dapat digunakan di semua sistem operasi popular, yaitu Linux, Microsoft Windows dan MacOS.
- Beberapa website terkenal yang dikembangkan menggunakan PHP, yaitu Facebook, Digg, Flickr,
Technorati, Yahoo, dll.

PHP Development Tools

Untuk mengembangkan aplikasi dengan PHP, dibutuhkan beberapa tools, yaitu:
- Apache Server – web server yang menngirimkan konten menggunakan protocol HTTP atau HTTPS
melalui World Wide Web (WWW)
- MySQL/MariaDB – Database untuk menyimpan data
- PHP – Interpreter untuk membaca kode PHP
Terdapat variasi software bundle untuk mempermudah developer melakukan setup atau installasi awal,
antara lain:
- LAMP – Linux, Apache, MySQL dan PHP
- WAMP – Windows, Apache, MySQL dan PHP
- MAMP – MacOS, Apache, MySQL dan PHP
- XAMPP – Cross-Platform (X), Apache, MariaDB dan PHP
Installasi:
- XAMPP: https://www.apachefriends.org/download.html
- Visual Studio Code: https://code.visualstudio.com/
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 5 dari 127
 - Postman: https://www.postman.com/

Kustomisasi Installasi PHP

Konfigurasi utama dari PHP terdapat pada file php.ini yang biasanya dapat ditemukan pada direktori
XAMPP seperti: C:\xampp\php\php.ini. Beberapa configurasi utama yang tersedia, antara lain:
max_execution_time, max_input_time, memory_limit, file_uploads, uploads_max_filesize, dll.

Sintaks PHP
- Kode PHP selalu dibungkus menggunakan tag <?php dan ?>
- Setiap baris kode diakhiri dengan titik-koma (;)
- Untuk menulis komentar, menggunakan double-slash (//) atau /* dan */

Hello World
Buatlah sebuah file dengan nama “index.php”, simpan pada folder “htdocs”, dan ketikkan kode berikut:

Setelah menjalankan servis Apache, arahkan browser URL ke http://localhost/path/index.php dan lihat
hasilnya.

Selain menggunakan Apahcer Service melalui XAMPP, local webserver juga bisa diaktifkan menggunakan
PHP CLI. Ketikkan command berikut melalui terminal, pada path dimana file index.php berada.

Kemudian arahkan URL pada web browser ke http://localhost:8000 dan lihat hasilnya.

HTML + PHP
PHP juga dapat disisipkan kedalam kode HTML, ubah kode pada file index.php menjadi seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 6 dari 127

Baris 1-3 dan baris ke-20 merupakan kode PHP. Kode diatas jika dibuka pada web browser akan tampil
seperti berikut. Baris ke-2 dari kode diatas merupakan deklarasi variable $nama, dan pada baris ke-20 isi
dari variable tersebut dicetak.

Include & Require

Pada PHP terdapat function include dan require yang dapat digunakan untuk menghubungkan dua buah file
PHP. Perbedaan antara function include dan require adalah saat file yang akan digunakan tidak tersedia,
maka jika menggunakan fungction include maka program akan berjalan terus, sedangkan jika menggunakan
function require maka program akan terhenti jika file yang akan digunakan tidak tersedia.

Buat file navbar.php dan data.php, simpan pada direktori yang sama dengan index.php. Potong kode dari
index.php, sehingga menjadi seperti berikut.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 7 dari 127

 index.php

navbar.php

data.php

Ketika dibuka di browser, maka akan menampilkan halaman web yang sama seperti sebelumnya.
Selanjutnya coba ganti nama file pada baris ke-2 dan ke-13, sehingga nama file tidak sesuai (missal
navbar1.php dan data1.php), kemudian jalankan Kembali di browser, kode php akan tetap di proses dan
halaman web ditampilkan meskipun tidak lengkap.

TUGAS
1. Ganti function include menjadi require, jelaskan apa yang terjadi.
2. Pelajari dan jelaskan perbedaan antara function include() dan include_once() serta require()
dan require_once().

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 8 dari 127

 MINGGU 2
DASAR-DASAR PEMROGRAMAN PHP

DESKRIPSI TEMA
Mahasiswa mempraktikan dasar-dasar pemrograman dengan PHP, yaitu variable, array, function dan
struktur kontrol.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menjelaskan dasar-dasar pemrograman web dan menggunakan struktur control
dengan Bahasa pemrograman PHP

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor (VS Code, PHP Storm, etc)
3. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
1. [TUGAS 1] Buatlah sebuah array dua dimensi bernama negara. Dimensi pertama terdiri dari nama
negara, dan dimensi kedua adalah associative arrays (menggunakan string sebagai indeksnya) yang
berisi atribut :
a. ibuKota,
b. kodeTel dan
c. mataUang

Dengan data sebagai berikut:

Nama Negara Ibu Kota Kode Telepon Mata Uang
India New Delhi 91 INR
Indonesia Jakarta 62 IDR
Japan Tokyo 81 JPY

Panduan cara membuat array dua dimensi:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 9 dari 127

Kemudian tampilkan isi array seperti berikut (gunakan foreach/for):

Simpan dalam file jawaban1.php.

2. [TUGAS 2] Buatlah website dengan tampilan sebagai berikut:

Ketentuan: masing-masing data dibuat dengan array 2 dimensi, dengan struktur array/penamaan bebas.
Dengan menggunakan foreach/for, tampilkan seluruh data (data bebas) dalam Bootstrap’s Data Table
(https://datatables.net/manual/styling/bootstrap5).
Simpan dalam file jawaban2.php.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 10 dari

127
3. [TUGAS 3] Buatlah halaman web yang menampilkan daftar waktu dalam format 24 jam dan 12 jam
seperti berikut:

Ketentuan: Buat menggunakan perulangan sebanyak 24 kali untuk menampilkan jam dalam format 24 jam,
dan buat function untuk menampilkan format waktu 12 jam dan salam.
Berikut adalah contoh potongan kode untuk menampilkan baris data:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 11 dari

127
Simpan dalam file jawaban3.php.

MINGGU 3
PHP FORMS, SESSION, COOKIE

DESKRIPSI TEMA
Mahasiswa mempraktikkan bagaimana melakukan pemrosesan data dari formulir menggunakan
PHP, menggunakan Session, dan melakukan penyimpanan data pada Cookie.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menggunakan pre-defined variables dan functions pada PHP dan menggunakan
fungsionalitas PHP untuk memproses data dari web form

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor (VS Code, PHP Storm, etc)
3. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
Proses PHP Form
1. Buatlah sebuah file “form_get.php”, simpan dalam folder “Week-03 NIM Nama”, kemudian buatlah
sebuah form seperti gambar berikut menggunakan HTML:

2. Buatlah sebuah file “proses_get.php”,kemudian tulsikan kode berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 12 dari

127
3. Coba lakukan submit data pada form tersebut, maka akan muncul tampilan seperti gambar berikut:

4. Kerjakan Tugas 1

Cookie Sederhana
1. Buatlah sebuah file “cookie.php”, kemudian tuliskan kode berikut:

2. Coba buka melalui browser, maka akan muncul tampilan seperti berikut:

3. Coba refresh web browser, maka akan muncul tampilan seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 13 dari

127
Menyimpan data JSON pada Cookie
1. Buat sebuah file “cookie_set.php”, kemudian tuliskan kode berikut:

2. Buat file “cookie_read.php”, kemudian tuliskan kode berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 14 dari

127
3. Jalankan “cookie_set.php” pada web browser, maka akan muncul tampilan berikut:

4. Jalankan “cookie_read.php” pada web browser, maka akan muncul tampilan berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 15 dari

127
5. Jalankan Kembali file “cookie_set.php” di browser.

6. Jalankan Kembali file “cookie_read.php” melalui web browser, maka akan muncul tampilan seperti
berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 16 dari

127
TUGAS
1. Buat file “form_post.php” kemudian buatlah form menggunakan HTML dengan tampilan seperti
berikut:

Kemudian buat file “proses_post.php” yang akan menerima data dari form_post dan menampilkannya
seperti gambar berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 17 dari

127
2. Buatlah sebua file “index.php” untuk menampilkan formulir seperti gambar berikut, untuk melakukan
perhitungan BMI:

Ketika tombol Calculate BMI di-click, maka data akan dikirimkan ke “proses_bmi.php” yang akan
melakukan validasi, apakah semua field sudah diisi, jika belum, maka akan muncul pesan seperti
berikut:

Jika pengisian formulir lengkap dan tombol Calculate BMI di-click, maka data akan diproses pada
proses_bmi.php dengan rumus perhitungan BMI:

BMI = berat badan / (tinggi badan * tinggi badan)

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 18 dari

127
 Hasil perhitungan BMI akan ditampilkan seperti gambar berikut:

Setiap kali melakukan perhitungan BMI, data akan disimpan menggunakan Cookie, dan dapat dilihat
pada menu History.

Catatan: Perhatikan halaman BMI Result dan BMI History, terdapat warna yang ditentukan
berdasarkan hasil perhitungan BMI.
Hijau – Normal, Kuning – Underweight / Overweight, Merah – Obese.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 19 dari

127
 MINGGU 4
PHP OBJECT ORIENTED PROGRAMMING (OOP)

DESKRIPSI TEMA
Mahasiswa mempraktikkan bagaimana menerapkan konsep pemrograman berorientasi obyek
menggunakan PHP

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menerapkan konsep pemrograman berbasis obyek pada PHP

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor (VS Code, PHP Storm, etc.)
3. Web Browser

LANGKAH-LANGKAH PRAKTIKUM

Buat sebuah folder Week04_NIM_Nama, simpan semua file yang akan dibuat pada praktikum ini pada
folder tersebut.

Tugas 01: Class & Object

Buat sebuah file Tugas1.php, kemudian tuliskan kode berikut:

Modifikasi Class Mobil, tambahkan constructor untuk menge-set property nama dan merk pada saat
pembuatan object, dan tambahkan destructor yang akan menampilkan informasi produk.
Berikut adalah hasil dari perubahan kode yang diharapkan.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 20 dari

127
Tugas 02: Access Modifier
Buat file Tugas2.php, kemudian tuliskan kode berikut

Ubah access modifier dari property nim dan nama menjadi private. Jika program dijalankan maka akan
mengalami error. Modifikasi program sehingga dapat berjalan seperti semula dengan tetap menggunakan
access modifier private untuk nim dan nama (Tidak boleh menggunakan constructor)

Tugas 03: Inheritance

But file Tugas3.php kemudian tuliskan kode berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 21 dari

127
Buat class Bayi yang merupakan turunan dari class Manusia, sehingga program menghasilkan output:
Data 1
Nama: John Thor
Data 2
Nama: Jowhn Wick
Bera: 3kg

Tugas 04: Abstract Class & Constant

Buat file Tugas4.php, kemudian tuliskan kode berikut:

Lengkapi kode tersebut sehingga menghasilkan output seperti berikut:

Universitas Multimedia Nusantara
Mahasiswa S1Skripsi
Mahasiswa S2Tesis

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 22 dari

127
Tugas 05: Interface
Buat file Tugas5.php, tuliskan kode berikut dan lengkapi kode pada Class KacangPolong sehingga program
tidak error.

Tugas 06: Namespace & Autoloading

1. Buatlah sebuah folder App beserta dengan file-file dengan struktur seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 23 dari

127
2. Buatlah class Mahasiswa pada file Magister/Mahasiswa.php dan Sarjana/Mahasiswa.php.
3. Class Sarjana/Mahasiswa memiliki property NIM, Nama, dan Prodi, sedangkan class
Magister/Mahasiswa memiliki property NIM, Nama, Prodi dan GelarSarjana.
4. Lengkapi kedua class Mahasiswa dengan constructor dan method getter.

5. Pada file index.php, buat tampilan seperti berikut:

6. Berikut adalah tampilan Form Sarjana dan Form Magister

7. Ketika form sarjana disubmit, maka akan tampil seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 24 dari

127
8. Ketika form magister disubmit, maka akan tampil seperti berikut:

9. Berikut adalah potongan kode pada file proses.php yang menampilkan hasil seperti pada gambar poin 7
dan 8.

10. Gunakan init.php untuk melakukan autoloading class Mahasiswa dari folder Sarjana dan Magister.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 25 dari

127
 MINGGU 5
UPLOAD DAN MANIPULASI FILE

DESKRIPSI TEMA
Mahasiswa mempraktikkan bagaimana melakukan upload file dan membuat file (PDF dan Excel)
menggunakan PHP

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu merancang dan membangun aplikasi web untuk melakukan upload dan
manipulasi file menggunakan PHP

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor (VS Code, PHPStorm, Atom, etc.)
3. Composer
4. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
File Upload Sederhana
1. Buatlah sebuah folder “01_file_upload”, kemudian buat file index.php dan proses.php

2. Tambahkan kode berikut pada file index.php

3. Tambahkan kode berikut pada file proses.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 26 dari

127
 4. Coba upload file dan lihat hasilnya

5. Ubah kode pada file proses.php untuk menyimpan file yang diupload secara permanen pada folder
uploads

6. Lakukan upload file Kembali, apakah file berhasil tersimpan di folder uploads?

7. Tambahkan kode berikut untuk melakukan validasi upload file hanya untuk file gambar saja.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 27 dari

127
 8. Coba Kembali, apakah berhasil proses upload hanya untuk file gambar saja?
Generate PDF menggunakan FPDF
1. Download library FPDF dari http://www.fpdf.org/
2. Buat folder 02_fpdf, kemudian extrack library FPDF yang telah di download ke folder tersebut dan
buat sebuah file index.php

3. Tambahkan kode berikut pada file index.php

4. Lihat hasilnya, apakah berhasil membuat file PDF?

5. Kerjakan Tugas 1

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 28 dari

127
Composer Hello World
1. Buat folder 03_composer, kemudian ketikkan command berikut

2. Ikuti panduan dari command seperti berikut:

3. Akan muncul file dengan struktur seperti berikut:

4. Buat file Greetings.php di dalam folder src/, dan tuliskan kode berikut

5. Ubah kode pada composer.json menjadi seperti berikut

6. Buat file index.php pada di dalam folder 03_composer (pada level yang sama dengan file
composer.json)

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 29 dari

127
 7. Tuliskan kode berikut pada file index.php

8. Jalankan di browser, apakah muncul error seperti berikut?

9. Jika ya, jalankan command: composer dump-autoload, kemudian coba jalankan Kembali di
browser, apakah berhasil?

Generate File Excel dengan PhpSpreadsheet

1. Buat sebuah folder 04_spreadsheet, kemudian jalankan command “composer init”
2. Baca dokumentasi library PhpSpreadsheet:
https://packagist.org/packages/phpoffice/phpspreadsheet
3. Jalankan command berikut untuk meng-install PhpSpreadsheet

4. Buat sebuah file index.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 30 dari

127
 5. Tuliskan kode berikut pada file index.php

6. Coba jalankan di browser, apakah berhasil membuat file Excel?

7. Tambahkan kode berikut pada file index.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 31 dari

127
 8. Coba jalankan di browser, data file excel akan ditampilkan dalam bentuk array.

TUGAS
1. Modifikasi file index.php untuk menghasilkan file PDF dengan tampilan seperti berikut

2. Modifikasi aplikasi perhitungan BMI yang Anda kerjakan pada pertemuan ke-3 sehingga data hasil
perhitungan BMI disimpan ke dalam file Excel dan data history diambil dari file Excel yang sama.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 32 dari

127
 MINGGU 6
PHP & MYSQL

DESKRIPSI TEMA
Mahasiswa mempraktikkan proses manipulasi data pada database menggunakan PHP dan MySQL.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu merancang dan membangun aplikasi web yang terkoneksi dengan basis data
MySQL dan melakukan proses CRUD pada basis data tersebut

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor
3. Web Browser
4. Composer

LANGKAH-LANGKAH PRAKTIKUM
MySQLi Extension
1. Buka phpMyAdmin dan buat sebuah database baru (nama database bebas, contoh ini menggunakan
nama database umn_genap2122_pemweb_w6), buat sebuah table mahasiswa dengan struktur seperti
berikut

2. Insert data dummy melalui phpMyAdmin

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 33 dari

127
3. Buat sebuah file latihan_mysqli.php, kemudian ketikkan kode berikut

4. Jalankan di browser, maka akan tampil seperti berikut

5. Modifikasi kode php menjadi seperti berikut untuk menampilkan 2 data dari database. Perhatikan
bahwa setiap kali function mysqli_fetch_assoc() dijalankan, maka akan menarik baris data berikutnya
dari database.

6. Berikut adalah tampilan di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 34 dari

127
7. Modifikasi kode PHP menjadi seperti berikut untuk melakukan perulangan sebanyak jumlah data pada
hasil query SQL.

8. Tampilan di browser

9. Untuk melakukan INSERT, UPDATE, dan DELETE Anda dapat mengubah kode SQL yang akan
dijalankan. Berikut contoh kode untuk melakukan INSERT data mahasiswa.

PHP Data Object (PDO)

1. Buat sebuah file Latihan_pdo.php, kemudian tuliskan kode php berikut ini.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 35 dari

127
2. Lihat hasilnya di browser

3. Untuk melakukan INSERT, UPDATE, dan DELETE dapat dilakukan dengan mengubah kode SQL.
Berikut adalah contoh kode untuk melakukan UPDATE.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 36 dari

127
INSERT Data menggunakan Form
1. Buat sebuah file dengan nama insert_form.php dan tuliskan kode berikut

2. Buat sebuah file dengan nama insert_proses.php dan tuliskan kode berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 37 dari

127
3. Coba submit data dari form, apakah data berhasil tersimpan di database?

PDO Prepared Statement

1. PDO Prepared Statement digunakan untuk menghindari SQL Injection. Modifikasi kode pada file
insert_proses.php menjadi seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 38 dari

127
Menampilkan Hasil Select dan Membuat Link dengan Data
1. Buat sebuah file dengan nama select.php, tuliskan kode berikut:

2. Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 39 dari

127
3. Buat sebuah file individu.php, tuliskan kode berikut

4. Ketika link “Detail” di-klik maka akan menampilkan data dari masing-masing mahasiswa.

TUGAS

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 40 dari

127
1. Buat aplikasi yang dapat menyimpan data Mahasiswa, yaitu NIM, Nama, Prodi, dan Foto ke dalam
database. Foto disimpan dalam folder khusus dan yang tersimpan pada database adalah path atau
nama file dari foto mahasiswa.
2. Terdapat halaman index yang menampilkan semua data mahasiswa yang ada pada database beserta
thumbnail foto masing-masing mahasiswa. Terdapat tombol untuk melakukan edit dan delete data
mahasiswa.
3. Ketika tombol edit di-klik, maka akan menampilkan form edit yang telah berisi data lama.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 41 dari

127
 MINGGU 7
PHP SECURITY & AUTHENTICATION

DESKRIPSI TEMA
Mahasiswa mempraktikkan bagaimana membangun aplikasi yang aman dengan PHP

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu merancang dan membangun aplikasi web yang aman dengan fitur autentikasi
pengguna

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor
3. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
Password Hash, Password Verify & Random Token
1. Buatlah sebuah file password_hash.php, kemudian tuliskan kode berikut:

2. Ketika dijalankan di browser, akan menampilkan 60 karakter string hasil enkripsi. Jika browser
di-refresh, maka akan dihasilkan 60 karakter string hasil enkripsi yang berbeda.

3. Buatlah sebuah file password_verify.php, kemudian tuliskan kode berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 42 dari

127
4. Ketika di jalankan, password verify akan mencocokkan string password yang diberikan sebagai
argument pertama dengan string hasil enkripsi dari string “rahasia”.

5. Buat file token.php, kemudian tuliskan kode berikut

6. Ketika di jalankan, function random_bytes akan menghasilkan random bytes sebanyak 20 karakter
dan function bin2hex akan mengkonversi bytes menjadi hexadecimal.

Authentication System
1. Buatlah sebuah database dengan table users2 dengan struktur seperti berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 43 dari

127
2. Buatlah sebuah file db.php dan tuliskan kode berikut

3. Buat file register.php dan tuliskan kode berikut

4. Buat file register_process.php, kemudian tuliskan kode berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 44 dari

127
5. Coba jalankan di browser dan register beberapa user dengan role yang berbeda. Apakah berhasil
tersimpan ke database dengan password yang ter-enkripsi?

6. Buat file login.php, kemudian tuliskan kode berikut

7. Buat file login_process.php, kemudian tuliskan kode berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 45 dari

127
8. Buatlah file internal.php, kemudian tuliskan kode berikut

9. Coba lakukan login, apakah berhasil masuk ke halaman internal.php? Kemudian logout, dan coba
buka halaman internal.php tanpa login. Jika dilakukan dengan benar, maka halaman internal.php
hanya bisa diakses jika user telah login.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 46 dari

127
10.Tambahkan kode berikut pada login.php untuk me-redirect user jika telah melakukan login langsung
ke halaman internal.php

TUGAS
Modifikasi tugas pada pertemuan sebelumnya (minggu ke-6), dimana manajemen (CRUD) data
mahasiswa hanya bisa dilakukan oleh user yang telah login.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 47 dari

127
 MINGGU 8
DASAR-DASAR FRAMEWORK LARAVEL

DESKRIPSI TEMA
Mahasiswa mempraktikkan dasar-dasar pengembangan web dengan konsep MVC menggunakan
framework Laravel.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menjelaskan dasar-dasar pengembangan web menggunakan Laravel
Framework.

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor
3. Composer
4. Web browser

LANGKAH-LANGKAH PRAKTIKUM
Installasi Laravel
1. Arahkan directory command prompt/terminal pada folder yang diinginkan sebagai tempat instalasi
project, kemudian jalankan command berikut:

2. Masuk ke folder project, kemudian jalankan command php artisan serve untuk menjalankan
local web server.

3. Jalankan app di browser melalui URL http://localhost:8000 (default).

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 48 dari

127
4. Buka project pada code Editor (VS Code/PHPStorm/Sublime Text)

Routing (File: “routes/web.php”)

1. [Basic Routing] Buka file “routes/web.php”, kemudian tambahkan kode berikut:

2. Arahakan URL web browser pada http://localhost:8000/hello, lihat hasilnya

3. Tambahkan kode berikut untuk membuat Redirect Route

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 49 dari

127
4. Modifikasi kode sebelumnya untuk membuat Named Route dan menggunakannya pada Redirect

5. Tambahkan kode berikut untuk membuat Route dengan Parameter

6. Tambahkan kode berikut untuk membuat Route dengan Parameter lebih dari satu

7. Tambahkan kode berikut untuk membuat Route dengan Parameter Opsional

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 50 dari

127
LATIHAN
Buatlah sebuah Route yang memerlukan 4 (empat) buah parameter, yaitu Fakultas, Prodi, NIM dan Nama.
Ketika URL Route tersebut dibuka di browser, akan menampilkan data-data parameternya seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 51 dari

127
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 52 dari
127
 MINGGU 9
CONTROLLER & VIEW

DESKRIPSI TEMA
Mahasiswa mempraktikkan penggunaan Controller dan View pada Framework Laravel

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menerapkan Controller dan View menggunakan Framework Laravel.

PERALATAN YANG DIGUNAKAN

1. Code Editor
2. XAMPP
3. Composer

LANGKAH-LANGKAH PRAKTIKUM

Memulai Proyek Laravel Baru

Buatlah sebuah proyek Laravel baru dengan nama “app-w9”.
#composer create-project Laravel/Laravel app-w9

Membuat Controller
1. Controller berada pada direktori app/Htpp/Controllers

2. Terdapat dua cara untuk membuat Controller, yaitu secara manual dengan membuat file php pada
folder Controller dan menulis kode secara manual, atau bisa dilakukan secara otomatis menggunakan
php artisan. Untuk membuat Controller menggunakan php artisan, gunakan terminal dan ketikkan
command berikut: php artisan make:controller PostController

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 53 dari

127
3. File PostController akan otomatis dibuatkan.

4. Kita akan mencoba membuat file PostController dengan beberapa fungsi dasar. Sebelumnya, hapus
terlebih dahulu file PostController yang baru saja dibuat.

5. Ketikkan command berikut pada terminal: php artisan make:controller PostController

--resource

6. Beberapa fungsi dasar otomatis sudah dibuatkan pada file PostController.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 54 dari

127
Routing Controller
1. Buka file routes/web.php, kemudian ketikkan kode berikut:

Kode tersebut akan membuat route /post untuk memanggil function index() yang ada di
PostController.

2. Kemudian buka file PostController.php dan tambahkan kode berikut:

3. Jalankan command php artisan serve

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 55 dari

127
4. Buka browser dan ketikkan URL: http://localhost:8000/post

Passing Data
1. Buka file routes/web.php, kemudian tambahkan {id} pada parameter ‘/post/{id}’.

2. Kemudian pada PostController.php, ubah kode pada function index() menjadi seperti berikut:

3. Buka browser dan ketikkan URL: http://localhost:8000/post/34

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 56 dari

127
4. Ubah kode pada routes/web.php menjadi seperti berikut. Routes berikut ini merupakan routes standar
yang biasa digunakan untuk melakukan operasi CRUD.

5. Ubah kode pada PostController.php menjadi seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 57 dari

127
6. Cobalah di browser semua route get yang sudah di definisikan.

7. Jalankan command berikut untuk melihat semua list yang sudah didefinisikan:

Membuat Views dan Custom Method

1. Sebagai percobaan awal, tambahkan sebuah route baru sebagai berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 58 dari

127
2. Buatlah sebuah file posts/test.blade.php pada folder resources/views

3. Tambahkan kode berikut pada PostController.php

4. Coba hasilnya pada browser. (http://localhost/posts/test) Perhatikan bahwa hasilnya tidak sesuai
dengan yang kita harapkan (menampilkan view yang sebelumnya dibuat).

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 59 dari

127
5. Untuk memperbaikinya, pindahkan posisi route ‘/posts/test’ pada baris sebelum ‘/posts/{id}’.

6. Untuk mengirimkan data dari Controller ke View, digunakan array assosiatif. Modifikasi kode
PostController.php dan test.blade.php menjadi seperti berikut:

7. Coba hasilnya di browser

8. Untuk mengirimkan lebih dari satu data:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 60 dari

127
9. Lihat hasilnya di browser

10.Cara penulisan lain untuk mengirimkan data:

11.Lihat hasilnya di browser:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 61 dari

127
Blade Templating Engine: Master Layout Setup
1. Buat folder file layout/app.blade.php dalam folder views, dan tuliskan kode berikut:

2. Ubah kode pada posts/test.blade.php menjadi seperti berikut

3. Coba hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 62 dari

127
4. Tambahkan kode berikut pada test.blade.php

5. Lihat hasilnya di browser

Blade Features
1. Tambahkan kode berikut pada PostController.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 63 dari

127
2. Modifikasi test.blade.php menjadi seperti berikut

3. Lihat hasilnya di browser

TUGAS
1. Buat sebuah controller dengan nama StudentController.

2. Buat sebuah route ‘/students’ dengan method GET yang menggunakan function index() pada
StudentController.
3. Buat file views/students/index.blade.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 64 dari

127
4. Tuliskan kode pada function index() pada StudentController.php untuk menampilkan view
students/index.blade.php. Kemudian buat variable data yang berisi data beberapa mahasiswa (lebih
dari 1) yang berisi nim, nama dan prodi untuk dikirimkan ke view.
5. Tuliskan kode pada students/index.blade.php untuk menampilkan data mahasiswa tersebut, seperti
berikut:

MINGGU 10
MODEL & MIGRATION

DESKRIPSI TEMA
Mahasiswa mempraktikkan proses CRUD menggunakan framework Laravel dengan memanfaatkan
Model dan Migration.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menerapkan Model dan Migration menggunakan Framework Laravel

PERALATAN YANG DIGUNAKAN

1. XAMPP
2. Code Editor
3. Browser
4. Composer
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 65 dari
127
LANGKAH-LANGKAH PRAKTIKUM

Database – Laravel Migration

Kita akan membuat table database melalui migration, dimana table dan kolom database dideklarasikan
pada kode program yang kemudian dengan menggunakan command migration untuk membuat table
tersebut pada database MySQL.

Migrations
1. Sebelum menggunakan database, kita lakukan setting terlebih dulu informasi database yang akan
digunakan pada file .env. Ubah kode .env seperti contoh pada gambar berikut:

2. Buka phpMyAdmin dan buat database baru dengan nama sesuai dengan yang dituliskan pada file
.env.

3. Perhatikan folder database/migrations, terdapat empat file migrations yang sudah ada secara default.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 66 dari

127
 Sebagai contoh, cuba buka file …_create_users_table.php. Terdapat dua fungsi, yaitu up() dan down().
Fungsi up() untuk membuat table dan fungsi down() untuk menghapus table.

4. Buka terminal, kemudian jalankan command php artisan migrate

5. Buka phpMyAdmin, perhatikan database yang sebelumnya dibuat. Setelah migration, kini terdapat 5
tabel.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 67 dari

127
6. Coba perhatikan struktur table users dan bandingkan dengan kode yang terdapat pada fungsi up()
yang tadi kita lihat.

Method timestamp() akan membuat dua kolom pada table database, yaitu created_at dan
updated_at.

Create Migration dan Drop Migration

1. Melalui terminal, ketikkan command berikut untuk membuat migration file.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 68 dari

127
2. Migration file otomatis dibuatkan.

3. Tambahkan kode berikut untuk memodifikasi struktur table dasar yang sudah dibuat secara default.

Kode tersebut akan membuat table posts dengan struktur:

id INT AUTO_INCREMENT
title VARCHAR
body VARCHAR
created_at TIMESTAMP
updated_at TIMESTAMP

4. Lakukan migrate dengan menjalankan command berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 69 dari

127
5. Buka phpMyAdmin dan cek apakah table posts sudah berhasil dibuat:

6. Misalnya jika kita ingin membatalkan migration yang baru saja dilakukan, ketikkan command berikut:

7. Migration terakhir yang kita lakukan adalah membuat table posts, ketika di-rollback, maka akan
menghapus table posts. Buka phpMyAdmin dan cek apakah table posts sudah dihapus.

8. Misalnya kita ingin mengubah salah satu nama kolom pada tabel posts, dari “body” menjadi
“content”. Ubah file migration posts menjadi seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 70 dari

127
9. Lakukan migrate dengan command php artisan

10.Buka phpMyAdmin untuk melihat hasilnya.

Menambahkan Kolom pada Tabel yang Sudah Ada

1. Seringkali kita ingin mengubah struktur tabel database yang sudah ada tanpa harus menghapus tabel
tersebut, misalnya ketika sudah ada data pada tabel tersebut. Sebagai contoh, kita akan membuat
migration file untuk menambahkan kolom is_admin pada tabel posts. Ketikkan command berikut
pada terminal:

2. Migration file otomatis dibuat. Ubah kode pada migration file tersebut menjadi seperti berikut:

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 71 dari

127
3. Lakukan migrate melalui command php artisan

4. Lihat hasilnya melalui phpMyAdmin

Beberapa Command Migrations Lainnya

1. php artisan migrate:reset
untuk menghapus semua tabel pada database (drop all migrations)

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 72 dari

127
2. Buka phpMyAdmin untuk melihat hasilnya

3. php artisan migrate:status

Untuk melihat status dari setiap file migration apakah sudah dijalankan atau belum

Semua status Ran?=No, artinya belum ada file migration yang dijalankan, karena baru saja kita reset.

4. Lakukan migrate lagi dan cek status

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 73 dari

127
5. Lihat hasilnya di phpMyAdmin

6. php artisan migrate:refresh

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 74 dari

127
 Untuk melakukan reset dan migrate dalam satu command. Digunakan ketika, misalnya kita
melakukan beberapa perubahan pada file migration, daripada melakukan reset dan migrate secara
terpisah, dapat dilakukan dengan 1 command saja.

Raw SQL Queries

Kita akan melakukan manipulasi database menggunakan Raw SQL Statement.

Inserting Data
1. Ketikkan kode berikut pada file routes/web.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 75 dari

127
2. Jalankan command serve kemudian buka browser dan ketikkan URL: http://localhost:8000/insert

Jika tidak ada error, akan tampil halaman kosong.

3. Buka phpMyAdmin, dan cek apakah tabel post sudah berisi data.

Reading Data
1. Ketikkan kode berikut pada file routes/web.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 76 dari

127
2. Buka browser dan jalankan URL: http://localhost:8000/read

3. Variable $results merupakan variable array yang menampung hasil SELECT. Coba ubah kode pada
routes/web.php menjadi seperti berikut:

4. Lihat hasilnya pada browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 77 dari

127
Updating Data
1. Ketikkan kode berikut pada routes/web.php

2. Jalankan pada browser

3. Lihat hasilnya pada phpMyAdmin

Deleting Data
1. Ketikkan kode berikut pada routes/web.php

2. Jalankan pada browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 78 dari

127
3. Lihat pada phpMyAdmin, data sudah di hapus.

Latihan:
Coba insert beberapa data dengan cara ini, kemudian tampilkan data yang sudah di-insert tersebut.
Update dan delete beberapa data di antaranya.

Database Eloquent/ORM
Kita akan melakukan manipulasi database menggunakan method yang sudah disediakan oleh Laravel.

Reading Data
1. Kita mulai dengan membuat Model dengan command php artisan

2. File model akan otomatis dibuatkan. Secara default, Model Post akan mengakses tabel posts pada
database (bentuk jamak dari Post – lowercase) dan menganggap tabel database memiliki primary key
dengan nama id.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 79 dari

127
3. Pada file routes/web.php, tambahkan kode berikut untuk menandakan bahwa kita akan
menggunakan model Post.

4. Tambahkan kode berikut pada routes/web.php (komentari bagian Raw SQL Queries) sehingga Anda
dapat membandingkan cara kerja Raw SQL dengan Eloquent.

5. Pastikan terdapat data pada tabel posts. Jika belum, Anda dapat melakukan insert secara manual
menggunakan phpMyAdmin.

6. Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 80 dari

127
7. Tambahkan kode berikut pada routes/web.php. Fungsi find() berguna digunakan ketika kita mau
menampilkan hasil pencarian data berdasarkan id.

8. Lihat hasilnya di browser

Reading/Finding with Constraints

1. Tambahkan kode berikut pada routes/web.php untuk membaca data dari database dengan batasan
tertentu (WHERE).

2. Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 81 dari

127
Inserting/Saving Data (INSERT CARA 1)
1. Untuk melakukan insert data, ketikkan kode berikut pada routes/web.php

2. Jalankan di browser

3. Lihat hasilnya melalui phpMyAdmin

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 82 dari

127
Creating Data and Configuring Mass Assignment (INSERT DARA 2)
1. Selain dengan metode yang sudah kita coba sebelumnya, terdapat fungsi/metode create() yang
digunakan untuk mengisi data pada tabel database. Ketikkan kode berikut pada routes/web.php

2. Coba jalankan di browser

Muncul pesan kesalahan (MassAssignmentException) karena dengan metode create, Laravel

melakukan insert data pada beberapa kolom sekaligus, secara default Laravel tidak mengizinkan hal
tersebut, kecuali kita melakukan konfigurasi pada Model.
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 83 dari
127
3. Buka model Post.php, tuliskan kode berikut sehingga memungkinkan untuk mengisi data pada kolom,
title, content dan is_admin.

4. Jalankan kembali di browser, error yang tadi muncul sudah hilang.

5. Lihat hasilnya di phpMyAdmin

Update Data (UPDATE CARA 1)

1. Tuliskan kode berikut pada routes/web.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 84 dari

127
2. Sebelum kita jalankan, coba lihat data saat ini melalui phpMyAdmin, data yang ingin di-update adalah
yang memiliki id=5

3. Jalankan di browser

4. Lihat hasilnya di phpMyAdmin

Updating with Eloquent (UPDATE DARA 2)

1. Ketikkan kode berikut pada routes/web.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 85 dari

127
2. Jalankan di browser

3. Lihat hasilnya di phpMyAdmin

Deleting Data (DELETE CARA 1)

1. Ketikkan kode berikut pada routes/web.php

2. Jalankan di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 86 dari

127
3. Lihat hasilnya di phpMyAdmin.

Deleting Data (DELETE CARA 2)

1. Ketikkan kode berikut pada routes/web.php

2. Jalankan di browser

3. Lihat hasilnya di phpMyAdmin

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 87 dari

127
4. Dengan method yang sama, kita juga dapat menghapus beberapa record sekaligus. Ubah kode tadi
menjadi seperti berikut.

5. Jalankan di browser

6. Lihat hasilnya di phpMyAdmin

7. Kita juga dapat menggunakan query untuk memilih record yang akan dihapus dengan kode berikut:

8. Silahkan dicoba sendiri.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 88 dari

127
Soft Deleting / Trashing
1. Ketikkan kode berikut pada Model Post.php

2. Buat migration untuk menambahkan kolom “deleted_at” pada tabel posts dengan mengetikkan
command berikut pada terminal.

3. File migration akan otomatis dibuatkan, tambahkan kode berikut pada file tersebut.

4. Lakukan migrate melalui terminal dengan command berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 89 dari

127
5. Lihat di phpMyAdmin, kolom “deleted_at” sudah ada.

6. Jika sebelumnya tabel posts tidak memiliki data (karena sudah dihapus semua pada sesi sebelumnya),
tambahkan dengan memanggil route “/create”.

7. Lihat di phpMyAdmin hasilnya, perhatikan bahwa kolom deleted_at memiliki nilai NULL.

8. Tambahkan kode berikut pada routes/web.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 90 dari

127
9. Jalankan belalui browser

10.Lihat hasilnya di phpMyAdmin

Retrieving Deleted / Trashed Record

1. Kita akan mencoba menampilkan data yang sudah kita softdelete. Namun sebelumnya, coba
tambahkan dulu data baru sehingga kita memiliki 2 data, yaitu data yang sudah di-softdelete dan
yang tidak, dengan memanggil route /basicinsert.

2. Lihat hasilnya di phpMyAdmin

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 91 dari

127
3. Ketikkan kode berikut pada routes/web.php

4. Lihat hasilnya di browser

5. Ubah route menjadi seperti berikut

6. Lihat hasilnya di browser

7. Ubah kode routes menjadi seperti berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 92 dari

127
8. Lihat hasilnya di browser (menampilkan semua konten, baik yang sudah dihapus maupun belum)

9. Ubah kode routes menjadi seperti berikut

10.Lihat hasilnya di browser (hanya menampilkan record yang sudah dihapus)

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 93 dari

127
Restoring deleted / trashed records
1. Perhatikan isi tabel posts melalui phpMyAdmin, kita akan me-restore record yang sudah dihapus

2. Ketikkan kode berikut pada routes/web.php

3. Jalankan route tersebut pada browser

4. Lihat hasilnya pada phpMyAdmin

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 94 dari

127
Deleting Record Permanently
1. Pada sesi sebelumnya kita sudah melakukan restore record yang sudah di-hapus. Pada sesi ini kita
akan menghapus secara permanen. Laravel memiliki method forceDelete() untuk menghapus record
secara permanen. Untuk itu kita review dulu kondisi database kita saat ini melalui phpMyAdmin

2. Kita hapus (softdelete) salah satu record. Panggil route /softdelete

3. Lihat hasilnya melalui phpMyAdmin

4. Ketikkan kode berikut pada routes/web.php

5. Jalankan di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 95 dari

127
6. Lihat hasilnya di phpMyAdmin

TUGAS
1. Buat file Model “Student.php” dan file migration untuk membuat table “students” dengan command
“php artisan make:model Student -m”.
2. Struktur tabel students:
id INT PRIMARY AUTO_INCREMENT
nim VARCHAR(10) UNIQUE
nama VARCHAR(50)
prodi VARCHAR(20)
3. Ulangi semua tahap yang sebelumnya sudah dipelajari, untuk melakukan proses CRUD pada tabel
posts dengan routes “/students/THEPROCESS”.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 96 dari

127
 MINGGU 11
ELOQUENT RELATIONSHIP

DESKRIPSI TEMA
Mahasiswa mempraktikkan Eloquent Relationship menggunakan Framework Laravel

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menerapkan Eloquent Relationship menggunakan Framework Laravel

PERALATAN YANG DIGUNAKAN

1. Code Editor
2. XAMPP
3. Composer

LANGKAH-LANGKAH PRAKTIKUM
Praktikum minggu ini menggunakan code-base yang sama/melanjutkan dari minggu sebelumnya.

One-to-One Relationship
(Target: Menampilkan post berdasarkan user_id)
1. Kita akan menambahkan kolom user_id pada tabel posts untuk menghubungkan posts dengan users.
Edit file migration yang digunakan untuk membuat tabel posts (kita akan melakukan refresh – drop all
migration and migrate all, alternative lain bisa membuat file migration baru dan melakukan migrate)

2. Lakukan migrate:refresh

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 97 dari

127
3. Lihat hasilnyad di phpMyAdmin

4. Insert dummy data users

5. Insert dummy data posts

6. Ketikkan kode berikut pada model User.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 98 dari

127
7. Tambahkan use App\User pada routes/web.php

8. Tambahkan route berikut pada routes/web.php

9. Lihat hasilnya di browser

10.Jika kita ingin menampilkan salah satu kolom, misal judul, tambahkan kode berikut:

11.Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 99 dari

127
The Inverse Relation
(Target: Menampilkan user dari post tertentu)
1. Buat route pada routes/web.php

2. Tambahkan kode berikut pada Post.php

3. Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 100 dari

127
One-to-Many Relationship
1. Insert data baru kedalam tabel posts melalui phpMyAdmin sehingga kita memiliki lebih dari 1 record.
Set user_id = 1.

2. Buat sebuah method/function baru pada model User

3. Ketikkan kode berikut pada routes/web.php

4. Lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 101 dari

127
5. Kerjakan Tugas 1.

Many-to-Many Relationship
1. Buat model Role menggunakan PHP artisan command:

2. Buat tabel role_user menggunakan migration

3. Buka file migration untuk tabel roles, tambahkan kolom name.

4. Pada file migration untuk membuat tabel role_user, tambahkan dua kolom untuk menghubungkan
antara tabel users dan roles, yaitu user_id dan role_id.

5. Lakukan migrate

6. Lihat hasilnya di phpMyAdmin tabel roles dan role_user sudah berhasil dibuat.

7. Tambahkan data pada tabel users sehingga ada beberapa user.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 102 dari

127
8. Tambahkan data pada tabel roles, yaitu administrator dan subscriber

9. Tambahkan data pada tabel role_user, kita akan menjadikan user_id 1 sebagai administrator dan
user_id 2 menjadi subscriber, user_id 3 menjadi administrator sekaligus subscriber.

10.Pada model User tambahkan method berikut:

11.Tambahkan route baru untuk menampilkan role berdasarkan user id yang di-supply pada URL.

12.Coba hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 103 dari

127
13.Cara lain, ubah kode pada route tersebut menjadi seperti berikut:

14.Lihat hasilnya di browser

15. Kerjakan Tugas 2

TUGAS
1. Apa yang baru saja kita lakukan menampilkan kumpulan post title dari user_id 1. Coba modifikasi
sehingga pilihan user_id menjadi dinamis dengan route.
Misal: /user/3/posts 🡪 akan menampilkan semua post title dari user_id 3.
2. Buat sebuah route ‘/role/{id}/user’ yang akan menampilkan daftar user yang memiliki role berdasarkan
id tertentu. Contoh hasil di browser:
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 104 dari
127
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 105 dari
127
 MINGGU 12
FORMS & VALIDATION

DESKRIPSI TEMA
Mahasiswa mempraktikkan penggunaan form, melakukan upload file dan validasi form
menggunakan framework Laravel.

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu menerapkan form, upload file dan validasi menggunakan Framework Laravel.

PERALATAN YANG DIGUNAKAN

1. Composer
2. XAMPP
3. Code Editor
4. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
Persiapan
1. Buatlah sebuah project Laravel baru dengan nama app-w12.
2. Sesuaikan konfigurasi database pada file .env

3. Buat model Student beserta file migration menggunakan command berikut:

4. Tambahkan kolom pada tabel students seperti berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 106 dari

127
5. Lakukan migrate

6. Buat StudentController melalui terminal

7. Buat route pada file routes/web.php

8. Check route menggunakan command

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 107 dari

127
9. Buat sebuah folder “students” dengan 4 buah file kosong dengan nama seperti berikut pada folder
views.

Persiapan View
1. Tuliskan kode berikut pada file create.blade.php

2. Tuliskan kode berikut pada file edit.blade.php

3. Tuliskan kode berikut pada file show.blade.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 108 dari
127
4. Tuliskan kode berikut pada file index.blade.php

CREATE New Student

1. Tambahkan kode berikut pada StudentController

2. Jalankan command php artisan serve, dan lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 109 dari

127
3. Tambahkan kode berikut pada StudentController

4. Coba submit form Create new Student tadi.

5. Tambahkan kode berikut pada index.blade.php

6. Coba submit kembali form Create new Student

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 110 dari

127
7. Tambahkan kode berikut pada StudentController untuk menyimpan data student ke database

8. Coba submit form new Student

9. Lihat hasilnya di phpMyAdmin

10.Ubah kode pada StudentController agar setelah meyimpan ke database, otomatis redirect ke daftar
mahasiswa

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 111 dari

127
11.Coba submit kembali form Create new Student.

RETRIEVE Students
1. Tuliskan kode berikut pada StudentController untuk menampilkan view index

2. Coba buka di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 112 dari

127
3. Tuliskan kode berikut pada StudentController untuk mengambil data dari databse dan mengirimkan
ke view index.

4. Tambahkan kode berikut pada index.blade.php untuk menampilkan daftar mahasiswa

5. Lihat hasilnya di browser

6. Tambahkan kode berikut pada StudentController untuk menampilkan view show

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 113 dari

127
7. Tambahkan kode berikut pada show.blade.php

8. Coba hasilnya di browser, dengan meng-klik link SHOW pada index.

EDIT Student
1. Tambahkan kode berikut pada StudentController untuk menampilkan view Edit.

2. Tambahkan kode berikut pada edit.blade.php untuk menampilkan form edit dengan data lama yang
berasal dari database.

3. Coba lihat hasilnya di browser dengan meng-klik link EDIT pada index.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 114 dari

127
4. Tambahkan kode berikut pada StudentController untuk menyimpan perubahan

5. Coba lakukan perubahan data Student - ERROR

6. Tambahkan kode berikut pada edit.blade.php

7. Coba kembali melakukan update data

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 115 dari

127
DELETE Student
1. Tambahkan kode berikut pada index.blade.php untuk membuat action delete

2. Tambahkan kode berikut pada StudentController untuk menghapus data

3. Coba lakukan delete data

File Upload
1. Tambahkan kode berikut pada create.blade.php untuk melakukan file Upload
PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 116 dari
127
2. Tambahkan kode berikut pada StudentController untuk menyimpan file

3. Coba lakukan upload file

4. Perhatikan folder storage, file yang diupload disimpan pada folder storeage/app/photos

5. Ubah StudentController.php untuk menyimpan path ke database

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 117 dari

127
6. Tambahkan kode berikut pada StudentController untuk mengirimkan informasi foto ke view

7. Tambahkan kode berikut pada show.blade.php

8. Coba lihat hasilnya di browser

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 118 dari

127
Form Validation
1. Tambahkan kode berikut pada StudentController

2. Tambahkan kode berikut pada create.blade.php

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 119 dari

127
3. Coba hasilnya dengan men-submit form yang tidak valid untuk NIM dan Nama

TUGAS
Buatlah sebuah project Laravel untuk melakukan CRUD pada sebuah tabel, dengan fitur file upload dan
validasi keseluruhan field. Jumlah field/kolom ditentukan berdasarkan angka terakhir dari NIM Anda.
● NIM: xxx0, xxx1: Jumlah kolom: 7
● NIM: xxx2, xxx3: Jumlah kolom: 8
● NIM: xxx4, xxx5: Jumlah kolom: 9
● NIM: xxx6, xxx7: Jumlah kolom: 10
●NIM: xxx8, xxx9: Jumlah kolom: 11
Jumlah kolom termasuk (timestamp: created_at dan updated_at), Anda bisa memodifikasi tidak
menggunakan timestamp. Nama tabel dan nama kolom bebas. Dikerjakan secara individu.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 120 dari

127
 MINGGU 13
SECURITY & AUTHENTICATION

DESKRIPSI TEMA
Mahasiswa mempraktikkan implementasi Authentikasi pada proyek Laravel

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

Mahasiswa mampu merancang dan membangun aplikasi web yang amanmenggunakan Framework
Laravel

PERALATAN YANG DIGUNAKAN

1. Code Editor
2. XAMPP
3. Composer
4. Web Browser

LANGKAH-LANGKAH PRAKTIKUM
Laravel Breeze
1. Buatlah sebuah project Laravel baru.
2. Instal Laravel Breeze menggunakan composer dengan command seperti berikut:

3. Selanjutnya, jalankan command berikut

4. Coba jalankan aplikasi, perhatikan pada pojok kanan atas terdapat link Login dan Register

5. Coba lakukan register dan login.

6. Catatan: Sebelumnya jangan lupa untuk melakukan setup database terlebih dahulu.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 121 dari

127
Retrieving Authenticated User
1. Modifikasi file migration users menjadi seperti berikut

2. Buat sebuah Model “Book” beserta dengan file migration-nya. Tuliskan kode berikut pada Model Book

3. Tuliskan kode berikut pada Model User

4. Buatlah sebuah view create book seperti berikut

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 122 dari

127
5. Buatlah sebuah view index book seperti berikut

6. Buat route untuk books. Perhatikan terdapat middleware(‘auth’) merupakan mekanisme untuk
memproteksi route sehingga hanya bisa diakses oleh user yang sudah login.

7. Buat BookController, tuliskan kode berikut untuk function index(), create() dan store()

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 123 dari

127
 Perhatikan pada baris ke46 dan 47 merupakan cara untuk mendapatkan user_id dari user yang sedang
login saat ini.

Gates & Authorizing Actions

1. Pada file AuthServiceProvider.php, tuliskan kode berikut. Disini kita mendefinisikan aturan bahwa
yang bisa melakukan create book hanya user yang memiliki role_id = 1 dan yang bisa melakukan
edit/update book adalah user yang membuat buku tersebut (user_id pada books sama dengan user_id
yang sedang login saat ini).

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 124 dari

127
2. Modifikasi function store() pada BookController menjadi seperti berikut

3. Tuliskan kode berikut pada function edit() pada BookController

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 125 dari

127
TUGAS
Lengkapi proses CRUD untuk books.

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 126 dari

127
 MINGGU 14
(TEMA)

DESKRIPSI TEMA
(Apa yang akan dipelajari mahasiswa pada minggu ini)

CAPAIAN PEMBELAJARAN MINGGUAN (SUB-CAPAIAN PEMBELAJARAN)

(Capaian pembelajaran pada minggu ini)

PERALATAN YANG DIGUNAKAN

1. …
2. …
3. dst
(+ Perlengkapan Apd/Alat Pelindung Diri Yang Harus Digunakan, Jika Ada)

LANGKAH-LANGKAH PRAKTIKUM
…

REFERENSI

PROGRAM STUDI INFORMATIKA | PRAKTIKUM PEMROGRAMAN WEB Hal. 127 dari

127