Panduan kali ini saya akan membahas Belajar Codeigniter Dasar Untuk Pemula, dan Cara Membuat Kalkulator Sederhana Dengan Codeigniter Dan B...
Belajar Codeigniter Dasar Untuk Pemula
Rabu, Juli 03, 2019
Daftar Isi [Tampil]
Panduan kali ini saya akan membahas Belajar Codeigniter Dasar Untuk Pemula, dan Cara Membuat Kalkulator Sederhana Dengan Codeigniter Dan Bootstrap.
Apakah Anda sudah mengetahui apa yang dimaksud dengan codeigniter?
Jika belum, maka saya akan bahas terlebih dahulu apa itu codeigniter secara singkat dan tepat.
Codeigniter adalah sebuah faramework atau dikenal dengan kerangka kerja PHP, framework inilah yang membantu programmer membuat sebuah website dengan PHP menjadi lebih cepat dan mudah.
Salah satu kelebihan dari framework codeigniter ini adalah kecepatan performa nya, dan memiliki konfigurasi minim.
Setelah Anda tahu apa itu codeigniter, mari kita lanjutkan pembelajaran kali ini dengan membahas sejarah codeigniter dengan singkat dan tepat.
Sejarah Codeigniter Singkat
Jika ingin belajar codeigniter dasar untuk pemula Anda harus tahu juga sejarahnya, agar Anda dapat menghargai orang yang menciptakan bahasa pemrograman tersebut.
Codeigniter adalah frame work PHP dengan model MVC (Model, View, Controller) yang digunakan untuk membuat sebuah website dinamis dengan PHP.
Dengan menggunakan codeigniter Anda dapat membuat sebuah website dengan cepat, karena Anda telah memiliki kerangka kerjanya.
Tahukah Anda siapa orang hebat yang pertama kali menciptakan codeigniter?
Jawaban nya adalah ElisLab.
Terus kapan codeigniter pertama kali dirilis?
Jawaban nya yaitu pada tanggal 28 Februari 2006.
Setelah itu codeigniter di ambil alih oleh BCIT (British Institute Of Technology), mereka mengembangkan codeigniter dari mulai versi 2.2.6 sampai sekarang versi 3.1.10.
Pengertian MVC (Model View Controller)
Tadi sudah kita bahas sedikit bahwa codeigniter adalah framework PHP dengan model MVC, Nah apakah Anda tahu apakah yang dimaksud dengan MVC?
Anda juga harus mengetahui MVC jika ingin belajar codeigniter dasar untuk pemula, agar Anda tidak kebingungan.
MVC adalah sebuah metode yang menggunakan pemisahan data (Model), dari tampilannya (View), dan bagaimana cara untuk memprosesnya (Controller).
Contoh perakteknya yaitu, MVC memisahkan pengembangan aplikasi, berdasarkan kompunen utama yang membangun aplikasi, seperti memanipulasi data, bagian controll dari sebuah web, dan user interface.
MVC dibangun oleh 3 komponen pattern pada sebuah aplikasi, apa sajakah 3 komponen tersebut?
Berikut inilah penjelasan nya.
1. Model.
Pada biasanya model akan berhubungan langsung dengan database, untuk memanipulasi data seperti insert, search, delete, dan update.
Model akan menangani validasi dari controller, tapi model tidak dapat berhubungan langsung dengan bagian view.
2. View.
View adalah komponen yang menangani presentation logic. Contohnya pada aplikasi web, biasa nya
view adalah file template HTML yang di control oleh controller.
Fungsi dari komponen View ini adalah untuk menerima dan merepresentasikan data kepada user.
3. Controller.
Controller adalah komponen yang berfungsi untuk mengatur hubungan antara model dengan view.
Controller akan menerima reques data dari user, kemudian controller akan menentukan apa yang akan diproses oleh aplikasi web tersebut.
Setelah Anda tahu apa itu codeigniter, mari kita lanjutkan pembelajaran kali ini dengan belajar cara Instalasi Codeigniter di komputer Anda.
Cara Instalasi Codeigniter Di Komputer
Panduancode Belajar Codeigniter Dasar Untuk Pemula selanjutnya adalah belajar untuk menginstall codeigniter di komputer Anda.
Untuk Versi codeigniter saat ini adalah versi 3.1.10 yang bisa Anda unduh di situs codeigniter.
Tahap pertama untuk cara instalasi codeigniter adalah dengan mengistall Xampp sebagai sistem web server kita.
Jika Anda belum menginstall Xampp, silahkan install terlebih dahulu, jika sudah tahap kedua adalah unduh codeigniter nya, Anda dapat mengunduh nya di website codeigniter.
Setelah Anda selesai mengunduh codeigniter nya, langsung saja ekstrak file codeigniter tersebut, dan simpan di folder htdocs dari xampp yang telah Anda install tadi.
Kemudian aktifkan dulu xampp Anda, dan nyalakan Apache dan Mysql saja.
Lalu Anda masuk ke folder htdocs Anda, dan rename nama folder CodeIgniter 3.1.10 menjadi CodeIgniter saja agar lebih mudah.
Jika sudah cari file config.php di dalam folder CodeIgniter tadi, buka folder CodeIgniter lalu application, nah disana ada file config.php.
Buka file config.php dengan text editor andalan Anda, kemudian cari code berikut ini:
$config['base_url'] = ' ';
Jika sudah ubahlah menjadi seperti ini:
$config['base_url'] = 'http://localhost/CodeIgniter';
Kemudian save, lalu anda masuk ke browser dan ketikkan localhost/CodeIgniter, dan kalau Anda berhasil mengistal codeigniter di komputer, maka akan terlihat seperti gambar dibawah ini.
Sekarang mari kita lanjutkan belajar codeigniter untuk pemula ini dengan membuat sebuah project sederhana.
Cara Membuat Kalkulator Sederhana Dengan Codeigniter Dan Bootstrap
Project apa yang akan kita buat?. Project yang akan kita buat yaitu, membuat kalkulator sederhana dengan codeigniter dan bootstrap.
Kenapa panduancode memilih membuat project kalkulator dibanding yang lain?
Jawabannya sebab panduancode ingin Anda cepat memahami belajar codeigniter dasar untuk pemula ini.
Dan dengan bantuan dari bootstrap tampilan project kita akan menjadi lebih elegan, dan menarik untuk dilihat.
Sekarang mari kita mulai membuat kalkulator sederhana dengan bootstrap nya.
Tahap-tahap Membuat Kalkulator Sederhana Dengan Codeigniter Dan Bootstrap
Untuk membuat kalkulator sederhana dengan codeigniter dan bootstrap, Anda harus mengikuti tahap-tahap dibawah ini dengan benar.
1. Anda harus mengunduh bootstrap yang akan kita gunakan pada panduan kali ini, jangan khawatir Anda dapat mengunduh bootstrap 4 untuk project ini.
2. Jika sudah simpan folder bootstrap tersebut di folder CodeIgniter Anda yang telah kita buat, lihat gambar berikut ini agar Anda paham.
3. Lalu Anda masuk ke folder config dan buka file routes.php, jika sudah Anda rubah tulisan wellcome nya menjadi Kalkulator, kemudian save, dan akan terlihat seperti dibawah ini.
$route['default_controller'] = 'Kalkulator';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
4. Berikutnya Anda buka folder application, kemudian folder config, dan buka file autoload.php.
scroll kebawah sampai ke baris 92 dan edit script nya menjadi seperti ini.
$autoload['helper'] = array('url', 'form');
Kemudian save file autoload.php tersebut.
5. Tahap selanjutnya yaitu membuat file Kalkulator.php di dalam folder controllers, untuk membuat file nya buka text editor Anda dan ketik atau copy script berikut ini.
Kalkulator.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Kalkulator extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$hasil ['hasil']= 0;
$this->load->view('Vkalkulator' , $hasil);
}
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);
}
}
/* End of file Kalkulator.php */
/* Location: ./application/controllers/Kalkulator.php */
Jika sudah silahkan save dengan nama Kalkulator.php.
6. Langkah berikutnya untuk membuat kalkulator sederhana dengan codeigniter dan bootstrap, Anda buka folder views didalam folder application.
7. Selanjut nya kita akan membuat tampilan views dari file Kalkulator.php yang telah kita buat tadi.
Untuk itu kita akan membuat file baru yaitu file Vkalkulator.php.
Panduancode akan mempermudah Anda caranya ketik script berikut ini atau copy saja agar cepat ya.
Vkalkulator.php
<!DOCTYPE html>
<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>
Lalu save dengan nama Vkalkulator.php.
Sekarang Anda telah selesai membuat kalkulator sederhana dengan codeigniter dan bootstrap.
Jika Anda berhasil maka tampilan kalkulator sederhana dengan codeignier, dan bootstrap akan terlihat seperti gambar dibawah ini.
Menurut panduancode script yang telah kita buat tadi semua nya mudah dipahami, namun jika Anda masih kebingungan, Anda dapat bertanya kepada panduancode lewat form komentar dibawah postingan ini.
Sampai disini dulu pembelajaran mengenai belajar codeigniter dasar untuk pemula kali ini, tapi jangan khawatir panduancode akan membuat panduan tentang codeigniter lagi dilain kesempatan.
Demikian panduan pembejaran dari panduancode, semoga apa yang panduancode sampaikan dapat Anda pahami dengan baik.
Dan semoga materi pembelajaran belajar codeigniter dasar untuk pemula ini dapat bermanfaat bagi Anda, beserta rekan rekan Anda dan sebagainya.
Akhir kata dari panduancode jangan lupa titik koma.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.