Belajar Codeigniter : Membuat Kalkulator Sederhana dengan Framework CodeIgniter dan jQuery Ajax

tampilan bootstrap kalkulator simpleSelamat 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:

tampilan kalkulator sederhana
Kalkulator CI


Untuk penjelasan masing-masing source code
Buatlah controler dengan nama Kalkulator.php syntaksnya buat function hitung seperti dibawah ini

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);

 }

}

fungsi dari function hitung() adalah menampung nilai yang ditransfer oleh form yang berasal dari view yang akan kita buat.

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


Artikel Terkait

2 komentar

kn hanya menggunakan
bukan seharusnya
mohon penjelasan maaf newbie


EmoticonEmoticon