Pada pertemuan ini, mahasiswa diharapkan mampu membuat template sederhana. Mahasiswa juga diharapkan mampu membuat template web dinamis.
Pada codeigniter, halaman yang dipecah-pecah dapat dengan mudah untuk me-load halamanhalaman tersebut sesuai dengan keinginan.
4.1 Membuat Template Sederhana yang dinamis
Membuat dan menampilkan template sederhana, dibutuhkan pembuatan controller dan view agar hasilnya bisa dilihat.
Buatlah sebuah kontroler yang akan digunakan untuk menampilkan view. Sebagai contoh, buatlah kontroler Web.php lalu simpan di application/controllers/Web.php.
<?php
defined('BASEPATH') or exit ('no direct script access allowed');
class web extends CI_Controller{
function _construct(){
parent::_construct();
$this->load->helper('url');
}
public function index(){
$data['judul']="Halaman Depan";
$this->load->view('v_header',$data);
$this->load->view('v_index',$data);
$this->load->view('v_footer',$data);
}
public function about(){
$data['judul']="Halaman About";
$this->load->view('v_header',$data);
$this->load->view('v_about',$data);
$this->load->view('v_footer',$data);
}
}
Kemudian buatlah 3 buah file view beri nama v_header.php, v_index.php, dan v_footer.php lalu simpan dalam folder application/views/ kemudian ketik script berikut:
v_header.php
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/stylebuku.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Prog II | Merancang Template Sederhana dengan CodeIgniter</title>
<link rel="stylesheet" type="text/css" href="http://localhost/pustaka-booking/assets/css/stylebuku.css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1>RentalBuku.net</h1>
<h3>Membuat Template Sederhana dengan CodeIgniter</h3>
</hgroup>
<nav>
<ul>
<li><a href="<?php echo base_url().'web' ?>"> Home </a></li>
<li><a href="<?php echo base_url().'web/about' ?>"> About </a>
</li>
</ul>
</nav>
<div class="clear"></div>
</header>
</body>
</html>
v_index.php
<section>
<h1><<?php echo $judul ?></h1>
<p align='justify' > Pada Pengertian codeigniter diatas tadi dijelaskan bahwa codeigniter menggunakan metode MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih jauh dalam belajar codeigniter.</p>
<p>MVC adalah teknik atau konsep yang memisahkan komponen uatama manjadi tiga komponen yaitu model,view dan cotroller.</p>
<ol type="a">
<li>Model</li>
<p align=’justify’>Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang akan digunakan oleh aplikasi. Model juga dapat didefinisakn sebagai bagian penanganan yang berhubungan dengan pengolahan atau manipulasi database. Seperti misalnya mengambil data dari database, menginput dan pengolahan database lainnya. Semua intruksi atau fungsi yang berhubung dengan pengolahan database di letakkan di dalam model. Sebagai contoh, jika ingin membuat aplikasi untuk menghitung luas dan keliling lingkaran, maka dapat memodelkan objek lingkaran sebagai kelas model.</p> <p align=’justify’>Sebagai catatan, Semua model harus disimpan di dalam folder application\models</p> <li>View</li> <p align=’justify’>View merupakan bagian yang menangani halaman user interface atau halaman yang muncul pada user(pada browser). Tampilan dari user interface di kumpulkan pada view untuk memisahkannya dengan controller dan model sehingga memudahkan web designer dalam melakukan pengembangan tampilan halaman website.</p> <li>Controller</li> <p align=’justify’>Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view, jadi user tidak akan berhubungan dengan model secara langsung, intinya data yang tersimpan di database (model) di ambil oleh controller dan kemudian controller pula yang menampilkan nya ke view. Jadi controller lah yang mengolah intruksi.</p> <p align=’justify’>Dari penjelasan tentang model view dan controller di atas dapat di simpulkan bahwa controller sebagai penghubung view dan model. Misalnya pada aplikasi yang menampilkan data dengan menggunakan metode konsep mvc, controller memanggil intruksi pada model yang mengambil data pada database, kemudian controller yang meneruskannya pada view untuk di tampilkan. Jadi jelas sudah dan sangat mudah dalam pengembangan aplikasi dengan cara mvc ini karena web designer atau front-end developer tidak perlu lagi berhubungan dengan controller, dia hanya perlu berhubungan dengan view untuk mendesign tampilann aplikasi, karena back-end developer yang menangani bagian controller dan modelnya. Jadi pembagian tugas pun menjadi mudah dan pengembangan aplikasi dapat di lakukan dengan cepat dan terstruktur.</p>
</section>
V_footer.php
<footer>
<a href=‛http://www.RentalBuku.com‛>RentalBuku</a>
</footer>
</div>
</body>
</html>
Kemudian buatlah stylebuku.css untuk membuat tampilan lebih bagus dan simpan di dalam folder root seperti berikut: pustaka-boooking/assets/css/
body{
background: #eee;
color: #333;
font-family: sans-serif;
font-size:15px; }
#wrapper{
background: #fff;
width: 1100px;
margin: 20px auto; }
#wrapper header{
background: #232323;
padding: 20px; }
#wrapper header hgroup{
float: left;
color: #fff; }
#wrapper header nav{
float: right;
margin-top: 50px; }
#wrapper header nav ul{
padding: 0;
margin: 0; }
#wrapper header nav ul li{
float: left;
list-style: none; }
#wrapper header nav ul li a{
padding: 15px;
color: #fff;
text-decoration: none; }
.clear{ clear: both; }
footer{
background: #232323;
padding: 20px; }
footer a{
color: #fff;
text-decoration: none; }
section{
padding: 20px;
}
Setelah membuat file-file di atas. sebelum di jalankan melalui browser, terlebih dahulu perlu dilakukan seting base_url( ) untuk memudahkan dalam menghubungkan file view dengan file css nya.
4.2 Seting base_url () pada codeigniter
Untuk melakukan seting base_url( ), dapat dilakukan melalui file config.php yang ada di dalam application/config/config.php. buka file tersebut lalu cari baris sintak seperti berikut:
$config['base_url'] = 'http://localhost/pustaka-booking/index.php';
Atau bisa juga melalu file autoload.php yang ada di dalam folder application/config/ kemudian cari baris sintak seperti di bawah
$autoload['helper'] = array();
Kemudian diubah dengan ditambahkan kata „url‟ menjadi seperti di bawah
$autoload['helper'] = array('url');
Setelah selesai, bisa dilihat hasilnya dengan menjalankan kontroler Web.php
http://localhost/pustaka-booking/web
hasilnya seperti gambar di bawah.
Demikian tampilan web sederhana sudah berhasil dibuat pada codeigniter. Template yang dibuat di atas merupakan template dinamis. Maksudnya tampilan header dan footer tidak akan berubah namun bagian konten bisa berubah-ubah.
Contoh untuk membuat halaman lainnya yaitu akan dibuat halam v_about.php. Yang mana link untuk menuju halaman about sudah dibuat sebelumnya pada file v_header.php. Link yang sudah dibuat yaitu Home diseting untuk menuju atau mengakses method index() dan About diseting menuju atau mengakses methode about()
<section>
<h1><?php echo $judul ?></h1>
<h4>Nama</h4>
<ul type="disc">
<li>Nama Depan : Muhammad </li>
<li>Nama Belakang : Rafly</li>
</ul>
<br>
<h4>Alamat</h4>
<ul type="none">
<li> Jl Nayar 2 N0.59</li>
</ul>
<h4>Tempat Lahir</h4>
<ul type="none">
<li>Cirebon</li>
</ul>
<h4>Olah Raga Favorit</h4>
<ul type="square">
<li>Bulutangkis</li>
<li>Catur</li>
</ul>
</section>
Selanjutnya jalankan kembali pada browser dan klik pada menu About atau bisa langsung mengakses ke method about. http://localhost/pustaka-booking/web/about
No comments:
Post a Comment