-->
Riedayme Pengetahuan untuk Mempelajari Pemrograman khususnya pada Website, Mobile dan Desktop saya tuliskan disini.
Riedayme
Riedayme

Menghubungkan Template di CodeIgniter 3

tulisan ini akan menjelaskan cara menghubungkan template web di codeigniter 3. disini saya akan membuat 2 halaman yaitu halaman app dan halaman site. bahasa kerennya backend dan front end.

dalam membuat template yang efektir agar tidak terjadi penulisan kode yang diulang ulang maka setiap komponennya seperti header, content, sidebar, footer harus dipisah agar template tersebut bersifat dinamis nantinya. jadi kita tidak perlu menulis lagi kode templatenya cukup panggil saja dan itu akan mempermudah pembacaan kode nantinya.

Langkah Kerja

1. Membuat Folder dan File untuk Halaman Site (Homepage)

  • Buat folder site didalam folder views (pathnya seperti ini daily_codeigniter/application/views/site)
  • Buat File homepage.php didalam folder site (pathnya seperti ini daily_codeginiter/application/views/site/homepage.php)
  • Kemudian isi file homepage.php dengan kode dibawah ini
<?php $this->load->view('site/_layouts/header'); ?>
<?php $this->load->view('site/_layouts/nav'); ?>

<div class="container u-mb-medium u-p-zero">
    <div class="row pagination">        
        <div class="col-12">
            ini adalah halaman root, anda berhasil menghubungkan template ke codeigniter 3 :) 
        </div>
    </div>
</div>

<?php $this->load->view('site/_layouts/footer'); ?>
  • Buat folder _layouts didalam folder views
  • Buat beberapa file didalam folder _layouts, diantaranya :
    • footer.php, isi dengan kode dibawah ini
</div><!-- // .row -->

</div><!-- // .container -->

</main><!-- // .o-page__content -->

</div>

<!-- Template JS File -->
<script src="<?php echo base_url(app_all_modules_js) ?>"></script>
<script src="<?php echo base_url(app_main_js) ?>"></script>

<?php if (!empty($js) and is_array($js)): ?>
    <!-- JS Libraies -->
    <?php foreach ($js as $row): ?>
        <script src="<?php echo base_url($row) ?>"></script>
    <?php endforeach?>
<?php endif?>

<!-- Page Specific JS File -->
<?php if (!empty($js_external) and is_array($js_external)): ?>
    <?php foreach ($js_external as $row): ?>
        <script src="<?php echo $row ?>"></script>
    <?php endforeach?>
<?php endif?>

<script src="<?php echo base_url(app_custom_js) ?>"></script>

<!-- this is the external script -->

</body>

</html>
    • header.php, isi dengan kode dibawah ini
<!DOCTYPE html>
<html lang="en-us">
<head>

    <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <title><?php echo $title ?></title>

    <link rel="apple-touch-icon" sizes="120x120" href="<?php echo base_url(APP_LOGO) ?>" />
    <link rel="apple-touch-icon" sizes="152x152" href="<?php echo base_url(APP_LOGO) ?>" />
    <link rel="icon" href ="<?php echo base_url(APP_LOGO) ?>" type="image/x-icon" /> 
    <link rel="shortcut icon" href="<?php echo base_url(APP_LOGO) ?>" type="image/x-icon" />

    <!-- CSS template -->
    <link rel="stylesheet" href="<?php echo base_url(app_all_modules_css) ?>"/> 
    <link rel="stylesheet" href="<?php echo base_url(app_main_css) ?>"/>

    <?php if (!empty($css) AND is_array($css)): ?>
        <!-- CSS Libraries -->
        <?php foreach ($css as $row ): ?>
            <link rel="stylesheet" href="<?php echo base_url($row) ?>">
        <?php endforeach ?>
    <?php endif ?>

    <?php if (!empty($css_external) AND is_array($css_external)): ?>
        <!-- CSS External CDN -->
        <?php foreach ($css_external as $row ): ?>
            <link rel="stylesheet" href="<?php echo $row ?>">
        <?php endforeach ?>
    <?php endif ?>

    <link rel="stylesheet" href="<?php echo base_url(app_custom_css) ?>"/>
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

