Membuat Form validation toko online sederhana dengan php
Assalamualikum wr wb
Pada kali ini saya akan membagikan tutorial Form validation toko online sederhana dengan php, tutorial ini sama dengan tutorial validation form lainnya pada umum nya hanya saja sistem validationnya toko online hehehe sedang kan yang lain leih sering membuat form validation tentang biodata :)
6.Kemudian ketikan script di bawah di simpan di file hasil.php
Jika kalian mengalami error atau kesulitan atau ingin bertanya - tanya silahkan tinggalkan komentar dibawah atau bisa chat melalui fanspage kami untuk bisa membantu kalian.
Fiture Script :
-Tampilan Sederhana
- No Database
- Animasi Gambar ketika dihover
mungkin itu yg dapaat saya bagikan mengenai bagaimana Membuat Form validation toko online sederhana dengan php semogra bermanfaaat bagi kalian dan kalau bermanfaat jangan lupa shrere ke teman - teman kalian agar lebih banyak orang yang tau tentang xodeku.
wassalamualikum wr wb
Pada kali ini saya akan membagikan tutorial Form validation toko online sederhana dengan php, tutorial ini sama dengan tutorial validation form lainnya pada umum nya hanya saja sistem validationnya toko online hehehe sedang kan yang lain leih sering membuat form validation tentang biodata :)
Baca Juga : Pengertian Bahasa PHP
Note : Gambar di atas hanya sebagai exmaple dari design yang akan buat .
ikuti langkah - langkah dibawah in untuk membuat nya,ingat ini hanya validasi form bisa dan tidak menggunakan database jadi data hanya di simpan di variabel.
1.Buat Sebut Folder dil dalam htdocs (pasti kalian sudah bisa :))
2.kalian harus punya 3 gambar yg berukuran sama(terserah kalian)
3.Kemudian Buat File 3(index.php , style.css , hasil.php),fungsi index untuk halaman web pertama kita dan style untuk memperindah halaman kita dan hasil untuk melihat dari validasi form
4.Ketik Script CSS di bawah ini dan simpan ke file style.css
/*Setting untuk halaman utama(container)*/.container{ margin: 0 auto; width: 800px;}/*Style untuk tag h1*/h1 a{ color: black; text-shadow: 2px 3px 3px red; font-style: italic; font-family: tahoma; transition: 1s;}h1 a:hover{ text-shadow: 2px 3px 3px yellow; font-style: italic;}h1 a:active{ text-shadow: 2px 2px 3px green; font-style: normal;}/*Untuk animasi gambar ketika di sorot oleh cursor*/img{ transition: 1s;}img:hover{ transform: rotate(360deg); border-radius: 50%; opacity: 4 solid red;}5.Kemudian Ketik script dan simpan di file index.php
/*Style untuk recaptcha*/.recaptcha{ margin: 0 auto; width: 100px;}input.confirm{ padding: 10px; width: 70px; font-size: 14px; font-weight: bold; transition: 1s ease-in-out;}
Baca Juga : Cara Membuat Halaman Login Keren Dengan HTML dan CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP STORE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1><marquee behavior="alternate" direction="left" scrollamount="7" onmouseover="this.stop()" onmouseout="this.start()"> <a href="#">PHP Store</a></marquee></h1>
<fieldset>
<legend>Online Store PHP</legend>
<form action="proses.php" method="post">
<table>
<tr>
<td rowspan="2"><img src="img/sphp.png" height="100" class="sticker"></td>
<td valign="bottom">Sticker PHP (Rp.5000)</td>
</tr>
<tr>
<td valign="top">Jumlah : <input type="number" name="sticker" width="100" min="0" max="100" placeholder="max 100"> </td>
</tr>
<tr>
<td rowspan="2"><img src="img/boneka.png" height="100"></td>
<td valign="bottom">Boneka PHP (Rp.20000)</td>
</tr>
<tr>
<td valign="top">Jumlah : <input type="number" name="boneka" width="100" min="0" max="100" placeholder="max 100"> </td>
</tr>
<tr>
<td rowspan="2"><img src="img/kaos.png" height="100"></td>
<td valign="bottom">Baju PHP (Rp.40000)</td>
</tr>
<tr>
<td valign="top">Jumlah : <input type="number" name="kaos" width="100" min="0" max="100" placeholder="max 100"> </td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td>
<button name="proses">Beli</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>
</fieldset>
</div>
</body>
</html>
6.Kemudian ketikan script di bawah di simpan di file hasil.php
<?php7.Kemudian kalian tinggal buka di localhost kalian contoh localhost/nama_folder kemudian enter dan lihat hasilnya :)
$sticker = $_POST['sticker'];
$boneka = $_POST['boneka'];
$kaos = $_POST['kaos'];
$stotal = $sticker*5000;
$btotal = $boneka*20000;
$ktotal = $kaos*40000;
$total = $stotal+$btotal+$ktotal;
$diskon = $total*5/100;
$bayar = $total - $diskon;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proses Pembayaran</title>
</head>
<body>
<table align="center" width="400" height="auto" border="1">
<tr align="center" bgcolor="#ddd">
<th>Barang</th>
<th>Jumlah</th>
<th>Total</th>
</tr>
<tr align="center">
<td>Sticker(Rp.5000) </td>
<td><?= $sticker; ?></td>
<td><?= $stotal; ?></td>
</tr>
<tr align="center">
<td>Boneka(Rp.20000)</td>
<td><?= $boneka; ?></td>
<td><?= $btotal; ?></td>
</tr>
<tr align="center">
<td>Kaos(Rp.40000)</td>
<td><?= $kaos; ?></td>
<td><?= $ktotal; ?></td>
</tr>
<tr>
<td colspan="2">Total</td>
<td align="center"><?= $total; ?></td>
</tr>
<tr>
<td colspan="2">Diskon</td>
<td align="center">5%</td>
</tr>
<tr>
<td colspan="2">Jumlah yang harus di bayar</td>
<td align="center"><?= $bayar; ?></td>
</tr>
</table>
<br>
<center><a href="index.php">Kembali</a></center>
</body>
</html>
Jika kalian mengalami error atau kesulitan atau ingin bertanya - tanya silahkan tinggalkan komentar dibawah atau bisa chat melalui fanspage kami untuk bisa membantu kalian.
Download Script!!!
Gratis!!!
Fiture Script :
-Tampilan Sederhana
- No Database
- Animasi Gambar ketika dihover
mungkin itu yg dapaat saya bagikan mengenai bagaimana Membuat Form validation toko online sederhana dengan php semogra bermanfaaat bagi kalian dan kalau bermanfaat jangan lupa shrere ke teman - teman kalian agar lebih banyak orang yang tau tentang xodeku.
wassalamualikum wr wb
Posting Komentar untuk "Membuat Form validation toko online sederhana dengan php"