Pemrograman Web PHP - Program Penjualan Sederhana part1 (Membuat File Index atau Form Inputan)

Hallo sahabat blogger, bagaimana kabarnya? Semoga baik-baik saja ya sobat! J . Ok, kali ini saya akan membagikan tutorial Pemrograman Web PHP - Program Penjualan Sederhana part1 (Membuat File Index atau Form Inputan). Dimana media pengkodingan untuk embuat program ini saya menggunakan aplilasi “Sublime Text”. “Sublime Text” itu sebenarnya sama dengan Notepad++, Cuma “Sublime text” itu lebih bagus dari Notepad++. Namun disini anda boleh menggunakan Notepad++, karena sama saja. Ok, tanpa basa-basil lagi, berikut langkah-langka tutorialnya :

1. Pastikan anda sudah menginstall salah satu dari XAMPP atau WAMPP.

2. Setelah itu, pastikan anda sudah membuat forlder baru dengan nama “program_penjualan” di “C:\xampp \htdocs.

3. Silahkan anda buka aplikasi “Sublme Text”.

4. Kemudian, silahkan anda buat file baru di “Sublime Text” anda.

5. Setelah itu, maka akan tampil file baru anda seperti berikut:

6. Setelah itu, silahkan anda “Save As” file yang baru anda buat tadi di lokasi “C:\xampp \htdocs\program_penjualan” dengan nama “index.php”.

7. Setelah itu, silahkan anda ketikkan koding berikut pada file “index.php” yang sudah anda buat tadi :

<form method="POST" action="simpan_penjualan.php">
 <table border="0" align="center">
<tr>
   <td colspan="3" align="center"><h2>
Form Inputan</h2>
</td>
  </tr>
<tr>
   <td>Nama barang</td>
   <td>:</td>
   <td><input type="text" name="nama_barang" id="nama_barang" /></td>
  </tr>
<tr>
   <td>Jenis Barang</td>
   <td>:</td>
   <td><input type="text" name="jenis_barang" id="jenis_barang" /></td>
  </tr>
<tr>
   <td>Harga Satuan</td>
   <td>:</td>
   <td><input type="text" name="harga_satuan" id="harga_satuan" onfocus="mulaiHitung()" onblur="berhentiHitung()" /></td>
  </tr>
<tr>
   <td>Jumlah Beli</td>
   <td>:</td>
   <td><input type="text" name="jumlah_beli" id="jumlah_beli" onfocus="mulaiHitung()" onblur="berhentiHitung()" /></td>
  </tr>
<tr>
   <td>Total Bayar</td>
   <td>:</td>
   <td><input type="text" name="total_bayar" id="total_bayar" /></td>
  </tr>
<tr>
   <td>Diskon</td>
   <td>:</td>
   <td><input type="text" name="diskon" id="diskon" /></td>
  </tr>
<tr>
   <td>Total Setelah Diskon</td>
   <td>:</td>
   <td><input type="text" name="setelah_diskon" id="setelah_diskon" /></td>
  </tr>
<tr>
   <td>Bayar</td>
   <td>:</td>
   <td><input type="text" name="bayar" id="bayar" onfocus="mulaiHitung()" onblur="berhentiHitung()"/></td>
  </tr>
<tr>
   <td>Kembalian</td>
   <td>:</td>
   <td><input type="text" name="kembalian" id="kembalian" /></td>
  </tr>
<script type="text/javascript">
   function mulaiHitung(){
    Interval = setInterval("hitung()",1);
   }
   function hitung(){
    harga_satuan = parseInt(document.getElementById("harga_satuan").value);
    jumlah_beli  = parseInt(document.getElementById("jumlah_beli").value);
    total_bayar  = harga_satuan * jumlah_beli;
    document.getElementById("total_bayar").value = total_bayar;

diskon = "";
    persen = "";
    if (total_bayar <= 100000) {
     diskon = (0/100)*total_bayar;
     persen = "0%";
    }
    else if (total_bayar > 100000 && total_bayar <= 200000) {
     diskon = (10/100)*total_bayar;
     persen = "10%";
    }
    else if (total_bayar > 200000 && total_bayar <= 300000) {
     diskon = (20/100)*total_bayar;
     persen = "20%";
    }
    else if (total_bayar > 300000) {
     diskon = (30/100)*total_bayar;
     persen = "30%";
    }
    document.getElementById("diskon").value = persen +"--> "+diskon;
    setelah_diskon = total_bayar - diskon;
    document.getElementById("setelah_diskon").value = setelah_diskon;
    bayar   = parseInt(document.getElementById("bayar").value);
    kembalian   = bayar - setelah_diskon;
    document.getElementById("kembalian").value = kembalian;
   }
   function berhentiHitung(){
    clearInterval(Interval);
   }
  </script>
<tr>
   <td></td>
   <td></td>
   <td><input type="submit" value="Simpan" /><input type="reset" value="Reset" /></td>
  </tr>
<tr>
   <td></td>
   <td></td>
   <td><a href="laporan_penjualan.php">Laporan</a></td>
  </tr>
</table>
</form>

Kurang lebih, berikut Screenshotnya :

Penjelasan koding :
1) Baris 1-50 adalah koding untuk embuat form, dimana didalam form terdapat tabel, dan di dalam table terdapat textfield-textfield.
2) Baris 19, 24, dan 44 yang di bagian “onfocus="mulaiHitung()" onblur="berhentiHitung()"” adalah fungsi untuk menjalankan perhitungan otomatis di textfile-textfield yang lain berdasarkan Baris 19, 24, dan 44 ini.
3) Baris 51-89 adalah coding javascript, yang berfungsi untuk melakukan perhitungan otomatis yang di butuhkan oleh coding pada baris 19, 24, dan 44 tadi.

8. Selesai.

Jika anda masih bingung, berikut di bawah ini videonya :

Jika anda ingin download aplikasi yang sudah jadinya, silahkan klik disini.

Untuk tutorial selanjutnya yaitu tentang "Program Penjualan Sederhana part2 (Simpan Ke Database MySQL)", silahkan klk disini.

Ok, sekian dari saya tentang "Pemrograman Web PHP - Program Penjualan Sederhana part1 (Membuat File Index atau Form Inputan)", salah dan kurangnya dalam penulisan saya ini, saya mohon ma'af. Dan bagi anda yang ingin bergabugn dengan forum porgramer indonesia, silahkan gabung di Group FB "Forum Programer Java dan PHP Indonesia".