Anda di halaman 1dari 8

LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : FORM
NAMA : RIZKY FACHRIZZAR REVALDY
NIM : 175150200111015
ASISTEN : 1. DANANG TRISDIANA PUTRA
2. DARY ARDIANSYAH HARYONO
TGL PRAKTIKUM : 01 MARET 2019

LATIHAN 1
A. Soal

Tulis kode berikut.

1 <body>
2 <form action=”proses.php” method=”post”>
3 <input type=”text” name=”nama”>
4 <input type=”submit” value=”Go”>
5 </form>
6 </body>

Jalankan kode tersebut di browser lalu ganti metodenya dengan GET. Lihat perbedaannya
pada URL di browser. Beri kesimpulan.

B. Screenshoot

Ketika program dijalankan:

Menggunakan POST:

Menggunakan GET:
C. Syntax

//mengguanakan POST
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <form action='proses.php' method='post'>
8 <input type='text' name='nama'>
9 <input type='submit' value='Go'>
10 </form>
11 </body>
12 </html>
//menggunakan GET
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <form action='proses.php' method='get'>
8 <input type='text' name='nama'>
9 <input type='submit' value='Go'>
10 </form>
11 </body>
12 </html>

D. Penjelasan
Pada method post, nilai dari masukan pada form tidak akan ditampilkan di URL browser
sedangkan method get nilai masukan pada form akan ditampilkan pada URL browser. Nilai
yang ditampilkan tersebut dinamakan String query.

LATIHAN 2
A. Soal

Untuk beberapa kasus berikut, tentukan metode apakah yang cocok untuk digunakan dan
beri alasan.
1. Form untuk login.
2. Form untuk mengirim gambar desain poster ke website percetakan.
3. Form untuk mencari suatu artikel di situs berita.
4. Form untuk search engine

B. Penjelasan
1. Form untuk login menggunakan method POST untuk menjaga keamaan dan privasi
dari user sehingga data-data untuk login tidak dapat dilihat oleh orang lain melalui URL.
2. Form untuk mengirim gambar menggunakan method POST karena method GET tidak
bisa menyisipkan URL dari file gambar yang ingin dikirimkan. Selain itu method POST
dapat menjaga kerahasiaan data gambar yang akan dikirim.
3. Form untuk mencari suatu artikel menggunakan method GET agar lebih mudah ketika
suatu saat ingin mencari artikel tersebut karena nilainya ditampilkan di URL.
4. Form untuk search engine menggunakan method GET agar ketika mencari sesuatu kita
bisa tahu apa yang sedang kita cari dengan melihat URL.

LATIHAN 3
A. Soal

Tulis kode di bawah ini.

1 <form action="proses02.php" method="post“ name="input">


2 Nama Anda: <input type="text" name="nama" required>
3 <br>
4 <input type="submit" name="input" value="Input">
5 </form>

Kemudian tulis kode di bawah ini.

1 <?php
2 if (isset($_POST['input'])) {
3 $nama = $_POST['nama'];
4 echo "Nama Anda: <b>$nama</b>";
5 }

a. Jalankan kode di atas kemudian isikan data input dan tekan tombol input. Apa yang
terjadi?
b. Ulangi dengan mengosongkan data input dan amati apa yang terjadi.
c. Jelaskan alur pengiriman data dari form yang ada di kode tersebut!

B. Screenshoot

Ketika program dijalankan:

Menekan tombol input tanpa mengisi form:


Menekan tombol input dengan mengisi form:

C. Syntax

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <form action="proses02.php" method="post"
name="input">
8 Nama Anda: <input type="text" name="nama" required>
9 <br>
10 <input type="submit" name="input" value="Input">
11 </form>
12 </body>
13 </html>

//proses02.php
1 <?php
2 if (isset($_POST['input'])) {
3 $nama = $_POST['nama'];
4 echo "Nama Anda: <b>$nama</b>";
5 }
6 ?>

