BAB 8 FORM HANDLING DAN VALIDASI

Transkripsi

1 Pemrograman Web 115 BAB 8 FORM HANDLING DAN VALIDASI Suatu aplikasi banyak menerima masukan/input data dari pengguna, misalkan ketika registrasi kesuatu website atau ketika login pada halaman dan sebagainya. Untuk memungkinkan hal tersebut diperlukan suatu antarmuka pada klien dalam bentuk form HTML dan suatu mekanisme untuk penanganan data yang dikirim oleh pengguna pada sisi server. Form handling ialah suatu mekanisme untuk menangani suatu masukan dari form yang dikirim oleh pengguna. Form handling berhubungan dengan metode yang dikirim dan bagaimana menangani pengiriman data berdasarkan metode yang digunakan. Pada bab ini akan membahas mengenai form HTML dan elemennya beserta implementasinya, juga form handling baik data teks maupun file. 8.1 Prosedur 1. Buka aplikasi XAMPP 2. Jalankan Apache dengan mengklik tombol start dan pastikan Apache berjalan dengan memperhatikan indikator warna background tulisan Apache menjadi hijau. 3. Buatlah direktori dan beri nama sesuai dengan nama anda, contoh rofil, kemudian didalam direktori tersebut buatlah direktori modul-8 4. Direktori modul-8 tempat meletakan file-file program pada buku ini 8.2 Form Dalam aplikasi web adakalanya kita memerlukan inputan atau masukan dari pengguna. Untuk melakukan hal itu kita dapat memanfaatkan form HTML. Form HTML terdiri dari tag-tag seperti <form>, <input>, <textarea> dan <select> yang mana penggunaannya disesuaikan berdasarkan data yang akan dikoleksi. Berikut ialah format dari form HTML: 1. <form action="tujuan" method="metode"> 2. // ELEMEN - ELEMEN FORM 3. </form> Dimana TUJUAN ialah file php untuk memproses masukan misalkan proses.php, sedangkan METODE merupakan metode yang digunakan untuk mengirim data tersebut (pada buku ini kita membahas dua metode yakni GET dan POST).

2 Pemrograman Web 116 Untuk membuat form menggunakan tag <form> dan diakhiri dengan tag penutup </form>. Berikut ialah atribut dari tag <form>: Tabel 8.1 Atribut Tag Form Atribut action method enctype Deskripsi Tujuan dari form ketika dikirim. Metode yang digunakan untuk mengirim. Terdapat dua method yakni GET dan POST Digunakan ketika form terdapat inputan berupa upload file. Nilai dari atribut ini dapat berisi multipart/form-data Contoh dari form ialah sebagai berikut: 1. Buatlah file baru dan simpan dengan nama latihan-1.php pada direktori yang telah ditentukan. 2. Kemudian, ketikan kode dibawah ini: 1. <form action="proses.php" method="post"> 2. Nama <input type="text" name="nama"> <br> 3. Jenis Kelamin 4. <input type="radio" name="kelamin" value="pria"> Pria 5. <input type="radio" name="kelamin" value="pria"> Wanita 6. <br> 7. <input type="submit" value="simpan"> 8. </form> 3. Buka web browser dan arahkan pada kode diatas. 4. Jika tidak ada kesalahan, maka luarannya akan seperti berikut 5. Jika anda klik tombol simpan, maka akan tampil sebagai berikut:

3 Pemrograman Web 117 Hal ini dikarenakan, pada atribut action pada form ialah proses.php sedangkan file ini tidak ada, sehingga menampilkan object not found dan/atau Error 404. Untuk memproses form diatas maka buatlah file dengan nama proses.php seperti dijelaskan pada langkah selanjutnya. 6. Buat file baru dan simpan dengan nama proses.php sesuai dengan form action pada langkah- 1. Kemudian ketikan kode berikut: 1. <pre> 2. <?php 3. print_r($_post); 4.?> 5. </pre> Perhatikan pada kode form pada langkah 1, metode yang digunakan untuk mengirim data ialah POST sehingga pada sisi server menggunakan Global Variable $_POST. Variabel $_POST ialah variabel array sehingga seperti ditunjukan pada langkah ke-3 kita dapat mengoutput-kan isinya dengan menggunakan perintah print_r(). 7. Kemudian, ulangi langkah 4, kemudian isi data misalkan kolom nama diisi dengan Rasmus L. dan kelamin dipilih Pria, maka setelah mengklik tombol Simpan, luarannya akan sebagai berikut:

