Home » PHP » Membuat Form Sederhana Menggunakan PHP

Membuat Form Sederhana Menggunakan PHP

Published by Ade Kurniawan on

membuat form php

Masih di seri tutorial belajar php. Setelah sebelumnya kita telah membahas tentang pengertian php, kebutuhan software membuat program php dan hello world php. Pada kesempatan ini kita lanjutkan dengan membuat Form menggunakan php dan HTML.

Jika ada yang belum tau apa itu form. Mari kita bahas sejenak sebelum membuatnya. Dikutip dari guru99 Form adalah sesuatu yang digunakan untuk mendapatkan input dari user dan kemudian disubmit ke web server untuk di proses. Form dibuat menggunakan tag HTML yang tampil dalam bentuk grafis berupa kolom input, radio button, checkbox dan lainnya.

Contoh Form PHP Sederhana

Contoh Form di bawah ini dapat kamu gunakan untuk latihan membuat form menggunakan php dan HTML.

1. Form Login

Form login biasanya terdiri atas kolom input username, password dan tombol login. Seperti gambar di bawah ini:

membuat form login php
Form Login

Untuk membuat form login di atas silahkan buka kembali editor dan buat file baru dengan nama form_login.php dan simpan di directory C:\xampp\htdocs\belajarphp . Kemudian isikan script di bawah ini pada file form_login.php tersebut.

form_login.php

<html>

<head>
    <title>Membuat Form Login</title>
</head>

<body>
    <form action="">
        <form>
            <div>
                <label>Username</label> <br>
                <input name="nama" type="text">
            </div>
            <div>
                <label>password</label> <br>
                <input name="password" type="password">
            </div>
            <div>
                <input type="submit" value="Login">
            </div>
        </form>
    </form>
    <!-- script ini dibuat untuk menampilkan input form ketika di submit -->
    <!-- Start menampilka input -->
    <?php
    if (isset($_GET['nama']) | isset($_GET['password'])) {
        echo "Nama : " . $_GET['nama'] . "<br> ";
        echo "Password : " . $_GET['password'];
    }
    ?>
    <!-- End menampilkan Input -->

</body>

</html>

Silahkan jalankan program from login di atas menggunakan browser dan akses url

http://localhost/belajarphp/form_login.php

Setelah input nama dan password di isi dan kemudian tombol login di klik. Tampilan halaman form akan menjadi seperti gambar di bawah ini:

Contoh Submit data form
Contoh Submit data form

Kamu dapat menghapus baris kode

<?php
    if (isset($_GET['nama']) | isset($_GET['password'])) {
        echo "Nama : " . $_GET['nama'] . "<br> ";
        echo "Password : " . $_GET['password'];
    }
    ?>

karena kode script di atas digunakan untuk menampilkan input dari form login yang dibuat. Dalam penerapan sesungguhnya saat tombol login di klik maka data yang telah di inputkan akan masuk ke halaman proses. Untuk hal ini kita berarti membutuhkan proses.php.

Contoh Form biodata di bawah ini akan menampilkan form beserta prosesnya. Silahkan lanjutan pembuatan contoh form nomor 2.

2. Form Input Biodata

Untuk membuat form biodata tambahkan file baru di visual studio code dan isikan script di bawah ini.

form_biodata.php

<html>

<head>
    <title>Membuat Form Input Biodata PHP</title>
    <style>
        div {padding: 4px};
    </style>
</head>

<body>
        <form action="proses.php" method="POST">
            <div>
                <label>Nama :</label> <br>
                <input name="nama" type="text">
            </div>
            <div>
                <label>Jenis Kelamin :</label> <br>                
                <input name="jenis_kelamin" value="Laki_laki" type="radio">Laki-laki
                <input name="jenis_kelamin" value="Perempuan" type="radio">Perempuan
            </div>
            <div>
                <label>No Hp :</label> <br>
                <input name="no_hp" type="text">
            </div>
            <div>
                <label>Alamat :</label> <br>
                <input name="alamat" type="text">
            </div>
            <div>
                <input type="submit" value="Simpan">
            </div>
        </form>

</body>

</html>

Simpan dengan nama form_biodata.php di diretory belajarphp.

Jalankan form di browser dengan membuka url

http://localhost/belajarphp/form_biodata.php

Jika berhasil makan tampilan halaman form biodata seperti gambar di bawah ini:

membuat form biodata php
Form Input Biodata

Setelah memiliki halaman input biodata, seperti yang dijelaskan sebelumnya bahwa sebuah form dibuat untuk di submit datanya dan selanjutnya di proses. Sebuah halaman proses dapat di buat seperti di bawah ini.

proses.php

<?php 
    //proses yang dapat terjadi

    //mengambil data dari parameter input halaman  biodata
    $nama = $_POST['nama'];
    $jenis_kelamin = $_POST['jenis_kelamin'];
    $no_hp = $_POST['no_hp'];
    $alamat= $_POST['alamat'];

    //menampilkan data 
    echo "Nama = $nama"."<br>";
    echo "Jenis Kelamin = $jenis_kelamin" . "<br>";
    echo "No HP = $no_hp" . "<br>";
    echo "Alamat = $alamat";

    //disini ditulis proses lain yang dapat dilakukan seperti
    
    //insert ke database

    //update delete data


?>

Simpan file proses.php di atas di directory belajarphp. Setelah membuat form biodata dan proses seperti di atas, maka saat tombol simpan pada halaman form input biodata di klik, halaman proses akan menampilkan data biodata yang diinputkan tersebut. Seperti gambar di bawah ini:


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *