Tutorial Pemula - NewBie

TUTORIAL MEMBUAT VALIDASI FORM INPUT DENGAN PHP

Validasi diperlukan untuk memastikan bahwa user memasukan data sesuai dengan ketentuan yang ditetapkan pada sistem. Jika data yang dimasukan melanggar maka akan memunculkan notifikasi atau peringatan untuk merubah isian data. Contohnya jina field nama adalah wajib diisi, maka jika belum diisi dan menekan tombol simpan maka akan memunculkan pesan Nama wajib diisi, begitulah contoh sederhananya.

Pada Tutorial ini akan membahasa bagaimana membuat validasi form input dengan script php.

Buka kembali file input.php yang sudah anda buat di tutorial sebelumnya, pada form input tersebut anda dapat mencoba bahwa belum terdapat validasi disetiap inputannya. Contohnya jika form tersebut kosong dan tekan tombol proses data maka data akan tersimpan, benarkan ! nah itu artinya form input belum terdapat validasi.

Berikut ini adalah algoritma sederhana yang akan diterapkan pada validasi form input tersebut.

Jika field (kolom) kosong maka akan muncul notifikasi bahwa field harus diisi

Jika field (harga, stok, berat, diskon) diisi bukan dengan angka maka akan muncul notifikasi

Jika field deskripsi diisi kurang dari 50 karakter maka akan muncul notifikasi.

Nah begitulah algoritma sederhana yang akan diterapkan pada form input produk.

Buka kembali file input.php, ganti script setelah tag  

