BLOGNYA INFORMATIKA: March 2018

Pengertian Framework CodeIgniter (CI)

CodeIgniter adalah sebuah framework berbasis PHP yang kuat dengan footprint yang sangat kecil, dibangun untuk pengembang yang membutuhkan toolkit sederhana dan elegan untuk membuat aplikasi web dengan fitur lengkap. Lantas Apa itu framework? Framework atau dalam bahasa indonesia dapat diartikan sebagai “kerangka kerja” merupakan sebuah toolyang bekerja pada suatu konsep tertentu dan terdiri dari berbagai fungsi yang dapat dengan mudah dijabarkan atau dialih-gunakan untuk membuat fungsi-fungsi lain yang lebih kompleks.

Maksudnya, jika seorang Programmer menggunakan sebuah framework sebagai lingkup kerjanya, dia

harus mematuhi segala ketentuan dari framework tersebut. Lebih lanjut ia dapat membangun berbagai

fungsi yang rumit dan kompleks dengan menggunakan fungsi-fungsi yang telah disediakan oleh Framework tersebut. Jadi dia tidak perlu lagi menulis ulang semua coding, Ia cukup mempelajari cara

menggunakan kerangka (frame) yang telah tersedia dari framework tersebut.

Implementasi Framework CI

1. Membuat file controler dengan nama bangun.php pada folder controler

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Bangun extends CI_Controller {
public function index()
{
$this->load->view('input');
}

function hasil()
{
//balok
$panjang = $this->input->post('panjang');
$lebar = $this->input->post('lebar');
$tinggibalok = $this->input->post('tinggibalok');
//tabung
$jari2luas = $this->input->post('jari2luas');
$jari2volume = $this->input->post('jari2volume');
$tinggitabung = $this->input->post('tinggitabung');
//limas segiempat
$sisilimas = $this->input->post('sisilimas');
$alaslimas = $this->input->post('alaslimas');
$tinggilimas = $this->input->post('tinggilimas');
//prisma segitiga
$alassegitiga = $this->input->post('alassegitiga');
$tinggisegitiga = $this->input->post('tinggisegitiga');
$tinggiprisma = $this->input->post('tinggiprisma');

if($this->input->post('luasbalok')){
$jawaban = 2*(($panjang*$lebar)+($panjang*$tinggibalok)+($lebar*$tinggibalok));
$bangun = 'Bangun Balok';
$jenis = 'Luas : ';
}

if($this->input->post('volumebalok')){
$jawaban = $panjang*$lebar*$tinggibalok;
$bangun = 'Bangun Balok';
$jenis = 'Volume : ';
}

if($this->input->post('luastabung')){
$jawaban = 3.14*$jari2luas*$jari2luas;
$bangun = 'Bangun Tabung';
$jenis = 'Luas : ';
}

if($this->input->post('volumetabung')){
$jawaban = 3.14*$jari2volume*$jari2volume*$tinggitabung;
$bangun = 'Bangun Tabung';
$jenis = 'Volume : ';
}

if($this->input->post('luaslimas')){
$luasalas = $sisilimas*$sisilimas;
$luassisi = (0.5*$alaslimas*$tinggilimas)*4;
$jawaban = $luasalas + (4*$luassisi);
$bangun = 'Bangun Limas Segiempat';
$jenis = 'Luas : ';
}

if($this->input->post('volumelimas')){
$luasalas = $sisilimas*$sisilimas;
$jawaban = 1/3*$luasalas*$tinggilimas;
$bangun = 'Bangun Limas Segiempat';
$jenis = 'Volume : ';
}

if($this->input->post('luasprisma')){
$jawaban = $tinggisegitiga*($alassegitiga + (3*$tinggiprisma));
$bangun = 'Bangun Prisma Segitiga';
$jenis = 'Luas : ';
}

if($this->input->post('volumeprisma')){
$jawaban = 0.5*$alassegitiga*$tinggisegitiga*$tinggiprisma;
$bangun = 'Bangun Prisma Segitiga';
$jenis = 'Volume : ';
}

$data=array(
'jawaban' => $jawaban,
'bangun' => $bangun,
'jenis' => $jenis
);

$this->load->view('hasil',$data);

}

}

2. Membuat ﬁle view dengan nama input.php pada folder view untuk passing data ke fungsi controler

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Tugas</title>
<style type="text/css">
body {
background: #1f8dd6;
color: #df4231;
font-family: Arial;
}

h1{
font-family: Comic Sans MS;
color: Green;
font-size: 40px;
}

h2 {
margin-bottom: -5px;
}

h3 {
margin-bottom: 5px;
}

p {
margin-top: 5px;
font-size: 20px;
// color: #c9c9c9;
color: black;
}

h4 {
margin-top: 5px;
font-size: 20px;
color: black;
}

table {
background: #ffffff;
border-radius: 5px;
padding: 20px;
}

input.alamat {
background: url(images/maps.png)no-repeat 7px 9px;
border: 1px solid #c9c9c9;
border-radius: 3px;
height: 15px;
padding: 8px;
padding-left: 37px;

transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}

.button {
background: #df4231;
color: #ffffff;
width: 370px;
margin-top: 10px;
height: 40px;
border: 1px solid #c9c9c9;
border-radius: 5px;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button:hover {
background: #19B5FE;
transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
}
.button-gambar {
height: 35px;
}
</style>
</head>
<body>

<table align="center">

<tr>
<td align="center" colspan="2"><h1>MENGHITUNG LUAS DAN VOLUME BANGUNAN</h1></td>
</tr>

<tr>
<td>

<form method="POST" action="http://pfw2017k01.000webhostapp.com/index.php/bangun/hasil">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BANGUN BALOK</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="354"><h4> Panjang : </h4><input class="alamat" type="text" name="panjang"></td></tr>
<tr><td><h4> Lebar : </h4><input class="alamat" type="text" name="lebar"><br></td></tr>
<tr><td><h4> Tinggi : </h4><input class="alamat" type="text" name="tinggibalok"></td></tr>
<tr><td><input class="button" type="submit" name="luasbalok" value="Hitung Luas"></td></tr>
<tr><td><input class="button" type="submit" name="volumebalok" value="Hitung Volume"></td></tr>
<tr><td><h3>Rumus Balok<h3></td></tr>
<tr><td>
<p>Luas Balok :<br>
2(P x L + P x T + L x T)<br><br>
Volume Balok :<br>
P x L x T<br><br>
Ket :<br>
P = Panjang Balok<br>
L = Lebar Balok<br>
T = Tinggi Balok<br></p>
</td></tr>
</table></form>

</td>

<td>

<form method="POST" action="http://pfw2017k01.000webhostapp.com/index.php/bangun/hasil">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BANGUN TABUNG</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="354"><h4> Jari-Jari : </h4><input class="alamat" type="text" name="jari2luas"></td></tr>
<tr><td><input class="button" type="submit" name="luastabung" value="Hitung Luas"></td></tr>
<tr><td><h4> Jari-Jari : </h4><input class="alamat" type="text" name="jari2volume"><br></td></tr>
<tr><td><h4> Tinggi : </h4><input class="alamat" type="text" name="tinggitabung"></td></tr>
<tr><td><input class="button" type="submit" name="volumetabung" value="Hitung Volume"></td></tr>
<tr><td><h3>Rumus Tabung<h3></td></tr>
<tr><td>
<p>Luas Tabung :<br>
3.14 x R x R<br><br>
Volume Tabung :<br>
3.14 x R x R x T<br><br>
Ket :<br>
R = Jari-jari Tabung<br>
T = Tinggi Tabung<br><br></p>
</td></tr>
</table></form>

</td>

</tr>

<tr>
<td>

<form method="POST" action="http://pfw2017k01.000webhostapp.com/index.php/bangun/hasil">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BANGUN LIMAS SEGIEMPAT</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="354"><h4> Sisi : </h4><input class="alamat" type="text" name="sisilimas"></td></tr>
<tr><td><h4> Lebar : </h4><input class="alamat" type="text" name="alaslimas"><br></td></tr>
<tr><td><h4> Tinggi : </h4><input class="alamat" type="text" name="tinggilimas"></td></tr>
<tr><td><input class="button" type="submit" name="luaslimas" value="Hitung Luas"></td></tr>
<tr><td><input class="button" type="submit" name="volumelimas" value="Hitung Volume"></td></tr>
<tr><td><h3>Rumus Limas Segiempat<h3></td></tr>
<tr><td>
<p>Luas Alas :<br>
S x S<br>
Luas Sisi :<br>
(0.5 x A x T) x 4<br>
Luas Limas :<br>
LA + (4 x LS)<br><br>

Volume Limas :<br>
1/3 x LA x T<br><br>
Ket :<br>
LA = Luas Alas<br>
LS = Luas Sisi<br>
S = Sisi Segitiga<br>
A = Alas Segitiga<br>
T = Tinggi Limas<br><br></p>
</td></tr>
</table></form>

</td>

<td>

<form method="POST" action="http://pfw2017k01.000webhostapp.com/index.php/bangun/hasil">
<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2>BANGUN PRISMA SEGITIGA</h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="354"><h4> Alas Segitiga : </h4><input class="alamat" type="text" name="alassegitiga"></td></tr>
<tr><td><h4> Tinggi Segitiga : </h4><input class="alamat" type="text" name="tinggisegitiga"><br></td></tr>
<tr><td><h4> Tinggi Prisma : </h4><input class="alamat" type="text" name="tinggiprisma"></td></tr>
<tr><td><input class="button" type="submit" name="luasprisma" value="Hitung Luas"></td></tr>
<tr><td><input class="button" type="submit" name="volumeprisma" value="Hitung Volume"></td></tr>
<tr><td><h3>Rumus Prisma Segitiga<h3></td></tr>
<tr><td>
<p>Luas Prisma :<br>
TS x (A + (3 x TP ))<br><br>

Volume Prisma :<br>
0.5 x A x TS x TP<br><br>
Ket :<br>
A = Alas Segitiga<br>
TS = Tinggi Segitiga<br>
TP = Tinggi Prisma<br><br><br><br><br><br><br><br></p>
</td></tr>
</table></form>

</td>

</tr>
</table>

</table></form>
</body>
</html>

3. Selanjutnya untuk menangkap hasil data luas dan volume pada ﬁle controler bangun.php, buat ﬁle view hasil.php seperti berikut

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Tugas</title>

</head>
<body>

<table align="center">

<tr>
<td>

<div align="center"></div>
<table width="366" border="0" align="center">
<tr><td colspan="2">
<div align="center"> <h2><?php echo $bangun; ?></h2>
<p>.....................................................</p>
</div>
</td></tr>
<tr><td width="354"><h4 align="center"><?php echo $jenis; ?></h4></td></tr>
<tr><td><h4 class="alamat" align="center"><?php echo $jawaban;?></h4></td></tr>
<tr><td> <a href="http://pfw2017k01.000webhostapp.com/index.php/bangun" style="text-decoration:none"><h2 class="button" align="center">Hitung Lagi </h2></tr></td>
<table>

</td>
</tr>
</table>

</table>
</body>
</html>

Berikut Hasil Implementasi Framework CI (CodeIgniter)

Gambar 1.1 Tampilan Web Menghitung Luas danVolume Bangun

Gambar 1.1 ini merupakan tampilan awal web menghitung luas dan volume bangunan. Dimana pada gambar ini terdapat 4 pilihan ﬁtur, diantaranya ﬁtur “Bangun Balok”, “Bangun Tabung”, “Bangun Limas Segiempat”, “Bangun Prisma Segitiga”. Dari ﬁtur tersebut terdapat rumus perhitungannya masing – masing.

Gambar 1.2 Menu Bangun Balok

Gambar 1.2 merupakan ﬁtur perhitungan bangun balok, dimana terdapat 3 kriteria yaitu panjang, lebar, dan tinggi. Dari kriteria tersebut dapat dimunculkan hasil yaitu “luas” dan “volume”.

Gambar 1.3 Bangun Tabung

Gambar 1.3 merupakan ﬁtur bangun tabung. bangun tabung memiliki kriteria menghitung luas dengan mengacu pada jari – jari bangunan. kemudian untuk menghitung volume bangun tabung dengan mengacu jari – jari dan tinggi.

Gambar 1.4 Bangun Limas Segiempat

Gambar 1.4 merupakan ﬁtur bangun limas segiempat yang memiliki perihitungan sisi, lebar, dan tinggi. dari 3 kriteria tersebut dapat dihitung luas bangun dan volume bangun limas segiempat.

Gambar 1.5 Bangun Prisma Segitiga

Gambar 1.5 merupakan ﬁtur bangun prisma segitiga yang memiliki perhitungan luas segitiga, tinggi segitiga, dan tinggi prisma. kemudian output yang dihasilkan adalah perhitungan luas prisma dan volume prisma.

Gambar 1.6 Contoh input data bangun balok

Gambar 1.6 merupakan tampilan penginputan data (nilai) yang akan dihitung. Diantaranya panjang 3, lebar 2, dan tinggi 4.

Gambar 1.7 Hasil Luas Bangun Balok

Gambar 1.7 merupakan tampilan hasil dari perhitungan Luas bangun balok yaitu bangun balok dengan luas 52.

Gambar 1.8 Hasil Volume Bangun Balok

Gambar 1.8 merupakan tampilan hasil dari perhitungan volume bangun balok yaitu 24.

NB : Pada softcopy yang saya share base url http://pfw2017k01.000webhostapp.com/ silahkan ganti base url local kalian masing-masing. Misal : http://localhost/ci2c/

Untuk file silahkan unduh disini, dan jangan lupa tinggalkan jejak jika artikel ini bermanfaat :)

Jika ada pertanyaan email ke danifwahyudi@gmail.com

BLOGNYA INFORMATIKA

Pages

Saturday, March 31, 2018

Tutorial Framework Codeigniter : Menghitung Luas dan Volume Bangunan

Popular Posts