Form (Web Penjualan Handphone)

Membuat form penjualan handphone

Buatlah 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: hanadiana,
Password: Secret 

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.

berikut 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>Membuat Form Login</title>
</head>
<body>
<h1>Menu Login</h1>
<form name="input" method="POST" action="latihanproses.php">
    username : <input type="text" name="username" maxlength=lengt size=30> <br><br>
    pasword : <input type="password" name="password" maxlengt=lenght size=30> <br>
    <input type=submit name=Login value=Login>
</form>

</body>
</html>

script outputnya:

<!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 == "hanadiana" and $password == "Secret" ) {
    echo "Anda berhasil login";
}

else {
    echo "Maaf Ada Kesalahan";
}


    ?>
</body>
</html>


Langkah-langkah membuat form:

1. Buat folder baru pada folder XAMPP> htdocs. Lalu masukkan file yang di download ke folder baru seperti contoh:




2. Buka Visual Studio Code. Lalu buka Folder yang tadi sudah dibuat. 



3. Buat web untuk penjualan handphone seperti berikut ini :

a. Produk : gunakan checkbox 

b. ID Customer, Nama, Email, Alamat : gunakan text 

c. Member : gunakan radio button 

d. Pembayaran : gunakan combo box yang terdiri dari VISA, Master Card, Debit BCA. 

Lakukan validasi sebagai berikut : 

ID Customer : harus sebagai bilangan, dan tidak boleh kosong. 

Nama : tidak boleh kosong 

Email : tidak boleh kosong, dan sesuai dengan format email 

Alamat : tidak boleh kosong 


Masukkan script seperti 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>Handphone Shop</title>
</head>
<body>
  <form ACTION="prosesform.php" method="POST">
  <h2>HANDPHONE SHOP </h2>
  <P>Produk GSM Mobile (Best Price)</p>
  <input type="checkbox" name="hp1" value="Nokia 1208 Rp. 350.000,- "
  checked> Nokia 1208 Rp. 350.000,-<br>
  <input type="checkbox" name="hp2" value="Nokia 1661 Rp. 465.000,-">
  Nokia 1661 Rp. 465.000,-<br>
  <input type="checkbox" name="hp3" value="SonyEricsson K330 Rp. 485.000,-">
  SonyEricsson K330 Rp. 485.000,-<br>
  <input type="checkbox" name="hp4" value="Samsung Champ Rp. 865.000,-">
  Samsung Champ Rp. 865.000,-<br>
  <input type="checkbox" name="hp5" value="Samsung B3410 Rp. 1.624.000,-">
  Samsung B3410 Rp. 1.624.000,-<br>

========================================
 
<p>Data Customer</p>
  ID Customer : <input type="text" name="id_customer"></br>
  Nama : <input type="text" name="nama"><br>
  Email : <input type="text" name="email"><br>
  Alamat : <input type="text" name="alamat"><br>
 
  Member :<br>
  <input type="radio" name="member" value="member" checked>
  Member<br>
  <input type="radio" name="member" value="bukan">
  Bukan<br>

  Pembayaran :<br>
  <select name="pembayaran">
    <option value="VISA">VISA</option>
    <option value="MASTERCARD">MASTERCARD</option>
    <option value="DEBIT BCA">DEBIT BCA</option>
  </select></br>

  <input type="submit" name="Proses" value="Proses">
  </form>
</body>
</html>


Tampilannya akan menjadi seperti ini





4.  Hitung total harga yang harus dibayar customer sehingga bisa menampilkan seperti berikut ini : 
Jika customer sebagai member maka akan mendapatkan diskon sebesar 10 %.

Untuk membuat outputnya, bisa menggunakan script 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>Proses Handphone Shop</title>
</head>
<body>
  <?php
  // $hp1 = $_POST['hp1'];
  // $hp2 = $_POST['hp2'];
  // $hp3 = $_POST['hp3'];
  // $hp4 = $_POST['hp4'];
  // $hp5 = $_POST['hp5'];

  $id_customer = $_POST['id_customer'];
  $nama = $_POST['nama'];
  $email = $_POST['email'];
  $alamat = $_POST['alamat'];
  $member = $_POST['member'];
  $pembayaran = $_POST['pembayaran'];

    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 : $id_customer <br>";
  echo "Nama : $nama <br>";
  echo "Email : $email <br>";
  echo "Alamat : $alamat <br>";
  echo "Member : $member <br>";
  echo "Pembayaran : $pembayaran <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>


Tampilannya akan menjadi seperti ini




Komentar

Postingan Populer