sumber : https://www.malasngoding.com/membuat-template-web-dengan-codeigniter/
Membuat Template Web Dengan CodeIgniter
Pada tutorial CodeIgniter Part 5 : Membuat Template Web Dengan CodeIgniter ini akan di jelaskan tentang membuat template website sederhana dengan menggunakan codeigniter. pada tutorial ini akan di jelaskan tentang cara menggunakan teknik multiple view pada codeigniter untuk membuat template website yang dinamis, sama seperi menggunakan include() pada bagian header dan footer pada penggunaan PHP native, tetapi di codeigniter kita membuat nya dengan men-load view codeigniter yang kita pisah-pisahkan sesuai keinginan, misalnya anda bisa memisahkan bagian header, footer, sidebar dan konten untuk mencegah pengulangan penulisan syntax dan memudahkan dalam hal memodifikasi temlate website. Membuat Template Web Dengan Codeigniter
Cara Membuat Template web dengan multiple view codeigniter
buat sebuah controller yang menampilkan sebuah view. di sini saya membuat controller web.php dan sebuah view dengan nama v_index.php. Membuat Template Web Dengan Codeigniter
application/controller/web.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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_index’,$data);
}
}
|
kemudian buat view v_index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<title>MalasNgoding | Membuat Template sederhana 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>MalasNgoding.com</h1>
<h3>Membuat template sederhana codeigniter</h3>
</hgroup>
<nav>
<ul>
<li><a href=“<?php echo base_url().‘index.php/web’ ?>“>Home</a></li>
<li><a href=“<?php echo base_url().‘index.php/web/about’ ?>“>About</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.malasngoding.com”>MalasNgoding</a>
</footer>
</div>
</body>
</html>
|
oh iya jangan lupa untuk setting base_url() codeigniter nya terlebih dulu agar kita bisa menghubungkan codeigniter dengan file css. file css nya saya buat pada folder project di dalam folder malasngoding/assets/css/style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
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;
}
|
setting base_url() buka pada file config.php di application/config/config.php
|
1
|
$config[‘base_url’] = ‘http://localhost/malasngoding/’;
|
setting dengan alamat project anda masing-masing. kemudian dapat di perhatikan pada contoh di atas bahwa untuk menghubungkan dengan file css dengan bantuan base_url().
|
1
|
<link rel=“stylesheet” type=“text/css” href=“<?php echo base_url() ?>assets/css/style.css”>
|
jadi hasil dari <?php echo base_url() ?>assets/css/stylecss adalah htt://localhost/malasngoding/assets/css/style.css. (sesuai dengan letak file css kita). karena kita menggunakan base_url() codeigniter, maka kita perlu mengaktifkan juga helper url seperti yang sudah saya buat pada controller web.php. saya mengaktifkan helper url pada function construct().
dan jalankan controller web.php untuk melihat hasil dari template sederhana kita.
membuat template web dengan codeigniter
nah, tampilan web sederhana pun berhasil kita buat pada codeigniter. tapi halaman ini belum dinamis. kita masih perlu membuat bagian header dan footer secara berulang-ulang pada halaman lainnya. caranya kita harus memecah template ini menjadi beberapa bagian. yaitu header dan footer. sehingga template sederhana ini menjadi sebagai berikut. Membuat Template Web Dengan Codeigniter
application/view/v_header.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<title>MalasNgoding | Membuat Template sederhana 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>MalasNgoding.com</h1>
<h3>Membuat template sederhana codeigniter</h3>
</hgroup>
<nav>
<ul>
<li><a href=“<?php echo base_url().‘index.php/web’ ?>“>Home</a></li>
<li><a href=“<?php echo base_url().‘index.php/web/about’ ?>“>About</a></li>
</ul>
</nav>
<div class=“clear”></div>
</header>
|
application/view/v_footer.php
|
1
2
3
4
5
6
|
<footer>
<a href=“https://www.malasngoding.com”>MalasNgoding</a>
</footer>
</div>
</body>
</html>
|
application/view/v_index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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 tiga view dan cara memanggilnya dengan cara memanggil view secara berurut. dari v_header, v_index dan kemudian v_footer
application/controller/web.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?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);
}
}
|
dan hasilnya juga akan sama, tetapi kelebihannya kita bisa dengan mudah membuat halaman lain dan tinggal memanggil v_header dan v_footer, hanya perlu mengganti v_index untuk halaman lainnya. Membuat Template Web Dengan Codeigniter
membuat template web dengan codeigniter
perhatikan lagi pada hyperlink pada menu template di atas yang sudah saya setting untuk menuju method index dan method about. membuat tampilan web dengan CodeIgniter
|
1
2
|
<li><a href=“<?php echo base_url().‘index.php/web’ ?>“>Home</a></li>
<li><a href=“<?php echo base_url().‘index.php/web/about’ ?>“>About</a></li>
|
sekarang buat sebuah view lagi dengan nama v_about.php
application/view/v_about.phhp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<section>
<h1><?php echo $judul ?></h1>
<p>
halaman about yang bisa anda 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 malasngoding.com
</p>
</section>
|
dan tambahkan lagi method about pada controller web untuk membuat halaman baru
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?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);
}
}
|
dan sekarang jalankan lagi pada browser,klik pada menu about atau bisa mengakses langsung http://localhost/malasngoding/index.php/web/about. membuat tampilan web dengan CodeIgniter
cara membuat tampilan web dengan codeigniter dengan multiple view
Kesimpulan
dengan membuat template web dengan multiple view atau memecahkan template menjadi beberapa bagian dan kemudian memanggilnya secara berurutan seperti contoh di atas yaitu dengan memanggil view header, index dan kemudian footer, maka akan memudahkan kita karena tidak perlu menuliskan syntax berulang-ulang misalnya tidak perlu lagi membuat header khusus untuk halaman index dan tidak perlu juga membuat header lagi untuk about. intinya header dan footer dapat di gunakan secara bersama-sama dan hanya bagian konten nya saja yang berubah-ubah sesuai keinginan dengan cara memanggilnya pada method controller web.
Sekian tutorial cara membuat tampilan web dengan CodeIgniter.
Komentar Terbaru