Membuat aplikasi blog sederhana menggunakan model view controller codeigniter

Setelah sekian hari membahas tentang model view controller, sekarang tiba saatnya bagi kita untuk membuat sebuah blog sederhana dengan menggunakan konsep mvc dan konfigurasi dasar yang sudah kami sampaikan sebelumnya. Blog yang akan kita rancang memiliki sebuah view yang akan kita jadikan sebagai template blog kita.

 

Adapun pada pembahasan kali ini, script akan terlihat lebih banyak dibanding dengan contoh - contoh script yang sebelumnya, dikarenakan ketika kita sudah berbicara tentang sebuah blog, maka kita tentu akan menggabungkan beberapa contoh - contoh penggunaan fungsi yang telah kita pelajari sebelumnya menjadi suatu aplikasi yang kita kenal sebagai Blog. Blog yang kita buat dalam contoh kali ini membutuhkan satu buah tabel dalam database dengan struktur tabel seperti yang sudah kami sertakan dalam link download dibawah.

Langkah - langkah yang harus kita lakukan antara lain sebagai berikut :

1. Membuat layout template » theme.php

Layout template yang kita buat sebenarnya adalah script php yang akan kita simpan pada direktory application/views/theme.php , adapun isi dari script theme.php ini sebenarnya hanya kombinasi antara TAG HTML dengan script PHP seperti terlihat pada contoh berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<?php echo base_url().'theme/css/style.css';?>" type="text/css"/>
<title><?php echo $title; ?></title>
</head>

<body>
<div id="header">
<img src="<?php echo base_url().'theme/images/banner.jpg';?>"/>
<div id="top_nav">Home | Profile | Product | Sejarah | Contact | Download | Support | Link | Iklan | Karir | Webmail</div>
</div>

<div id="content">
	<div id="leftbar">
		<?php echo $menu;?>
	</div>
	<div id="rightbar">
		<?php echo $content; ?>
	</div>
	<div id="clear" style="display:block;height:1px;clear:both;"> </div>
</div>

<div id="footer">
	<p class="copy">copyright © 2013 - your company</p>
</div>

</body>
</html>

Perhatikan dengan seksama bagian demi bagian dari contoh diatas, maka kita akan mengetahui bahwasannya script diatas membutuhkan sebuah css yang terletak pada folder theme/css/style.css .

2. File pendukung theme » theme/css/style.css dan theme/images

Dalam contoh kali ini, kami membuat sebuah direktory/folder dengan nama theme yang kita tempatkan pada direktory utama codeigniter. Dalam folder theme terdapat dua folder lagi, yaitu :
*. Folder images » untuk menyimpan gambar theme
*. Folder css » untuk menyimpan script css

Adapun contoh script css yang telah kami buat isinya sebagai berikut :

html,body{
	font:normal 12px Tahoma,Verdana;
	letter-spacing:0.2px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-color:#ffffff;
}
#header{
	display:block;
	height:240px;
	width:850px;
	margin-left:auto;
	margin-right:auto;
}
#header #top_nav{
	line-height:30px;
}
#content{
	display:block;
	min-height:600px;
	width:850px;
	margin-left:auto;
	margin-right:auto;
	border-top:silver 1px solid;
	background-color:#ffffff;
}
#content #leftbar{
	width:250px;
	min-height:300px;
	border-right:silver 1px solid;
	float:left;
	padding:0 5px 0 0;
}
#content #leftbar a.menu_kiri{
	font:normal 14px Tahoma,Verdana;
	display:block;
	line-height:30px;
	border-bottom:#cccccc 1px solid;
	background-color:#f3f3f3;
	padding:0 0 0 10px;
	text-decoration:none;
	color:#666666;
}
#content #leftbar a.menu_kiri:hover{
	color:#ffffff;
	background-color:#666666;
}
#content #rightbar{
	width:585px;
	float:right;
}
#footer{
	display:block;
	height:50px;
	width:850px;
	margin-left:auto;
	margin-right:auto;
	background-color:#3498d4;
}
#footer p.copy{
	display:block;
	margin:0 0 0 0;
	padding:0 10px 0 0;
	position:relative;
	top:30px;
	text-align:right;
	color:#ffffff;
}

3. Membuat controller home.php » application/controllers/home.php

Seperti pada contoh sebelumnya, kami sudah melakukan modifikasi dari contoh - contoh yang sudah ada sehingga script controller home.php kita yang baru akan terlihat seperti pada contoh dibawah ini

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

class Home extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/home
	 *	- or -  
	 * 		http://example.com/index.php/home/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/home/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->model('Webmodel');
		$content = $this->Webmodel->list_posting();
		$menu = $this->Webmodel->menu_kiri();
		$data = array(
					'title'	 => 'Selamat datang di website codeigniter',
					'menu'	 => $menu,
					'content'=> $content
				);
		$this->load->view('theme',$data);
	}
	
	function baca($id=false)
	{
		$this->load->model('Webmodel');
		if($id){
			$baca = $this->Webmodel->baca_posting($id);
		}
		else{
			$baca = 'Tidak ada data untuk ditampilkan';
		}
		$menu = $this->Webmodel->menu_kiri();
		$data = array(
					'title'	 => 'Selamat datang di website codeigniter',
					'menu'	 => $menu,
					'content'=> $baca
				);
		$this->load->view('theme',$data);
	}

}

/* End of file home.php */
/* Location: ./application/controllers/home.php */

4. Membuat model webmodel.php » application/models/webmodel.php

Seperti halnya script controller, kami juga telah melakukan modifikasi pada script webmodel.php sesuai dengan kebutuhan untuk menampilkan data - data yang kita perlukan. Adapaun contoh script webmodel yang baru adalah seperti berikut :

<?php

class Webmodel extends CI_Model {
	function __construct()
	{
		
	}
	
	/* menu sebelah kiri */
	function menu_kiri()
	{
		$menu = anchor(base_url().'index.php/home','Home','title="Beranda website" class="menu_kiri"').
				anchor('http://media-kreatif.com','Media kreatif','title="Media kreatif" class="menu_kiri"').
				anchor('http://google.com','Google','title="Beranda website" class="menu_kiri"').
				anchor('http://yahoo.com','Yahoo','title="Beranda website" class="menu_kiri"').
				anchor('http://facebook.com/justedy','Facebook','title="Beranda website" class="menu_kiri"').
				anchor('mailto:admin@media-kreatif.com','admin@media-kreatif.com','title="Kirim email kepada kami" class="menu_kiri"');
		return $menu;
	}
	
	/* Menampilkan posting */
	function list_posting()
	{
		$data='';
		$query = $this->db->query('select * from posting order by PID desc limit 10');
		//lihat apakah ada data dalam tabel
		$num = $query->num_rows();
		if($num>0){
			foreach($query->result() as $key){
				$headline = explode('<div style="page-break-after: always;">',$key->Isi);
				$data .='<div id="headline">
				          <h3 class="judul">'.$key->Judul.'</h3>
						  <div id="content_headline">
							'.$headline[0].'
						  </div>
						  '.anchor(base_url().'index.php/home/baca/'.$key->PID,'Readmore','title="baca selengkapnya"').'
				         </div>';
			}
			return $data;
		}
		else{
			return 0;
			//Kirimkan 0 jika tidak ada datanya
		}
	}
	
	/* manampilkan posting secara detail */
	function baca_posting($id)
	{
		$query = $this->db->query('select * from posting where PID="'.$id.'"');
		if($query->num_rows()>0){
			foreach($query->result() as $key){
				$data = '<h3 class="judul">'.$key->Judul.'</h3>'.
				         $key->Isi.
						 '<p>Oleh '.$key->Penulis.' » '.$key->PostDate.'</p>';
			}
		}
		else{
			$data = 0;
		}
		return $data;
	}
	
}

Bagaimana cara instalasinya pada aplikasi Codeigniter anda, silahkan download contoh script pada link dibawah dan lakukan langkah - langkahnya sesuai dengan petunjuk pada file readme.txt yang terdapat didalamnya.

Download contoh script blog sederhana dengan codeIgniter

Contoh script yang kami sertakan tidak meliputi keseluruhan aplikasi codeigniter, akan tetapi hanya meliputi model, view, controller dan theme. Kemudian bagaimana cara instalasinya ?

  • Download codeigniter dari situs resminya disini
  • Extract contoh script diatas, kemudian copy folder models,views,controllers dan config ke folder application codeigniter
  • Copy folder theme pada folder utama codeigniter bersebelahan dengan folder application dan system
  • Buat database baru, kemudian import file posting.sql yang sudah kami sertakan dalam contoh script
  • Buka file database.php yang terdapat dalam folder application/config/database.php , sesuaikan konfigurasi database sesuai dengan komputer anda
  • Setelah semua langkah diatas dijalankan dengan benar, cobalah mengakses blog kita pada alamat http://localhost/folder_ci/index.php/home

Selamat mencoba tutorial kami dan Salam kreatif


Komentar pembaca

Tastagan,,, bagi ilmu donk cara tuk menulis script di blog sperti nyak agan, thx berat...posting pada :2013-07-09 09:59:57
AdminSdr Tasta, kita bisa gunakan syntax highlighter untuk dapat menuliskan script html ataupun script PHP dalam web Blog. Silahkan di browsing pada google dengan kata kunci Syntax Highlighter.posting pada :2013-07-09 18:39:44
nepryantomaaf gan saya request halaman adminnya ada gak?posting pada :2013-10-14 01:02:04
susantopunya saya terjadi error A PHP Error was encountered Severity: Notice Message: Undefined property: Home::$db Filename: core/Model.php Line Number: 51 Fatal error: Call to a member function query() on a non-object in C:AppServwwwwebciapplicationmodelswebmodel.php on line 25 itu maksudnya gimanaposting pada :2013-11-14 18:03:59
AdminSdr Susanto, untuk eror notice, bisa terjadi krn banyak hal. Matikan saja display_error nya pada php.ini, a tau untuk pengguna ci set aja environtnya ke production. Kemudian untuk fatal eror yang selanjutnya, coba periksa lagi apakah database sudah diload pada application / config / autoload.php . posting pada :2013-11-14 18:40:49
susantook gan makasih banget ya udah saya coba tak benahin ternyata di variabel autoload belum saya beri database, dan sekarang sudah saya beri muncul error lagi seperti ini : Fatal error: Call to undefined function anchor() in C:AppServwwwwebciapplicationmodelswebmodel.php on line 36 itu function anchornya kok tidak ter definisi kenapa ya........??? mohon bimbinganya maklum masih awamposting pada :2013-11-17 18:45:34
AdminSdr Susanto, silahkan load juga helper url pada autoload. posting pada :2013-11-17 19:20:05
Yanuargan...tanya dong, ini codeigniter nya versi berapa yg agan pake ?posting pada :2013-11-18 02:31:41
AdminPada contoh diatas, kita menggunakan codeIgniter yang versi 2.0.2posting pada :2013-11-18 08:29:18
Kuda TerbangGan ane ane ngelink ke postingannya koq masih errror nya gan http://localhost/ciweb/index.php/home/posting A PHP Error was encountered Severity: Notice Message: Undefined variable: data Filename: views/posting.php Line Number: 46 posting pada :2013-12-24 15:24:34
AdminSdr Ichwan, kesalahannya adalah pada file views/posting.php , dalam hal ini mungkin anda menganggap $data sebagai variabel dari controller, padahal $data pada controller merupakan sebuah array yang sudah di urai oleh CodeIgniter, sehingga yang bisa anda gunakan untuk echo atau keperluan lainnya bukan lagi $data, akan tetapi key dari array yang terdapat pada $data. Pada contoh controller diatas, $data merupakan array yang mempunyai beberapa key, yaitu title, menu dan content. Sehingga pada views kita bisa langsung echo $title, atau echo $menu atau juga echo $content. Kira - kira begitu yang bisa kami sampaikan, semoga bisa membantuposting pada :2013-12-24 16:23:15
ikhsanbang sekalian bikin databasenya dong,hehehehposting pada :2014-01-10 00:06:15
DaryadiMas, saya mau belajar CI jg. kalo mau rewrite urlnya di .htaccess gimana ya mas? misalkan kita mau di setiap artikel itu urlnya jadi webku. com/judul_artikel.htmlposting pada :2014-03-20 09:07:44
Putra AdiAdmin, punya saya kenapa keluar peringatan seperti ini "Your system folder path does not appear to be set correctly. Please open the following file and correct this: index.php" . minta solusinya Adminposting pada :2014-10-16 21:48:36
AdminSdr Putra, pesan eror tersebut menandakan bahwa file - file CodeIgniter tidak ditemukan, bisa jadi dikarenakan adanya perubahan nama folder atau memang folder tersebut hilang karena terhapus atau tergeser ke alamat lain. Nama folder yang di maksud adalah folder Application dan Folder System seperti yang dituliskan pada script index.php pada folder utama CodeIgniter dan cari bagian script $system_path = 'system'; dan $application_folder = 'application';posting pada :2014-10-17 16:35:33
andiTrims mas, tutorialnya samngat berguna. baru kali ini saya mendapatkan tutorial dasar Ci yang mudah di mengerti. Akhirnya saya bisa ngerti tentang Ci.posting pada :2015-03-22 21:30:00