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

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar