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:

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:

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

 Struktur Kontrol

Cara Menghitung Diskon di PHP (Latihan) :

       Sebelum memulai penghitungan diskon menggunakan PHP pastikan teman-teman sudah memiliki Visual Studio Code & XAMPP. Jika belum punya teman-teman bisa mendonwload dahulu lewat link berikut : 

• Visual Studi Code : https://code.visualstudio.com/download
• XAMPP : https://www.apachefriends.org/download.html

    1. Step pertama yang perlu teman-teman lakukan adalah Buka dan download bahan.php pada link berikut: LinkPHP. Lalu extract file yang sudah didownload pada folder xampp > htdocs.

         2.  Step kedua Buka VS Code, dan lakukan open folder dan pilih folder yang sudah di extract dengan nama file skontrol. 

         3.   Step ketiga teman - teman buat file baru lalu pastikan pada akhir penamaan file diberi tambahan kata ".php".

         4.    Step keempat dan untuk memulai awalan, teman - teman  bisa dengan menggunakan "!" lalu enter, atau bisa copy text 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>Latihan</title>

</head>

<body>

</body>

</html>

        5.    Kemudian teman - teman tinggal isi saja sesuai dengan apa yang dibutuhkan dalam soal. Lalu buat script untuk menampilkannya. Berikut contoh soalnya :

                a. Buat variabel, minimal belanja dan total belanja yang berisi nilai 100000 dan 120000. Jika total                     belanja lebih besar dari minimalnya, maka dapat diskon 10%!

                    Pada bagian statement juga ditampilkan total bayar setelah dapat diskon!

                b. Sama seperti a, tapi total belanjanya 100000, Jika total belanjanya lebih besar sama dengan                         minimalnya, maka dapat diskon 10%!

                    Pada bagian statement juga ditampilkan total bayar setelah dapat diskon!

                    Tambahkan pula variabel dan statement jika total belanja lebih kecil dari minimal!

<!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>Latihan</title>

</head>

<body>

<?php

$minimal_belanja =100000;

$total_belanja =90000; // Ubah total belanja sesuai keinginan

echo("Total Belanja: Rp.");

echo ($total_belanja);

echo "<br>";

if ($total_belanja >= $minimal_belanja) {

echo "Selamat, anda dapat diskon 10%!";

}

else {

echo "Maaf, anda tidak dapat diskon!";

}

echo "<br>";

echo("Total Bayar: Rp.");

if ($total_belanja >= $minimal_belanja)

echo ($total_belanja = $total_belanja - (0.1*$total_belanja));

else

echo ($total_belanja);

?>

</body>

</html>

    6.    Lalu jika teman - teman ingin melakukan cek, teman - teman bisa lakukan dengan cara berikut:                    localhost/(nama file yang digunakan).

    Maka tampilan akhir teman - teman akan terlihat seperti ini : 

1. Minimal belanja dan total belanja yang berisi nilai 100000 dan 120000. Jika total belanja lebih besar dari minimalnya, maka dapat diskon 10%!

2. Total belanjanya 100000, Jika total belanjanya lebih besar sama dengan minimalnya (100000), maka dapat diskon 10%!

Teman - teman juga bisa membuat proses kakulator menggunakan hitungan contohnya :

Membuat proses seperti kalkulator yang bisa melakukan perhitungan :

    a. Penjumlahan (+) 

    b. Pengurangan (-) 

    c. Perkalian (*) 

    d. Pembagian (/) 

    e. Modulus (%) 

Caranya teman - teman bisa pakai script dibawah 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>Document</title>

</head>

<body>

  <?php

  $bil1 = 15 ;

  $bil2 = 4 ;

  $op = "%"; //ubah angka dan tanda perhitungan sesuai keperluan

  echo "Bilangan 1 = $bil1";

  echo "<br>";

  echo "Bilangan 2 = $bil2";

  echo "<br>";

  echo "Operator = $op";

  echo "<br>";

 

  if ($op == "+") {

    $t = $bil1 + $bil2;

    echo "Hasilnya $bil1 $op $bil2 = $t";

  }

  else if ($op == "-") {

    $kr = $bil1 - $bil2;

    echo "Hasilnya $bil1 $op $bil2 = $kr";

  }

  else if ($op == "/") {

    $b = $bil1 / $bil2;

    echo "Hasilnya $bil1 $op $bil2 = $b";

  }

  else if ($op == "*") {

  $kl = $bil1 * $bil2;

    echo "Hasilnya $bil1 $op $bil2 = $kl";

  }

  else if ($op == "%") {

    $mo = $bil1 % $bil2;

      echo "Hasilnya $bil1 $op $bil2 = $mo";

    }

  else {

    echo "operator tidak dikenal";

  }

  ?>

</body>

</html>

Maka hasil akhirnya akan seperti ini :

Buatlah program untuk toko

   Sebuah minimarket menyediakan fasilitas belanja online. Dan untuk bulan ini toko tersebut memberikan discount. Buatlah program untuk toko tersebut dengan perumpamaan pembeli adalah sebagai berikut :

barang 1 : sabun cuci rinso, harga 9000, jumlah 3, diskon 0.05

barang 2 : sikat gigi pepsodent, harga 7000, jumlah 2, diskon 0.07

Output: 

-Harga barang setelah didiskon 

-Jumlah total harga yang harus dibayar pembeli. 

-Jika pembeli tersebut adalah member, maka akan mendapat diskon lagi sebesar 5%. 

-Jumlah barang yang dibeli ada 2.

Scriptnya : 

<!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>Hitung Diskon</title>

</head>

<body>

<?php

$member = "ya";

$diskon_member = 0.05;

$nama_barang1 = "Sabun Cuci Rinso";

$harga1 = 9000;

$jumlah1 = 3;

$diskon1 = 0.05;

$nama_barang2 = "Sikat Gigi Pepsodent";

$harga2 = 7000;

$jumlah2 = 2;

$diskon2 = 0.07;

echo("Apakah ada kartu member? : $member");

echo "<br>";

echo "<br>";

echo("Nama barang yang dibeli");

echo "<br>";

echo("Barang 1");

echo "<br>";

echo ("Barang = $nama_barang1");

echo "<br>";

echo ("Harga = $harga1");

echo "<br>";

echo ("Jumlah = $jumlah1");

echo "<br>";

echo ("Diskon = $diskon1");

echo "<br>";

echo "<br>";

echo("Barang 2");

echo "<br>";

echo ("Barang = $nama_barang2");

echo "<br>";

echo ("Harga = $harga2");

echo "<br>";

echo ("Jumlah = $jumlah2");

echo "<br>";

echo ("Diskon = $diskon2");

echo "<br>";

echo "<br>";

    $biaya1 = ($harga1 *$jumlah1);

    $total1 = $biaya1 - ($biaya1*$diskon1);

    $biaya2 = ($harga2 *$jumlah2) ;

    $total2 = $biaya2 - ($biaya2*$diskon2);

if ($member == "ya"){

    $total = $total1 + $total2;

    $total_member = $total - ($total * $diskon_member);

    echo ("Total bayar = $total");

    echo "<br>";

    echo ("Diskon untuk member = $diskon_member");

    echo "<br>";

    echo ("Harga yang harus dibayar = $total_member");

    echo "<br>";

    }

else{

    $total = $total1 + $total2;

    echo ("Total bayar = $total");

    echo "<br>";

    echo ("Diskon untuk member = $diskon_member");

    echo "<br>";

    echo ("Harga yang harus dibayar = $total");

    echo "<br>";

    }

?>

</body>

</html>

Maka hasilnya : 

Download bahan : Disini