Cara Membuat Form HTML POST dan GET PHP

Nyekrip PHP Tips Trik PHP Cara Membuat Form HTML POST dan GET PHP

Updated on Mei 19, 2015

Admin

Tips Trik PHP

41 Comments

Pada kesempatan kali ini nyekrip akan membahas cara membuat form HTML
dengan metode POST dan GET pada PHP, ketika kita mengisi data pada
sebuah form, informasi yang kita isi dalam form tersebut dapat disampaikan
dan ditransfer ke halaman web yang sama atau halaman web lain. Untuk
bisa mengirim data dari form, kita bisa menggunakan metode GET dan POST
pada PHP.

Perbedaan Pengunaan POST dan GET di PHP

Sebuah data dari form dapat di-submit (disampaikan) melalui dua metode
diatas. Kedua metode tersebut sebenarnya memiliki tujuan yang sama,
perbedaannya terletak pada cara mengirimkan data yang telah diterima. Jika
metode GET menampilkan nilai data pada url untuk mengirimkan data, maka
metode POST menyembunyikan nilai data tersebut pada url.

Form mengirimkan informasi dengan cara menambahkan data pada url

dalam bentuk string Query yang terdiri dari nama_data=nilai_data secara
berpasangan. String ini mengandung nama dan nilai data, yang di-pisah
dengan ampersand &, sedangkan jika data mengandung spasi maka akan di
pisah dengan tanda plus +.
Contoh URL
1 ?nama=nyekrip&alamat=web

Jika dipetakan lebih rinci, maka perbedaan kedua metode diatas adalah.
Metode POST
Menyembunyikan variabel pada URL
Lebih aman
Tidak ada batasan panjang string
Menggunakan $_POST dalam pengambilan variabel
Lebih sering digunakan pada input data melalui form
Penggunaan pada data-data penting seperti password
Metode GET
Menampilkan variabel pada URL
Kurang aman
batasan panjang string sampai 2047 karakter
Menggunakan $_GET dalam pengambilan variabel
Lebih sering digunakan untuk input data melalui link
Penggunaan pada data-data yang kurang penting

Download Form HTML Menggunakan POST dan

GET PHP
Untuk lebih memahami dalam perbedaan penggunaan POST dan GET pada
PHP, maka kita akan membuat form dengan menggunakan metode GET dan
POST, hasil tersebut akan tampil seperti gambar berikut.

Hasil Akhir FORM HTML

Demo Skrip
Download Skrip
INFO: Jika anda download skrip ini dan ingin dicoba di komputer atau laptop,
jangan lupa untuk menjalankan web server terlebih dahulu karena terdapat
skrip PHP didalamnya, kalau belum punya web server yang ter-install
silahkan kunjungi artikel Cara Install XAMPP Web Server di Windows .
Oke, kita sudah mengetahui secara umum bagaimana metode GET dan
metode POST bekerja. Untuk lebih jelas, mari kita bahas secara lebih rinci.

Cara Membuat Form HTML dengan Metode GET

PHP

Penggunaan Metode GET

Seperti yang sudah dijelaskan diatas, sebelum sebuah form mengirimkan

informasi apapun, form tersebut akan mengkonversi nilai data ke dalam
string Query pada URL yang dikenal dengan teknik Url Encoding.
Dalam URL tersebut terdiri dari dari link halaman itu sendiri dan link string
Query yang dipisahkan dengan karakter tanda tanya ?. Lebih jelasnya
perhatikan URL berikut.
Contoh URL
1

http://localhost/nyekrip-form-php/index.php?
fnama=NYEKRIP&lalamat=WEB&method=get&submit=Submit

Mari kita mulai dengan membuat Form HTML dengan method ="get", form
ini akan dijalankan pada sisi klien dan berfungsi untuk user untuk mengisi
informasi.
Skrip HTML
1 <form action="#" method="get">
2 <input type="text" name="nama" placeholder="Nama Kita"></input><br/>
3 <input type="text" name="alamat" placeholder="Alamat Kita"></input><br/>
4 <input type="submit" name="submit" value="Submit"></input>
5 </form>

Setelah membuat Form HTML, selanjutnya kita membuat kode

PHP $_GET untuk menerima informasi yang telah dikirim oleh Form.
Skrip PHP
1 <?php
2 if( $_GET["nama"] || $_GET["alamat"])
3{
4 echo "Halo: ". $_GET['nama']. "<br />";
5 echo "Alamat Anda: ". $_GET["alamat"]. "<br />";
6}
7 ?>

Selain itu, hindari penggunaan metode ini jika yang data yang dikirimkan
berupa data biner seperti mengirimkan gambar atau dokumen Word.
Sumber dari PHP: $_GET Manual

Cara Membuat Form HTML dengan Metode

POST PHP

Penggunaan Metode POST

Seperti yang sudah dijelaskan diatas mengenai perbedaan penggunaan

metode POST dan GET PHP, bahwa pada metode POST mengirimkan data
secara tersembunyi yaitu dengan cara menyembunyikan nilai data tersebut
pada url.
Langkah yang sama seperti diatas, pertama yang kita lakukan adalah
membuat form HTML. Perbedaan pada saat pembuatan form terletak pada

