Cara menampilkan hasil inputan form php

Question

Ini adalah seri Tutorial PHP yang ketiga di Jago Ngoding. Kita telah membahas Tutorial PHP Tingkat Dasar, dan juga Tingkat Menengah. Pada seri lanjutan ini, kita akan mempelajari bahasa pemrograman PHP untuk membangun sebuah web dinamis.

Table of Contents Show

Apa itu Web Dinamis?
Apa itu Form?
Membuat Form Sederhana
Menampilkan Data Yang Dikirim Melalui Form
Perbedaan Metode GET dan POST
Lalu, apa bedanya POST dan GET?
Menggunakan Variable <?php # ... # ... # di sini nanti kita akan tampilkan variabel $nama dan $alamat if ($nama) { echo "Nama: {$nama} "; } if ($alamat) { echo "Alamat: {$alamat} "; } ?> 8
Mengirim Data ke File Yang Berbeda
Contoh Berbagai Macam Tipe Isian Data
Pembahasan Selanjutnya
Apa itu form pada pemrograman?
Untuk menjelaskan kemana data form akan dikirimkan adalah fungsi dari?

Apa itu Web Dinamis?

Secara umum, web itu terbagi menjadi 2: web statis dan web dinamis. Web statis adalah web yang dibangun dengan kode HTML yang bersifat tetap (atau statis). Kontennya tidak berubah. Itu-itu saja. Sedangkan web dinamis: ia adalah suatu web yang kontennya berubah-ubah. Web dinamis biasanya memiliki kemampuan: login, baca data, tambah data, ubah data, dan hapus data.

PHP merupakan salah satu bahasa pemrograman populer untuk membangun sebuah web dinamis.

Apa itu Form?

Untuk membangun sebuah web dinamis, kita membutuhkan inputan data. Di antara inputan data yang paling dasar dalam halmaan web adalah: form.

Apa itu Form?

Form merupakan sintaks HTML yang berisi kumpulan kolom isian data, misal:

form login yang berisi isian nama pengguna dan kata sandi.
form pendaftaran yang berisi isian nama, jenis kelamin, tanggal lahir, alamat, surel, dan lain-lain.

Dalam pembuatan web dinamis, kita bisa melakukan pengiriman data dari form HTML untuk kemudian data tersebut akan diproses lebih lanjut oleh bahasa pemrograman PHP.

Membuat Form Sederhana

Bahasa yang kita gunakan untuk membuat form untuk web dinamis adalah HTML.

Silakan anda membuat file dengan nama

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

4

Lalu isi dengan kode program di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membuat Form Sederhana</title>
</head>
<body>
    <form>
        <div>
            <label>Nama</label> <br>
            <input name="nama" type="text" placeholder="Masukkan nama">
        </div>
        <div>
            <label>Alamat</label> <br>
            <input name="alamat" type="text" placeholder="Masukkan alamat">
        </div>
        <div>
            <button>Submit</button>
        </div>
    </form>
</body>
</html>

Kode program di atas akan membuat 2 buah input teks:

Input bertipe teks dengan name

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

5

Input bertipe teks dengan name

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

6

Jika kita eksekusi file

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

4 di atas, output yang kita dapat adalah seperti berikut:

Menampilkan Data Yang Dikirim Melalui Form

Kita telah berhasil membuat sebuah form dengan 2 buah isian data. Sekarang:

Kita coba isi inputan nama dan inputan alamat.
Lalu kita klik tombol submit.
Setelah itu kita perhatikan url browser kita.

Misal saya isi “Nurul Huda” untuk nama, dan “Surabaya” untuk alamat. Maka saya mendapatkan url seperti berikut:

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

Bagian url setelah tanda

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

8 dinamakan query string. Dan pada pembahasan tentang , kita telah mempelajari bagaimana cara mengakses query string dengan variabel

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

9.

Untuk menampilkan data hasil inputan, ikuti langkah-langkah berikut:

Cari tag

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

0 dari kode di atas

Buat baris baru.

Lalu tambahkan kode program berikut:

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

Kode program di atas berfungsi untuk membaca data yang berada pada query string. Tanda

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

1 sebelum variabel

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

9 berfungsi untuk mengubah nilai menjadi

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

3 jika key

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

5 atau pun

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

6 tidak tersedia pada array

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

9. Lebih lengkapnya pernah kita pelajari pada pembahasan .

Selanjutnya, tambahkan kode program berikut setelah komentar

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

7.

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

Kode program di atas akan memeriksa apakah variabel

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

8 dan

<?php # membuka tag PHP

$nama = @$_GET['nama'];
$alamat = @$_GET['alamat'];

# di sini nanti kita akan tampilkan variabel $nama dan $alamat

# jangan lupa tutup tag PHP
?>

9 tidak kosong. Jika memang tidak kosong alias ada isinya, maka variabel-variabel tersebut akan ditampilkan.

Berikut ini output yang saya dapatkan:

Anda bisa coba untuk mengisi hanya inputan nama saja, atau hanya inputan alamat saja. Lalu lihat bagaimana output yang anda dapatkan.

Perbedaan Metode GET dan POST

Terdapat beberapa metode pengiriman data dalam protokol HTTP/HTTPS. Akan tetapi yang didukung oleh HTML hanya dua saja: yaitu metode GET dan metode POST [1].

Form pada HTML secara default akan menggunakan metode GET untuk mengirimkan data. Seperti yang telah kita lakukan di atas.

Akan tetapi, kita bisa mengatur metode apa yang harus digunakan oleh Form untuk mengirim data dengan menambahkan atribut

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

0 pada tag

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

1.

Seperti contoh berikut:

<form method="POST">
  <!-- inputan -->
</form>

Di situ tag

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

1 akan mengirimkan data ke server dengan menggunakan metode POST.

Lalu, apa bedanya POST dan GET?

Bedanya adalah:

Metode GET akan menampilkan semua data dalam url (yang kemudian disebut sebagai query string).
Sedangkan POST, ia akan menyimpan data di dalam body request tanpa menampilkannya secara langsung di dalam URL.

Bayangkan jika sebuah form login yang berisi kata sandi dikirim melalui metode GET? Tentu saja kata sandi tersebut akan terekpos di dalam URL dan ini akan memudahkan peretas untuk mencuri data.

Berikut ini adalah contoh form yang menggunakan metode POST.

<form method="POST">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>
<?php # membuka tag PHP

$email = @$_POST['email'];
$password = @$_POST['password'];

# jangan lupa tutup tag PHP
if ($email) {
    echo "<strong>Email:</strong> {$email} <br>";
}

if ($password) {
    echo "<strong>Kata Sandi:</strong> {$password} <br>";
}
?>

Penjelasan:

Kita menambahkan atribut

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

0 dengan nilai

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

4 pada tag

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

1

Kita menggunakan variabel

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

6 sebagai ganti dari variabel

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

9

Menggunakan Variable <?php # ... # ... # di sini nanti kita akan tampilkan variabel $nama dan $alamat if ($nama) { echo "Nama: {$nama} "; } if ($alamat) { echo "Alamat: {$alamat} "; } ?> 8

Seperti yang pernah kita pelajari pada pembahasan . Kita bisa menggunakan variabel

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

8 untuk memanggil data yang dikirim melalui form, baik data tersebut dikirim dengan metode GET mau pun menggunakan metode POST.

Sehingga variabel

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

8 bisa menjadi pengganti dari variabel

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

9 mau pun variabel

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

6.

Mengirim Data ke File Yang Berbeda

Pada 2 contoh form yang telah kita buat, kita menggabungkan antara halaman input dan halaman proses. Sehingga data yang kita tampilkan pun masih berada dalam file yang sama.

Sebenarnya, kita bisa memisahkan antara halaman input dan halaman presentasi data.

Kita bisa melakukannya dengan menambahkan atribut

<form method="POST">
  <!-- inputan -->
</form>

3 pada tag

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

1.

<form action="proses.php">
  <!-- input -->
</form>

Isi dari atribut

<form method="POST">
  <!-- inputan -->
</form>

3 bisa berupa nama file, dan bisa juga berupa url lengkap.

Sebagai contoh, silakan buat dua file seperti berikut:

belajar-form
├── form-login.php
└── proses-login.php

Lalu isi file

<form method="POST">
  <!-- inputan -->
</form>

6 dengan kode HTML berikut:

<form method="POST" action="proses-login.php">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>

Tag

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

1 pada kode program di atas memiliki 2 buah atribut:

Atribut

<?php
# ...
# ...

# di sini nanti kita akan tampilkan variabel $nama dan $alamat
if ($nama) {
    echo "<strong>Nama:</strong> {$nama} <br>";
}

if ($alamat) {
    echo "<strong>Alamat:</strong> {$alamat} <br>";
}
?>

0 untuk menentukan metode yang digunakan, di sini kita menggunakan metode POST

Atribut
```
<form method="POST">
 
</form>
```
3 yang merepresentasikan file/alamat di mana data akan dikirim ketika form di-submit.

Kemudian, kita bisa menampilkan dan memproses data yang dikirim ke dalam file

<form method="POST">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>
<?php # membuka tag PHP

$email = @$_POST['email'];
$password = @$_POST['password'];

# jangan lupa tutup tag PHP
if ($email) {
    echo "<strong>Email:</strong> {$email} <br>";
}

if ($password) {
    echo "<strong>Kata Sandi:</strong> {$password} <br>";
}
?>

0 sebagai berikut:

<?php

$email = @$_REQUEST['email'];
$password = @$_REQUEST['password'];

if ($email !== '[email protected]') {
  die("Email tidak terdaftar!");
}

if ($password !== 'kerjadarirumah') {
  die("Password salah!");
}

# jika lolos alias email dan password nya benar
echo "Selamat {$email}, anda berhasil login! :)";

# tag php tidak perlu ditutup karena ia tidak bercampur dengan bahasa lainnya

Contoh Berbagai Macam Tipe Isian Data

Di dalam HTML, terdapat beberapa tipe isian data. Kita telah mencoba beberapa seperti text, email, dan password. Tapi masih ada beberapa hal lagi seperti: select, textarea, checkbox, radio, dan sebagainya.

Berikut ini adalah contoh bagaimana sintaks form-nya dan bagaimana datanya dikirimkan di dalam PHP.

Pertama, buat 2 file baru sebagai berikut:

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

0

Kode program untuk file

<form method="POST">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>
<?php # membuka tag PHP

$email = @$_POST['email'];
$password = @$_POST['password'];

# jangan lupa tutup tag PHP
if ($email) {
    echo "<strong>Email:</strong> {$email} <br>";
}

if ($password) {
    echo "<strong>Kata Sandi:</strong> {$password} <br>";
}
?>

1:

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

1

Kode program untuk file

<form method="POST">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>
<?php # membuka tag PHP

$email = @$_POST['email'];
$password = @$_POST['password'];

# jangan lupa tutup tag PHP
if ($email) {
    echo "<strong>Email:</strong> {$email} <br>";
}

if ($password) {
    echo "<strong>Kata Sandi:</strong> {$password} <br>";
}
?>

2. Kita langsung tampilkan menggunakan perintah

<form method="POST">
    <div>
        <label>Email</label> <br>
        <input name="email" type="email" placeholder="Masukkan email">
    </div>
    <div>
        <label>Kata Sandi</label> <br>
        <input name="password" type="password" placeholder="Masukkan kata sandi">
    </div>
    <div>
        <button>Login</button>
    </div>
</form>
<?php # membuka tag PHP

$email = @$_POST['email'];
$password = @$_POST['password'];

# jangan lupa tutup tag PHP
if ($email) {
    echo "<strong>Email:</strong> {$email} <br>";
}

if ($password) {
    echo "<strong>Kata Sandi:</strong> {$password} <br>";
}
?>

3 saja agar outputnya jelas:

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

2

Output form html:

Output data:

localhost/form.php?nama=Nurul+Huda&alamat=Surabaya

3

Pembahasan Selanjutnya

Kita telah belajar cara sederhana untuk membuat form dan menampilkan datanya dengan PHP. Akan tetapi, untuk lebih memantapkan lagi tentang apa yang kita pelajari, insyaallah pada pertemuan selanjutnya kita akan membahas bagaimana cara membuat kalkulator sederhana (plus kalkulator scientific) pada PHP.

Jangan lupa share tutorial ini, ya! Terima kasih banyak.

Referensi

[1] https://dev.to/moz5691/method-override-for-put-and-delete-in-html-3fp2 - diakses tanggal 27 Maret 2020

Apa itu form pada pemrograman?

Form adalah bagian pada HyperText Markup Language (HTML) yang dapat digunakan untuk membuat elemen formulir pada situs web . Berikut penjelasan selengkapnya mengenai form dipakai dalam program data komputer.