Home Unlabelled Tutorial Membuat Form di PHP

Tutorial Membuat Form di PHP

By
November 15, 2022
Read
Add Comment

 Turtorial Membuat Form di PHP

Hallo temen - temen disini aku bakal ngasih tutorial atau cara membuat form di PHP. Pastikan teman -teman sudah mempunyai Visual Studio Code dan XAMMP juga ya.

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. 


Ada apa aja sih yang merupakan komponen form html diantaranya :


Form


<FORM ACTION=action base> form tags </FORM>


<FORM METHOD=method> form tags </FORM>


<FORM ENCTYPE=media type> form tags </FORM>


<FORM ACTION=action base TARGET="target window name"> form tags </FORM>


<FORM SCRIPT=URL> form tags </FORM>


Note : target window name diisikan berupa:


_blank


_self


_parent


_top




Form Input Check Box


<INPUT TYPE=CHECKBOX NAME=name VALUE=value>


<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>




Form Input File


<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>




Form Input Hidden


<INPUT TYPE=HIDDEN NAME=name VALUE=value>




Form Input Password


<INPUT TYPE=PASSWORD NAME=name>


<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length>


<INPUT TYPE=PASSWORD NAME=name SIZE=size>


<INPUT TYPE=PASSWORD NAME=name VALUE=value>




Form Input Radio Button


<INPUT TYPE=RADIO NAME=name VALUE=value>


<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>




Form Input Reset


<INPUT TYPE=RESET>




Form Input Submit


<INPUT TYPE=SUBMIT>


<INPUT TYPE=SUBMIT NAME=name>


<INPUT TYPE=SUBMIT VALUE=value>




Form Input Button


<INPUT TYPE=BUTTON>


<INPUT TYPE=BUTTON NAME=name>


<INPUT TYPE=BUTTON VALUE=value>




Form Input Text


<INPUT TYPE=TEXT NAME=name>


<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>


<INPUT TYPE=TEXT NAME=name SIZE=size>


<INPUT TYPE=TEXT NAME=name VALUE=value>




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


<OPTION SHAPE=shape>




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

<FORM ACTION=action base> form tags </FORM>

<FORM METHOD=method> form tags </FORM>

<FORM ENCTYPE=media type> form tags </FORM>

<FORM ACTION=action base TARGET="target window name"> form tags </FORM>

<FORM SCRIPT=URL> form tags </FORM>

Note : target window name diisikan berupa:

_blank

_self

_parent

_top


Form Input Check Box

<INPUT TYPE=CHECKBOX NAME=name VALUE=value>

<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>


Form Input File

<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>


Form Input Hidden

<INPUT TYPE=HIDDEN NAME=name VALUE=value>


Form Input Password

<INPUT TYPE=PASSWORD NAME=name>

<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length>

<INPUT TYPE=PASSWORD NAME=name SIZE=size>

<INPUT TYPE=PASSWORD NAME=name VALUE=value>


Form Input Radio Button

<INPUT TYPE=RADIO NAME=name VALUE=value>

<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>


Form Input Reset

<INPUT TYPE=RESET>


Form Input Submit

<INPUT TYPE=SUBMIT>

<INPUT TYPE=SUBMIT NAME=name>

<INPUT TYPE=SUBMIT VALUE=value>


Form Input Button

<INPUT TYPE=BUTTON>

<INPUT TYPE=BUTTON NAME=name>

<INPUT TYPE=BUTTON VALUE=value>


Form Input Text

<INPUT TYPE=TEXT NAME=name>

<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>

<INPUT TYPE=TEXT NAME=name SIZE=size>

<INPUT TYPE=TEXT NAME=name VALUE=value>


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

<OPTION SHAPE=shape>


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 scriptnya 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 teman - teman 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 tampilan teman - teman akan 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 hasil teman - teman akan seperti ini :


Contoh script lain yang bisa teman - teman pakai  seperti ini :

TUGAS Form di PHP :

Berikut ini ada script yang bisa teman - teman pakai untuk membuat beberapa contoh script. Hasilnya bakal aku lampirkan dibawah ya : 

<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>

In 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 tampilannya akan menjadi seperti ini :







Tags :

Tidak ada komentar:

Langganan: Posting Komentar ( Atom )
Diberdayakan oleh Blogger.

Created By Themexpose · Powered by Blogger
All rights reserved