Tutorial membuat form input sederhana dengan HTML masih tergolong mudah dan wajib bisa untuk anda yang ingin memulai membuat website. Tutorial ini meneruskan tutorial sebelumnya dimana anda telah membuat tampilan tabel sederhana dan menampilkan data dari database ke dalam tabel dihalaman web. Sekarang anda akan membuat tampilan form sederhana untuk input data produk ke tabel produk. Contoh kasus ini anda akan membuat form input produk.
Disini masih menggunakan tag <table></table> untuk membuat form input. Beberapa tag dalam HTML untuk membuat sebuah form diantaranya
<form></form> //tag pembuka sebuah form
<input type=”text” name=”namafield”> // untuk field inputan berbentuk text
<input type=”email” name=”namafield”> // untuk field inputan berformat email
<input type=”number” name=”namafield”> // untuk field inputan berbentuk angka
<textarea name=”namafield” cols=”50” rows=”4”> //untuk inputan yang jumlahnya banyak
<button type=”submit” name=”submit”>Submit</button> //tombol untuk simpan
<select name=”pilihan> //untuk inputan yang memiliki pilihan tertentu
<option value=””>value 1</option>
<option value=””>value 2</option>
</select>
Nah, itulah contoh element html untuk form input yang akan kita buat, silahkan anda pelajari element yang lainnya, anda dapat search di google aja yah..
Membuat form input produk, pertama anda buka file produk.php. lalu block semua isinya dan copy paste di file baru, silahkan anda beri nama file baru tersebut dengan nama input.php simpan di dalam folder yang sama yah dengan sebelumnya.
Oke, selanjutnya dari file yang sudah anda copy paste tersebut, hapus script diantara tag <body>....</body>, hapus semua yah, sehingga scriptnya menjadi seperti ini
<?php
//panggil file koneksi.php yang sudah anda buat
include "koneksi.php";
?>
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>JUDUL WEBSITE ANDA</title>
</head>
<body>
</body>
</html>Setelah anda menghapus script tersebut, selanjutnya sisipkan script berikut ini pada tag <body>..</body>
Sisipkan script berikut ini
<form action="" method="post" enctype="multipart/form-data">
<table border="0" cellspacing="10" width="800" align="center">
<tbody>
<tr>
<td>Nama Produk</td>
<td>:</td>
<td><input type="text" name="nama" placeholder="Nama Produk" size="50" maxlength="30" autocomplete="off" autofocus/>
</td>
</tr>
<tr>
<td>Kategori Produk</td>
<td>:</td>
<td>
<select name="kategori">
<option value="">Pilih Kategori</option>
<option value="1">Pakaian Pria</option>
<option value="2">Pakaian Wanita</option>
<option value="3">Pakaian Anak</option>
</select>
</td>
</tr>
<tr>
<td>Deskripsi Produk</td>
<td>:</td>
<td><textarea name="deskripsi" placeholder="Deskrippsi Produk" rows="3" cols="50"/></textarea></td>
</tr>
<tr>
<td>Stok Produk</td>
<td>:</td>
<td><input type="text" name="stok" placeholder="Stok Produk" size="20" maxlength="10"/></td>
</tr>
<tr>
<td>Berat Produk</td>
<td>:</td>
<td><input type="text" name="berat" placeholder="Berat Produk" size="30" maxlength="30"/></td>
</tr>
<tr>
<td>Harga Produk</td>
<td>:</td>
<td><input type="text" name="harga" placeholder="Harga Produk" size="30" maxlength="30"/></td>
</tr>
<tr>
<td>Diskon Produk</td>
<td>:</td>
<td><input type="text" name="diskon" placeholder="Diskon Produk" size="30" maxlength="10"/></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="simpan">Proses Data</button</td>
</tr>
</tbody>
</table>
</form>
Simpan script tersebut yah, setelah anda menyimpan silahkan jalankan di browser anda. Hasilnya akan seperti ini
Penjelasan mengenai cara membuat form, lebih detail dapat anda lihat di video yang sudah saya sertakan.
Oke, itulah cara sederhana untuk membuat tampilan form input produk dimana berfungsi untuk menginputkan data ke tabel produk di database,
Tutorial selanjutnya akan membahas cara menyimpan data ke database dengan script PHP, jadi setelah anda membuat form selanjutnya menghubungkan dengan database dengan PHP, sehingga data dapat terinput ke database dengan menekan tombol proses data.
Terimakasih
0 Komentar