4 Pemrograman Web 118 Perhatikan bahwa variabel $_POST merupakan array asosiatif, dimana index/key merupakan nama dari elemen form, sedangkan data/value dari setiap index ialah merupakan inputan klien. 8.3 Element Form a. Masukan Text (text, password, textarea) Form HTML menerima masukan berupa teks dalam beberapa elemen form HTML, yakni masukan berupa teks satu baris (tipe=text), teks banyak baris (textarea), dan berupa masukan teks yang dienkripsi (tipe=password). Input text digunakan untuk menerima masukan dalam bentuk text dengan panjang kira-kira satu kalimat. Input text memiliki tag <input> dengan atribut type="text" yang menandakan itu ialah input text. Contoh penggunaan input text misalkan untuk menampung nilai nama, alamat, hobi dan lainnya yang memiliki karakter yang tidak terlalu panjang. Tabel 8.2 Atribut umum pada Masukan teks Atribut Penjelasan Contoh name Merupakan nama dari masukan name="username" placeholder value Memberikan petunjuk singkat yang mendeskripsikan nilai yang diinginkan Nilai dari elemen form yang dikirim untuk diproses placeholder = "Masukan username anda" value="ramus" rows (texarea) Menentukan jumlah baris pada textbox cols=30 cols (textarea) Menentukan jumlah kolom pada textbox rows=8

5 Pemrograman Web 119 Contoh implementasi dari atribut pada Tabel 8.2 ialah sebagai berikut: 1) Buat file baru dan simpan dengan nama latihan-2.php pada direktori yang telah ditentukan. 2) Pada latihan-2.php, ketikan kode sesuai dengan berikut: 1. <form action="proses.php" method="post"> 2. Nama <input type="text" name="nama"> <br> 3. Alamat <input type="text" name="alamat" value="kalimantan Timur" placeholder="alamat Anda?"> <br> 4. Username <input type="text" name="username" placeholder="masukan Username"> <br> 5. Password <input type="password" name="password" placeholder="masukan Password > <br> 6. Deskripsi Diri <textarea rows="8" cols="9" placeholder="masukan Deskripsi Diri Anda"></textarea> 7. <input type="submit" value="simpan"> 8. </form> 3) Buka web browser dan jalankan latihan-2.php, maka luarannya seperti ditunjukan pada Gambar 8.1 Gambar 8.1 Luaran Contoh Form Elemen Teks b. Pilihan (Checkbox, Radio dan Dropdown)

6 Pemrograman Web 120 Suatu masukan dapat berupa pilihan, baik pilihan tunggan ataupun pilihan jamak (multiple choice). Selain itu terdapat juga dropdown yang digunakan untuk pilihan baik difungsikan menjadi pilihan tunggal ataupun pilihan jamak. Berikut ialah beberapa atribut dasar dari checkbox dan radio button: Tabel 8.3 Atribut Pada checkbox dan radio button Atribut Penjelasan Contoh name Merupakan nama dari masukan name="username" value Nilai dari elemen form yang dikirim untuk diproses value="rasmus" checked Digunakan untuk pemilihan checked=true atau hanya checked saja Contoh: 1. <form action="proses.php" method="post"> 2. Jenis Kelamin: 3. <input type="radio" name="kelamin" value="pria" checked> Pria 4. <input type="radio" name="kelamin" value="wanita"> Wanita <br> 5. Syarat-Syarat: 6. <input type="checkbox" name="syarat[]" value="ktp" cheched> KTP 7. <input type="checkbox" name="syarat[]" value="skck"> SKCK 8. <input type="checkbox" name="syarat[]" value="bebas narkoba"> Bebas Narkoba 9. <input type="checkbox" name="konfirmasi" value="true"> Data Saya Telah Benar 10. <input type="submit" value="simpan"> 11. </form> Kode 8.1 Elemen form radio dan checkbox Menghasilkan sebagai berikut:

