Kalkulasi Textbox Secara Otomatis Di HTML, Php, Dan JQuery

Hai sobat yadishare apa kabar? Sudah hari minggu lagi nih. Iseng-iseng ah pengen nulis mengenai php. Ketika kita membangun sebuah aplikasi menggunakan php, seringkali kita harus membuat sebuah kalkulasi antar textbox secara otomatis agar memudahkan user.

Misalnya kita memiliki 3 buah textbox yang kita buat dengan menggunakan HTML yang terdiri dari qty, harga satuan, dan total jumlah. Kemudian setiap kali kita menginputkan angka ke dalam textbox qty dan textbox harga satuan tersebut, kita ingin textbox total jumlah terhitung secara otomatis agar dapat memudahkan user. Lalu bagaimana caranya?

Nah untuk dapat melakukannya, kita pasti butuh cara yang mudah dan cepat bukan? Ada banyak cara yang dapat kita lakukan untuk mewujudkan hal tersebut. Salah satunya adalah dengan menggunakan bantuan JQuery.

Pertama kalian bisa download file jquery.js disini. Masukkan ke dalam folder assets/js. Kalian juga dapat menambahkan script berikut ini tanpa harus mendownload file diatas jika memang PC/Laptop anda terhubung ke dalam internet.

[code language="html"]

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

[/code]

Jangan lupa juga untuk mendownload css bootstrap agar tampilan halaman web kita menjadi sedikit lebih menarik ya.

Kemudian ketikkan full script html berikut ini ke dalam file index.php dan simpan ke dalam folder textbox-jquery yang anda buat di dalam folder www jika anda menggunakan wamp atau htdoc jika anda menggunakan xampp :

[code language="html"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kalkulasi Textbox Secara Otomatis Di HTML, PHP, Dan JQuery</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">

<script src="assets/js/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<legend class="text-success"><?php echo 'Kalkulasi Textbox Secara Otomatis Di HTML, PHP, Dan JQuery';?></legend>
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<label class="col-lg-3 control-label">Qty</label>
<div class="col-lg-3">
<input type="number" step="any" min="0" name="volume" id="volume" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Satuan</label>
<div class="col-lg-3">
<input type="text" name="satuan" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Harga Satuan</label>
<div class="col-lg-3">
<input type="number" step="any" min="0" name="harga" id="harga" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Jumlah Total</label>
<div class="col-lg-3">
<input type="text" name="jumlah" id="jumlah" class="form-control" Readonly></div>
</div>
</form>
</body>
</html>

<script type="text/javascript">
$("#volume").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

$("#harga").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

</script>

[/code]

Berikut tampilan dari hasil kalkulasi textbox di atas setelah dijalankan dari web browser.

Ini adalah script dari jquery di atas yang digunakan untuk menghitung textbox secara otomatis menggunakan event/function keyup :

[code language="html"]

<script type="text/javascript">
$("#volume").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

$("#harga").keyup(function(){
total = $("#volume").val()* $("#harga").val();
$("#jumlah").val(total);
});

[/code]

Ok guys, thanks for reading my article, I hope this short explanation can help you. Bye. Wanna see the video ? Thanks for watching, don't forget to like, share and subscribe. It's free.

https://www.youtube.com/watch?v=zOvwcNyuGq4

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...

Youtube Tips 2017 | Cara Mengganti Dark Theme

Pada kesempatan ini saya ingin membahas seputar layout youtube terbaru tahun 2017. Yaitu mengenai cara mengganti tema atau theme baru yang bisa kita temui pada saat kita membuka situs youtube. Mungkin fitur baru ini sengaja disediakan oleh google agar kita tidak jenuh atau bosan dengan tampilan youtube yang itu-itu saja. Fitur ini bisa anda aktifkan dan non aktifkan sesuai dengan selera anda kapan pun anda mau. Kalau menurut saya sih cukup keren. Makanya ketika saya tahu kalau mereka menyediakan fitur tersebut, saya langsung tertarik untuk mencobanya. Dan kesan yang saya dapatkan cukup memuaskan. Karena pada dasarnya saya sebagai developer atau programmer memang sudah terbiasa dengan layout bertema gelap seperti itu. Untuk melihat coding-coding php, vb, dan lain-lain lebih mudah untuk membedakan syntax yang satu dengan syntax yang lainnya. Nah jika anda tertarik untuk mencoba dark theme baru tersebut, kalian bisa langsung menggantinya melalui menu setting. Disana akan ada opsi untuk me...

Belajar PHP Itu Menyenangkan (Memahami Syntax Dasar PHP)

Ngga tahu kenapa saya lagi bersemangat sekali nulis artikel tentang php. Padahal sudah malam nih. Sudah jam 22:40. Waktunya tidur karena besok mesti kerja lagi dan ngga boleh kesiangan pula tuk bangun sholat subuh. Mungkin karena saya merasa kalau saya punya hutang kepada sobat yadishare semua bahwa selama ini saya jarang sekali nulis tentang php. Lebih banyak nulis dan bikin video tentang delphi, visual basic, odoo, photoshop, cara bikin video, grafik, database dan lain-lain. Nah berhubung lagi ada kesempatan dan masih diberikan kesehatan sama yang maha kuasa, jadi saya mau cicil saja sharing tentang php nya dari hal-hal yang sangat sederhana sekali ya. Karena untuk memahami materi bahasa pemrograman tertentu terkadang memang tidak mudah. Termasuk mengenai php. Apalagi untuk menguasai banyak bahasa pemrograman pasti tidak akan mudah. Butuh keseriusan dari diri kita masing-masing. Ibaratnya dulu kalau sekolah kita mungkin suka malas belajar matematika, fisika, kimia, dan lain-lain. Ket...

Yadishare

Search This Blog