Kode Komputer: Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery

Pada artikel kali ini saya akan mencoba untuk memberikan tutorial tentang bagaimana menampilkan data tanpa harus klik tombol. Misalkan gini ada user yang sedang menggunakan aplikasi penjualan, user tersebut melihat jumlah yang harus dibayar adalah 30.000 lalu ada diskon 10% sehingga secara otomatis aplikasi tersebut menampilkan total bayarnya (sesudah diskon) 27.000. Untuk Lebih Jelasnya lihat gambar berikut ini.

Untuk melihat demonya klik disini.
Requirement :
- Download Jquery.js
- Download Editor PHP/HTML misalnya Adobe Dreamweaver, Notepad ++, CodeLobster, dll.
Cara Membuatnya :

Ketikkan Kode berikut di PHP/HTML Editor kesayangan anda.

<html>

<head>

<title>Penjualan</title>

    <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

            $('#diskon').keyup(function(){

            <!-- Ambil nilai bayar dan diskon !-->

            var bayar=parseInt($('#bayar').val());

            var diskon=parseInt($('#diskon').val());

            <!-- Perhitungan bayar-(diskon/100 x bayar) !-->

            var total_bayar=bayar-(diskon/100)*bayar;

            $('#Tbayar').val(total_bayar);

            });

        });

        </script>

</head>

    <body>

        <table border="0" cellpadding="5" align="center">

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

            <tr>

                <td>Total Bayar</td> <td> : </td> <td><input type="text" name="bayar" id="bayar" /> (dalam Rp)</td>

            </tr>

            <tr>

                <td>Diskon</td> <td> : </td> <td><input type="text" name="diskon" id="diskon" /> % </td>

            </tr>

            <tr>

                <td>Total Bayar (sesudah diskon)</td> <td> : </td>

                <td><input type="text" name="Tbayar" id="Tbayar"  readonly="readonly" /> (dalam Rp)</td>

            </tr>

            </tr>

            </form>

        </table>

    </body>

</html>

Penjelasan Kode :

Baris 4 : Karena kiata menggunakan Jquery, maka kita harus sertakan library jquery
Baris 7 : $(‘#diskon’).keyup artinya ketika inputan yang idnya adalah diskon (baris ke-26) diketikkan sesuatu maka kerjakan kode di bawah ini
Baris 9 : buat variabel bayar dimana nilai dari variabel tersebut diambil dari nilai yang diketikkan di inputan yang berid bayar (baris ke-23)
Baris 10 : buat variabel diskon dimana nilai dari variabel tersebut diambil dari nilai yang diketikkan di inputan yang berid diskon (baris ke-26)
Baris 13 : ini perhitungannya, jadi buat variabel bayar dengan rumus total_bayar=bayar – (diskon/100) * bayar
Baris 14 : Hasil dari perhitungan tadi dimasukan ke inputan yang berid TBayar(baris ke-30)

Save/Simpan dengan nama penjualan.html
Buka penjualan.html di browser kesayangan anda.

Kode Komputer

Menampilkan data secara langsung tanpa harus klik tombol menggunakan Jquery

Tidak ada komentar:

Posting Komentar

PROFIL

Statistik