D. Penjelasan
a. Menampilkan text “Nama Anda: “ dan nilai dari text yang kita masukkan di form
sebelumnya
b. Jika form input tidak diisi maka akan menampilkan peringatan “Please fill out this field”
karena pada atribut input ditambahkan keyword required yang mengharuskan form
input tersebut harus memiliki isian.
c. Ketika pertama dijalankan akan muncul form yang bisa diisi user, kemudian user
melakukan input data pada form tersebut yang jika tidak diisi akan menampilkan
peringatan. Kemudian nilai masukan tersebut akan disimpan dalam variabel nama yang
akan dikirimkan ke server dengan method post. Server kemudian memerintahkan
browser untuk mencetak nilai dari variabel nama tersebut yang terletak di script php
proses02
LATIHAN 4
A. Soal

Ubah kembali kode pada Latihan 3 dengan menghapus tulisan required pada baris 2.
Jalankan kode dan kosongi data nama kemudian tekan tombol Input. Apa yang terjadi?
Jelaskan apa fungsi dari kode required.

B. Screenshoot

Ketika program dijalankan:

Ketika menekan tombol input tanpa memberi input:

C. Syntax

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <form action="proses02.php" method="post"
8 name="input">
9 Nama Anda: <input type="text" name="nama">
10 <br>
11 <input type="submit" name="input" value="Input">
12 </form>
13 </body>
14 </html>

D. Penjelasan
Fungsi dari keyword required adalah untuk memberikan penanda kepada suatu form bahwa
inputan di form tersebut wajib diisi. Jika tidak diisi akan memberikan peringatan yaitu
“please fill out this field”. Dengan adanya keyword required user tidak perlu takut jika lupa
mengisi field yang penting karena tidak bisa disubmit sebelum diisi.
LATIHAN 5
A. Soal

Tulis kode berikut.

1 <form enctype="multipart/form-data" action="upload.php"


method="post">
2 Choose a file to upload:
3 <input name="uploadedfile" type="file" /> <br>
4 <input type="submit" value="Upload File" />
5 </form>

Tulis kode berikut.

1 <?php
2 $target_path = "uploads/";
3 $target_path = $target_path .
4 basename($_FILES['uploadedfile']['name']);
5
6
7 if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],
8 $target_path)) {
echo "The file ".
9 basename( $_FILES['uploadedfile']['name']). " has been
10 uploaded";
11 } else {
echo "There was an error uploading the file, please try
again!";
}

Di manakah posisi file setelah proses upload berhasil?

Apakah hasil output dari kode tersebut setelah dijalankan?

B. Screenshoot

Ketika program dijalankan:

Ketika menekan tombol choose file:


Ketika menekan tombol upload file (dengan asumsi sudah membuat folder uploads):

Isi dari folder uploads:

C. Syntax

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <form enctype="multipart/form-data"
action="upload.php" method="post">
8 Choose a file to upload:
9 <input name="uploadedfile" type="file" /> <br>
10 <input type="submit" value="Upload File" />
11 </form>
12 </body>
13 </html>

1 <?php
2 $target_path = "uploads/";
3 $target_path = $target_path .
basename($_FILES['uploadedfile']['name']);
4
5
6 if(move_uploaded_file($_FILES['uploadedfile']['tmp_name
'], $target_path)) {
7 echo "The file ".
basename( $_FILES['uploadedfile']['name']). " has been
uploaded";
8 } else {
9 echo "There was an error uploading the file, please
try again!";
10 }
11 ?>

D. Penjelasan
Ketika pertama program ditampilkan akan terdapat dua tombol yaitu choose file dan upload
file, choose file berfungsi untuk memilih file gambar dari direktori di komputer, setelah itu
setelah dipilih bisa menekan tombol upload file yang befungsi untuk memindahkan file
gambar tersebut ke folder bernama uploads yang berada di direktori htdocs. Jika hasil
upload sukses maka akan mencetak “The file [nama_file] has been uploaded”.

Anda mungkin juga menyukai