July 18, 2024

Part 3 : Merancang Form Untuk Aplikasi Pembelian dan Penjualan

2 min read

Haii semua ini adalah bagian ke 3 dari sebuah sistem aplikasi untuk membantu mempermudah kinerja dan manajemen sebuah toko. Pada bagian ini kita akan merancang form-form yang dibutuhkan untuk melakukan inputan data pada database.  Setelah sebelumnya kita sudah merancang halaman utama dari website selanjutnya yang akan kita rancang adalah form-form yang akan digunakan. Form akan dirancang dengan menggunakan HTML dan CSS

 Langkah 1

Form pertama yang akan dibuat adalah form login. Form login berfungsi sebagai jalan akses user untuk masuk kedalam website. Berikut ini adalah coding HTML dari halaman form login.

[sourcecode]
<div id="formku">

<div id="judul_form"><p>Login System</p></div>

<form method="post" action="">

<table width="100%" border="0">

<tr>

<td>Username</td>

<td><input name="username" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Password</td>

<td><input name="password" type="password" /></td>

</tr>

<tr>

<td></td>

<td><input name="" type="submit" value="Login"></td>

</tr>

</table>

</form>

</div>

[/sourcecode]

Form login ini menggunakan id dengan nama formku, id dengan nama judul_form, class pendek. Dimana pengaturan class dan id akan dilakukan pada bagian CSS di Langkah 2.

Langkah 2

Untuk mempercantik halaman form yang akan digunakan bisa menambahkan coding CSS yang akan dipanggil pada halaman utama website. Berikut adalah coding CSS dari form yang akan digunakan. Simpan CSS form ini dengan nama style_form.css.

[sourcecode]</p>
#formku{

width:600px;

line-height:200%;

border:solid 1px #CCCCCC;

float:left;

}

#judul_form     {

width:600px;

height:30px;

background:#39937A;

margin-bottom:10px;

}

#judul_form p   {

font-size:12px;

font-weight:bold;

margin-left:10px;

}

.judul  {

font-weight:bold;

border-bottom:solid 2px #666666;

}

.pendek{

border:solid #CCC 1px;

width:150px;

height:25px;

}

.pendek-lagi    {

border:solid #CCC 1px;

width:30px;

height:25px;

}

.panjang        {

border:solid #CCC 1px;

width:200px;

height:25px;

}

input[type="password"]  {

border:solid #CCC 1px;

width:150px;

height:25px;

}

input[type="submit"]    {

border:solid #666 1px;

width:100px;

height:25px;

text-transform:uppercase;

background:#999;

}

textarea        {

border:solid #CCC 1px;

width:300px;

height:100px;

}

select  {

border:solid #CCC 1px;

width:150px;

height:25px;

}

[/sourcecode]

Langkah 3

Berikut adalah seluruh desain coding HTML untuk masing-masing form yang akan digunakan.

Form Kategori

[sourcecode]

<div id="formku">

<div id="judul_form"><p>Form Kategori</p></div>

<form method="post" action="">

<table width="100%" border="0">

<tr>

<td>Kode Kategori</td>

<td><input name="vkd_kategori" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Nama Kategori</td>

<td><input name="vnm_kategori" type="text" class="panjang" /></td>

</tr>

<tr>

<td></td>

<td><input name="" type="submit" value="Simpan"></td>

</tr>

</table>

</form>

</div>

[/sourcecode]

Form Produk

[sourcecode]

<div id="formku">

<div id="judul_form"><p>Form Produk</p></div>

<form method="post" action="">

<table width="100%" border="0">

<tr>

<td>Kode</td>

<td><input name="vkd_produk" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Nama Produk</td>

<td><input name="vnm_produk" type="text" class="panjang" /></td>

</tr>

<tr>

<td>Harga</td>

<td><input name="vharga" type="text" class="pendek" /></td>

</tr>

<tr>

<tr>

<td>Kategori</td>

<td>

<select name="vnm_kategori">

<option></option>

</select>

</td>

</tr>

<td></td>

<td><input name="" type="submit" value="Simpan"></td>

</tr>

</table>

</form>

</div>

[/sourcecode]

Form Transaksi Pembelian

[sourcecode]

<div id="formku">

<div id="judul_form"><p>Transaksi Pembelian</p></div>

<form method="post" action="">

<table width="100%" border="0">

<tr>

<td colspan="2" class="judul">DATA TRANSAKSI</td>

</tr>

<tr>

<td width="28%">No Pembelian</td>

<td width="72%"><input name="vno_pembelian" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Tanggal Pembelian</td>

<td><input name="vtgl_beli" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Supplier</td>

<td>

<select name="vnm_supplier">

<option></option>

</select>

</td>

</tr>

<tr>

<td>Keterangan</td>

<td>

<textarea name="vketerangan"></textarea>

</td>

</tr>

<tr>

<td colspan="2" class="judul">ITEM PEMBELIAN</td>

</tr>

<tr>

<td>Nama Item Produk</td>

<td><input name="vitem_produk" type="text" class="panjang" /></td>

</tr>

<tr>

<td>Harga Satuan (Rp)</td>

<td><input name="vno_pembelian" type="text" class="pendek" />

Jumlah : <input name="vjumlah" type="text" class="pendek-lagi" />

<select name="vsatuan">

<option>Ekor</option>

<option>Botol</option>

<option>Ons</option>

<option>Kg</option>

<option>Litter</option>

<option>Lusin</option>

<option>Kotak</option>

<option>Pcs</option>

</select>

<input type="submit" value="add" class="btn-add" />

</td>

</tr>

<tr>

<td colspan="2" class="judul"></td>

</tr>

<tr>

<td></td>

<td><input name="" type="submit" value="Simpan"></td>

</tr>

</table>

</form>

</div>

[/sourcecode]

Form Supplier

[sourcecode]

<div id="formku">

<div id="judul_form"><p>Form Supplier</p></div>

<form method="post" action="">

<table width="100%" border="0">

<tr>

<td>Kode</td>

<td><input name="vkd_supplier" type="text" class="pendek" /></td>

</tr>

<tr>

<td>Nama Supplier</td>

<td><input name="vnm_supplier" type="text" class="panjang" /></td>

</tr>

<tr>

<td>Alamat</td>

<td>

<textarea name="valamat"></textarea>

</td>

</tr>

<tr>

<td>Nomor Telp</td>

<td><input name="vtelp_supplier" type="text" class="panjang" /></td>

</tr>

<tr>

<td></td>

<td><input name="" type="submit" value="Simpan"></td>

</tr>

</table>

</form>

</div>

[/sourcecode]

Masih cukup mudah untuk mengikuti langkah sampai dengan Part 3 : Merancang Form untuk Aplikasi Pembelian dan Penjualan. Pada bagian selanjutnya kita akan mulai membuat halaman proses penyimpanan data pada basis data yang sudah dirancang pada Part 1 : Merancang Database Sistem Aplikasi Restoran. Sampai jumpa pada part selanjutnya :).

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.