Kita lanjutkan dari project sebelumnya jika belum membaca silakan dibaca pada link dibawah
Memulai Project CodeIgniter
Memulai Project CodeIgniter : Part 2
Memulai Project CodeIgniter : Part 3 Menghilangkan Index.php
pertama buka file config.php pada folder ./application/config/ kemudian ubah pad bagian berikut
$config['base_url'] = '';ubah menjadi
$config['base_url'] = 'http://localhost/ci-projectpertama/';atau sesuaikan dengan nama folder project anda
kemudian kita buat sebuah controller beri nama Chome.php pada folder application/controllers/ dan tuliskan script berikut
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chome extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper('url'); //kita load helper url karena kita akan menggunakan dalam pemanggilan url seperti link ke menu lain, pemanggilan style css dll
}
public function index(){
$data['judul'] = "Template Codeigniter"; //kita deklrasikan variabel judul
$this->load->view('vhome',$data); // template view vhome kita panggil dengan membawa array $data
}
}
/* End of file Chome.php */
/* gtech labs
/* Location: ./application/controllers/Chome.php */
Kemudian buat sebuah file view, beri nama vhome.php tempatkan di folder ./application/views/ dan tuliskan script berikut
<!doctype html> <html> <head> <meta charset="UTF-8"> <title><?=$judul?></title> <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/style.css"> </head> <body> <header> <div class="container"> <h3><?php echo $judul;?></h3> <nav> <ul> <li><a href="<?php echo base_url().'chome' ?>">Home</a></li> <li><a href="<?php echo base_url().'chome/about' ?>">Tentang</a></li> </ul> </nav> <div class="clear"></div> </div> </header> <section> <div class="container"> <h1></h1> <p> Selamat datang di project pertama codeigniter.<br> Pada tutorial kali kita akan membuat templating pada codeigniter<br> <b>Header, Content, Footer</b> </p> </div> </section> <footer> <div class="container"> <a href="https://www.fabernainggolan.com">gTech Labs</a> </div> </footer> </body> </html>
kemudian tambahkan script css nya beri nama style.css dan tambahkan/buat folder diroot beri nama ./assets/
body{color: #333; font-family: Arial; font-size:16px; }
header{ background: #111; padding: 20px; }
header h3{ float: left; color: #FFF; }
header nav{ float: right; margin-top: 10px; }
header nav ul{ padding: 0; margin: 0; }
header nav ul li{ float: left; list-style: none; }
header nav ul li a{ padding: 15px; color: #fff; text-decoration: none; }
header nav ul li a:hover{ color: yellow; }
footer{ background: #111; padding: 20px; }
footer a{ color: #fff; text-decoration: none; }
section{ padding: 20px; min-height: 300px; }
.clear{ clear: both; }
.container{ margin: 0px auto; width: 1100px;}
nah setelah script selesai kita tulis mari kita jalankan di browser maka tampil output nya seperti gambar dibawah ini:
nah pada script vhome.php diatas kita telah membuat templatenya secara keseluruhan, kemudian agar template nantinya menjadi dinamis kita akan memecah bagian tag html vhome.php tersebutnya menjadi 3 bagian, yaitu header.php, vhome.php dan footer.php
Untuk header.php buat seperti berikut
<!doctype html> <html> <head> <meta charset="UTF-8"> <title><?=$judul?></title> <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/style.css"> </head> <body> <header> <div class="container"> <h3><?php echo $judul;?></h3> <nav> <ul> <li><a href="<?php echo base_url().'chome' ?>">Home</a></li> <li><a href="<?php echo base_url().'chome/about' ?>">Tentang</a></li> </ul> </nav> <div class="clear"></div> </div> </header>
Untuk vhome.php modifikasi seperti berikut :
<section> <div class="container"> <h1></h1> <p> Selamat datang di project pertama codeigniter.<br> Pada tutorial kali kita akan membuat templating pada codeigniter<br> <b>Header, Content, Footer</b> </p> </div> </section>
dan untuk footer.php buat seperti berikut
<footer> <div class="container"> <a href="https://www.fabernainggolan.com">gTech Labs</a> © 2018 </div> </footer> </body> </html>
Kemudian pada controller Chome.php nya kita modifikasi sedikit kita tambahkan lagi beberapa script buat seperti berikut :
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chome extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper('url'); //kita load helper url karena kita akan menggunakan dalam pemanggilan url seperti link ke menu lain, pemanggilan style css dll
}
public function index(){
$data['judul'] = "Halaman Beranda"; //kita deklrasikan variabel judul
$this->load->view('header',$data); // template header
$this->load->view('vhome',$data); // template vhome, nah pada bagian ini yang akan berubah ubah nanti disesuaikan dengan template yg pengen dibuat
$this->load->view('footer',$data); // template footer
}
}
/* End of file Chome.php */
/* gtech labs
/* Location: ./application/controllers/Chome.php */
Nah jika kita menambahkan page untuk about maka kita tinggal menambahkan sebuah view untuk about, contoh kita buat nama filenya vabout.php dan ditempatkan di folder /application/views/ buat script seperti dibawah
<section> <div class="container"> <h1></h1> <p> Ini adalah About.<br> Selamat datang dihalaman about </p> </div> </section>
kemudian tambahkan script dibawah ini pada controller Chome.php untuk menangani pemanggilan class about nanti nya
public function about(){
$data['judul'] = "Halaman About"; //kita deklrasikan variabel judul
$this->load->view('header',$data); // template header
$this->load->view('vabout',$data); // template vabout
$this->load->view('footer',$data); // template footer
}
dan berikut script lengkap contoller Chome.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chome extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->helper('url'); //kita load helper url karena kita akan menggunakan dalam pemanggilan url seperti link ke menu lain, pemanggilan style css dll
}
public function index(){
$data['judul'] = "Halaman Beranda"; //kita deklrasikan variabel judul
$this->load->view('header',$data); // template header
$this->load->view('vhome',$data); // template vhome, nah pada bagian ini yang akan berubah ubah nanti disesuaikan dengan template yg pengen dibuat
$this->load->view('footer',$data); // template footer
}
public function about(){
$data['judul'] = "Halaman About"; //kita deklrasikan variabel judul
$this->load->view('header',$data); // template header
$this->load->view('vabout',$data); // template vabout
$this->load->view('footer',$data); // template footer
}
}
/* End of file Chome.php */
/* gtech labs
/* Location: ./application/controllers/Chome.php */
Setelah selesai maka coba jalankan dibrowser dan hasilnya akan muncul seperti gambar dibawah
gambar halaman home/beranda
gambar halaman about/tentang
Untuk source code dari Part 1 sampai dengan Part 5 bisa didownload pada link dibawah
Demikian artikel kali ini semoga bermanfaat...
Terima kasih telah berkunjung :D
Sumber Referensi :
1. https://www.codeigniter.com/user_guide/2. https://www.w3schools.com/css/default.asp
0 comments: