Cara Membuat Form dengan PHP

November 14, 2022 Posting Komentar

Membuat Form dengan PHP

Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST mengirimkannya secara terpisah. User mengirimkan data input dengan mengisi teks atau pilihan pada attribut form html.

Apa saja yang merupakan komponen form html diantaranya :

Form

Note : target window name diisikan berupa:

_blank

_self

_parent

_top

Form Input Check Box

Form Input File

Form Input Hidden

Form Input Password

Form Input Radio Button

Form Input Reset

Form Input Submit

Form Input Button

Form Input Text

Form Select

<SELECT NAME=name> option entries </SELECT>

<SELECT NAME=name MULTIPLE> option entries </SELECT>

<SELECT NAME=name SIZE=size> option entries </SELECT>

<SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units> option entries </SELECT>

<OPTION> content

<OPTION SELECTED> content

<OPTION VALUE=value> content

Form Text Area

<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>

FORM VALIDATION

Validasi proses merupakan hal yang harus diperhatikan dalam pembuatan web. Untuk

melakukan validasi bisa menggunakan Javascript maupun PHP script. Perbedaannya

dari keduanya, jika Javascript akan diproses disisi client, PHP script akan diproses disisi

server.

Form

Note : target window name diisikan berupa:

_blank

_self

_parent

_top

Form Input Check Box

Form Input File

Form Input Hidden

Form Input Password

Form Input Radio Button

Form Input Reset

Form Input Submit

Form Input Button

Form Input Text

Form Select

<SELECT NAME=name> option entries </SELECT>

<SELECT NAME=name MULTIPLE> option entries </SELECT>

<SELECT NAME=name SIZE=size> option entries </SELECT>

<SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units> option entries </SELECT>

<OPTION> content

<OPTION SELECTED> content

<OPTION VALUE=value> content

Form Text Area

<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>

FORM VALIDATION

Validasi proses merupakan hal yang harus diperhatikan dalam pembuatan web. Untuk

melakukan validasi bisa menggunakan Javascript maupun PHP script. Perbedaannya

dari keduanya, jika Javascript akan diproses disisi client, PHP script akan diproses disisi

server.

Contoh:

1. Buat program form login yang terdiri dari inputan username dan password. Nilai yang diinput akan diproses melalui tombol submit.

Jika input benar, maka akan tampil pesan berhasil. Jika salah, maka akan ditampilkan pesan kesalahan. Username:budiman,

Password: Rahasia (Gunakan if kondisional, operator pembanding dan logika)

Pastikan sudah membuat folder, pada folder XAMPP > htdocs. Buka folder yang sudah dibuat di htdocs tadi dengan menggunakan VS Code, buat file dengan nama yang bisa disesuaikan.

Selanjutnya bisa menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat form</title>
</head>
<body>
  <Form name="input" action="lat_login.php" method="POST">
    Username = <input type="text" name="username"><br>
    Password = <input type="password" name="password"><br>
    <input type="submit" name="login" value="login">
</Form>
</body>
</html>

Bisa di sesuaikan dengan kebutuhan yang diinginkan. Untuk bagian action, harus membuat satu file dengan nama yang sama dan serupa di satu folder yang sama, karena nantinya ini akan menjadi lanjutannya.

Jika berhasil di jalankan (jangan lupa untuk mengaktifkan XAMPP terlebih dahulu), maka tampilannya akan seperti ini:

Dan jika normal, maka dapat di isikan seperti berikut:

Untuk file kedua, yang merukapan "action" dari file sebelumnya. Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proses Login</title>
</head>
<body>
  <?php
  $username = $_POST['username'];
  $password = $_POST['password'];
  if ($username == "budiman" and $password == "Rahasia"){
    echo "Selamat anda Berhasil login, $username";
  }else{
    echo "Maaf, username & password anda salah";
  }
  ?>
</body>
</html>

Maka jika di jalankan dari step sebelumnya akan bisa menjadi seperti ini:

2. Buat buku tamu berisi inputan Nama(text), Alamat Email(text) dan Komentar(text area). Nilai yang di input akan diproses melalui tombol OK.

Tampilkan output dilayar berupa Nama, Alamat Email dan Komentar yang telah di inputkan

Bisa menggunakan contoh di bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat form</title>
</head>
<body>
  <Form name="input" action="tampilan_tamu.php" method="POST">
    Name     = <input type="text" name="nama"><br>
    Email    = <input type="text" name="email"><br>
    Komentar = <input type="text area" name="komentar"><br>
    <input type="submit" name="input" value="OK">
</Form>
</body>
</html>

Dan untuk file actionnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tampilan tamu</title>
</head>
<body>
  <?php
  $name     = $_POST['nama'];
  $email    = $_POST['email'];
  $komentar = $_POST['komentar'];
  echo "Nama Anda : $name <br>";
  echo "Email Anda : $email <br>";
  echo "Komentar Anda : $komentar <br>";
  
  ?>
</body>
</html>

Maka hasilnya akan seperti ini:

Ada juga script seperti ini :

<html>
<head><title>Pengolahan Form - Checkbox</title></head>
<body>

<form name="input" method="post" action="Tugasproses.php">
<table width="500" cellpadding="3" cellspacing="1">

<h2>HANDPHONE SHOP</h2>

<p>Produk GSM Mobile (Best Price)</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="boxes">
<input type="checkbox" name="hp1" value="Nokia 1208 Rp. 350.000,-" data-exval="350000"
> Nokia 1208 Rp. 350.000,-<br>
<input type="checkbox" name="hp2" value="Nokia 1661 Rp. 465.000,-" data-exval="465000"> 
Nokia 1661 Rp. 465.000,-<br>
<input type="checkbox" name="hp3" value="SonyEricsson K330 Rp. 485.000,-" data-exval="485000">
SonyEricsson K330 Rp. 485.000,-<br>
<input type="checkbox" name="hp4" value="Samsung Champ Rp. 865.000,-" data-exval="865000">
Samsung Champ Rp. 865.000,-<br>
<input type="checkbox" name="hp5" value="Samsung B3410 Rp. 1.624.000,-" data-exval="1624000">
Samsung B3410 Rp. 1.624.000,-<br>
</div>


<br>
================================
<br>
<br>
<td>Data Customer</td>
<tr>
     <td>ID Customer</td>
     <td>:</td>
     <td>
      <input name="cust" type="text" size="30" maxlength="30">
     </td>
    </tr>
    <tr>
     <td>Nama</td>
     <td>:</td>
     <td>
      <input name="nama" type="text" size="30" maxlength="30">
     </td>
    </tr>
    <tr>
     <td>Email</td>
     <td>:</td>
     <td>
      <input name="email" type="text" size="30" maxlength="30">
     </td>
    </tr>
    <tr>
     <td>Alamat</td>
     <td>:</td>
     <td>
      <input name="alamat" type="text" size="30" maxlength="30">
     </td>
    </tr>
    <tr>
     <td>Member</td>
     <td>:</td>
     <td><br />
     <input type="radio" name="member" value="member" checked>
      Member<br>
      <input type="radio" name="member" value="bukan"> 
      Bukan member<br>
     </td>
    </tr>
    <tr>
     <td>Pembayaran</td>
     <td>:</td>
     <td>
     <select name="bayar">
      <option value="VISA">VISA</option>
      <option value="Master Card">Master Card</option>
      <option value="Debit BCA">Debit BCA</option>
     </td>
    </tr>
   </table><br/>
   <input type="submit" name="Pilih" value="Proses">
</FORM>
</body>
</html>

Ini output :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proses Handphone Shop</title>
</head>
<body>
  <?php
  // $hp1 = $_POST['hp1'];
  // $hp2 = $_POST['hp2'];
  // $hp3 = $_POST['hp3'];
  // $hp4 = $_POST['hp4'];
  // $hp5 = $_POST['hp5'];
  $cust = $_POST['cust'];
  $nama = $_POST['nama'];
  $email = $_POST['email'];
  $alamat = $_POST['alamat'];
  $member = $_POST['member'];
  $bayar = $_POST['bayar'];

    echo "Produk yang dibeli :<br>";
    if (isset($_POST['hp1'])) {
    echo $_POST['hp1'] . "<br>";
    $hp1 = 350000;
    }else{
      $hp1=0;
    }
    if (isset($_POST['hp2'])) {
    echo $_POST['hp2'] . "<br>";
    $hp2 = 465000;
    }else{
      $hp2=0;
    }
    if (isset($_POST['hp3'])) {
    echo $_POST['hp3'] . "<br>";
    $hp3 = 485000;
    }else{
      $hp3=0;
    }
    if (isset($_POST['hp4'])) {
    echo $_POST['hp4'] . "<br>";
    $hp4 = 865000;
    }else{
      $hp4=0;
    }
    if (isset($_POST['hp5'])) {
    echo $_POST['hp5'] . "<br>";
    $hp5 = 1624000;
    }else{
      $hp5=0;
    }
  echo "===================================";
  echo "<p>Data Customer</p>";
  echo "Id Customer : $cust<br>";
  echo "Nama : $nama <br>";
  echo "Email : $email <br>";
  echo "Alamat : $alamat <br>";
  echo "Member : $member <br>";
  echo "Pembayaran : $bayar <br>";

  $total = $hp1 + $hp2 + $hp3 + $hp4 + $hp5;
  echo "Total pembayaran = $total <br>";
  
  if ($member == "member"){
    echo "Diskon member = 10% <br>";
    $totalmember = $total - ($total * 0.1);
    echo "Pembayaran Akhir = $totalmember";
  }
  ?>
</body>
</html>

Maka tampilan seperti ini :

Ferdy Deva Pangestu

Cara Membuat Form dengan PHP

Posting Komentar untuk "Cara Membuat Form dengan PHP"