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 +.|
1
|
?nama=nyekrip&alamat=web
|
Metode POST
- Menyembunyikan variabel pada URL
- Lebih aman
- Tidak ada batasan panjang string
- Menggunakan
$_POSTdalam pengambilan variabel - Lebih sering digunakan pada input data melalui form
- Penggunaan pada data-data penting seperti password
- Menampilkan variabel pada URL
- Kurang aman
- batasan panjang string sampai 2047 karakter
- Menggunakan
$_GETdalam 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
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
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.|
1
|
http://localhost/nyekrip-form-php/index.php?fnama=NYEKRIP&lalamat=WEB&method=get&submit=Submit
|
method ="get", form ini akan dijalankan pada sisi klien dan berfungsi untuk user untuk mengisi informasi.|
1
2
3
4
5
|
<form action="#" method="get">
<input type="text" name="nama" placeholder="Nama Kita"></input><br/>
<input type="text" name="alamat" placeholder="Alamat Kita"></input><br/>
<input type="submit" name="submit" value="Submit"></input>
</form>
|
$_GET untuk menerima informasi yang telah dikirim oleh Form.|
1
2
3
4
5
6
7
|
<?php
if( $_GET["nama"] || $_GET["alamat"])
{
echo "Halo: ". $_GET['nama']. "<br />";
echo "Alamat Anda: ". $_GET["alamat"]. "<br />";
}
?>
|
Sumber dari PHP: $_GET – Manual
Cara Membuat Form HTML dengan Metode POST PHP
Penggunaan Metode POST
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".|
1
2
3
4
5
|
<form action="#" method="post">
<input type="text" name="nama" placeholder="Nama Kita"></input><br/>
<input type="text" name="alamat" placeholder="Alamat Kita"></input><br/>
<input type="submit" name="submit" value="Submit"></input>
</form>
|
$_GET, maka pada metode post kita menggunakan $_POST.|
1
2
3
4
5
6
7
|
<?php
if( $_POST["nama"] || $_POST["alamat"])
{
echo "Halo: ". $_POST['nama']. "<br />";
echo "Alamat Anda: ". $_POST["alamat"]. "<br />";
}
?>
|
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.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!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
<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.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(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();
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.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
.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{
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;
}
|
No comments:
Post a Comment