Form di HTML dan PHP

Formulir HTML digunakan untuk mengumpulkan data dari pengguna. Data ini dikirimkan ke server untuk diproses menggunakan PHP. Biasanya, form berisi elemen input seperti teks, tombol, dropdown, dll.

Struktur Dasar Form HTML

<form action="proses.php" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Kirim">
</form>

action: URL atau file PHP yang memproses data form.
method: Tipe pengiriman data (GET atau POST).

Menangani Form dengan PHP

Setelah pengguna mengirimkan form, data dikirim ke server dan bisa diakses menggunakan $_GET atau $_POST di PHP.

Contoh Penanganan Data Form

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $nama = htmlspecialchars($_POST['nama']);
  $email = htmlspecialchars($_POST['email']);
  
  echo "Nama: $nama<br>";
  echo "Email: $email<br>";
}
?>

$_POST['nama']: Mengambil data dari input form dengan name="nama".
htmlspecialchars(): Mencegah serangan XSS dengan mengonversi karakter spesial menjadi entitas HTML.

Penjelasan Tentang method dan action di Form HTML

1. Attribute method

Attribute method digunakan untuk menentukan bagaimana data dari form dikirim ke server. Terdapat dua nilai utama yang bisa digunakan:

GET:
- Data dikirim melalui URL sebagai parameter query string.
- Tidak cocok untuk mengirim data sensitif (seperti kata sandi).
- Data yang dikirim bisa dilihat langsung di URL.
- Contoh penggunaan: pencarian data atau mengirim informasi yang tidak rahasia.
Contoh URL:
```
perlCopy codehttp://example.com/proses.php?nama=Alvan&[email protected]
```
POST:
- Data dikirim melalui body HTTP, tidak terlihat di URL.
- Cocok untuk mengirim data yang lebih besar atau data sensitif.
- Umumnya digunakan untuk pengiriman form yang melibatkan data pengguna seperti pendaftaran, login, atau pembayaran.
Kelebihan:
- Lebih aman dibandingkan GET karena data tidak terlihat di URL.
- Tidak ada batasan ukuran data.

Contoh Penggunaan GET dan POST:

htmlCopy code<!-- Menggunakan method GET -->
<form action="proses.php" method="GET">
  <input type="text" name="nama">
  <input type="submit" value="Kirim">
</form>

<!-- Menggunakan method POST -->
<form action="proses.php" method="POST">
  <input type="text" name="nama">
  <input type="submit" value="Kirim">
</form>

2. Attribute action

Attribute action digunakan untuk menentukan URL atau file yang akan memproses data form setelah form dikirim.

URL: Menentukan halaman atau skrip di server yang akan menerima dan menangani data form.
Default (Kosong): Jika action tidak ditentukan atau kosong (action=""), form akan mengirim data ke URL halaman yang sama di mana form berada.

Contoh Penggunaan action:

htmlCopy code<!-- Mengirim form ke file proses.php -->
<form action="proses.php" method="POST">
  <input type="text" name="nama">
  <input type="submit" value="Kirim">
</form>

<!-- Mengirim form ke URL tertentu -->
<form action="https://www.example.com/proses" method="POST">
  <input type="text" name="nama">
  <input type="submit" value="Kirim">
</form>

Kesimpulan:

method: Menentukan bagaimana data dikirim ke server (GET atau POST).
action: Menentukan di mana data akan diproses, apakah di file PHP lokal atau URL eksternal.

Ini adalah konsep penting yang membantu menentukan cara kerja form dan interaksinya dengan server.

contoh form lainnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <title>Document</title>

    <style>
        body {
            background-color: #F0A8D0;
        }
    </style>
</head>
<body>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card p-3">
                    <form action="" method="POST">
                        <div class="row">
                            <div class="col-md-3">
                                <input class="form-control" type="text" name="nama_depan" placeholder="Masukkan nama depan kamu">
                            </div>
                            <div class="col-md-3">
                                <input class="form-control" type="text" name="nama_belakang" placeholder="Masukkan nama belakang kamu">
                            </div>
                            <div class="col-md-3">
                                <input class="form-control" type="number" name="tahun_kelahiran" placeholder="Masukkan tahun kelahiran">
                            </div>
                            <div class="col-md-3">
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-outline-success">Kirim</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-3">
        <div class="row">
            <div class="col-md-12">
                <div class="card p-3">

                    <?php 
                        if ($_SERVER["REQUEST_METHOD"] == "POST") {
                            $usia = 2024 - $_POST['tahun_kelahiran'];
                            echo '<h1 class="text-danger">Selamat Datang '. $_POST['nama_depan'] . ' ' . $_POST['nama_belakang'] . ' usia kamu ' . $usia . ' tahun </h1>';
                        }
                    
                    ?>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

Form Perkalian

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Document</title>
    <style>
        body {
            background-color: #eaeaea;
        }
    </style>
</head>
<body>

    <div class="container mt-3">
        <div class="card p-3">
            <form action="" method="POST">
                <div class="row">
                    <div class="col-md-5">
                        <input class="form-control" type="number" name="kolom-perkalian" placeholder="Kolom Perkalian">
                    </div>
                    <div class="col-md-5">
                        <input class="form-control" type="number" name="baris-perkalian" placeholder="Baris Perkalian">
                    </div>
                    <div class="col-md-2">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success">Kirim</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <div class="container mt-3">
        <div class="card p-3">
            <?php if ($_SERVER["REQUEST_METHOD"] == "POST") : ?>
                <?php 
                    $kolomPerkalian = $_POST['kolom-perkalian'];
                    $barisPerkalian = $_POST['baris-perkalian'];
                ?>

                <div class="row">
                    <?php for ($kolom = 1; $kolom <= $kolomPerkalian; $kolom++) : ?>
                        <div class="col-4">
                            <table class="table table-striped">
                                <tr>
                                    <th colspan="5" class="text-center"><?= $kolom ?></th>
                                </tr>
                                <?php for ($baris = 1; $baris <= $barisPerkalian; $baris++) : ?>
                                <tr class="text-center">
                                    <td><?= $baris ?></td>
                                    <td>X</td>
                                    <td><?= $kolom ?></td>
                                    <td>=</td>
                                    <td><?= $baris * $kolom ?></td>
                                </tr>
                                <?php endfor; ?>
                            </table>
                        </div>
                    <?php endfor; ?>
                </div>

            <?php endif; ?>
        </div>
    </div>

    
</body>
</html>

Kesimpulan

Form memungkinkan interaksi antara pengguna dan server. Pengguna mengisi form HTML, kemudian data tersebut dikirim ke PHP untuk diproses. Menggunakan metode POST biasanya lebih aman dibandingkan GET, terutama untuk mengirim data sensitif.

PreviousTugas NextLatihan

Last updated 1 year ago

hashtagForm di HTML dan PHP

hashtagMenangani Form dengan PHP

hashtagPenjelasan Tentang method dan action di Form HTML

hashtagKesimpulan