3. Modul Belajar

(1)

M

O

D

U

L

4

4 .

.

F

O

R

M

Pokok Bahasan :

Pengelolaan Form Sebagai Input Data

Materi :

(2)

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 .

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>.

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>.

Introduction

(3)

Lebih Lanjut dengan Jenis Masukan pada Form :

 Form Input Check Box

<INPUT TYPE=CHECKBOX NAME=

name

_VALUE=

value

_>

<INPUT TYPE=CHECKBOX NAME=

name

_VALUE=

value

_CHECKED>

Bentuk Tampilan :

 Form Input File

Bentuk Tampilan :

 Form Input Hidden

 Form Input Image

 Form Input Password

<INPUT TYPE=PASSWORD NAME=name>

(4)

Bentuk Tampilan :

 Form Input Radio Button

Bentuk Tampilan :

 Form Input Range

This is not supported in many browsers.

<INPUT TYPE=RANGE NAME=name MIN=min> MAX=maxVALUE=value>

 Form Input Reset <INPUT TYPE=RESET>

Bentuk Tampilan :

 Form Input Submit <INPUT TYPE=SUBMIT>

<INPUT TYPE=SUBMIT NAME=name>

(5)

Bentuk Tampilan :

 Form Input Button <INPUT TYPE=BUTTON>

<INPUT TYPE=BUTTON NAME=name>

Bentuk Tampilan :

 Form Input Text

<INPUT TYPE=TEXT NAME=name>

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>

(6)

 Form Text Area

<TEXTAREA NAME=nameCOLS=# columns ROWS=# rows> content </TEXTAREA>

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 />

(7)

<br />

<h1>Simpan file yang diupload</h1> <?

$namafile = $HTTP_POST_FILES['file1']['name']; ?>

<?

if ($file1!="none") {

copy("$file1","files/$namafile") or die ("No files");

} else {

die("Tidak ada file yang diupload"); }

?> </body> </html>

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>

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

(8)

</head> <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

<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>

</body> </html>

b. Buat file untuk memproses variabel, beri nama filenya : proc_login.php

<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>

(9)