Tutorial Membuat Template Web Dengan CodeIgniter
- PHP X-Ray di cPanel untuk Optimasi Kecepatan Web - April 18, 2023
- Cara Membeli Insta Web Platform - Maret 1, 2023
- Cara Membuat Backup di Insta Web Platform - Februari 7, 2023
Hai, ketemu lagi di tutorial codeIgniter. Disini akan membahas bagaimana cara membuat template web dengan teknik multiple view lewat codeIgniter sehingga terlihat dinamis. Langsung aja yuk ke panduannya.
STEP 1. Buat satu controller yang menampilkan sebuah view, sebagai contoh web.php dan sebuah view dengan nama v_index.php. Buka application/controller/web.php seperti berikut :
| 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); }
} |
STEP 2. Lalu kamu buat view v_index.php seperti dibawah ini
| 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>sobatjagoan | 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>sobatjagoan.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.sobatjagoan.com">sobatjagoan</a> </footer> </div> </body> </html> |
Jangan lupa kamu harus setting base url () codeIgniter agar bisa terhubung dengan file css. Sebagai contohnya, disini kita buat folder project dalam folder sobatjagoan/assets/css/style.css seperti dibawah ini
| 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; } |
STEP 3. Setting base_url() dan buka pada file config.php di application/config/config.php
| 1 | $config['base_url'] = 'http://localhost/sobatjagoan/'; |
STEP 4. Setting dengan alamat project kamu, kemudian perhatikan contoh diatas untuk menghubungkan file css dengan bantuan base_url().
| 1 | <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/style.css"> |
Hasil dari <?php echo base_url() ?>assets/css/stylecss adalah htt://localhost/sobatjagoan/assets/css/style.css. Jangan lupa aktifkan juga helper url seperti yang sudah dibuat pada controller web.php pada function construct().
Setelah tampilan web sederhananya berhasil, kamu sekarang bisa memecah template menjadi beberapa bagian agar web kamu kelihatan dinamis dan apik. Memecah template dengan bagian header dan footer.
STEP 5. Untuk membuat header melalui 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>sobatjagoan | 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>sobatjagoan.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> |
STEP 6. Untuk membuat footer melalui application/view/v_footer.php
| 1
2 3 4 5 6 |
<footer>
<a href="https://www.sobatjagoan.com">sobatjagoan</a> </footer> </div> </body> </html> |
Untuk membuat index melalui 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> |
Nah sekarang template kamu sudah terbagi menjadi tiga bagian, untuk memanggilnya kamu bisa melalui 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); } } |
Kalau kamu ingin melihat hasilnya kamu bisa cek di view, dengan v_header, v_footer.
Untuk melihat method index dan method about, kamu cukup lakukan seperti ini
| 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> |
Kamu bisa lakukan ini untuk membuat sebuah view 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 sobatjagoan.com </p> </section> |
STEP 7. 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); } } |
STEP 8. Yang terakhir untuk melihat keseluruhan hasil yang kamu buat tadi, kamu bisa buka browser dengan akses langsung http://localhost/sobatjagoan/index.php/web/about
Nah, ternyata gampang kan, Yuk simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat