Tahap III: Contoh sedernaha MVC Codeigniter dengan database

Sebelum ke tahap III pastikan sudah baca tahap II: Instalasi Codeigniter. Contoh kali ini untuk pemahaman konsep MVC Codeigniter menggunakan database, yaitu menampilan semua data berita dari tabel berita yang ada di database ci_series. Ok ikuti langkah-langkahnya dengan teliti;

1) membuat database baru ci_series

Contoh kali ini buat database di locahost di localhost/phpmyadmin
2) membuat tabel berita

buatkan tabel berita menggunakan sintak SQL dibawah ini.

</pre>
CREATE TABLE `ci_series`.`berita` (
 `id_berita` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `judul` VARCHAR( 255 ) NOT NULL ,
 `isi` TEXT NOT NULL ,
 `tgl` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,
 `userID` INT( 4 ) NOT NULL ,
 `aktif` TINYINT( 1 ) NOT NULL
 ) ENGINE = MYISAM ;
<pre>

3) isikan beberapa data ke dalam tabel berita menggunakan sintak query dibawah ini

</span>

INSERT INTO `ci_series`.`berita` (`id_berita`, `judul`, `isi`, `tgl`, `userID`, `aktif`)
 VALUES (NULL, 'Judul Berita 1', 'Ini Contoh isi Berita ke satu', CURRENT_TIMESTAMP, '0', '1'),
 (NULL, 'Judul Berita 2', 'Ini Contoh isi Berita ke dua', CURRENT_TIMESTAMP, '0', '1'),
 (NULL, 'Judul Berita 3', 'Ini Contoh isi Berita ke ketiga', CURRENT_TIMESTAMP, '0', '1'),
 (NULL, 'Judul Berita 4', 'Ini Contoh isi Berita ke empat tidak aktif', CURRENT_TIMESTAMP, '0', '0');

<pre>

4) buka file database.php yang ada di folder application/config untuk mengatur konfigurasi database
atur kode baris seperti contoh di bwah ini

</pre>
$db['default']['hostname'] = 'localhost';
 $db['default']['username'] = 'root';
 $db['default']['password'] = '';
 $db['default']['database'] = 'ci_series';
 $db['default']['dbdriver'] = 'mysql';
<pre>

5) Membuat model berita.php seperti contoh dibawah ini dan simpan di folder application/models

</pre>
<?php
 class Berita extends CI_Model{

 function semua_berita($num=20,$start=0){
 //select semua field dari tabel berita
 $this->db->select('*');
 $this->db->from('berita');
 //aktif = 1
 $this->db->where('aktif',1);
 //diurutkan berdasarkan tanggal input data field tgl secara desc
 $this->db->order_bay('tgl','desc');
 //dibatasi berdasarkan variabel $num dan $start
 $this->db->limit($num,$start);
 //ambil semua query diatas
 $query=$this->db->get();
 //mengembalikan hasil bentuk objek (bukan array)
 return $query->result();

 }
 }
?>
<pre>

6) Mebuat Controller cberita.php seperti contoh dibawah ini dan simpan di folder application/controllers

</pre>
<?php

class Cberita extends CI_Controller{

 function index(){
 //meload model berita untuk memanggil query database
 $this->load->model('berita');
 //memanggil fungsi semua_berita() dalam model berita
 $data['berita']=$this->berita->semua_berita();
 //menampilan data ke dalam view indek_berita.php
 //view header.php untuk menampilkan konfigurasi template
 //seperti pemanggilan css dan js dari JQUERY MOBILE
 $this->load->view('header');
 //isi dari berita
 $this->load->view('indek_berita',$data);
 //load view footer
 $this->load->view('footer');
 }
 }
?>
<pre>

7) Menampilan data ke user/browser

Untuk menampilan data biar bisa diakses oleh user kita buatkan 3 view yaitu header.php, indek_berita.php dan footer.php, view berisi kode html yang pakai tutorial ini saya gunakan JQUERY MOBILE.
buat tiga view
a) view header.php dan simpan di folder application/views

</pre>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<pre>

b) view footer.php dan simpan di folder application/views

</pre>
<!--page-->
<!--header-->
<!--content-->
 <div data-role="footer">
 <h1>Footer Text</h1>
 </div>
</div><!-- /page-->

</body>
</html>
<pre>

c) view indek_berita.php dan simpan di folder application/views

</pre>
<div data-role="page" id="berita">

 <div data-role="header">
 <h1>Seri Belajar Codeigniter</h1>
 </div>

 <!-- isi Berita -->
 <div data-role="content">
 <h2>Semua Berita</h2>
 <!-- menampilan semua berita -->
 <ul data-role="listview" data-inset="true">
 <?php
 if(!isset($berita))
 {
 echo '<li>Maaf Berita Belum Ada</li>';
 }else
 {
 foreach($berita as $row)
 {

 echo '<li><a href="'.base_url().'berita/read/'.$row->id_berita.'">
 <h3> '.$row->judul.' </h3>
 <p> '.$row->tgl.'</p>
 </a>
 </li>';
 }
 echo'</ul>';
 }
 ?>

 </div>
<pre>

7) Test dengan ketikan pada browser http://localhost/ci_series/index.php/cberita

Lihat hasilnya seperti gambar dibawah ini

codeigniter mvc

gambar view mvc codeigniter

8) menghilangkan index.php menggunakan .htaccess

</pre>
RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
<pre>

simpan dengan nama .htaccess

test buka alamat http://localhost/ci_series/cberita

9) buat controller default buka file routes.php yang ada di folder application/config
rubah default controller cberita seperti kode dibawah ini

</pre>
$route['default_controller'] = "cberita";
$route['404_override'] = '';
<pre>

tunggu tutorial selanjutnya, jika ada pertanyaan silahkan tinggalkan komentar.

About arisddg31

Saya seorang guru TIK di SMA Negeri 3 Kota Sukabumi asal dari Kota Wates Jogjakarta

Posted on Februari 11, 2014, in CodeIgniter, Tutorial and tagged , , , . Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: