CodeIgniter

Belajar CodeIgniter Part 4: Cara Membuat Template Web Dengan CodeIgniter

Selamat datang. Salam jumpa kembali di pertemuan yang ke-4 dalam sesi belajar CodeIgniter. Dalam sesi ini saya akan menjelaskan cara membuat template website sederhana dengan CodeIgniter, dan akan dijelaskan cara menggunakan teknik multiple view untuk membuat template web yang dinamis.

Caranya sama seperti menggunakan include() pada bagian header dan footer untuk penggunaan PHP native, tetapi untuk CodeIgniter kita membuatnya dengan me-load view CodeIgniter yang sudah kita pisahkan sesuai keinginan.

Misalkan, kamu dapat memisahkan bagian header, sidebar, footer dan konten untuk mencegah pengulangan penulisan syntax, hal ini dapat memudahkan kita dalam memodifikasi template website.

Baca: Cara Membuat Helper HTML CodeIgniter


Tutorial Membuat Template Website Dengan Multiple View CodeIgniter

Langkah pertama, buat controller yang menampilkan sebuah view, saya membuat controller baru dengan nama web.php dan view nya diberi nama contoh_index.php

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('contoh_index',$data);
	}
	

}

Dan kode program untuk view contoh_index.php

letakkan pada application/views/contoh_index.php

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>IRVAN | Tutorial Membuat Template Web Sederhana Dengan CodeIgniter</title>	
	<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/style.css">
</head>
<body>
	<div id="wrapper">
		<header>
			<hgroup>
				<h1>IRVAN GEN - CODE GEEK</h1>
				<h3>Tutorial Membuat Template Web Sederhana CodeIgniter</h3>
			</hgroup>
			<nav>
				<ul>
					<li><a href="<?php echo base_url().'index.php/web' ?>">Beranda</a></li>
					<li><a href="<?php echo base_url().'index.php/web/about' ?>">Tentang</a></li>
				</ul>
			</nav>
			<div class="clear"></div>
		</header>
		<section>
		<h1><?php echo $judul ?></h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
		</section>
		<footer>						
			<a href="https://www.irvannurfazri.com">IRVAN GEN</a>		
		</footer>
	</div>
</body>
</html>

Nah sekarang kita buat file css nya. Karena dalam folder installan CodeIgniter belum terdapat css, maka kita perlu membuat sendiri.

Buat folder dengan nama assets/css/ dan kemudian buat file cssnya dengan memberi nama style.css

masukan kode program dibawah ini

assets/css/style.css

body{
	background: #eee;
	color: #333;
	font-family: sans-serif;
	font-size:15px;

}

#wrapper{
	background: #fff;
	width: 1100px;
	margin: 20px auto;
}

#wrapper header{
	background: #8224e3;
	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: #8224e3;
	padding: 20px;
}

footer a{
	color: #fff;
	text-decoration: none;
}

section{
	padding: 20px;
}

Jangan lupa setting base_url() terlebih dahulu agar nanti kita dapat menghubungkan CodeIgniter dengan file css.

edit file config.php pada folder application/config/config.php dan masukan kode program dibawah ini

$config['base_url'] = 'http://localhost/irvan_gen/';

Sesuaikan dengan nama folder teman – teman yang di install CodeIgniter, kemudian dapat diperhatikan contoh diatas bahwa untuk menghubungkan file css dengan bantuan base_url()

<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/style.css">

Jadi hasil dari <?php echo base_url() ?>assets/css/style.css”> adalah http://localhost/irvan_gen/assets/css/style.css (sesuai kita meletakan file css nya).

Karena disini kita menggunakan base_url() CodeIgniter, maka kita perlu mengaktifkan helper url seperti yang sudah saya buat diatas, pada controller web.php dan saya mengaktifkan helper url pada function construct.

Nah untuk melihat hasilnya seperti apa, silahkan ketik alamat pada browser localhost/nama_folder/index.php/web

localhost/irvan_gen/index.php/web

Cara membuat template website dengan codeigniter - #IRVANGEN
Cara membuat template website dengan codeigniter – #IRVANGEN

Sampai disini kita sudah berhasil membuat template web sederhana, namun halaman ini belum dinamis, kita perlu membuat bagian header dan footer secara berulang pada halaman lainnya.

Kita harus memecah template ini menjadi beberapa bagian, seperti header dan footer. Berikut dibawah ini cara membuat Template Web Dinamis Dengan CodeIgniter.


Membuat Template Website Dinamis Dengan CodeIgniter

Langkah pertama buat kembali view header, disini saya memberi nama contoh_header.php dan meletakkan pada folder views

application/views/contoh_header.php

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>IRVAN GEN | Tutorial Membuat Template Website Sederhana Dengan CodeIgniter</title>	
	<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/style.css">
</head>
<body>
	<div id="wrapper">
		<header>
			<hgroup>
				<h1>IRVAN GEN | CODE GEEK</h1>
				<h3>Membuat Template Website Sederhana Dengan CodeIgniter</h3>
			</hgroup>
			<nav>
				<ul>
					<li><a href="<?php echo base_url().'index.php/web' ?>">Beranda</a></li>
					<li><a href="<?php echo base_url().'index.php/web/tentang' ?>">Tentang</a></li>
				</ul>
			</nav>
			<div class="clear"></div>
		</header>

Kemudian buat view footer

application/views/contoh_footer.php

		<footer>						
				<a href="https://www.irvannurfazri.com">IRVAN GEN</a>			
		</footer>
	</div>
</body>
</html>

Untuk konten halaman utama, buat view dengan nama contoh_index.php (file sebelumnya hapus saja ganti dengan yang ini)

application/views/contoh_index.php

<section>
<h1><?php echo $judul ?></h1>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>

Sekarang template ini sudah menjadi 3 bagian, yaitu view header, view footer, dan view index. Cara pemanggilannya harus berurutan dimulai dari

  1. contoh_header
  2. contoh_index
  3. contoh_footer

Selanjutnya kita buat controller, oh iya controller web.php sebelumnya hapus saja dan ganti dengan ini.

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('contoh_header',$data);
		$this->load->view('contoh_index',$data);
		$this->load->view('contoh_footer',$data);
	}
}

Jika dijalankan hasilnya akan sama, tapi kelebihannya kita dengan mudah bisa membuat halaman lain dan tinggal memanggil view saja yang sudah kita buat tadi untuk halaman lainnya.

Coba perhatikan lagi kode program yang ada di contoh_header disana terdapat hyperlink pada menu Beranda dan Tentang, nah disini belum sempat saya setting. Untuk menyesuaikannya kita perlu membuat halaman tentang yang kemudian akan disambungkan pada menu tersebut.

<li><a href="<?php echo base_url().'index.php/web' ?>">Beranda</a></li>
<li><a href="<?php echo base_url().'index.php/web/tentang' ?>">Tentang</a></li>

Sekarang kita buat view baru dengan nama contoh_tentang.php

application/views/contoh_tentang.php

<section>
<h1><?php echo $judul ?></h1>
<p>
	Halaman Tentang yang bisa kamu ubah sesuai keinginan. -
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
	tutorial codeigniter irvannurfazri.com
</p>
</section>

Tambahkan lagi method Tentang pada controller web.php atau bisa replace untuk membuat halaman baru

application/contorollers/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('contoh_header',$data);
		$this->load->view('contoh_index',$data);
		$this->load->view('contoh_footer',$data);
	}
	public function tentang(){		
		$data['judul'] = "Halaman Tentang";
		$this->load->view('contoh_header',$data);
		$this->load->view('contoh_tentang',$data);
		$this->load->view('contoh_footer',$data);
	}
}

Sekarang jalankan, dan klik Tentang maka kamu akan diarahkan ke halaman Tentang dan alamatnya akan mengarah ke http://localhost/irvan_gen/index.php/

Halaman Tentang - #IRVANGEN
Halaman Tentang – #IRVANGEN

Kesimpulan

Dengan cara membuat template website multiple view atau memecah template menjadi beberapa bagian, maka akan mempermudah kita karena tidak perlu menulis syntax secara berulang.

Tinggal panggil saja misalkan, memanggil header, index, footer dan halaman lainnya. Khusus untuk halaman index tidak perlu lagi membuat halaman header dan footer dan tidak perlu juga membuat halaman about. Intinya dengan menggunakan cara ini semua halaman yang kita buat dapat digunakan tanpa menulis syntax kembali.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Tutorial Membuat Template Website Sederhada Dengan CodeIgniter. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.


Income Search

  • cara membuat website dinamis dengan codeigniter
  • membuat halaman web dinamis dengan codeigniter
  • pengertian multiple view
  • membuat web dengan codeigniter
  • cara membuat web dengan codeigniter
  • template codeigniter
  • template web CI
  • membuat header di codeigniter
  • template ci
  • membangun website dengan ci
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *