Scribd Logo
Unggah

Selamat datang di Scribd!

  • Menampilkan Data Secara Langsung Tanpa Harus Di Klik J Query

    Diunggah oleh

    um4ir
    41 tayangan2 halaman
    Panduan ini untuk menampilkan data secara langsung tanpa harus di klik dengan Jquery

    Judul Asli

    Menampilkan Data secara Langsung Tanpa harus di klik J Query

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Panduan ini untuk menampilkan data secara langsung tanpa harus di klik dengan Jquery

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    41 tayangan2 halaman

    Menampilkan Data Secara Langsung Tanpa Harus Di Klik J Query

    Diunggah oleh

    um4ir
    Panduan ini untuk menampilkan data secara langsung tanpa harus di klik dengan Jquery

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 2

    Menampilkan data secara langsung tanpa harus klik tombol

    menggunakan Jquery
    OCTOBER 25, 2011 1 COMMENT

    Rate This

    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 :
    1. Ketikkan Kode berikut di PHP/HTML Editor kesayangan anda.
    1 <html>
    2 <head>
    <title>Penjualan</title>
    3 <script type="text/javascript" src="jquery.js"></script>
    4 <script type="text/javascript">
    5 $(document).ready(function() {
    6 $('#diskon').keyup(function(){
    7 <!-- Ambil nilai bayar dan diskon !-->
    var bayar=parseInt($('#bayar').val());
    8 var diskon=parseInt($('#diskon').val());
    9
    10 <!-- Perhitungan bayar-(diskon/100 x bayar) !-->
    11 var total_bayar=bayar-(diskon/100)*bayar;
    12 $('#Tbayar').val(total_bayar);
    });
    13 });
    14 </script>
    15 </head>
    16 <body>
    17 <table border="0" cellpadding="5" align="center">
    <form action="" method="post">
    18 <tr>
    19 <td>Total Bayar</td> <td> : </td> <td><input type="text" name="bayar"
    20 (dalam Rp)</td>
    21 </tr>
    22 <tr>
    <td>Diskon</td> <td> : </td> <td><input type="text" name="diskon" id=
    23 </td>
    24 </tr>
    25 <tr>
    26 <td>Total Bayar (sesudah diskon)</td> <td> : </td>
    27 <td><input type="text" name="Tbayar" id="Tbayar" readonly="readonly" /
    Rp)</td>
    28 </tr>
    29 </tr>
    30 </form>
    31 </table>
    32 </body>
    </html>
    33
    34
    35
    36
    2. 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)
    3. Save/Simpan dengan nama penjualan.html
    4. Buka penjualan.html di browser kesayangan anda.

    Anda mungkin juga menyukai