7 Pemrograman Web 121 Gambar 8.2 Contoh luaran untuk elemen form radio dan chexbox Untuk mengerti mengenai ini masukan berupa teks ikuti langkah berikut: 1) Buat file baru dan simpan dengan nama latihan-3.php pada direktori yang telah ditentukan. 2) Pada latihan-3.php, ketikan kode sesuai dengan Kode ) Buka web browser dan jalankan latihan-3.php, maka luarannya seperti ditunjukan pada Gambar 8.2 Elemen form lain yang berkaitan dengan pemilihan ialah dropdown. Berbeda dengan radio button ataupun checkbox, dimana semua pilihan ditampilkan pada layar, elemen form ini menampilkan elemen dalam pilihan dropdown. Element ini dapat digunakan baik untuk pemilihan yang bersifat single choice ataupun multiple choices dengan cara memberikan atribut multiple pada tag <select>. Berikut ialah atribut dasar dari elemen dropdown: Tabel 8.4 Atribut pada dropdown tag <select> dan tag <option> Atribut Tag Penjelasan Contoh name <select> Merupakan nama dari masukan name="username" placeholder multiple value <select> <select> <option> Memberikan petunjuk singkat yang mendeskripsikan nilai yang diinginkan Memungkinkan untuk multiple choices Nilai dari elemen form yang dikirim untuk diproses placeholder = "Masukan username anda" value="ramus"

8 Pemrograman Web 122 selected <option> Memilih pilihan dari beberapa opsi <option selected>1</option> Contoh 1. <form action="proses.php" method="post"> 2. Pekerjaan : 3. <select name="pekerjaan" placeholder="pilih Pekerjaan Anda"> 4. <option value="dosen">dosen</option> 5. <option value="guru">guru</option> 6. <option value="programmer">programmer</select> 7. </select> </br> 8. Sertifikasi : 9. <select name="sertifikasi" multiple> 10. <option value="ccna">ccna</option> 11. <option value="mtcna">mtcna</option> 12. <option value="web" selected>web</option> 13. </select> </br> 14. <input type="submit" value="simpan"> 15. </form> Kode 8.2 Elemen form dropdown untuk single choice dan multiple choices Sehingga menjadi sebagai berikut: Gambar 8.3 Contoh luaran untuk form elemen dropdown pada single choice dan multiple choices Untuk mengerti mengenai ini masukan berupa teks ikuti langkah berikut:

9 Pemrograman Web 123 1) Buat file baru dan simpan dengan nama latihan-4.php pada direktori yang telah ditentukan. 2) Pada latihan-4.php, ketikan kode sesuai dengan Kode ) Buka web browser dan jalankan latihan-4.php, maka luarannya seperti ditunjukan pada Gambar 8.3 c. Elemen Hidden Kadang kita ingin mengirimkan suatu masukan secara tersembunyi, misalkan token untuk tambahan keamanan, ataupun berupa tanggal kapan suatu form dikirim. Untuk keperluan ini kita dapat memanfaatkan elemen Form hidden. Elemen form ini memiliki format yang sangat sederhana yakni: 1. <input type="hidden" value="{data}"> Dimana atribut yang ada hanya type dan value. Atribut type diisi dengan hidden dan value diisi dengan data yang dikirim secara tersembunyi. Berikut ialah contohnya: 1) Buatlah file baru dan simpan dengan nama latihan-5.php pada direktori yang telah ditentukan. 2) Ketikan kode sebagai berikut: 1. <form action="proses.php" method="post"> 2. <input type="hidden" name="tanggal" value="<?php echo date("y-m-d H:i:s")?>"> 3. Nama <input type="text" name="nama"> 4. <input type="submit" value="kirim"> 5. </form> 3) Buka web browser dan jalankan latihan-5.php. Jika tidak ada kesalahan maka akan tampil sebagai berikut:

10 Pemrograman Web 124 4) Jika dilihat pada tampilan diatas data tanggal tidak tampak pada layar web browser. Namun, jika kita melihat source code di google chrome dengan klik kanan view page source maka akan terlihat bahwa data tersebut terlihat seperti gambar berikut: d. Tombol/Button (SUBMIT dan RESET) Pada form-form yang telah dibuat sebelumnya Anda menemukan pada bagian akhir terdapat button/tombol yang digunakan untuk mengirim data. Tombol tersebut disebut dengan tombol submit yang ditandai dengan atribut type="submit". Pada form HTML terdapat dua jenis tombol/button yakni: 1) Tombol submit, digunakan sebagai trigger pengiriman data 2) Tombol reset, digunakan untuk mengatur masukan kembali kenilai asalnya. Kedua tipe tombol tersebut memiliki tiga atribut penting seperti pada tabel berikut: Tabel 8.5 Atribut Button Atribut Penjelasan Contoh name Merupakan nama dari masukan name="username" type Merupakan tipe elemen Type= reset atau type= submit value Nilai dari elemen form yang dikirim untuk diproses value="ramus" Untuk lebih memahami konsep dan fungsi tombol pada form HTML ikuti langkah berikut: 1) Buat file baru dan simpan dengan nama latihan-6.php pada direktori yang telah ditentukan. 2) Kemudian, ketikan kode form HTML berikut:

11 Pemrograman Web <h1>elemen Button</h1> 2. <form action="proses.php" method="post"> 3. Nama: <input type="text" name="nama" value="rasmus L."> <br> 4. Telpon: <input type="text" name="telpon"> <br> 5. Alamat: <input type="text" name="alamat" placeholder="masukan alamat anda"> <br> 6. Kelamin: 7. <input type="radio" name="kelamin" value="pria" checked> Pria 8. <input type="radio" name="kelamin" value="wanita"> Wanita<br> 9. <input type="submit" value="kirim"> 10.<input type="reset" value="reset"> 11. </form> 3) Buka web browser dan jalan kode tersebut. Jika tidak ada kesalahan maka akan menampilkan sebagai berikut: 4) Coba ubah data, misalkan sebagia berikut:

12 Pemrograman Web 126 5) Jika anda klik tombol Reset maka data pada form masukan akan kembali kebentuk awal seperti gambar pada langkah ke Contoh Form a. Form Biodata b. Form 2 c. Form Login Disuatu website umumnya terdapat form yang digunakan untuk proses otentikasi atau disebut dengan form login. Form ini umumnya terdiri dari masukan berupa username dan password. Berikut ialah langkah-langkah membuat form login: 1. Buatlah file baru dan simpan dengan nama form-login.php 2. Kemudian, ketikan kode berikut: 1. <form action="proses.php" method="post"> 2. Username <input type="text" name="username"> 3. Password <input type="password" name="password"> 4. <input type="submit" value="login"> 5. </form> 3. Buka web browser dan arahkan pada form-login tersebut. Jika tidak ada kesalahan maka luarannya seperti berikut:

13 Pemrograman Web Klik tombol Login, maka data akan dikirim ke proses.php yang telah dibuat sebelumnya dan menampilkan data yang telah dimasukan. 8.5 Form Handling Form handling fokus pada penanganan data yang telah dikirim dengan menggunakan form. Penanganan form lebih kepada mengambil data-data yang dikirimkan. Pengambilan data yang dikirim bergantung pada metode yang digunakan. Terdapat dua metode yang sering digunakan yakni GET dan POST. Tabel 8.6 Perbandingan metode GET dan POST GET POST Bookmarked Dapat di bookmark Tidak dapat di-bookmark Cached Dapat di-cached Tidak dapat di-cached Encoding type History Ukuran data Batasan Tipe Data application/x-wwwformurlencoded Parameter masih tertinggal/tersimpan pada histori Meletakan data pada URL, sedangkan data yang dikirim melalui URL terbatas (Maksimum 2KB) Hanya Karakter ASCII application/x-www-form-urlencoded atau multipart/form-data. Encoding multipart digunakan untuk mengirim file binary Tidak tersimpan pada histori Tidak ada batasan Tidak ada batasan termasuk file

