Templating – Tutorial CodeIgniter 3

Templating Codeigniter 3

Sebenarnya ada banyak cara membuat templating dalam membangun aplikasi dengan CI3, dan pada tulisan kali ini saya mau sharing salah satu cara yang saya pikir bisa membantu teman-teman untuk mempercepat proses pembangunan aplikasi CI3.

Buat folder layouts dalam applicationviews /
lalu di dalam folder layouts tadi buat file dengan nama app.php lalu isi dengan kode lebih kurang seperti berikut

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title><?= $title . ' | Belajar CI3' ?></title>
    <link rel="shortcut icon" type="image/x-icon" href="<?= BASE_URL('assets/sbadmin2/img/undraw_rocket.svg') ?>">

    <!-- Custom fonts for this template-->
    <link href="<?= BASE_URL('assets/sbadmin2/vendor/fontawesome-free/css/all.min.css') ?>" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="<?= BASE_URL('assets/sbadmin2/css/sb-admin-2.css') ?>" rel="stylesheet">
</head>

<body id="page-top">

    <div id="wrapper">

        <?php $this->load->view('layouts/_sidebar') ?>

        <div id="content-wrapper" class="d-flex flex-column">

            <div id="content">
                <?php $this->load->view('layouts/_topbar') ?>

                <?php $this->load->view($page) ?>

            </div>

            <?php $this->load->view('layouts/_footer') ?>

        </div>

    </div>

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <?php $this->load->view('layouts/_logoutmodal') ?>
    <?php $this->load->view('layouts/_scripts') ?>
</body>

</html>

Buat file dengan nama _sidebar.php dalam applicationviewslayouts /
file ini untuk mengisi slot _sidebar pada app.php yang telah kita buat pada langkah 1 tadi

<?php defined('BASEPATH') or exit('No direct script access allowed');

function nav_item($segment)
{
    $ci = get_instance();
    if ($segment == $ci->uri->segment(2)) {
        $nav_item = 'nav-item active';
    } else {
        $nav_item = 'nav-item';
    }

    return $nav_item;
}

?>

<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="<?= base_url() ?>">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-home"></i>
        </div>
        <div class="sidebar-brand-text mx-3">Belajar CI3</div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider">

    <!-- Nav Item - Dashboard -->
    <li class="<?= nav_item('welcome') ?>">
        <a class="nav-link" href="<?= BASE_URL('admin') ?>">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dasbor</span>
        </a>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider">

    <li class="<?= nav_item('wilayah') ?>">
        <a class="nav-link" href="#">
            <i class="fas fa-fw fa-map"></i>
            <span>Wilayah</span>
        </a>
    </li>

    <!-- Nav Item - Template Collapse Menu -->
    <li class="<?= nav_item('investasi') ?>">
        <a class="nav-link pb-0 collapsed" href="#" data-toggle="collapse" data-target="#collapseData" aria-expanded="true" aria-controls="collapseData">
            <i class="fas fa-fw fa-bezier-curve"></i>
            <span>Investasi</span>
        </a>
        <div id="collapseData" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Menu Investasi:</h6>
                <a class="collapse-item" href="#">PMDN</a>
                <a class="collapse-item" href="#">PMA</a>
            </div>
        </div>
    </li>


    <!-- Divider -->
    <hr class="sidebar-divider mt-3">

    <!-- Nav Item - Tables -->
    <li class="<?= nav_item('logout') ?>">
        <a class="nav-link pb-0" data-toggle="modal" data-target="#logoutModal" href="<?= BASE_URL('auth/logout') ?>">
            <i class="fas fa-fw fa-door-open"></i>
            <span>Logout</span>
        </a>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider mt-3 d-none d-md-block">

    <!-- Sidebar Toggler (Sidebar) -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>

</ul>
<!-- End of Sidebar -->

