Selamat pagi, pada kesempatan kali ini sambil mendengar penjelasan dosen saya akan share tentang penggunaan framework codeigniter dalam pembuatan kalkulator yang sederhana berbasis web. Kalkulator ini menggunakan dua input field yang berfungsi untuk menampung bilangan pertama dan bilangan kedua juga ada combobox untuk pilihan operator aritmatikanya (+,-, *, /).Tampilan kalkulator yang saya buat seperti dibawah ini:
 |
| Kalkulator CI |
Untuk penjelasan masing-masing source code
Buatlah controler dengan nama Kalkulator.php syntaksnya buat function hitung seperti dibawah ini
fungsi dari function hitung() adalah menampung nilai yang ditransfer oleh form yang berasal dari view yang akan kita buat.
class Kalkulator extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->view('vkalkulator');
}
public function hitung()
{
$bil1 = $this->input->post('bil1');
$bil2 = $this->input->post('bil2');
$hitung = $this->input->post('hitung');
$hasil = 0;
if($hitung == '+'){
$hasil = $bil1 + $bil2;
}
if ($hitung == '-') {
$hasil = $bil1 - $bil2;
}
if ($hitung == '*') {
$hasil = $bil1 * $bil2;
}
if ($hitung == '/') {
$hasil = $bil1 / $bil2;
}
$nilai['hasil'] = $hasil;
echo json_encode($nilai);
}
}
Tahap selanjutnya kita akan membuat view buatlah file di folder views dengan nama Vkalkulator.php
untuk formnya kita buat sintaks seperti dibawah ini:
<html>
<head>
<title>Kalkulator</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/bootstrap/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".submit").click(function(event) {
event.preventDefault();
var bilangan1 = $("#bil1").val();
var bilangan2 = $("#bil2").val();
var option = $("#hitung").find("option:selected").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"index.php/kalkulator/hitung",
dataType: 'json',
data: {bil1: bilangan1, bil2: bilangan2, hitung:option},
success: function(res) {
jQuery("#value").html(res.hasil);
}
});
});
});
</script>
</head>
<body>
<div class="container" style="margin-top: 100px; margin-left: 250px">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<p>Kalkulator</p>
<?php
echo form_open();
$bil1 = array(
'class' => 'from-control',
'type' => 'number',
'name' => 'bil1',
'id' => 'bil1'
);
echo form_input($bil1);
echo "<br>";
echo "<br>";
$bil2 = array(
'class' => 'from-control',
'type' => 'number',
'name' => 'bil2',
'id' => 'bil2'
);
echo form_input($bil2);
echo "<br><br>";
?>
<select id="hitung">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<?php
echo "<br> <br>";
echo form_submit('submit', 'Hasil', "class='btn btn-danger submit'");
echo form_close();
?>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<center>
<h1>Hasil:</h1>
<h1 id="value"></h1>
</div>
</center>
</div>
</div>
</div>
</body>
</html>
Tahap selanjutnya kalian perhatikan bagian script yang mengatur ajaxnya, yang paling penting menurut saya adalah url dari function di kontroller yang kita buat, kalau itu salah akan membuat function tidak berjalan. untuk yang lainnya menurut saya menggunakan penerapan jQuery seperti biasa. Berikut script diatas yang lebih jelasnya, ini harus kalian tambahkan:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".submit").click(function(event) {
event.preventDefault();
var bilangan1 = $("#bil1").val();
var bilangan2 = $("#bil2").val();
var option = $("#hitung").find("option:selected").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"index.php/kalkulator/hitung",
dataType: 'json',
data: {bil1: bilangan1, bil2: bilangan2, hitung:option},
success: function(res) {
jQuery("#value").html(res.hasil);
}
});
});
});
</script>
Mungkin sekian tutorial kali ini, untuk script lengkap bisa kalian download dibawah ini:
Download Download Download
Baca artikel lainnya:
Tutorial Basic CRUD dengan Framework PHP CodeIgniter
Menghasilkan Uang (Pulsa) di Ponsel Android dengan Aplikasi CashTree
Project UAS Point of Sales (Transaksi) dengan native PHP