saat penambahan atribut method pada elemen form. Jika pada metode GET
menggunakan atribut method ="get", maka pada metode post menggunakan
atribut method ="post".
Skrip HTML
1 <form action="#" method="post">
2 <input type="text" name="nama" placeholder="Nama Kita"></input><br/>
3 <input type="text" name="alamat" placeholder="Alamat Kita"></input><br/>
4 <input type="submit" name="submit" value="Submit"></input>
5 </form>

Selanjutnya kita membuat kode PHP untuk menangkap data hasil kiriman
form tersebut. Jika pada metode GET kita menggunakan $_GET, maka pada
metode post kita menggunakan $_POST.
Skrip PHP
1 <?php
2 if( $_POST["nama"] || $_POST["alamat"])
3{
4 echo "Halo: ". $_POST['nama']. "<br />";
5 echo "Alamat Anda: ". $_POST["alamat"]. "<br />";
6}
7 ?>

String Query yang di-generate menggunakan metode POST tidak akan

ditampilkan dalam address bar, dengan seperti itu kita bisa mengirimkan
data secara lebih aman. Selain itu kita juga bisa mengirim data biner ke
server tanpa batasan ukuran data.
Sumber dari PHP: $_POST Manual

Skrip atau Kode Lengkap Cara Membuat Form

HTML
Untuk memahami lebih dalam tentang perbedaan penggunaan, mari kita
membuat Form seperti demo diatas. Jika anda belum terlalu mengenal skrip
HTML dan ingin berlatih membuat halaman HTML sederhana, silahkan anda
mengunjungi artikel CARA MEMBUAT HALAMAN WEB SEDERHANA

Membuat Form HTML: index.php

Berikut adalah skrip HTML untuk membuat Form.

Skrip HTML
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3

<!DOCTYPE html>
<html>
<head>
<title>PHP GET and POST Method Example</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/metode.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form method="get" action="index.php" id="form">
<h2>NYEKRIP.COM FORM HTML DENGAN PHP</h2><hr/>
<label>Nama :</label>
<input type="text" name="fnama" id="fnama" />
<label>Alamat :</label>
<input type="text" name="lalamat" id="lalamat" />
<label>Pilih Metode :</label>
<span><input type="radio" name="method" value="get" checked> GET
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="method" value="post" > POST </span>
<input type="submit" name="submit" id="submit" value="Submit">
</for>
<?php include "proses.php";?>
</div>
</div>
</body>
</html>

Membuat Skrip/Kode PHP: proses.php

Berikut adalah kode PHP dengan menggunakan metode POST dan GET.
Skrip PHP
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7

<?php
if(isset($_POST['fnama']))
{
$fnama = $_POST['fnama'];
$lalamat = $_POST['lalamat'];
echo "<span class='success'>Dengan <b>METODE POST</b></span><br/>";
echo "Nama : ".$fnama."<br/>Alamat : ".$lalamat;
}
//-------------------------------------------------------------------if(isset($_GET['fnama']))
{
$fnama = $_GET['fnama'];
$lalamat = $_GET['lalamat'];
echo "<span class='success'>Dengan <b>METODE GET</b></span><br/>";
echo "Nama : ".$fnama."<br/>Alamat : ".$lalamat;
}
?>

Membuat Skrip jQuery: metode.js

Pada skrip berikut kita menggunakan javascript untuk menangkap nilai dari
radio button. Nilai dari radio button tersebut menentukan metode apa yang
akan kita pakai.
Skrip Javascript
1
2
3
4
5
6
7
8
9
1
0

$(document).ready(function(){
$("input[type=radio]").change(function(){
var method = $(this).val();
$("#form").attr("method", method);
});
$("#submit").click(function(){
var fnama = $("#fnama").val();
var lalamat = $("#lalamat").val();

1
1
1
2
1
3
1
4
1
5
1
6
1
7 });
1 });
8
1
9
2
0

if( fnama != '' || lalamat !='' ){

return true;
}
else{
alert("Tolong diisi...!!!!!!");
return false;
}

Membuat skrip CSS: style.css

Seperti biasa agar tampilan form lebih bagus, kita akan menambahkan skrip
CSS berikut.
Skrip CSS
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8

.container {
width: 50%;
margin: 0 auto;
}
h2{
background-color: #53bd84;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
color: #fff;
}
span{
display: block;
margin-bottom: 20px;
color: red;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: 0;
font-size: 14px;
}
b{

1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4

color:green;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.main{
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
font-family: raleway;
float:left;
margin-top:15px;
}
input[type=text]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
input[type=radio]{
margin: 10px 10px 0 10px;
}
label{
color: #53bd84;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(#53bd84 5%, #fff 100%);
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}

9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7
6
7
7
7
8

Sekian tutorial Cara membuat Form HTML dengan POST dan GET di PHP,
semoga dengan mengetahui perbedaan penggunaan dalam membuat Form
HTML menggunakan metode POST dan metode GET, diharapkan agar kita
lebih condong untuk menggunakan metode POST karena metode ini selain
aman juga bebas dari batasan ukuran data (kasus mengirim data biner).
Happy Nyekrip!