3. Modul Belajar
M M O O D D U U L L
4
4 . . F F O O R R M M
Pokok Bahasan : Pengelolaan Form Sebagai Input Data
Materi :
1. Pengantar
2. Form
3. Upload File
Introduction
Web menerima input dari pengunjung atau pemakai dengan m enggunakan method GET dan POST.
Method GET
Akan mengirimkan da ta bersama pada URL, Secara dasar Method GET digunakan untuk melakukan query atau memberikan input dengan data yang sederhana dan mudah.
Method POST
Akan mengirimkan data secara terpisah pada URL, digunakan untuk mengirimkan data yang besar dan kompleks .
Form
Pemrograman web umumnya membuatkan form isian yang harus diisi oleh pengunjung agar data dikirimkan kepada server web. Form isian dalam HTML menggunakan tag <form> dan </form>.
<FORM ACTION=action base> form tags </FORM> <FORM METHOD=method> form tags </FORM> <FORM ENCTYPE=media type> form tags </FORM> <FORM ACTION=action base TARGET="target window name "> form tags </FORM> <FORM SCRIPT= URL> form tags </FORM> Note : target window name diisikan berupa:
_blank _self _parent _top
Didalam tag <form> dan </form> didefinisikan jenis masukan yang dapat dikirimkan dari browser web pemakai kepada server web. Jenis masukan yang dapat dikirimkan terdiri atas :
1. Text
2. Pilihan dengan menggunakan tombol radio (satu pilihan saja)
3. Pilihan dengan menggunakan tombol chexbox (lebih dari satu pilihan)
4. List pilihan (satu atau lebih pilihan)
5. Password
6. Hidden
7. Button
8. Textarea Setiap jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis, nama dan nilai default. Elemen masukan ini dinyatakan deng an menggunakan tag <input>.
Form Input Check Box
name value
<INPUT TYPE=CHECKBOX NAME=
VALUE= >
name value
<INPUT TYPE=CHECKBOX NAME=
VALUE= CHECKED> Bentuk Tampilan :
Form Input File
<INPUT TYPE=FILE NAM E=name ACCEPT=mime type list> Bentuk Tampilan :
Form Input Hidden
<INPUT TYPE=HIDDEN NAME= name VALUE=value>
Form Input Image
<INPUT TYPE=IMAGE NAME= name SRC="URL"> <INPUT TYPE=IMAGE NAME= name SRC="URL" ALIGN="alignment">
Form Input Password
<INPUT TYPE=PASSWORD NAME= name> <INPUT TYPE=PASSWORD NAME= name MAXLENGTH=length> <INPUT TYPE=PASSWORD NAME= name SIZE=size> <INPUT TYPE=PASSWORD NAME= name VALUE=value>
Form Input Radio Button
<INPUT TYPE=RADIO NAME= name VALUE=value> <INPUT TYPE=RADIO NAME= name VALUE=value CHECKED> Bentuk Tampilan :
Form Input Range
This is not supported in many browsers. <INPUT TYPE=RANGE NAME= name MIN=min MAX=max> <INPUT TYPE=RANGE NAME= name MIN=min> MAX=max VALUE=value>
Form Input Reset
<INPUT TYPE=RESET> Bentuk Tampilan :
Form Input Submit
<INPUT TYPE=SUBMIT> <INPUT TYPE=SUBMIT NAME= name> <INPUT TYPE=SUBMIT VALUE= value>
Form Input Button
<INPUT TYPE=BUTTON> <INPUT TYPE=BUTTON NAME= name> <INPUT TYPE=BUTTON VAL UE=value> Bentuk Tampilan :
Form Input Text
<INPUT TYPE=TEXT NAME= name> <INPUT TYPE=TEXT NAME= name MAXLENGTH=length> <INPUT TYPE=TEXT NAME= name SIZE=size> <INPUT TYPE=TEXT NAME= name VALUE=value>
Bentuk Tampilan : Form Select
<SELECT NAME=name> option entries </SELECT> <SELECT NAME=name MULTIPLE> option entries </SELECT> <SELECT NAME=name SIZE=size> option entries </SELECT> <SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units> option entries </SELECT> <OPTION> content <OPTION SELECTED> content <OPTION VALUE=value>
content <OPTION SHAPE= shape>
<TEXTAREA NAME= name COLS=# columns ROWS=# rows> content
</TEXTAREA>Upload File
Upload merupakan proses penyalinan data yang ada dari komputer client ke komputer server. Faslilitas upload memungkinkan aplikasi web misalnya pendaftaran keanggotaan yang menggunakan foto, atau lainnya. Namun biasanya upload digunakan untuk mempermudah administrasi.
Elemen yang dibutuhkan untuk dapat melakukan Upload File melalui browse maka harus disiapkan : Sebuah form untuk menyajikan tampilan agar pemakai memilih file yang akan di
upload File yang akan di upload (dan tentu saja browser yang mendukung fungsi upload)
Tempat dalam server yang digunakan untuk menyimpan file yang akan di upload
Script untuk menempatkan file ketempat yang ditentukan dalam server.
Form Upload
Pada tag upload harus ada atribut “enctype= multipart/form data”, yang digunakan untuk memberitahu browser dan server bahwa yang dikirimkan bukan hanya data nama file yang dientrikan pad a tampilan browser tetapi juga data berupa isi dari nama file yang diacu pada isian form.
Sebuah variable dengan nama MAX_FILE_SIZE dengan tipe hidden harus disediakan, isi atribut pada variable MAX_FILE_SIZE digunakan untuk mengendalikan besar file maksimum yang akan diupload kedalam server. MAX_FILE_SIZE harus diletakkan sebelum elemen input dengan type=”file”, Angka pada value menunjukkan jumlah byte maksimum.
Contoh : Form_upload.php <html> </head><title></title> <body> <h1>Input Nama File Untuk Upload </h1> <br /> Klik tombol Browse untuk memilih ....!!!<br /> <form enctype="multipart/form -data" method="post" action="proses_upload.php">
Nama File : <input type="file" name="file1" size ="30" /> <br /> <input type="submit" value="Upload" /> </form> </body> </html> Proses_upload.php <html> <head> <title></title> </head> <body>
<h1>Simpan file yang diupload</h1> <?
$namafile = $HTTP_POST_FILES['file1']['name']; ?>
<p>Nama File : <?echo $namafile;?></p> <br> <? if ($file1!="none") { copy("$file1","files/$namafile") or die ("No files"); } else { die("Tidak ada file yang diupload");
} ?> </body> </html>
Exercise
1. Proses Form dengan Metode : GET
a. Untuk membuat inputan, dan beri nama file : metod eget.php <html> <head> <title> Form method GET </title> </head> <body>
<h1>Input</h1> <form action="methodgetproses.php" method="get"> Masukkan nama : <input type"text" name="nama" size="25"> <input type="submit" value="Proses"> </form>
</body> </html>
b. Buat file untuk memproses variabel yang diberikan oleh file metodeget.php, beri nama filenya : methodgetproses.php <html> <head> <title> Method GET proses </title>
<body> Data nama yang diinputkan adalah : <?echo $_GET["nama"]?>
</body> </html>
2. Proses input data dengan password menggunakan metode : POST
a. Untuk membuat inputan, dan beri nama file : metodepost.php <html> <head> <title>Contoh Form dengan POST</title> </head> <body>
<form action="proc_login.php" method="post" > <h1>Only for authorized user</h1> <hr> Username : <input type="text" name="username"> <br> Password : <input type="password" name="password"> <br> <input type="submit" value="login"> </form>
</body> </html>
b. Buat file untuk memproses variabel, beri nama filenya : proc_login.php <html> <head> <title>Contoh Form dengan POST</title> </head> <body> <form action="proc_login.php" method="post"> <h1>Only for authorized user</h1> <hr> Username : <input type="text" name="username"> <br> Password : <input type="password" name="password"> <br> <input type="submit" value="login"> </form> </body> </html>
Home Exercise .
Buatlah program untuk melakukan proses perhitungan dibawah ini, dengan GET