Buat file dengan nama _topbar.php dalam applicationviewslayouts /
file ini untuk mengisi slot _topbar pada app.php yang telah kita buat pada langkah 1 tadi

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <!-- Sidebar Toggle (Topbar) -->
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
        <i class="fa fa-bars"></i>
    </button>

    <!-- Topbar Navbar -->
    <ul class="navbar-nav ml-auto">
        <li class="nav-item no-arrow mx-1">
            <a class="nav-link" href="javascript:history.go(0)" data-toggle="tooltip" title="Refresh"><i class="fas fa-sync-alt fa-fw"></i></a>
        </li>

        <div class="topbar-divider d-none d-sm-block"></div>

        <!-- Nav Item - User Information -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="mr-2 d-none d-lg-inline text-gray-600 small"><?= $user['fullname'] ?></span>
                <?php if (!file_exists(FCPATH . 'uploads/users/dp/' . $user['image']) || $user['image'] == NULL) : ?>
                    <img class="img-profile rounded-circle" src="https://i.pravatar.cc/300?img=4">
                <?php else : ?>
                    <img class="img-profile rounded-circle" src="<?= base_url('uploads/users/dp/') . $user['image'] ?>">

                <?php endif ?>
            </a>
            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                    Logout
                </a>
            </div>
        </li>

    </ul>

</nav>
<!-- End of Topbar -->

Buat file dengan nama _footer.php dalam applicationviewslayouts /
file ini untuk mengisi slot _footer pada app.php yang telah kita buat pada langkah 1 tadi

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!-- Footer -->
<footer class="sticky-footer bg-white">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>Copyright &copy; Belajar CI3 <?= date('Y') ?></span>
        </div>
    </div>
</footer>
<!-- End of Footer -->

Buat file dengan nama _logoutmodal.php dalam applicationviewslayouts /
file ini untuk mengisi slot _logoutmodal pada app.php yang telah kita buat pada langkah 1 tadi

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Sudah selesai?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Pilih "Logout" di bawah jika Anda ingin keluar.</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="<?= BASE_URL('auth/logout') ?>">Logout</a>
            </div>
        </div>
    </div>
</div>
<!-- End Logout Modal-->

Buat file dengan nama _script.php dalam applicationviewslayouts /
file ini untuk mengisi slot _script pada app.php yang telah kita buat pada langkah 1 tadi

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!-- start script -->
<!-- Bootstrap core JavaScript-->
<script src="<?= BASE_URL('assets/sbadmin2/vendor/jquery/jquery.min.js') ?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="<?= BASE_URL('assets/sbadmin2/vendor/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>

<!-- Core plugin JavaScript-->
<script src="<?= BASE_URL('assets/sbadmin2/vendor/jquery-easing/jquery.easing.min.js') ?>"></script>

<!-- Custom scripts for all pages-->
<script src="<?= BASE_URL('assets/sbadmin2/js/sb-admin-2.min.js') ?>"></script>

<script type="text/javascript">
  // file label untuk input file
  $('.custom-file-input').on('change', function() {
    let fileName = $(this).val().split('\\').pop();
    $(this).next('.custom-file-label').addClass("selected").html(fileName);
  });

  // mengaktifkan fungsi tooltip ke semua halaman
  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
  });
</script>
<!-- end script -->

Ubah isi file Admin.php dalam application / contollers /

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Admin extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
		if (!has_login()) kick_it_out('Halaman yang Anda tuju hanya tersedia untuk pengguna yang sudah login');
		else $this->user = $this->db->get_where('users', ['username' => $this->session->userdata('username')])->row_array();
	}

	public function index()
	{
		$data['title'] = 'Dasbor';
		$data['page'] = 'pages/welcome';
		$data['user'] = $this->user;

		$this->load->view('layouts/app', $data);
	}
}

Kemudian buat folder pages di views dan file welcome.php di dalam pages tersebut
sehingga strukturnya menjadi views / pages / welcome.php.

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-4 text-gray-800"><?= $title ?></h1>

    <div class="row">

        <div class="col-lg-12 mb-4">

            <!-- Illustrations -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Selamat Datang <?= $user['fullname'] ?></h6>
                </div>
                <div class="card-body">
                    <p>Selamat datang <?= $user['fullname'] ?> di Panel Belajar CI3</p>
                </div>
            </div>

        </div>

    </div>

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

About the Author

Assalamualaikum. Saya Ahmad Mazlan, Programmer muda yang masih belajar dan ingin segera berbagi tentang dunia programming. Siapa pun bisa membuat program, yang mereka butuhkan hanya belajar. Semua bisa menjadi Programmer selama memiliki keinginan yang kuat untuk belajar.

Tinggalkan Balasan