14 Pemrograman Web 128 Security Visibility GET kurang aman karena data dikirim bagian dari URL dan terdapat pada histori Data terlihat karena terdapat pada URL Lebih aman dari GET, karena data tidak terdapat pada URL, data histori dan cached Data tidak tampak pada URL 1) Buat file baru dan simpan dengan nama form-biodata.php pada diretkori yang telah ditentukan. 2) Kemudian, ketikan kode berikut: 1. <form action="proses-biodata" method="post"> 2. Nama <input type="text" name="nama"><br> 3. Telpon <input type="text" name="telpon"><br> 4. Kelamin 5. <input type="radio" name="kelamin" value="pria"> Pria 6. <input type="radio" name="kelamin" value="wanita"> Wanita<br> 7. Deskripsi diri: <textarea name="deskripsi" cols="100%" rows="10"></textarea> <br> 8. <input type="submit" value="kirim"> 9. </form> Perhatikan: pada baris ke-1 method yang digunakan ialah metode POST 3) Buat file baru lagi dan simpan dengan nama proses-biodata.php pada direktori yang telah ditentukan 4) Kemudian pada proses-biodata.php ketikan kode berikut 1. <?php 2. $nama = $_POST['nama']; 3. $telpon = $_POST['telpon']; 4. $kelamin = $_POST['kelamin']; 5. $deskripsi = $_POST['deskripsi']; 6. echo $nama, $telpon, $kelamin, $deskripsi; 7.?> Perhatikan: pada langkah ke-2 metode yang digunakan ialah POST, sehingga untuk mengambil datanya harus juga via post melalui GLOBAL VARIABEL $_POST, seperti pada baris ke-2, ke-3, ke-4 dan ke-5. 5) Buka web browser dan arahkan pada file form-biodata tersebut. 6) Isi masukan dan tekan tombol kirim dan perhatikan luarannya.

15 Pemrograman Web Handling File Upload Handling file upload sedikit berbeda dengan handling pada data teks. Hal ini karena melibatkan beberapa proses, yakni mengambil data file dan memindahkannya pada direktori yang telah ditentukan. Upload file, memerlukan encoding yang berbeda yakni multipart/formdata yang harus didefinisikan pada atribut enctype pada tag <form> dengan format berikut: 1. <form action="tujuan" method="post" enctype="multipart/formdata"> 2. File <input type="file" name="nama_file_upload"> 3. // ELEMEN FORM YANG LAIN 4. </form> Sedangkan untuk mengambil file yang telah diunggan dengan menggunakan variabel global $_FILES, dimana memiliki beberapa index/kunci 1. $_FILES['NAMA_FILE_UPLOAD']['tmp_name'] merupakan file upload 2. $_FILES['NAMA_FILE_UPLOAD']['name'] merupakan nama file yang diupload Handling form upload ialah dengan memindahkan file yang telah diunggah kedirektori yang telah dispesifikasikan dengan menggunakan perintah move_uploaded_file(file, LOKASI TUJUAN) atau move_uploaded_file($_files['nama_file_upload']['tmp_name'], $_FILES['NAMA_FILE_UPLOAD']['name']). 1. Buatlah direktori dengan nama upload 2. Buat dua file kosong dan simpan file pada direktori yang ditentukan pada direktori htdocs dengan nama form-upload.php dan proses-upload.php. 3. Ketikan dan simpan kode berikut pada form-upload.php 1. <form action="proses-upload.php" method="post" enctype="multipart/formdata"> 2. Gambar <input type="file" name="gambar"> 3. <input type="submit" value="simpan"> 4. </form> 4. Ketikan dan simpan kode berikut pada proses-upload.php:

16 Pemrograman Web <?php 2. $file = $_FILES['gambar']['tmp_name']; 3. $tujuan = $_FILES['gambar']['name']; 4. move_uploaded_file($file, $tujuan); 5. echo "File telah diunggah"; 6.?> 5. Buka web browser dan arahkan pada form-upload.php, maka akan menampilkan tampilan web sebagai berikut Setelah mengklik tombol Choose File maka akan keluar window untuk memilih file yang akan diunggah seperti gambar berikut 6. Klik tombol Choose File dan pilih file yang akan di-upload. Kemudian klik tombol Simpan untuk memproses upload.

17 Pemrograman Web Jika berhasil maka akan menampilkan pesan sebagai berikut: 8.7 Validasi Data Validasi data ialah suatu proses untuk mengecek apakah suatu data yang dikirim via form HTML sesuai dengan spesifikasi yang telah ditentukan. Spesifikasi yang dimaksud misalkan apakah suatu inputan memiliki nilai, atau sesuai dengan format yang telah ditentukan. Untuk mendefinisikan spesifikasi dari suatu inputan dapat dicek dengan percabangan. Beberapa hal yang bisa divalidasi : 1. Nilai kosong 2. Nilai berupa angka 3. Minumum angka atau maksimum angkan dan Rentang angka tertentu 4. Kesesuaian antar masukan 5. Panjang karakter 6. File, Ukuran File, Tipe File Berikut ialah contoh form dengan spesifikasi form memiliki masukan berupa a. Nama, harus diisi b. Foto, harus diisi c. Alamat, harus diisi d. Jenis kelamin, harus diisi e. Umur, harus diisi dan harus angka serta lebih dari 17 tahun f. Username, harus diisi dan panjangnya minimal 7 karakter g. Password, harus diisi dan panjangnya minimal 7 karakter h. Retype Password, harus diisi dan harus sama dengan Password

18 Pemrograman Web 132 Untuk melakukan validasi dari form seperti spesifikasi diatas, ikuti langkah berikut: 1) Buatlah file baru dan simpan dengan nama form-registrasi.php pada direktori yang telah ditentukan. 2) Kemudian, ketikan kode berikut: 1. <h1>form Registrasi</h1> 2. <hr> 3. <form action="proses-registrasi.php" method="post" enctype="multipart/form-data"> 4. Nama: <input type="text" name="nama"> <br> 5. Foto: <input type="file" name="foto"> <br> 6. Alamat <input type="text" name="alamat"> <br> 7. Kelamin: 8. <input type="radio" name="kelamin" value="pria"> Pria 9. <input type="radio" name="kelamin" value="wanita"> Wanita<br> 10. Umur: <input type="text" name="umur"> <br> 11. Username: <input type="text" name="username"> <br> 12. Password: <input type="password" name="password"> <br> 13. Retype Password: <input type="password" name="ulangi_password"> <br> 14. <input type="submit" value="registrasi"> 15. </form> 3) Buat file baru untuk handling form diatas dan simpan nama proses-registrasi.php pada direktori yang telah ditentukan. 4) Kemudian, ketikan kode berikut: 1. <?php 2. $nama = $_POST['nama']; 3. $alamat = $_POST['alamat']; 4. $kelamin = $_POST['kelamin']; 5. $umur = isset($_post['umur']) $_POST['umur'] : null; 6. $username = $_POST['username']; 7. $password = $_POST['password']; 8. $ulangi_password = $_POST['ulangi_password']; 9. $file_foto = $_FILES['foto']['tmp_name']; 10. $nama_foto = $_FILES['foto']['name']; 11. // Definisi error validasi dengan array kosong 12. $errors = array(); 13. // Cek nama tidak kosong 14. if($nama == "") { 15. $errors[] = "Nama Tidak Boleh Kosong"; 16. } 17. if($alamat == "") { 18. $errors[] = "Alamat Harus Diisi"; 19. } 20. if($kelamin == null) {

19 Pemrograman Web $errors[] = "Jenis Kelamin Harus Dipilih"; 22. } 23. if(is_numeric($umur) && $umur > 17) { 24. $errors[] = "Umur Harus Angka dan Harus lebih dari 17 Tahun"; 25. } 26. if(strlen($username) >=7) { 27. $errors[] = "Username Harus Lebih dari 7 Karakter"; 28. } 29. if(strlen($password) >=7) { 30. $errors[] = "Password Harus Lebih dari 7 Karakter"; 31. } 32. if($ulangi_password!= $password) { 33. $errors[] = "Password dan Retype Password Harus Sama"; 34. } 35. if(count($errors) > 0){ // JIKA ADA ERRORS 36. foreach($errors as $error) { 37. echo "<li>", $error, "</li>"; 38. } 39. } else { // JIKA TIDAK ADA ERRORS 40. // Upload FILE 41. move_uploaded_file($file_foto, $nama_foto); 42. // Tampilkan Data 43. echo "Nama: ", $nama, "<br>", "Alamat: ", $alamat, "<br>"; 44. echo "Kelamin: ", $kelamin, "<br>", "Umur: ", $umur, "<br>"; 45. echo "Username: ", $username, "<br>"; 46. echo "Foto: <img src='$nama_foto'>"; 47. } 48.?> 5) Buka web browser, maka akan tampilan sebagai berikut:

20 Pemrograman Web 134 6) Coba isi dengan data yang sesuai dengan ketentuan, misalkan sebagai berikut: 7) Isi data tersebut dengan benar, maka ketika mengklik tombol Registrasi akan menampilkan sebagai berikut:

21 Pemrograman Web 135 8) Lakukan percobaan, misalkan dengan tidak mengisi datanya, maka akan menampilkan pesan sebagai berikut: 8.8 Tugas