Contoh11 (Form)
Contoh11 (Form) : Webpro
Komponen Form
Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :
Pengolahan Data Dari Form
- Form di HTML dikenal dengan adanya tag
. Di dalam tag pembuka
- Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST akan mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form html.
Form menggunakan Metode Get
Sebagai Contoh silakan kalian buka aplikasi notepad++ kalian ataupun sublime text. lalu ketikan atau masukan coding berikut:
<html>
<head>
<title>Contoh 11 FORM METODE GET</title>
</head>
<body>
<form action=”metodegetproses.php” method=”get”>
Masukkan nama : <input type=”text” name=”nama” size=”25″>
<input type=”submit” value=”Proses”>
</form>
</body>
</html>
Masukkan nama :
Penjelasan coding :
form action=”outputget.php” ; form itu ibarat formulir yang kita isi saat mendaftar dan menulis manual , outputget.php itu seperti tujuan atau petugas yang mengurus,jadi kemana arah form ini akan kita kirim nntinya atau kita serahkan ke siapa.,dan form ini nntinya mengarah ke “outputget.php”
method=”get” ; ada dua metode untuk form ada get dan post nanti akan saya jelaskan perbedaannya.
Masukkan nama : ; sama seperti dipemograman lain seperti visual basic netbeans dan sebagainya yang memiliki form pasti memiliki textfield textarea dan sebagainya,nah untuk membuat textfield pada form itu codingnya input type=”text” ,dan tentu pasti harus diberi variabel nama text field tersebut name=”nama”.
input type=”submit” value=”proses” ; membuat button submit yang akan mengarah sesuai form action yaitu outputget.php , dan value=”proses” ini adalah text yang tampil di button tersebut
- Simpan file di atas di dalam folder c:XAMPPhtdocs ‘(jgn lupa instal dan run xampp)’ buat folder baru untuk menyimpan file didalam folder htdocs. Simpan file dengan nama inputanget.php.
- Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla, google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar “LocalhostNama Folder Penyimpanan”,kemudian pilih file inputanget.php
Ini baru inputget.phpnya nah sekarang waktunya kita buat outputget.php agar button proses dapat bekerja.
ketikan atau masukan coding berikut:
<html>
<head>
<title>Output Get</title>
</head>
<body>
Data Nama Yang Tadi Di Input Adalah : <?php echo $_GET[“nama”];?>
</form>
</body>
</html>
Penjelasan Coding :
; karna form inputannya menggunakan method get maka untuk menampilkannya pun haru dengan “_GET” lalu diikuti dengan variabel namenya [“nama’]
- Simpan file didalam folder yang sama dengan inputanget.php. Simpan file dengan nama outputget.php.
Hasil setelah button proses di inputanget.php diklik.
Lihat tanda panah ada nilai dari variabel nama yaitu nama=fajar+yusuf , ini dikarenakan memakai metode GET
Sekarang kita coba Method POST
Form menggunakan Metode Post
Sebagai Contoh silakan kalian buka aplikasi notepad++ kalian ataupun sublime text. lalu ketikan atau masukan coding berikut:
<html>
<head>
<title>Form Metode Post</title>
</head>
<body>
<form action=”outputpost.php” method=”post”>
Masukkan nama : <input type=”text” name=”nama” size=”25″>
<input type=”submit” value=”Proses”>
</form>
</body>
</html>
Penjelasan coding :
sama seperti penjelasan pada metode get hanya ini diganti methode =”post”.
dan form action=”outputpost.php”
- Simpan file di atas di dalam folder c:XAMPPhtdocs ‘(jgn lupa instal dan run xampp)’ buat folder baru untuk menyimpan file didalam folder htdocs. Simpan file dengan nama inputanpost.php.
- Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla, google chrome, internet explorer atau jenis browser lain. Ketikkan pada address bar “LocalhostNama Folder Penyimpanan”,kemudian pilih file inputanpost.php
Ini baru inputpost.phpnya nah sekarang waktunya kita buat outputpost.php agar button proses dapat bekerja.
ketikan atau masukan coding berikut:
<html>
<head>
<title>Output Post</title>
</head>
<body>
Data Nama Yang Tadi Di Input Adalah : <?php echo $_POST[“nama”];?>
</form>
</body>
</html>
Data Nama Yang Tadi Di Input Adalah :
Penjelasan coding:
sama seperti outputget,hanya disini jika method form yg digunakan post maka pemanggilannya pun harus beserta “_POST” dan diikuti dengan nama variabel yg dipanggil [“nama”]
Simpan file didalam folder yang sama dengan inputanget.php. Simpan file dengan nama outputput.php.
Dengan menggunakan method post nilai dari suatu variabelnya tidak terlihat berbeda dengan method get yang terlihat..
Jika ada pertanyaan silakan berkomentar 🙂
MATERI WEBPROGRAMMING
Jika anda baru di pemrogramman web silakan belajar dari materi pertama :
Materi ke-1 : Dasar-dasar Web
Materi ke-2 : Pemberian Warna
Materi ke-3 : Membuat Table
Materi ke-4 : Dasar PHP
Materi ke-5 : Tipe Data
Materi ke-6 : Konstanta dan Komentar
Materi ke-7 : Operator
Materi ke-8 : Operator Perbandingan
Materi ke-9 : Operator Logika
Materi ke-10 : Operator String
Materi ke-11 : Form
Materi ke-12 : Input dan Output dalam 1 Form
Materi ke-13 : Percabangan
Materi ke-14 : Pembuatan Database Mysql
Materi ke-15 : Buku Tamu
Materi ke-16 : Buku Tamu Lanjutan
Materi ke-17 : Artikel
Materi ke-18 : Halaman Index Pengunjung