Praktikum Pemrograman Web

BAB I
PENDAHULUAN

1.1 Sekilas Codeignitier

Codeignitier merupakan framework PHP yang diklaim memiliki eksekusi tercepat
dibandingkan dengan framework lainnya. Codeignitier bersifat open source dan
menggunakan konsep MVC (Model View Controller) yang merupakan model konsep
modern framework yang digunakan saat ini.
Framework merupakan suatu kertas/kerangka kerja dalam aplikasi web yang
didalamnnya memiliki suatu potongan-potongan program yang disusun (modul)
sehingga programmer tidak membuat code dari nol, karena framework telah
menyediakannya.
1.2 Fitur-Fitur Codeignitier
Berikut fitur-fitur dalam membangun suatu web:
1. Bekerja berdasarkan konsep MVC
2. Ringan dan Cepat
3. Mendukung PHP4
4. Mendukung Berbagai Basis Data
5. Form dan valiadasi
6. Mendukung Active Record database
7. Mendukung Caching
8. Menghasilkan Clean URL
9. Mencatat Eror yang terjadi
1.3 Sistem Kerja Codeignitier
Setiap aplikasi memiliki beberapa tahapan yang harus dilewati, begitu pula dengan
framework Codeignitier, alur kerjanya dapat dilihat pada gambar 1.1:

Teknik Informatika Univ.Khairun

Page 1

Praktikum Pemrograman Web

Gambar 1.1 Alur Kerja Codeignetier

Dari gambar diatas dapat dijelaskan sebagai berikut:
1. Index.php merupakan controller awal yang menginisialisasikan kebutuhan
menjalankan Codeignetier
2. Router/Routing merupakan bagian yang menentukan kegiatan yang harus
dilakukan ketika ada request dari client/browser
3. Caching merupakan bagian yang mengecek apakah data sudah pernah diminta atay
belum, jika cache dalam keadaan aktif, maka langsung dikirimkan ke client/browser
dengan mengabaikan alur kerja normal
4. Security Sebelum data dikirimkan, maka akan terlebih dahulu data di-filter sebagai
keamanan
5. Controller merupakan pengendalai jalannya aplikasi, dan akan segera memproses
request yang diminta, yaitu models.libraries, helpers,pluguns, dan scripts
6. View Merupakan bagian untuk menyajikan informasi ke client/browser sesuai
dengan permintaan yang diminta

1.4 Mengenal Mode View Controller

MVC adalah pendekatan untuk memisahkan antara tampilan dan logika aplikasi. MVC
terdiri dari:

Teknik Informatika Univ.Khairun

Page 2

Praktikum Pemrograman Web

1. Model, bagian yang merupakan representasi dari struktur data (database). Bagian ini
opsional pada CI, sehingga kita dapat menggunakan controller dan view saja apabila
membutuhkan aplikasi minimal
2. View, bagian yang ditampilkan pada user
3. Controller, bagian perantara antara Model, View dan sumberdaya lainnya yang
dibutuhkan untuk memproses
request HTTP dan menggenerate tampilan
BAB II
INSTALASI CODEIGNETIER
2.1 Instalasi Codeignetier
Sebelum melakukan instalasi codeignetier, pastikan web server sudah terinstall di
computer. Dapat menggunakan xampp atau wampp. Lakukan Instalasi dengan cara
sebagai berikut:
1. Copykan file codeignetier 2.1.4.zip yang ada pada CD, kedalam folder htdocs
2. Lakukan ekstark pada file tersebut, sehingga akan menghasilkan folder codeignetier
2.1.4
3. Buka file config.php di folder system/application/config menggunakan dreamweaver
atau notepad kemudian lakukan perubahan kode sebagai berkikut:
$config [base_url] = http://example.com/;

Menjadi:
$config [base_url] = http://localhost/ci;

4. Simpan perubahan file config.php, lalu buka browser dengan mengetikan url
http://localhost/ci maka akan tampil halaman selamat datang. Lihat gambar 2.1

Teknik Informatika Univ.Khairun

Page 3

Praktikum Pemrograman Web

Gambar 2.1 Halaman Utama Codeignetier

BAB III
MEMULAI CODEIGNETIER
3.1 File Controller
Langkah awal pembahasn dimulai dengan menampilkan halaman pada website melalui
file controller, Ketikan script berikut:
1. Buatlahfile hello.php difolder codeIgniter/application/controllers/
Isi file hello_world.php seperti berikut :
<?
phpif ( ! defined('BASEPATH')) exit('No direct script access allowed');

Teknik Informatika Univ.Khairun

Page 4

Praktikum Pemrograman Web

}
?>

class Hello_world extends CI_ Controller

{
public function index()
{
$this->load->view('hello_view');
}

2. Buatlah file hello_view.php difolder codeIgniter/application/views

Isifile hello_view.php sebagai berikut:
<html>
<head>
<title>PRAKTIKUM PEMROGRMAMAN WEB</title>
</head>
<body>
<center>
<h1>Hello World !!!!</h1>
<h2>Selamat Belajar Framework Codeignetier!!!!</h2>
<center>
</body>
</html>

3. Bukalahfile routes.php difolder codeIgniter/application/config

Ganti$route['default_controller'] = "welcome"; dengan $route['default_controller'] = hello";

4. Dengan web browser ketikan http://localhost/ci

Teknik Informatika Univ.Khairun

Page 5

Praktikum Pemrograman Web

Gambar 3.1 Hasil eksekusi file hello.php

3.2 Membagi Desain Template

Langkah yang dilakukan adalah mengaktifkan URL Helper pada autoload dengan cara
sebagai berikut:
Untukmengaktifkannya,kita mengkonfigurasikan pada file autoload.php yang terdapat
padafolder codeigniter/application/config/autoload.php.
Cari baris $autoload['helper'] = array('url'); Maka kita telah mengaktifkan URL helper
pada Aplikasi kita.
Buka file config.php yang terdapat pada folder codeigniter/application/config/
Cari $config ['base_url']=''; dan ubah menjadi $config ['base_url']= 'http://localhost/ci/';

Teknik Informatika Univ.Khairun

Page 6

Praktikum Pemrograman Web

3.2.1

Menyipkan File Untuk Pembuatan Template

Kita harus menyiapkan beberapa file yang akan digunakan, file-file tersebut adalah
header.php, menu.php, content.php, footer.php, dan main.php yang disimpan
padafolder codeigniter/application/views, serta sebuahfile CSS yang kita beri nama
style.css yang disimpan dalam folder codeigniter
a. Script Style. Css

/* CSS Document */
.header
{
background: #3B5998;
color: white;
margin: 0 0 px0;
padding: 2px;
}
.footer
{
background: #3B5998;
color: white;
border-top: solid 1px white;
margin: 1px 0 0 0;
}
.menu
{
font-size: 18px;
background: #E6F3FF;
border-top: solid 1px black;
border-bottom:solid1px black;
margin: 1px 0 1px 0;
}
.content
{
background: #F7F7F7;
color: black;
border-top: solid 1px black;
border-bottom:solid1px black;
}
.content-title

Teknik Informatika Univ.Khairun

Page 7

Praktikum Pemrograman Web

{
background: #CCCCCC;
font-weight:bold;
margin-top:5px;
}
.content-isi
{
margin: 5px 0 10px 8px;
}
a {color: black; text-decoration:none; }
h1 {font-size: 30px;}

b. Header.php
<h1>Websiteku.com</h1>

c. Menu.php
<a href="#">Home</a> |
<a href="#">About Us</a> |
<a href="#">Contact Us</a> |
<a href="#">BukuTamu</a> |

d. Content.php
<div class="content-title">Home</div>
<div class="content-isi">
<p>Selamat datang di website saya...</p>
<p>ini adalah homepage pertama saya..</p>
<p>website sederhana ini dibuat dengan menggunakan codeigniter. Awalnya terlihat sulit, tapi
ternyata lebih mudah dari yang saya bayangkan. Tunggu website buatan saya selanjutnya...
</p>
<p>&nbsp; </p>
</div>

e. Footer.php
<marquee>
<small>
<SCRIPT language="javascript">
Var waktu= new Date();
document.write("Waktu sekarang adalah" + waktu);
waktu.setMonth(5);
document.write("Waktuterbaruadalah" + waktu);
</SCRIPT>

Teknik Informatika Univ.Khairun

Page 8

Praktikum Pemrograman Web

</small>
</marquee>

f. Main.php
<html>
<head>
<!--inline css tapi bias juga external css dengan menggunakan tag link -->
<link rel="stylesheet" href="<?phpecho base_url(); ?>style.css" type="text/css">
<title>Membangun Website Sederhana</title>
</head>
<body>
<div class="header">
<? $this->load->view('header'); ?>
</div>
<div class="menu">
<? $this->load->view('menu'); ?>
</div>
<div class="content">
<? $this->load->view('content'); ?>
</div>
<div class="footer">
<? $this->load->view('footer'); ?>
</div>
</body>
</html>

g. User_ Page.php
Buatlahfile user_page.php difolder codeIgniter/application/controllers/
Isi file user_page.php seperti berikut :
<?phpif ( ! defined('BASEPATH')) exit('No direct script access allowed');
class User_page extends CI_Controller
{
public function index()
{
$this->load->view('main');
}
}

Bukalah file routes.php difolder codeIgniter/application/config

Teknik Informatika Univ.Khairun

Page 9

Praktikum Pemrograman Web

Ganti $route['default_controller'] = "welcome"; dengan $route['default_controller'] =

user_page";
Dengan web browser ketikan:
http://localhost/codeigniter

Gambar 3.2 Halaman Utama Website

BAB IV
MEMBUAT COMBO BOX DENGAN DATA DARI DATABASE

4.1 Prosedur Pengkoneksian Database

Pada database alamat (prakteksebelumnya) buat table baru dengan nama warna

Teknik Informatika Univ.Khairun

Page 10

Praktikum Pemrograman Web

Gambar 4.1 Tampilan Database

Isi data table dengan query :
INSERT INTO warnaVALUES('MR','Merah'),('KN','Kuning'),('HJ','Hijau');

4.2 Mengaktifkan Database

Bukalahfile database.php difolder codeIgniter/application/config, dan tambahkan:
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'alamat';
$db['default']['dbdriver'] = 'mysql';

Bukalah

file

autoload.php

di

folder

codeIgniter/application/config,

$autoload['libraries'] = array(); menjadi $autoload ['libraries'] = array('database');

a. Script Mcombo.php
Buatlahfile mcombo.php d i folder codeigniter/application/models
Isifile mcombo.php sebagai berikut:
<?
class Mcomboextends CI_Model
{
function DaftarWarna()
{
$this->load->database();
$this->db->from('warna');
$query = $this->db->get();
foreach($query->result() as $row)
{
$DtWarna[$row->KodeWarna] = $row->DescWarna;
}
return $DtWarna;
}
}
?>

Teknik Informatika Univ.Khairun

Page 11

dan

buat

Praktikum Pemrograman Web

b. Controller User_Page.php
Pada user_page.php ubah menjadi :
<?phpif ( ! defined('BASEPATH')) exit('No direct script access allowed');
class User_pageextends CI_Controller
{
public function index()
{
$this->load->helper('form');
$this->load->model('Mcombo');
$data['Warna'] = $this->Mcombo->DaftarWarna();
$this->load->view('main', $data);
}
}

c. View Content.php
Padacontent.php ubah menjadi :
<div class="content-title">Home</div>
<div class="content-isi">
<p>Selamat datang di website saya...</p>
<p>ini adalah homepage pertama saya..</p>
<p>website sederhana inidi buat dengan menggunakan codeigniter. Awalnya terlihat sulit, tapi
ternyata lebih mudah dari yang saya bayangkan. Tunggu website buatan saya selanjutnya...
</p>
<p>
<?=form_open('');
echo form_dropdown('cbowarna', $Warna,'MR');
echo form_close();
?>
</p>
</div>

Langkah selanjutnya adalah melihat hasil dengan membuka browser dengan

mengetikan: http://localhost/codeignietier

Teknik Informatika Univ.Khairun

Page 12

Praktikum Pemrograman Web

Gambar 4.2 Tampilan Halaman website dengan ComboBox

Teknik Informatika Univ.Khairun

Page 13