Part 1 - Tutorial CRUD dengan Bahasa PHP + MySQL - Membuat FIle Index atau Form Inputan

Hallo sahabat blogger, bagaimana kabarnya? Semoga baik-baik saja ya sobat! Ok, kali ini saya akan membagikan tutorial Pemrograman Web PHP - Program Penjualan Sederhana part1 (Membuat File Index atau Form Inputan). Dimana media pengkodingan untuk membuat program ini saya menggunakan aplikasi “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 seperti berikut :

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” :

                                    Save As

                          Lokasi Penyimpanan

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

<form> <table border="1" 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 = (10/100)*total_bayar; persen = “0%”; } if (total_bayar > 100000 && total_bayar <= 200000) { diskon = (10/100)*total_bayar; persen = “10%”; } if (total_bayar > 200000 && total_bayar <= 300000) { diskon = (20/100)*total_bayar; persen = “10%”; } if (total_bayar > 200000 && total_bayar >= 300000) { diskon = (20/100)*total_bayar; persen = “10%”; } document.getElementById("diskon").value = 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> </table> </form>

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 masih bingung, silahkan download file program yang sudah jadinya disini.

Jika masih bingung juga, Untuk lebih jelasnya, silahkan lihat video tutorialnya dengan klik di bawah ini :

Untuk selanjutnya, silahkan anda lihat tutorial selanjutnya yaitu tentang“Pemrograman Web Part 1  - Tutorial CRUD dengan Bahasa PHP + MySQL -Membuat tombol simpan ke database MySQL.

Sekian dari saya, salah dan kurangnya dalan tutorial kali ini saya mon ma’af, dan salam sukses.