if(isset($_POST['simpan'])){

..............................

?>

Dengan script berikut

if(empty($nama)){    //jika nama kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Nama Produk</p>";
    }
    elseif(empty($kategori)){ //jika kategori kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Pilih Kategori Produk</p>";
    }
    elseif(empty($deskripsi)){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk</p>";
    }
    elseif(strlen($deskripsi) < 10){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk minimal 200 karakter</p>";
    }
    elseif(empty($stok)){   //jika Stok kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Stok Produk</p>";
    }
    elseif(!is_numeric($stok)){   //jika Stok Bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Jumlah Stok Dengan Angka</p>";
    }
    elseif(empty($berat)){   //jika berat produk kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk dalam satuan gram</p>";
    }
    elseif(!is_numeric($berat)){  //jika berat bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk Dengan Angka</p>";
    }
    elseif(empty($harga)){ //jika harga kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk</p>";
    }
    elseif(!is_numeric($berat)){  //jika harga bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk Dengan Angka</p>";
    }
    else{  //jika semua sudah terpenuhi maka simpan ke tb_produk

    $save=mysqli_query($conect, "INSERT INTO tb_produk (id_produk,nama_produk,stok_produk,deskripsi_produk,harga_produk,id_kategori,berat_produk,diskon_produk)
    values ('','$nama','$stok','$deskripsi','$harga','$kategori','$berat','$diskon')");
    if($save){ //jika simpan berhasil maka muncul pesan dan menuju ke halaman produk
        echo "<script>alert('Data Produk Berhasil disimpan ke database');document.location='produk.php'</script>";
    }else{  //jika simpan gagal maka muncul pesan
         echo "<script>alert('Proses simpan gagal, coba kembali');document.location='input.php'</script>";
    }
}
}

Penjelasan tentang validasi dapat anda lihat di video yah,

Tambahkan sebuah elemen untuk menampilkan pesan error di bawah tag <tbody>

Tambahkan script ini

<tr><td colspan="3"><?php echo $error;?></td></tr>

Script diatas adalah variabel dari error yang akan ditampilkan.

Sekarang simpan file input kembali dan jalankan di browser anda, maka jika data kosong akan muncul notifikasi seperti ini

notifikasi-error

Begitu juga dengan kolom inputan selanjutnya.

Setelah anda membuat validasi, sekarang tambahkan sebuat value di dalam field, fungsinya untuk menampilkan data yang telah berhasil disimpan, jadi data tidak hilang begitu saja jika masih ada field yang belum sesuai.

Penjelasannya lihat divideo yah..

Ganti script antara tag <form> sampai </form> (lihat perbedaannya divideo)

<form action="" method="post" enctype="multipart/form-data">
    <table border="0" cellspacing="10" width="800" align="center">

    <tbody>
    <tr><td colspan="3"><?php echo $error;?></td></tr>
    <tr>
        <td>Nama Produk</td>
        <td>:</td>
        <td><input type="text" name="nama" placeholder="Nama Produk" size="50" maxlength="30" autocomplete="off" autofocus value="<?php echo $_POST['nama'];?>"/>
        </td>
    </tr>
    <tr>
        <td>Kategori Produk</td>
        <td>:</td>
        <td>
            <select name="kategori">
            <option value="">Pilih Kategori</option>
            <option value="1">Pakaian Pria</option>
            <option value="2">Pakaian Wanita</option>
            <option value="3">Pakaian Anak</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Deskripsi Produk</td>
        <td>:</td>
        <td><textarea name="deskripsi" placeholder="Deskrippsi Produk" rows="3" cols="50"/><?php echo $_POST['deskripsi'];?></textarea></td>
    </tr>
    <tr>
        <td>Stok Produk</td>
        <td>:</td>
        <td><input type="text" name="stok" placeholder="Stok Produk" size="20" maxlength="10" value="<?php echo $_POST['stok'];?>"/></td>
    </tr>
    <tr>
        <td>Berat Produk</td>
        <td>:</td>
        <td><input type="text" name="berat" placeholder="Berat Produk" size="30" maxlength="30" value="<?php echo $_POST['berat'];?>"/></td>
    </tr>
    <tr>
        <td>Harga Produk</td>
        <td>:</td>
        <td><input type="text" name="harga" placeholder="Harga Produk" size="30" maxlength="30" value="<?php echo $_POST['harga'];?>"/></td>
    </tr>
    <tr>
        <td>Diskon Produk</td>
        <td>:</td>
        <td><input type="text" name="diskon" placeholder="Diskon Produk" size="30" maxlength="10" value="<?php echo $_POST['diskon'];?>"/></td>
    </tr>
    <tr>
        <td colspan="3"><button type="submit" name="simpan">Proses Data</button</td>
    </tr>
</tbody>

</table>
</form>

Simpan kembali file input.php dan coba perbedaannya di browser anda.

Perbedaannya adalah jika anda menuliskan nama produk lalu klik tombol proses data maka akan muncul notifikasi untuk memilih kategori produk, Namun nama produk tidak hilang didalam kolom nama.

Karena pada field nama sudah diberi value berupa variebel POST dari elemen nama itu sendiri.

Demikian cara membuat validasi form input produk dengan php, mudah bukan..

selamat mencoba dan terimakasih.

Full Script input.php

<?php
error_reporting(0); //abaikan error pada browser
//panggil file koneksi.php yang sudah anda buat
include "koneksi.php";
?>
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>JUDUL WEBSITE ANDA</title>
</head>
<body>
<h1 align="center"> Input Produk</h1>
<?php
//buat variabel dari setiap field name form produk
$nama= mysqli_real_escape_string($conect, $_POST['nama']);    //varibel field nama
$stok= mysqli_real_escape_string($conect, $_POST['stok']);    //varibel field stok
$deskripsi= mysqli_real_escape_string($conect, $_POST['deskripsi']);  //varibel field deskripsi
$harga= mysqli_real_escape_string($conect, $_POST['harga']);        //varibel field harga
$kategori= mysqli_real_escape_string($conect, $_POST['kategori']);  //varibel field kategori
$berat= mysqli_real_escape_string($conect, $_POST['berat']);       //varibel field berat
$diskon= mysqli_real_escape_string($conect, $_POST['diskon']);     //varibel field diskon

if(isset($_POST['simpan'])){
    if(empty($nama)){    //jika nama kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Nama Produk</p>";
    }
    elseif(empty($kategori)){ //jika kategori kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Pilih Kategori Produk</p>";
    }
    elseif(empty($deskripsi)){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk</p>";
    }
    elseif(strlen($deskripsi) < 10){  //jika deskripsi kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Deskripsi Produk minimal 200 karakter</p>";
    }
    elseif(empty($stok)){   //jika Stok kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Stok Produk</p>";
    }
    elseif(!is_numeric($stok)){   //jika Stok Bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Jumlah Stok Dengan Angka</p>";
    }
    elseif(empty($berat)){   //jika berat produk kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk dalam satuan gram</p>";
    }
    elseif(!is_numeric($berat)){  //jika berat bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Berat Produk Dengan Angka</p>";
    }
    elseif(empty($harga)){ //jika harga kosong maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk</p>";
    }
    elseif(!is_numeric($berat)){  //jika harga bukan angka maka muncul pesan
        $error="<p style='color:#F00;'>* Masukan Harga Produk Dengan Angka</p>";
    }
    else{  //jika semua sudah terpenuhi maka simpan ke tb_produk

    $save=mysqli_query($conect, "INSERT INTO tb_produk (id_produk,nama_produk,stok_produk,deskripsi_produk,harga_produk,id_kategori,berat_produk,diskon_produk)
    values ('','$nama','$stok','$deskripsi','$harga','$kategori','$berat','$diskon')");
    if($save){ //jika simpan berhasil maka muncul pesan dan menuju ke halaman produk
        echo "<script>alert('Data Produk Berhasil disimpan ke database');document.location='produk.php'</script>";
    }else{  //jika simpan gagal maka muncul pesan
         echo "<script>alert('Proses simpan gagal, coba kembali');document.location='input.php'</script>";
    }
}
}
    ?>
<form action="" method="post" enctype="multipart/form-data">
    <table border="0" cellspacing="10" width="800" align="center">

    <tbody>
    <tr><td colspan="3"><?php echo $error;?></td></tr>
    <tr>
        <td>Nama Produk</td>
        <td>:</td>
        <td><input type="text" name="nama" placeholder="Nama Produk" size="50" maxlength="30" autocomplete="off" autofocus value="<?php echo $_POST['nama'];?>"/>
        </td>
    </tr>
    <tr>
        <td>Kategori Produk</td>
        <td>:</td>
        <td>
            <select name="kategori">
            <option value="">Pilih Kategori</option>
            <option value="1">Pakaian Pria</option>
            <option value="2">Pakaian Wanita</option>
            <option value="3">Pakaian Anak</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Deskripsi Produk</td>
        <td>:</td>
        <td><textarea name="deskripsi" placeholder="Deskrippsi Produk" rows="3" cols="50"/><?php echo $_POST['deskripsi'];?></textarea></td>
    </tr>
    <tr>
        <td>Stok Produk</td>
        <td>:</td>
        <td><input type="text" name="stok" placeholder="Stok Produk" size="20" maxlength="10" value="<?php echo $_POST['stok'];?>"/></td>
    </tr>
    <tr>
        <td>Berat Produk</td>
        <td>:</td>
        <td><input type="text" name="berat" placeholder="Berat Produk" size="30" maxlength="30" value="<?php echo $_POST['berat'];?>"/></td>
    </tr>
    <tr>
        <td>Harga Produk</td>
        <td>:</td>
        <td><input type="text" name="harga" placeholder="Harga Produk" size="30" maxlength="30" value="<?php echo $_POST['harga'];?>"/></td>
    </tr>
    <tr>
        <td>Diskon Produk</td>
        <td>:</td>
        <td><input type="text" name="diskon" placeholder="Diskon Produk" size="30" maxlength="10" value="<?php echo $_POST['diskon'];?>"/></td>
    </tr>
    <tr>
        <td colspan="3"><button type="submit" name="simpan">Proses Data</button</td>
    </tr>
</tbody>

</table>
</form>
</body>
</html>

 

 

Preview Demo

Develindo Web | Tutorial Pemrograman Website