</head>
<body class="o-page <?php if(!empty($classbody)) echo $classbody;?>">

<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

<div class=" container u-p-zero">
    • nav.php, isi dengan kode dibawah ini
<header class="c-navbar u-mb-medium">
    <a class="c-navbar__brand u-mr-xsmall" href="<?php echo base_url() ?>" title="<?php echo APP_NAME ?>">
        <img alt="<?php echo APP_NAME ?>" src="<?php echo base_url(APP_LOGO) ?>" style="border-radius: 10px;">
    </a>
    <h1 class="c-navbar__title u-pr-medium">
        <?php echo APP_NAME ?>
    </h1>
    <!-- Navigation items that will be collapes and toggle in small viewports -->
    <nav class="c-nav collapse" id="main-nav">
        <div class="section" id="elementer-navigation">
            <div class="widget LinkList" data-version="2" id="LinkList2">
                <ul class="c-nav__list">
                    <li class="c-nav__item">
                        <a class="c-nav__link" href="<?php echo base_url() ?>" title="Home">Home</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- // Navigation items -->
    <button class="c-nav-toggle u-ml-auto" data-target="#main-nav" data-toggle="collapse" type="button">
        <span class="c-nav-toggle__bar"></span>
        <span class="c-nav-toggle__bar"></span>
        <span class="c-nav-toggle__bar"></span>
    </button><!-- // .c-nav-toggle -->
</header>

2. Membuat Folder dan File untuk Halaman App

  • Buat folder app didalam folder views (pathnya seperti ini daily_codeigniter/application/views/app)
  • Buat file dashboard.php didalam folder app (pathnya seperti ini daily_codeigniter/application/views/app/dashboard.php
  • isi file dashboard.php dengan kode dibawah ini
<?php $this->load->view('app/_layouts/header'); ?>
<?php $this->load->view('app/_layouts/sidebar'); ?>

<div class="col-md-12 u-p-zero">

 <div class="c-card c-card--responsive h-100vh u-p-zero">
  <div class="c-card__header c-card__header--transparent o-line">
   <?php echo APP_NAME; ?>
  </div>
  <div class="c-card__body">

   <div class="c-table-responsive">
    anda berhasil menghubungkan template dashboard ui dengan codeigniter
   </div>

  </div>
 </div>
</div>

<?php $this->load->view('app/_layouts/footer'); ?>
  • Buat folder _layouts didalam folder app (pathnya seperti ini daily_codeigniter/application/views/app/_layouts)
  • Buat beberapa file didalam folder app/_layouts, diantaranya :
    • alert.php
<?php  
if ($this->session->flashdata('create')) {
 if ($this->session->flashdata('create') == '1') {
  ?>

  <div class="c-alert c-alert--info alert alert-automatic">
   <i class="c-alert__icon fa fa-info-circle"></i> Create Success
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }elseif ($this->session->flashdata('create') == 'failed') {
  ?>

  <div class="c-alert c-alert--danger alert">
   <i class="c-alert__icon fa fa-info-circle"></i> Create Failed
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }
}
?>

<?php  
if ($this->session->flashdata('edit')) {
 if ($this->session->flashdata('edit') == '1') {
  ?>

  <div class="c-alert c-alert--info alert alert-automatic">
   <i class="c-alert__icon fa fa-info-circle"></i> Update Success
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }elseif ($this->session->flashdata('edit') == 'failed') {
  ?>

  <div class="c-alert c-alert--danger alert">
   <i class="c-alert__icon fa fa-info-circle"></i> Update Failed
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }
}
?>

<?php  
if ($this->session->flashdata('delete')) {
 if ($this->session->flashdata('delete') == '1') {
  ?>

  <div class="c-alert c-alert--info alert">
   <i class="c-alert__icon fa fa-info-circle"></i> Delete Success
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }elseif ($this->session->flashdata('delete') == 'failed') {
  ?>

  <div class="c-alert c-alert--danger alert">
   <i class="c-alert__icon fa fa-info-circle"></i> Delete Failed
   <button class="c-close" data-dismiss="alert" type="button">&times;</button>
  </div>

  <?php
 }
}
?>
    • content.php
<div class="container-fluid">                   

    <div class="row">
    • footer.php
</div><!-- // .row -->

</div><!-- // .container -->

</main><!-- // .o-page__content -->

<!-- Template JS File -->
<script src="<?php echo base_url(app_all_modules_js) ?>"></script>
<script src="<?php echo base_url(app_main_js) ?>"></script>

<?php if (!empty($js) and is_array($js)): ?>
    <!-- JS Libraies -->
    <?php foreach ($js as $row): ?>
        <script src="<?php echo base_url($row) ?>"></script>
    <?php endforeach?>
<?php endif?>

<!-- Page Specific JS File -->
<?php if (!empty($js_external) and is_array($js_external)): ?>
    <?php foreach ($js_external as $row): ?>
        <script src="<?php echo $row ?>"></script>
    <?php endforeach?>
<?php endif?>

<!-- this is the external script -->

<script src="<?php echo base_url(app_custom_js) ?>"></script>


</body>

</html>
    • header.php
<!DOCTYPE html>
<html lang="en-us">
<head>

 <meta charset='UTF-8'/>
 <meta content='width=device-width, initial-scale=1' name='viewport'/>
 <title><?php echo $title ?></title>

 <link rel="apple-touch-icon" sizes="120x120" href="<?php echo base_url(APP_LOGO) ?>" />
 <link rel="apple-touch-icon" sizes="152x152" href="<?php echo base_url(APP_LOGO) ?>" />
 <link rel="icon" href ="<?php echo base_url(APP_LOGO) ?>" type="image/x-icon" /> 
 <link rel="shortcut icon" href="<?php echo base_url(APP_LOGO) ?>" type="image/x-icon" />

 <!-- CSS template -->
 <link rel="stylesheet" href="<?php echo base_url(app_all_modules_css) ?>"/> 
 <link rel="stylesheet" href="<?php echo base_url(app_main_css) ?>"/>

 <?php if (!empty($css) AND is_array($css)): ?>
  <!-- CSS Libraries -->
  <?php foreach ($css as $row ): ?>
   <link rel="stylesheet" href="<?php echo base_url($row) ?>">
  <?php endforeach ?>
 <?php endif ?>

 <?php if (!empty($css_external) AND is_array($css_external)): ?>
  <!-- CSS External CDN -->
  <?php foreach ($css_external as $row ): ?>
   <link rel="stylesheet" href="<?php echo $row ?>">
  <?php endforeach ?>
 <?php endif ?>

 <link rel="stylesheet" href="<?php echo base_url(app_custom_css) ?>"/>
 
 <!-- Google Font -->
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

</head>
<body class="o-page <?php if(!empty($classbody)) echo $classbody;?>">

<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
    • nav.php
<li class="c-sidebar__item">
 <a class="c-sidebar__link <?php if($this->uri->segment(1)=="app" and empty($this->uri->segment(2)) or $this->uri->segment(2) == 'dashboard'){echo "is-active";}?>" href="<?php echo base_url('app/dashboard') ?>">
  <i class="fa fa-fire u-mr-xsmall"></i>Dashboard
 </a>
</li>

<h4 class="c-sidebar__title">First App</h4>

<li class="c-sidebar__item">
 <a class="c-sidebar__link <?php if($this->uri->segment(2)=='module' or $this->uri->segment(2)=='module' and $this->uri->segment(3) == 'create' ){echo "is-active";}?>" href="<?php echo base_url('app/module') ?>">
  <i class="fa fa-fire u-mr-xsmall"></i> Single Menu
 </a>
</li>
    • nav-top.php
<a class="c-btn--custom c-btn--small c-btn c-btn--secondary u-mr-small" href="<?php echo base_url() ?>" target="_blank"> 
    <i class="fa fa-external-link"></i>
</a>

<a class="c-btn--custom c-btn--small c-btn c-btn--danger c-btn--small" href="<?php echo base_url('') ?>"> 
 <i class="fa fa-sign-out"></i>
 <!-- LogOut -->
</a>
    • sidebar.php
<div class="o-page__sidebar js-page-sidebar">
    <div class="c-sidebar">
        <a class="c-sidebar__brand" href="<?php echo base_url('app/dashboard') ?>">
            <img class="c-sidebar__brand-img" src="<?php echo base_url(APP_LOGO) ?>" alt="Logo" title='Logo'>
            <?php echo APP_NAME ?>
        </a>

        <ul class="c-sidebar__list">
            <?php $this->load->view('app/_layouts/nav');?>
        </ul>

    </div><!-- // .c-sidebar -->
</div><!-- // .o-page__sidebar -->

<main class="o-page__content">
    <header class="c-navbar">
        <button class="c-sidebar-toggle u-mr-small">
            <span class="c-sidebar-toggle__bar"></span>
            <span class="c-sidebar-toggle__bar"></span>
            <span class="c-sidebar-toggle__bar"></span>
        </button><!-- // .c-sidebar-toggle -->

        <h2 class="c-navbar__title u-mr-auto"><?php echo $title ?></h2>

        <?php $this->load->view('app/_layouts/nav-top'); ?>
    </header>
    • toolbar.php
<div class="c-toolbar u-justify-between u-mb-small">
    <nav class="c-counter-nav">
        <div class="c-counter-nav__item">
            <div class="c-counter-nav__link">
                <span class="c-counter-nav__counter"><i class="fa fa-fire"></i></span>
                <?php echo $title ?>
            </div>
        </div>
    </nav>
</div>    

3. Menggabungkan File Template ke CodeIgniter 3

  • Pertama download file templatenya
  • kemudian extract ke folder root project yaitu daily_codeigniter
  • maka nanti akan ada folder baru yaitu folder storage (pathnya daily_codeigniter/storage)

4. Mengatur default Routes

  • Buka file routes.php yang terletak pada application/config/routes.php 
  • rubah isi file routes.php pada bagian $route['default_controller'] = 'welcome'; menjadi $route['default_controller'] = 'homepage';
  • tambahkan kode dibawah ini didalam file routes.php 
  • $route['app'] = 'app/Dashboard';

5. Membuat Controller Site dan App

  • Buat file controller dengan nama Homepage.php (pathnya daily_codeigniter/application/controllers/Homepage.php)
  • isi file Homepage.php dengan kode
<?php  
defined('BASEPATH') OR exit('no direct script access allowed');

class Homepage extends MY_Site 
{

    public function __construct(){
        parent::__construct();
    }


    public function index(){

        $data = [
        'title' => APP_NAME,
        ];
        
        $this->load->view('site/homepage',$data);
    }
}
  • Buat folder app didalam folder controller (pathnya daily_codeigniter/application/controllers/app)
  • Buat file controller dengan nama Dashboard.php didalam folder app (pathnya daily_codeigniter/application/controllers/app/Dashboard.php)
  • isi file Dashboard.php dengan kode
<?php  
defined('BASEPATH') OR exit('no direct script access allowed');

class Dashboard extends MY_App 
{


    public function index(){

        $data = [
        'title' => APP_NAME,
        ];
        
        $this->load->view('app/dashboard',$data);
    }
}
  • sekarang coba untuk membuka projectnya dan tampilan utama akan berubah
  • sekarang coba akses tampilan adminya dengan mengunjungi url http://localhost/daily_codeignter/app
0 Komentar
CodeIgniter

Artikel Terkait

Komentar