Hal. 1 Form dan Variabel Oya Suryana http://ozs.web.id Lisensi Dokumen: Copyright 2013 ozs.web.id Dokumen ini dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari penulis. A. Form Form didalam html berfungsi untuk menampung data isian yang akan diproses lebih lanjut baik disimpan atau dihitung. Tag Form memiliki beberapa atribut dan komponen tergantung dari jenis data yang akan dikirim. Berikut syntax penulisan form didalam html : <form name= nama_form method= method_pengiriman_data action= file_tujuan> {Komponen input } </form> Keterangan Name : Setiap form memiliki nama, hal ini untuk mengidentifikasi jika dalam sebuah file html / php terdapat dua form atau lebih Method : Method merupakan metode pengiriman data yang diinput ke file yang dituju Action : Merupakan file yang akan dijalankan ketika user menekan tombol submit (misal : tombol simpan, hapus, delete atau update Adapun yang termasuk komponen input dalam html adalah : a. Text Komponen input dengan type text tepat digunakan untuk menerima masukan data berupa karakter atau numerik bahkan hampir semua karakter bisa ditampung, pemilihan tipe ini cocok untuk menampung data seperti nama, nomor induk, atau alamat email. Berikut syntax-nya : <input type= text name= nama_komponen size= n maxlength= n value= nilai > Atribut diatas yang wajib ada adalah atribut name dan type, sedangkan atribut size maxlength dan value disesuaikan dengan kebutuhan ketika membangun aplikasi. <input type= text name= no_induk size= 8 maxlength= 8 >
Hal. 2 b. Password Komponen ini lebih tepat digunakan untuk menampung data berupa password dimana setiap karakter aan disembunyikan dan diganti dengan karakter * (bintang). Adapun syntax-nya adalah sebagai berikut <input type= password name= nama_komponen size= n maxlength= n > Contoh penggunaan : <input type= password name= kata_sandi size= 5 maxlength= 5 > c. Radio Komponen ini lebih tepat digunakan untuk membuat pilihan dimana item yang dipilih hanya boleh satu pilihan tidak boleh lebih, misal untuk memilih jenis kelamin, memilih jurusan, dan item yang disediakan relatif sedikit, apabila banyak lebih baik gunakan komponen <select>. Adapun syntax-nya adalah sebagai berikut <input type= radio name= nama_komponen checked= checked value= nilai > Contoh penggunaan : <input type= radio name= jenis_kelamin value= L > Laki-laki <input type= radio name= jenis_kelamin value= P > Perempuan d. Checkbox Komponen ini lebih tepat digunakan untuk membuat pilihan dimana item yang dipilih boleh satu pilihan bahkan boleh lebih, misal untuk memilih hobby. Adapun syntax-nya adalah sebagai berikut <input type= checkbox name= nama_komponen value= nilai > <input type= checkbox name= hobby1 value= 1 >Bola Volley <input type= checkbox name= hobby2 value= 2 >Bola Basket <input type= checkbox name= hobby3 value= 3 >Sepak Bola e. Submit Komponen ini digunakan untuk membuat tombol untuk melakukan perubahan data, adapun format syntax nya adalah sebagi berikut : penyimpanan data atau <input type= submit name= nama_komponen value= text > <input type= submit name= simpan value= Simpan Data > f. Reset Komponen ini digunakan untuk mengosongkan form yang sedang diisi, adapun format syntax nya adalah sebagi berikut : <input type= reset name= nama_komponen value= text > <input type= reset name= tombol_reset value= Kosongkan Form >
Hal. 3 g. Textarea Komponen ini mirip dengan komponen text namun memiliki kelebihan bisa diatur jumlah baris untuk menampung data. Adapun format syntax-nya adalah sebagai berikut : <textarea name= nama_komponen cols= lebar_komponen rows= jml_baris >value</textarea> <textarea name= alamat cols= 10 rows= 5 ></textarea> h. Select Komponen ini digunakan untuk membuat pilihan dropdown, pilihan ini cocok digunakan jika jumlah pilihan relatif banyak. Adapun syntaxnya adalah : <select name= nama_komponen > <option value= nilai_pilihan_1 selected>text pilihan 1</option> <option value= nilai_pilihan_2 >Text pilihan 2</option> <option value= nilai_pilihan_n >Text pilihan n</option> </select> B. Variabel Variabel merupakan suatu tempat yang disediakan untuk menampung nilai yang sering berubahubah. Variabel merupakan lawan daripada konstanta. 1. Aturan Pembuatan Variabel Variabel sebelum digunakan harus didefinisikan terlebih dahulu, pendefinisian variabel dalam PHP memiliki sejumlah aturan. Adapun aturan-aturan dalam pembuatan variabel adalah sebagai berikut : Diawali dengan tanda dollar ($) Penamaan hanya boleh menggunakan huruf dari A-Z, a-z, gabungan huruf dan angka Penamaan variabel tidak boleh menggunkan operator matematika seperti +, -, /, *, %, (, ), {, } Variabel bersifat case sensitif (membedakan huruf besar dan kecil). Jika nama variabel terdiri dari dua kata, gunakan tanda underscore (_) atau menggunakan style CamelCaps, jangan menggunakan spasi. Nama variabel tidak boleh terdiri dari angka seluruhnyaa. 2. Contoh variabel Dari aturan penamaan tersebut maka berikut adalah contoh-contoh variabel yang benar dan yang salah. a. Contoh variabel yang benar : $nama_siswa $NamaSiswa $Siswa_ke1 b. contoh variabel yang salah : $nama-siswa Salah! menggunakan tanda minus $nama siswa Salah! menggunakan spasi $123 Salah! terdiri dari angka seluruhnya 3. Metode pengisian / Pengiriman variabel
Hal. 4 Pengiriman variabel / pengisian variabel untuk digunakan di proses selanjutnya dalam PHP terdapat dua metode, adapun kedua metode itu adalah : a. POST Metode post digunakan jika nilai variabel dikirim melalui input pada komponen form didalam HTML. b. GET Metode post digunakan jika nilai variabel dikirim URL (alamat internet) didalam browser. 4. Memanggil / Menampilkan Variabel Pemanggilan variabel yang dikirim tergantung pada metode pengiriman apakah menggunakan POST atau GET. a. JIka variabel dikirim dengan metode POST, maka cara menampilkan di browser adalah sebagai berikut : echo $_POST[ nama_variabel ]; b. JIka variabel dikirim dengan metode GET, maka cara menampilkan di browser adalah sebagai berikut : echo $_GET[ nama_variabel ]; C. Contoh Penggunaan Form, Komponen dan Variabel Contoh penerapan form dan variabel dalam pemrograman web. a. Buat file tambah.php Pada file tambah.php ketik code berikut : <?php include("konstanta.php");?> <html> <head> <title><?php echo TITLE_WEB;?></title> <body> <table border="1" width="100%" cellspacing="0"> <tr height="100"><td colspan="2" bgcolor="yellow"><?php echo header_web ;?></td></tr> <tr height="350" valign="top"><td width="200" bgcolor="#dedede"><?php echo menu_kiri;?></td> <td> <!-- awal konten--> <h4 align="center">form penambahan data</h4> <p>untuk menambah data, silahkan masukan data siswa pada form dibawah ini.</p> <form name="form_data_siswa" method="post" action="simpan.php"> <table align="center" border="1"> <tr><td>nomor induk</td> <td><input type="text" name="no_induk"/></td></tr> <tr><td>nama lengkap</td> <td><input type="text" name="nama_lengkap"/></td></tr> <tr><td>jenis kelamin</td> <td><input type="radio" name="jk" value="l">laki-laki <input type="radio" name="jk"
Hal. 5 value="p">perempuan</td></tr> <tr valign="top"><td>hoby</td><td><input type="checkbox" value="1" name= hoby1 >bola basket<br/> <input type="checkbox" value="2" name= hoby2 >bola volley<br/> <input type="checkbox" value="3" name= hoby3 >membaca<br/> </td></tr> <tr><td>tempat lahir</td> <td><input type="text" name="tempat_lahir"/></td></tr> <tr><td>tanggal lahir</td> <td><input type="date" name="tempat_lahir"/></td></tr> <tr><td>pekerjaan</td> <td> <select name="pekerjaan_ot"> <option value="1">pegawai negeri sipil</option> <option value="2">kary. bumn/bumd</option> <option value="3">pedagang</option> <option value="4">petani</option> <option value="5">wiraswasta</option> </select></td></tr> <tr valign="top"><td>alamat lengkap</td> <td><textarea name="alamat" rows="5" cols="35"></textarea></td></tr> <tr valign="top"><td colspan="2"><input type="submit" name="simpan" value="simpan data"> <input type="reset" name="reset" value="kosongkan form!"> </td></tr> </table> </form> <!-- akhir konten--> </td> </tr> <tr height="50"><td colspan="2" bgcolor="red"><?php echo kaki_web ;?></td></tr> </table> </body> </head> </html> Jalankan di browser maka akan tampak seperti pada gambar dibawah
Hal. 6 b. Buat file simpan.php Pada file simpan.php ketik code berikut : <?php include("konstanta.php");?> <html> <head> <title><?php echo TITLE_WEB;?></title> <body> <table border="1" width="100%" cellspacing="0"> <tr height="100"><td colspan="2" bgcolor="yellow"><?php echo HEADER_WEB ;?></td></tr> <tr height="350" valign="top"><td width="200" bgcolor="#dedede"><?php echo MENU_KIRI;?></td> <td> <!-- awal konten--> <h4 align="center">form penambahan data</h4> <p>untuk menambah data, silahkan masukan data siswa pada form dibawah ini.</p> <?php $no_induk=$_post['no_induk']; $nama_lengkap=$_post['nama_lengkap']; $jk=$_post['jk']; $hoby1=$_post['hoby1']; $hoby2=$_post['hoby2']; $hoby3=$_post['hoby3']; $tempat_lahir=$_post['tempat_lahir']; $tanggal_lahir=$_post['tanggal_lahir']; $pekerjaan_ot =$_POST['pekerjaan_ot']; $alamat=$_post['alamat']; echo "nomor induk : ".$no_induk."<br/>"; echo "nama lengkap : ".$nama_lengkap."<br/>"; echo "jenis kelamin : ".$jk."<br/>"; echo "hoby : ".$hoby1."<br/>"; echo $hoby2."<br/>"; echo $hoby3."<br/>"; echo "tempat lahir : ".$tempat_lahir."<br/>"; echo "tanggal lahir : ".$tanggal_lahir."<br/>"; echo "pekerjaan orang tua : ".$pekerjaan_ot."<br/>"; echo "alamat : ".$alamat;?> <tr height="50"><td colspan="2" bgcolor="red"> <?php echo KAKI_WEB ;?></td></tr> </table> </body> </head> </html>
Hal. 7 Perhatikan gambar diatas! Mengapa hoby, jenis kelamin dan pekerjaan yang muncul adalah kode nya bukan tulisanya? jawabannya akan dibahas pada materi Clausa IF dan CASE. DAFTAR PUSTAKA http://id.wikipedia.php http://www.w3schools.com/html http://www.w3schools.com/php http://ozs.web.id