Ticker

10/recent/ticker-posts

Ad Code

Responsive Advertisement

Membuat Template Web Dengan CodeIgniter

H4nk April 20, 2020
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
<?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
<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>BELAJAR FRAMEWORK 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>BELAJAR FRAMEWORK CODEIGNITER</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>
     <li><a href="<?php echo base_url().'index.php/Web/contact' ?>">Contact Person</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.youtube.com/c/H4nkTech">H4nk Techno</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 belajarci/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: #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
$config['base_url'] = 'http://localhost/belajarci/';
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().
<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/belajarci/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.

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
<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>BELAJAR FRAMEWORK 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>BELAJAR FRAMEWORK CODEIGNITER</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>
     <li><a href="<?php echo base_url().'index.php/Web/contact' ?>">Contact Person</a></li>
    </ul>
   </nav>
   <div class="clear"></div>
  </header>
application/view/v_footer.php
<footer>         <a href="https://www.youtube.com/c/H4nkTech">H4nk Techno</a>    </footer>
 </div>
</body>
</html>
application/view/v_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 tiga view dan cara memanggilnya dengan cara memanggil view secara berurut. dari v_header, v_index dan kemudian v_footer
application/controller/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);   }
}
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

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
<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>
<li><a href="<?php echo base_url().'index.php/Web/contact' ?>">Contact Person</a></li>
sekarang buat sebuah view lagi dengan nama v_about.php
application/view/v_about.phhp
<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>
 Belajar Framework Codeigniter
</p>
</section>
dan tambahkan lagi method about pada controller web untuk membuat halaman baru
<?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/belajarci/index.php/web/about. 

H4nk

Diposting oleh H4nk

Posting Komentar

0 Komentar

Berikan Komentar yang bermanfaat dan sehat.