Scribd
Unggah
35 tayangan

Modul 7

Dokumen tersebut membahas tentang pemrosesan form pada pemrograman web dengan PHP. Secara singkat, dokumen menjelaskan cara menampilkan data yang diisi pada form melalui variabel superglobal $_GET atau $_POST, menampilkan data secara individu, dan melakukan validasi form untuk memastikan data yang diisi sudah benar.

Diunggah oleh

Sheryl Octa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
35 tayangan

Modul 7

Dokumen tersebut membahas tentang pemrosesan form pada pemrograman web dengan PHP. Secara singkat, dokumen menjelaskan cara menampilkan data yang diisi pada form melalui variabel superglobal $_GET atau $_POST, menampilkan data secara individu, dan melakukan validasi form untuk memastikan data yang diisi sudah benar.

Diunggah oleh

Sheryl Octa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 22

UNIVERSITAS NEGERI JAKARTA

KB 1-7 PEMROSESAN FORM

A. Tujuan Pembelajaran Khusus


Tujuan pembelajaran khusus dari Kegiatan Belajar (KB) 1-7 adalah
pada akhir proses kegiatan belajar ini, mahasiswa mampu menerapkan
pemrosesan form pada pemrograman web dengan benar.
B. Menampilkan Hasil Form
Cara membuat form dengan HTML tentu sudah kalian pelajari pada
mata kuliah Desain Web atau Interaksi Manuasi dan Komputer. Lalu
bagaimana data isian pada form dikirim dan bagaimana mengetahui data
yang diisi pada form sudah benar? Berikut akan kita bahas.
Menampilkan hasil sebuah form cukup mudah, yaitu tinggal mengakses
variabel superglobals $_GET atau $_POST. Hal pertama adalah menyiapkan
form yang dibuat dengan kode HTML seperti berikut ini:

1. <!DOCTYPE html>
2. <html lang="id">
3. <head>
4. <meta charset="UTF-8">
5. <title>Belajar PHP</title>
6. </head>
7. <body>
8. <h1>Pemrosesan Form</h1>
9. <form action="prosesform.php" method="post">
10. <p>Username: <input type="text"
name="username"></p>
11. <p>Password: <input type="password"
name="password"></p>
12. <input type="submit" value="Proses">
13. </form>
14. </body>
15. </html>

Kode di atas murni HTML dan tidak ada kode PHP sama sekali. Namun
yang perlu diperhatikan adalah baris ke-9 pada atribut action dan method:

Modul Perkuliahan Pemrograman Web Hal | 117


UNIVERSITAS NEGERI JAKARTA

<form action="prosesform.php" method="get">


Atribut action diisi dengan alamat file tempat form akan diproses.
Dalam contoh ini saya ingin mengirim hasil form ke halaman
prosesform.php. Halaman inilah yang nantinya memproses dan
menampilkan isi form. Atribut method berfungsi untuk mengatur bagaimana
hasil form dikirim. Terdapat 2 jenis method, yakni "get" dan "post". Dalam
contoh di atas saya menggunakan method="get".

Gambar 46 Contoh desain form HTML


Selanjutnya kita akan membuat file prosesform.php seperti berikut:

1. <pre>
2. <?php
3. print_r($_GET);
4. ?>
5. </pre>

Fungsi print_r($_GET) digunakan untuk menampilkan seluruh isi


variabel superglobals $_GET. Apabila form.php dijalankan dan diisi data,
kemudian klik tombol proses, maka data akan ditampilkan seperti ini:

Hal | 118 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

Gambar 47 Menampilkan isian form dengan method get


Adapun prosesnya sebagai berikut: pada tampilan web browser dari
prosesform.php, superglobals $_GET memiliki key “username” dan
“password”. Kedua key ini diperoleh dari atribut “name” di dalam struktur
form dengan kode berikut:
<input type="text" name="username">
<input type="password" name="password">
Selain itu, karena kita menggunakan variabel method get, maka saat
prosesform.php tampil, pada URL akan ada tulisan berikut:
prosesform.php?username=Multazam&password=okedeh123
Dapat kita lihat bahwa isian atribut username dan password ditampilkan
pada URL. Hal ini disebabkan penggunaan method get. Apabila Method get
kita ganti menjadi method post pada kode form.php maupun prosesform.php
maka artibut username maupun password tidak tampil pada URL, seperti
gambar berikut:

Modul Perkuliahan Pemrograman Web Hal | 119


UNIVERSITAS NEGERI JAKARTA

Gambar 48 Menampilkan isian form dengan method post


Dari segi bahasa, "get" berarti ambil atau mengambil. Jika form yang
kita buat akan mengambil suatu informasi dari server seperti form pencarian,
sebaiknya gunakan method get. Sedangkan "post" bisa diartikan
memasukkan sesuatu. Oleh karena itu jika form yang dirancang nantinya
akan menyimpan data ke dalam database seperti form tambah data, gunakan
method post.
C. Menampilkan Hasil Form Secara Individu
Apabila kita ingin menampilkan isi form secara individu, maka ubahlah
file prosesform.php seperti berikut ini:

1. <h1>Halaman Proses</h1>
2. <?php
3. echo "Username: ".$_POST['username']."<br>";
4. echo "Password: ".$_POST['Password']."<br>";
5. ?>

Jika form diisi username dan password, lalu mengklik tombol proses
akan tampil seperti berikut ini:

Hal | 120 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

Gambar 49 Menampilkan isi form secara individu


Contoh lain bisa kita buat dengan desain form dengan nama form2.php
dengan komponen yang lebih lengkap seperti berikut:

1. <h2 align="center">FORM TAMBAH MAHASISWA</h2>


2. <form method="POST" action="prosesform2.php">
3. <table align="center" width="80%" border="0">
4. <tr>
5. <td>Nomor Induk Mahasiswa</td>
6. <td><input type="text" name="nim"
size="10"></td>
7. </tr>
8. <tr>
9. <td>Nama Mahasiswa</td>
10. <td><input type="text" name="nama"
size="30"></td>
11. </tr>
12. <tr>
13. <td>Program Studi</td>
14. <td><select name="prodi">
15. <option value="TI">Teknik Informatika</option>
16. <option value="SI">Sistem Informasi</option>
17. <option value="SK">Sistem Komputer</option>
18. </td>
19. </tr>
20. <tr>
21. <td>Jenis Kelamin</td>
22. <td>
23. <input type="radio" name="JK" value="L"
checked>Laki-Laki

Modul Perkuliahan Pemrograman Web Hal | 121


UNIVERSITAS NEGERI JAKARTA

24. <input type="radio" name="JK"


value="P">Perempuan
25. </td>
26. </tr>
27. <tr>
28. <td>Alamat Lengkap</td>
29. <td><textarea name="alamat" cols="30"
rows="4"></textarea></td>
30. </tr>
31. <tr>
32. <td> </td>
33. <td>
34. <input type="submit" name="simpan"
value="SIMPAN">
35. <input type="reset" name="batal"
value="BATAL"></td>
36. </tr>
37. </table>
38. </form>

Apabila ditampilkan pada web browser dan dicoba mengisi data,


tampilannya seperti gambar berikut:

Gambar 50 Form dengan beberapa komponen

Hal | 122 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

Untuk menampilkan data dari isian form tersebut, kita akan membuat
file prosesform2.php seperti pada kode berikut:

1. <h1 align='center'>Data Mahasiswa UTM</h1>


2. <table border='0' align='center' width='90%'>
3. <?php
4. echo "
5. <tr><td>Nomor Induk Mahasiswa</td>
6. <td>: $_POST[nim]</td></tr>
7. <tr><td>Nama Mahasiswa</td>
8. <td>: $_POST[nama]</td></tr>
9. <tr><td>Program Studi</td>
10. <td>: $_POST[prodi]</td></tr>
11. <tr><td>Jenis Kelamin (L/P></td>
12. <td>: $_POST[JK]</td></tr>
13. <tr><td>Alamat Lengkap</td>
14. <td>: $_POST[alamat]</td></tr>";
15. ?>
16. </table>

Apabila setelah pengisian data, kemudian menekan tombol “SIMPAN”


maka data akan ditampilkan seperti gambar berikut:

Gambar 51 Tampilan data dari isian form

Modul Perkuliahan Pemrograman Web Hal | 123


UNIVERSITAS NEGERI JAKARTA

D. Validasi Form
Validasi form adalah proses untuk memastikan apakah isian form sudah
sesuai dengan keinginan atau belum. Sebagai contoh, apakah isian alamat
email memang berupa email atau tidak, apakah isian jumlah barang diisi
dengan angka atau malah dengan huruf. Secara umum, terdapat beberapa
kriteria yang ingin kita pastikan pada sebuah form:
1. Wajib diisi: apakah sebuah isian form wajib diisi atau tidak.
2. Panjang karakter: apakah panjang isian form harus dibatasi, misalnya
maksimal 5 karakter, atau minimal 5 karakter.
3. Tipe data: isian form bisa ditentukan apakah berupa angka bulat
(integer), angka desimal (float) atau harus berupa sebuah kalimat
(string).
4. Dalam sebuah kelompok data: isian form hanya bisa diisi dengan
karakter tertentu saja, misalnya "L" untuk laki-laki dan "P" untuk
perempuan. Selain karakter ini, dianggap tidak valid.
5. Pola khusus: isian form harus memenuhi syarat pola / format khusus,
misalnya untuk alamat email, harus memiliki karakter "@" dan memiliki
alamat domain.
Selain kelima validasi di atas, masih banyak syarat validasi lain
tergantung kebutuhan. Validasi form sangat amat penting untuk menghindari
data yang salah. Mengisi data yang tidak seharusnya juga akan menyebabkan
error.
Sekarang kita akan mencoba membuat validasi pada form tambah data
mahasiswa pada latihan sebelumnya yaitu form2.php dan
prosesform2.php. Yang pertama kita lakukan adalah memeriksa pengiriman
data dari form, hal ini penting dilakukan untuk mengetahui apakah semua
inputan terkirim atau tidak. Hal ini bisa kita lakukan dengan

Hal | 124 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

var_dump($_POST) atau print_r($_POST). Gantilah file prosesform2.php


dengan kode berikut:

1. <?php
2. // cek apakah form telah di submit
3. if (isset($_POST["simpan"])) {
4. //tombol telah diklik, cek seluruh data
5. echo "<pre>";
6. print_r($_POST);
7. echo "<pre>";
8. die();
9. }

Silahkan buka dan isi data pada form2.php lalu klik tombol SIMPAN,
Jika pengiriman data semuanya berhasil, hasilnya seperti gambar berikut:

Gambar 52 Pemeriksaan inputan form


Selanjutnya kita akan menampilkan hasil form secara individu. Ganti
atau kembalikan kode pada prosesform2.php seperti berikut:

1. <h1 align='center'>Data Mahasiswa UTM</h1>


2. <table border='0' align='center' width='90%'>
3. <?php
4. echo "
5. <tr><td>Nomor Induk Mahasiswa</td>
6. <td>: $_POST[nim]</td></tr>
7. <tr><td>Nama Mahasiswa</td>
8. <td>: $_POST[nama]</td></tr>

Modul Perkuliahan Pemrograman Web Hal | 125


UNIVERSITAS NEGERI JAKARTA

9. <tr><td>Program Studi</td>
10. <td>: $_POST[prodi]</td></tr>
11. <tr><td>Jenis Kelamin (L/P></td>
12. <td>: $_POST[JK]</td></tr>
13. <tr><td>Alamat Lengkap</td>
14. <td>: $_POST[alamat]</td></tr>";
15. ?>
16. </table>

Apabila form diisi lalu mengklik tombol SIMPAN hasilnya seperti gambar
berikut:

Gambar 53 Menampilkan isian form secara individu


Bagaimana jika salah satu inputan tidak diisi, misalnya nomor induk
mahasiswa (NIM) kosong, lalu klik tombol simpan? Hasilya ternyata
langsung tampil seperti berikut:

Hal | 126 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

Gambar 54 Tampilan data kosong dari isian form


Bisa dibayangkan jika hasil inputan ini disimpan ke dalam database,
maka NIM mahasiswa tersebut akan kosong. Seharusnya, jika NIM belum
diisi, maka data tidak tersimpan tetapi muncul pesan (notifikasi) bahwa NIM
wajib diisi. Bagaimana caranya? Kita lanjutkan prosesnya. Ubah penulisan
variabel pada file prosesform2.php dengan menghilangkan $_POST.

1. <?php
2. //Form telah disubmit, cek seluruh data
3. echo "<h1 align='center'>Data Mahasiswa UTM</h1>
4. <table border='0' align='center' width='90%'>
5. <tr><td>Nomor Induk Mahasiswa</td>
6. <td>: $nim</td></tr>
7. <tr><td>Nama Mahasiswa</td>
8. <td>: $nama</td></tr>
9. <tr><td>Program Studi</td>
10. <td>: $prodi</td></tr>
11. <tr><td>Jenis Kelamin (L/P></td>
12. <td>: $JK</td></tr>
13. <tr><td>Alamat Lengkap</td>
14. <td>: $alamat</td></tr>
15. </table>";
16. ?>

Modul Perkuliahan Pemrograman Web Hal | 127


UNIVERSITAS NEGERI JAKARTA

Selanjutnya kita akan mengintegrasikan proses ke dalam form dengan


fungsi include agar proses dijalankan dalam satu file. Kita juga akan
menambahkan validasi untuk inputan yang kosong, akan ditampilan pesan
notifikasi. Caranya tambahkan kode berikut pada file form2.php dibagian
baris paling atas.

1. <?php
2. // cek apakah form telah di submit
3. if (isset($_POST["simpan"])) {
4. //ambil nilai dari form
5. $nim = htmlentities(strip_tags(trim($_POST["nim"])));
6. $nama =
htmlentities(strip_tags(trim($_POST["nama"])));
7. $prodi =
htmlentities(strip_tags(trim($_POST["prodi"])));
8. $JK = htmlentities(strip_tags(trim($_POST["JK"])));
9. $alamat =
htmlentities(strip_tags(trim($_POST["alamat"])));
10. //siapkan variabel pesar error
11. $pesan_error="";
12. // cek apakah "nim" sudah diisi atau tidak
13. if (empty($nim)) {
14. $pesan_error .= "NIM belum diisi<br>";
15. }
16. // cek apakah "nama" sudah diisi atau tidak
17. if (empty($nama)) {
18. $pesan_error .= "Nama belum diisi<br>";
19. }
20. // jika tidak ada error, tampil isi form
21. if($pesan_error===""){
22. include "prosesform2.php";
23. die();
24. }else{
25. echo "<font color='red'>$pesan_error</font>";
26. }}
27. ?>

Pada kode tersebut, baris 3 menjelaskan proses apabila tombol simpan


diklik, maka baris 5-9 akan mengambil nilai inputan dari form dengan
mengabaikan tag HTML dan spasi. Selanjutnya sebelum ditampilkan, kita
Hal | 128 Modul Perkuliahan Pemrograman Web
UNIVERSITAS NEGERI JAKARTA

membuat variabel pesan error pada baris 11. Pada baris 13-15 adalah pesan
apabila NIM belum diisi, baris 17-19 adalah pesan apabila nama belum diisi.
Terakhir pada baris 21-26 jika tidak ada pesan error maka data ditampilkan,
jika tidak maka muncul pesan error warna merah. Berikut tampilan form
setelah mengklik tombol SIMPAN namun NIM dan nama tidak diisi.

Gambar 55 Pesan apabila isian form masih kosong


Bagaimana mengecek kalau seandainya karakter yang diisi kurang atau
lebih dari yang ditentukan? Misalnya Nomor Induk Mahasiswa di
Universitas Teknologi Mataram menggunakan 7 karakater. Contohnya
21TI007 artinya angkatan 2021, program studi Teknik Informatika dengan
no urut absen 007. Semua mahasiswa memiliki NIM dengan Panjang 7
karakter, tidak boleh kurang, tidak boleh lebih. Bagaimana untuk validasi
penulisan nama atau email? Perhatikan contoh berikut:
Validasi Nomor induk mahasiswa harus 7 karakter, tambahkan kode
berikut:

Modul Perkuliahan Pemrograman Web Hal | 129


UNIVERSITAS NEGERI JAKARTA

1. //nim harus 7 digit


2. if (strlen($nim) <> 7) {
3. $pesan_error .= "Nomor Induk Mahasiswa harus 7
digit<br>";
4. }

Validasi nama minimal 5 digit, tambahkan kode berikut:

1. //nama minimal 5 digit


2. if (strlen($nama) <= 5) {
3. $pesan_error .= "Nama minimal 5 digit <br>";
4. }

Validasi penulisan email, tambahkan kode berikut:

1. <?php
2. //alamat email memiliki karakter '@'
3. If(strpos($email,'@') == false){
4. $pesan_error .= "Penulisan alamat email salah <br>";
5. }

Apabila digabung ke dalam form2.php pada latihan sebelumnya maka


jadinya seperti berikut:

1. <?php
2. // cek apakah form telah di submit
3. if (isset($_POST["simpan"])) {
4. //ambil nilai dari form
5. $nim =
htmlentities(strip_tags(trim($_POST["nim"])));
6. $nama =
htmlentities(strip_tags(trim($_POST["nama"])));
7. $prodi =
htmlentities(strip_tags(trim($_POST["prodi"])));
8. $JK =
htmlentities(strip_tags(trim($_POST["JK"])));
9. $alamat =
htmlentities(strip_tags(trim($_POST["alamat"])));
10. //siapkan variabel pesar error
11. $pesan_error="";

Hal | 130 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

12. // cek apakah "nim" sudah diisi atau tidak


13. if (empty($nim)) {
14. $pesan_error .= "NIM belum diisi<br>";
15. }elseif (strlen($nim) <> 7) {
16. $pesan_error .= "Nomor Induk Mahasiswa harus 7
digit<br>";
17. }
18. // cek apakah "nama" sudah diisi atau tidak
19. if (empty($nama)) {
20. $pesan_error .= "Nama belum diisi<br>";
21. }elseif (strlen($nama) <= 5) {
22. $pesan_error .= "Nama minimal 5 digit <br>";
23. }
24. // jika tidak ada error, tampil isi form
25. if($pesan_error===""){
26. include "prosesform2.php";
27. die();
28. }else{
29. echo "<font color='red'>$pesan_error</font>";
30. }}
31. ?>

Apabila isian nomor induk mahasiswa diisi karakter lebih dari 7 digit
dan nama mahasiswa kurang dari 5 digit akan tampil pesan seperti gambar
berikut:

Gambar 56 Pesan validasi jumlah karakter

Modul Perkuliahan Pemrograman Web Hal | 131


UNIVERSITAS NEGERI JAKARTA

E. Form Upload
Form upload merupakan form yang digunakan untuk mengupload file,
baik berupa file gambar, file dokumen, file audio atau video. Materi ini
sangat penting karena dalam pengembangan aplikasi, kita tidak terlepas dari
proses upload file. Untuk mengupload file, pertama yang harus dibuat adalah
form HTML. Contoh kode form HTML untuk upload file seperti berikut:

1. <!DOCTYPE html>
2. <html lang="id">
3. <head>
4. <meta charset="UTF-8">
5. <title>FORM UPLOAD</title>
6. </head>
7. <body>
8. <h1>Upload File</h1>
9. <form action="" method="post"
enctype="multipart/form-data">
10. <p>Label File : <input type="text"
name="label_file"></p>
11. <p>Upload File: <input type="file"
name="file_upload"></p>
12. <input type="submit" name="submit" value="Proses
Upload">
13. </form>
14. </body>
15. </html>

Perhatikan pada baris ke-9 ada kode enctype=”multipart/form-data”.


Kode tersebut menginformasikan ke web server bahwa di dalam form,
informasi yang akan dikirimkan bukan hanya teks tapi kemungkinan ada file.
Tanpa kode tersebut, upload file tidak akan bisa dilakukan.
Selanjutnya pada baris ke-11 terdapat kode <input type=”file”
name=”file_upload”> yang menjadi komponen form untuk upload file. Di
browser akan menghasilkan button Choose File atau Browse, seperti pada
gambar berikut:

Hal | 132 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

Gambar 57 Form upload file


Untuk melihat detail informasi file, silahkan tambahkan kode PHP
berikut di baris paling atas form upload HTML:

1. <?php
2. // cek apakah form telah di submit
3. if (isset($_POST["submit"])) {
4. // form telah disubmit, proses data
5. echo "Label File =".$_POST['label_file']."<br>";
6. //tampilkan informasi tentang file yang diupload
7. echo "Nama File
=".$_FILES['file_upload']['name']."<br>";
8. echo "MIME Type
=".$_FILES['file_upload']['type']."<br>";
9. echo "Temporary
=".$_FILES['file_upload']['tmp_name']."<br>";
10. echo "Kode Error
=".$_FILES['file_upload']['error']."<br>";
11. echo "Ukuran File
=".$_FILES['file_upload']['size']."<br>";
12. }
13. ?>
14. .. lanjutkan kode form HTML disini

Modul Perkuliahan Pemrograman Web Hal | 133


UNIVERSITAS NEGERI JAKARTA

Jika form upload dijalankan dengan mengisi label file dan memilih
sebuah file untuk diupload, lalu menekan tombol Submit maka informasi
detail file akan tampil seperti berikut:

Gambar 58 Informasi detail file upload


Selanjutnya, untuk memproses file yang diupload agar dikirim oleh web
server ke dalam folder yang ditentukan, kita perlu membuat folder baru
misalnya dengan nama folder_upload yang berada satu folder dengan form
upload tersebut. Selanjutnya pada baris paling atas form upload tulis kode
berikut ini:

1. <?php
2. // cek apakah form telah di submit
3. if (isset($_POST["submit"])) {
4. // form telah disubmit, cek apakah ada error
5. $error = $_FILES["file_upload"]["error"];
6. if ($error === 0){
7. // tidak ada error
8. $pesan_error = "<font color='green'>File sukses
di upload</font>";
9.
10. // pindahkan file ke folder_upload
11. $nama_folder="folder_upload";
12. $tmp = $_FILES["file_upload"]["tmp_name"];
13. $nama_file = $_FILES["file_upload"]["name"];
14. move_uploaded_file($tmp,
"$nama_folder/$nama_file");
15. }

Hal | 134 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

16. else {
17. $pesan_error = "<font color='red'>File gagal di
upload</font>";
18. }
19. }
20. ?>
21. <!DOCTYPE html>
22. <html lang="id">
23. <head>
24. <meta charset="UTF-8">
25. <title>FORM UPLOAD</title>
26. </head>
27. <body>
28. <h1>Upload File</h1>
29. <?php if (!empty($pesan_error)) {echo
"<p>$pesan_error</p>";} ?>
30. <form action="" method="post" enctype="multipart/form-
data">
31. <p>Label File : <input type="text"
name="label_file"></p>
32. <p>Upload File: <input type="file"
name="file_upload"></p>
33. <input type="submit" name="submit" value="Proses
Upload">
34. </form>
35. </body>
36. </html>

Pada kode di atas, nama folder upload diketik pada baris ke 11. Adapun
nama file yang diupload dideklarasikan pada baris ke 12 dan 13. Fungsi
upload file menggunakan fungsi move_uploaded_file pada baris ke 14
menuju pada folder upload yang ditentukan. Jika tidak ada error, maka
muncul pesan seperti pada baris ke 8 dengan font warna hijau, dan jika gagal
akan muncul pesan seperti pada baris ke 17 dengan font warna merah. Pada
baris ke-29 kita akan mengubah sedikit form untuk untuk menampilkan
pesan sukses atau gagal .

Modul Perkuliahan Pemrograman Web Hal | 135


UNIVERSITAS NEGERI JAKARTA

Apabila form dijalankan di browser dengan memilih salah satu file lalu
menekan tombol submit, maka file akan terupload ke folder_upload dan
muncul pesan sukses.

Gambar 59 Proses upload file pada form


F. Latihan 1-7
1. Penugasan
Buatlah kelompok kecil dengan anggota 3-4 orang kemudian buatlah
sebuah form input data barang dengan komponen form yang terdiri dari
nama barang menggunakan text box, jenis barang menggunakan combobox,
kondisi (baru atau bekas) menggunakan radio button, deskripsi
menggunakan textarea dan foto barang menggunakan upload file. Buatlah
proses tampil data dari isian form, proses validasi form tidak boleh kosong
untuk sebagian inputan, serta proses upload file atau gambar. Hasil pekerjaan
anda dikumpulkan pada pertemuan minggu berikutnya.
2. Petunjuk Pengerjaan
Untuk mengerjakan latihan 1-7 ini, ikuti petunjuk berikut:
a. Buatlah kelompok kecil dengan anggota 3-4 orang.
b. Buatlah Form input data barang sesuai perintah penugasan.

Hal | 136 Modul Perkuliahan Pemrograman Web


UNIVERSITAS NEGERI JAKARTA

c. Buatlah tampilan data dari isian form tersebut.


d. Buatlah validasi form tidak boleh kosong untuk nama barang
e. Buatlah proses proses upload foto barang pada form
f. Penulisan kode program harus direkam menggunakan aplikasi rekam
layar disertai dengan penjelasan audio video. Hasil video anda
diupload di Youtube.
g. Hasil pengerjaan anda dan link video Youtube dikumpulkan kepada
dosen pada pertemuan minggu ke-8 atau saatu UTS.
3. Indikator Penilaian
Indikator penilaian latihan 1-8 mengikuti ketentuan pada tabel berikut:
Tabel 9 Indikator penilaian latihan 1-7

No Indikator Skor
Maksimum
1 Desain form terdiri dari textbox, combobox, radio 20
button, terxarea dan upload file
2 Kode program proses tampil data dari isian form 20
sudah benar dan dapat dijalankan pada browser
3 Kode program validasi form untuk isian nama barang 20
sudah benar dan dapat dijalankan pada browser
4 Kode program upload foto barang sudah benar dan 20
dapat proses upload dapat dilakukan
5 Video tutorial telah diupload di Youtube 20
Total Skor 100

G. Rangkuman
Pemrosesan form merupakan salah satu materi utama dalam
pemrograman web. Form merupakan formulir isian yang digunakan oleh
pengguna untuk berinteraksi dengan web, misalnya melalui form
pendaftaran, form login, form pencarian, form ulasan, form komentar,
mengirim email dan sebagainya. Pemrosesan form mencakup tentang
menampilkan hasil form, validasi form seperti validasi isian kosong, validasi

Modul Perkuliahan Pemrograman Web Hal | 137


UNIVERSITAS NEGERI JAKARTA

jumlah karakter, dan validasi format isian dan terakhir adalah proses pada
form upload file.

Hal | 138 Modul Perkuliahan Pemrograman Web

Anda mungkin juga menyukai