1.1 CODE IGNITER PHP FRAMEWORK
1.2 INSTAL CODE IGNITER DASAR
1.
Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/codeigniter.
2.
Ubah setingan pada
file / codeigniter/application/config/config.php
$config['base_url'] = 'localhost/codeigniter';
1.3 INSTAL CODE IGNITER LANJUTAN
1.
Ubah setingan pada file /codeigniter/application/config/routes.php
·
Baris 52 menjelaskan bahwa file pertama
yang dipanggil ketika codeigniter dijalankan yaitu ‘home.php’ pada folder controller
2.
Buat file home.php pada folder /codeigniter/application/controller/
, isinya seperti berikut ini :
·
Function index adalah function pertama yang dipanggil ketika
file home.php ini dipanggil
·
Baris 13 digunakan untuk memanggil file home.php, pada folder
/view
·
codeigniter/application/controller/home.php
class Home extends CI_Controller {
public function
__construct()
{
parent::__construct();
}
public function
index()
{
$this->home();
}
public function
home()
{
$this->load->view('test');
//memanggil view home.php
}
public function
kuliah()
{
$this->load->view('kuliah');
//memanggil view kuliah.php
}
public function
kerja()
{
$this->load->view('kerja');
//memanggil view kerja.php
}
public function
aboutme()
{
$this->load->view('aboutme');
//memanggil view aboutme.php
}
public function
contact()
{
$this->load->view('contact');
//memanggil view contact.php
}
}
// application/controller/home.php
3.
Buat file test.php pada
folder /codeigniter/application/view/yang isinya
adalah modifikasi dari welcome.php:
1.4 Membuat web Sederhana dengan Codeigniter
Skenario :
·
Halaman web yang akan dibuat terdiri 5 menu :
Home, Tentang Kuliah, Tentang Kerja, About me, Contact
·
Pada sub bab 7.4 ini semua tulisan/content pada
tiap2 halaman bersifat statis yang ditulis langsung pada html (bukan dari
database).
·
File CSS yang digunakan adalah file css pada
praktikum2 sebelumnya dengan pembagian tampilan menjadi 4 : Header, Menu kiri,
Content, footer.
·
Code-code CSS digabung dengan kode HTML pada
file2 didalam folder view.
·
MVC yang terlibat hanya Controller dan View.
1.4.1 Membuat Controller
1.
Buat file home.php pada direktori /codeigniter/application/controller.
2.
Buat 5 file pada direktori /codeigniter/application/view.
home.php
kuliah.php
kerja.php
aboutme.php
contact.php
Isi file /codeigniter/application/controller/home.php adalah
sebagai berikut :
1.4.2 Membuat View
Berikut adalah isi dari /codeigniter/application/view/home.php
Isi dari keempat file lainnya (kuliah.php, kerja.php,aboutme.php,contact.php) adalah
sama tinggal diganti didalam div section nya disesuaikan kalimat paragrafnya.
1.4.3 Hasil
1.5 Web Templating dengan Twitter Bootstrap dan Codeigniter
Skenario :
Ada 12 entitas yang terlibat dalam pembahasan sub bab ini,
yaitu
·
home.php (controller)
·
template.php (library)
·
home.php (view)
·
kuliah.php (view)
·
kerja.php (view)
·
contactus.php (view)
·
aboutme.php (view)
·
twitter bootstrap (css framework)
·
header.php(view/isinya berasal dari twitter
bootstrap)
·
content.php (view/isinya berasal dari twitter
bootstrap)
·
footer.php (view/isinya berasal dari twitter
bootstrap)
·
containter.php (view/isinya berasal dari twitter
bootstrap)
Langkah –langkah :
1.
Buat file Home.php (Controller) pada
/xampp/htdocs/codeigniter/application/controller/home.php yg isinya sebagai
berikut
·
Baris 6 dibawah ini merupakan perintah untuk
memanggil library (template.php)
<?php if
(!defined('BASEPATH')) exit('Access Denied');
class Home extends
CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->library('template');
$this->load->model('main');
}
public function index()
{
$this->home();
}
public function home()
{
$input1['data']=$this->main->home();
$input2=$this->template->home($input1);
$this->load->view('container',$input2,''); // Memanggil view home.php
}
public function kuliah()
{
$input1['data']=$this->main->kuliah();
$input2=$this->template->home($input1);
$this->load->view('container',$input2,''); // Memanggil view kuliah.php
}
public function kerja()
{
$input1['data']=$this->main->kerja();
$input2=$this->template->home($input1);
$this->load->view('container',$input2,''); // Memanggil view kerja.php
}
public function aboutme()
{
$input1['data']=$this->main->aboutme();
$input2=$this->template->home($input1);
$this->load->view('container',$input2,''); // Memanggil view aboutme.php
}
public function contact()
{
$input1['data']=$this->main->contact();
$input2=$this->template->home($input1);
$this->load->view('container',$input2,''); // Memanggil view contact.php
}
}
2.
Template.php (Library) dibawah ini berfungsi
untuk menangani templating/style pada website yang kita buat yang nantinya
dikombinasikan dengan Twitter Bootstrap.
<?php if(!defined('BASEPATH')) exit('Access
Denied');
class Template
{
public
$CI;
public
function __construct()
{
$this->CI=&
get_instance();
$this->CI->load->helper('url');
$this->CI->load->view_data['base_url']=base_url();
}
public
function index()
{
$this->home();
}
public
function mainmenu()
{
//Menu-menu
$data['li1']='<li
class="active"><a href="'.base_url().'index.php/home/home"></li>';
$data['li2']='<li><a
href="'.base_url().'index.php/home/kuliah"></li>';
$data['li3']='<li><a
href="'.base_url().'index.php/home/kerja"></li>';
$data['li4']='<li><a
href="'.base_url().'index.php/home/contactus"></li>';
$data['li5']='<li><a
href="'.base_url().'index.php/home/aboutme"></li>';
$data['base_url']=base_url();
return
$data;
}
public
function home($input=null,$output=NULL)
{
//halaman
utama
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman
Utama';
$data['h1']='<h1>Selamat
datang di websiteku</h1>';
$data['content']=$this->CI->load->view('home',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN
$output;
}
public
function kuliah($input,$output=NULL)
{
//halaman
kuliah
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman
Kuliah';
$data['content']=$this->CI->load->view('kuliah',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN
$output;
}
public
function kerja($input,$output=NULL)
{
//Halaman
kerja
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman
Kerja';
$data['content']=$this->CI->load->view('kerja',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN
$output;
}
public
function aboutme($input,$output=NULL)
{
//
halaman aboutme
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman
Tentang Aku';
$data['content']=$this->CI->load->view('aboutme',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN
$output;
}
public
function contactus($input,$output=NULL)
{
//Halaman
Contact Us
$data=$this->mainmenu('','',true);
$data['page_title']='Halaman
Kontak';
$data['content']=$this->CI->load->view('contactus',$input,true);
$output['header']=$this->CI->load->view('header',$data,true);
$output['content']=$this->CI->load->view('content',$data,true);
$output['footer']=$this->CI->load->view('footer','',true);
RETURN
$output;
}
}
3.
Buat file container.php pada direktori /codeigniter/application/view/container.phpyg isinya
seperti gambar dibawah ini
·
File ini berfungsi sebagai file yg bertugas
untuk menggabungkan 3 file header.php, content.php serta footer.php menjadi
satu tampilan website .
4.
Extract contoh template shym.zip di direktori /xampp/htdocs/codeigniter/assets
5.
Buka file index.html pada direktori /assets/index.html
menggunakan browser, kemudian buka source code nya dgn cara klik kanan halaman
web pilih view page source (mozilla).
6.
Copy baris 1-94 dari source code diatas,
kemudian pastekan ke /codeigniter/application/view/header.php.
7.
Copy baris 95 sampai 582 dari source code
diatas, kemudian pastekan ke
/codeigniter/application/view/content.php.
8.
Copy sisanya, baris 583 sampai 693 dari source
code diatas, kemudian pastekan ke
/codeigniter/application/view/footer.php.
9.
Pada ketiga script diatas header.php,
content.php, footer.php tambahkan “assets/” setelah src=” dan src=’, (gunakan
fitur find replace dengan cara memencet Ctrl+H, isi find dengan src=’ isi
replace dengan src=’assets’)
10. Jika
sudah benar maka hasil tampilannya sharusnya seperti dibawah ini :
Ok ! Tq Infonya :v
BalasHapussangat membantu :v
BalasHapus