Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Sistem Informasi Penjualan dengan Codeigniter 4 Part #2 – Templating

6 min read

Sistem-Informasi-Penjualan-Codeigniter-4-Part-2

Ini merupakan part ke 2 dari tutorial cara membuat aplikasi Sistem Informasi Penjualan dengan Codeigniter 4 yang membahas tentang templating.

Pada part ini Anda akan belajar templating, sekilas tentang url helper dan sekilas tentang route di Codeigniter 4 dengan menggunakan AdminLTE sebagai frontendnya.

Sebelumnya Ilmu Coding sudah membahas pengenalan aplikasi Sistem Informasi Penjualan ini beserta schema databasenya. Jika Anda belum membacanya, alangkah baiknya untuk membaca part ke 1 terlebih dahulu.

Jika sudah, di halaman ini Anda akan belajar:

  1. Bagaimana memasang template AdminLTE di Codeigniter 4
  2. Sekilas tentang base URL
  3. Sekilas tentang view
  4. Memahami dasar route

Mari kita mulai step by step.

Let’s go!

Menggunakan Template AdminLTE 3

Silahkan ikuti langkah-langkah di bawah ini untuk menggunakan AdminLTE 3 di Codeigniter 4:

Step 1 – Download AdminLTE

Saya menggunakan AdminLTE versi ke 3.

Untuk mendownloadnya silahkan klik link di sini.

Step 2 – Pindahan File AdminLTE dan Extract

Setelah Anda berhasil mendownload, Anda akan mendapatkan folder AdminLTE dalam bentuk .zip.

Pindahkan file tersebut ke dalam direktori c:/xampp/htdocs/nama_project/public.

Kemudian klik kanan dan extract here.

Setelah diextract, silahkan rename dengan nama themes dan hapus file .zip.

Perhatikan gambar di bawah ini:

Sistem Informasi Penjualan dengan Codeigniter 4 Part #2 – Templating - Structure

Selesai.

Sekilas Tentang Base URL

Pada dokumentasi Codeigniter 4 tentang URL Helper, mereka mengatakan,”This helper is automatically loaded by the framework on every request.”

Jika pada Codeigniter 3 Anda mesti mengaktifkan URL Helper di application/config/autoload.php maka di Codeigniter 4 sudah tidak perlu itu lagi. Ia sudah otomatis mengaktifkan URL Helper.

Permasalahan mana link yang aktif terdapat pada file app/Config/App.php. Di dalam App.php terdapat baris kode berikut:

public $baseURL = 'http://localhost:8080/';

Anda bisa mengganti URL default tersebut jika membutuhkannya.

Pada masa development biasanya tidak begitu dibutuhkan. Optional saja.

Jika sudah diupload ke server hosting, mau nggak mau harus diubah sesuai nama domain.

Sebenarnya tidak hanya base_url(), Anda bisa menggunakan site_url(), anchor() dan lain-lain.

Anda bisa membaca dokumentasi lengkapnya di sini.

Sampai di sini semoga Anda sudah memahami dasar URL Helper di Codeigniter 4.

Sekilas Tentang View

Mari kita flashback, di Codeigniter 3 kita biasa memanggil view dengan script:

$this->load->view('nama_file')
$this->load->view('sub_folder/nama_file')

Sedangkan di Codeigniter 4 sudah berbeda. Lebih singkat. Yaitu cukup dengan script:

view('nama_file')
view('sub_folder/nama_file')

Memulai Templating di Codeigniter 4

Pertama-tama silahkan buat folder baru di dalam folder app/Views, beri nama folder _partials.

Kita akan memecah bagian header dengan nama header.php, sidebar dengan nama sidebar.php, content dan footer dengan nama footer.php.

Untuk content kita tidak perlu membuat filenya di _partials. Sebab content akan kita gunakan di file terpisah.

Perhatikan gambar di bawah ini:

Sistem Informasi Penjualan dengan Codeigniter 4 Part #2 – Templating - Layout

Kedua, ketik kode di bawah ini untuk file header.php

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>SIP Online</title>
    <style type="text/css"  id="debugbar_dynamic_style"></style>
    <link rel="stylesheet" href="<?php echo base_url('themes/dist'); ?>/css/adminlte.min.css">
    <link rel="stylesheet" href="<?php echo base_url('themes/plugins'); ?>/fontawesome-free/css/all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <script type="text/javascript"  id="debugbar_dynamic_script"></script>
    <script type="text/javascript"  id="debugbar_loader" data-time="1585277113" src="<?php echo base_url('themes/plugins/'); ?>/index.php?debugbar"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#">
                <i class="far fa-user"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <a href="<?php echo base_url('auth/logout'); ?>" class="dropdown-item">
                    Logout
                </a>
            </div>
        </li>
    </ul>
</nav>

Ketiga, ketik kode di bawah ini untuk file sidebar.php

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="<?php echo base_url('/'); ?>" class="brand-link">
      <img src="<?php echo base_url('themes/dist'); ?>/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">SIP Online</span>
    </a>

    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <img src="<?php echo base_url('themes/dist'); ?>/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
            </div>
            <div class="info">
                <a href="#" class="d-block">Admin</a>
            </div>
        </div>
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <li class="nav-item">
                    <a href="<?php echo base_url('/'); ?>" class="nav-link">
                        <i class="nav-icon fas fa-th"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="<?php echo base_url('category'); ?>" class="nav-link">
                        <i class="nav-icon fas fa-tags"></i>
                        <p>Manajement Category</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="<?php echo base_url('product'); ?>" class="nav-link">
                        <i class="nav-icon fas fa-cart-plus"></i>
                        <p>Manajement Product</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="<?php echo base_url('transaction'); ?>" class="nav-link">
                        <i class="nav-icon fas fa-dollar-sign"></i>
                        <p>Manajement Transaction</p>
                    </a>
                </li>
                <li class="nav-header">ACCOUNT</li>
                <li class="nav-item">
                    <a href="<?php echo base_url('auth/logout'); ?>" class="nav-link">
                        <i class="nav-icon far fa-circle text-danger"></i>
                        <p class="text">Logout</p>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</aside>

Keempat, ketik kode di bawah ini untuk file footer.php

<aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
        <h5>Title</h5>
        <p>Sidebar content</p>
    </div>
</aside>

<footer class="main-footer">
    <div class="float-right d-none d-sm-inline">
        Sistem Informasi Penjualan
    </div>
    <strong>Copyright © 2014-2019 <a href="<?php echo base_url('/'); ?>">SIP Online</a>.</strong> All rights reserved.
</footer>
</div>

<script src="<?php echo base_url('themes/plugins'); ?>/jquery/jquery.min.js"></script>
<script src="<?php echo base_url('themes/plugins'); ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo base_url('themes/dist'); ?>/js/adminlte.min.js"></script>
</body>
</html>

Kelima, buat file bernama dashboard.php dan simpan di direktori app/Views seperti gambar di atas.

Lalu ketik kode di bawah ini untuk file dashboard.php

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
            </div>
        </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="m-0">Sales Graph</h5>
                        </div>
                        <div class="card-body">
                            <p>Halaman sales graph</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="m-0">Latest Transaction</h5>
                        </div>
                        <div class="card-body">
                            <p>Halaman latest transaction</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php echo view('_partials/footer'); ?>

Oke sampai di sini templating sudah selesai.

Sekilas Tentang Route

Salah satu fitur baru dari Codeigniter 4 adalah bagian route.

Anda bisa membuka file Routes.php di app/Config/Routes.php

Perhatikan gambar di bawah ini:

Penjelasan:

Baris ke 18 merupakan nama controller yang pertama kali aktif ketika Anda baru saja menginstall Codeigniter 4.

Silahkan periksa direktori app/Controllers.

Terdapat file yang bernama Home.php.

Itu Artinya ketika Anda menjalankan program baik dengan php spark serve maupun link localhost/nama_project/public akan mengarah ke controller Home ini.

Oleh sebab itu kita akan ubah pada baris ke 19 menjadi “Dashboard”

Pada baris ke 20 tidak perlu kita ubah karena di controller Dashboard.php yang akan kita buat nanti akan ada function index().

Baris ke 21 bisa Anda setting true atau false. Jika Anda ingin mengubah _ (underscore) menjadi – (strip) pada URI, silakan ubah menjadi true, jika tidak biarkan false saja.

Baris ke 22 untuk mengatur controller mana yang akan dipanggil ketika terjadi halaman error atau tidak ditemukan.

Anda bisa mengcustomnya seperti kode di bawah ini:

$routes->set404Override('App\Errors::show404');

// custom view
$routes->set404Override(function()
{
    echo view('my_errors/not_found.html');
});

Baris ke 23 digunakan jika Anda ingin mengarahkan user ke halaman tertentu jika halaman yang dicari tidak ditemukan.

By default, system akan menerapkan nilai true untuk mencari class yang cocok. Jadi walaupun Anda tidak membuat route di baris ke 33 dan selanjutnya, system akan tetap mencari class yang cocok.

Jika Anda ingin membatasi route tertentu saja, silahkan ubah nilainya menjadi false.

Dan baris ke 33 adalah custom route yang bisa Anda tambahkan atau modifikasi sesuai keinginan.

Setelah penjelasan singkat di atas tentang route, silahkan modifikasi file app/Config/Routes.php menjadi seperti di bawah ini:

$routes->setDefaultNamespace('App\Controllers');
$routes->setDefaultController('Dashboard');
$routes->setDefaultMethod('index');
$routes->setTranslateURIDashes(true);
$routes->set404Override();
$routes->setAutoRoute(true);

$routes->get('/', 'Dashboard::index');

Simpan.

Membuat Controller Dashboard

Silahkan buat file baru bernama Dashboard.php di dalam root app/Controllers.

Kemudian ketik kode di bawah ini:

<?php namespace App\Controllers;

class Dashboard extends BaseController
{
	public function index()
	{
		return view('dashboard');
    }
    
}

Simpan.

Testing Project

Silahkan masuk ke direktori project melalui terminal, kemudian ketik command berikut:

php spark serve

Saya menggunakan visual studio code, jika Anda menggunakannya silahkan klik menu terminal, kemudian pilih new terminal.

Ketik http://localhost:8080 di browser.

Hasilnya bisa Anda lihat seperti ini:

Sistem Informasi Penjualan dengan Codeigniter 4 Part #2 – Templating - Dashboard

Pengantar Templating Codeigniter 4

Alhamdulillah.

Cukup panjang pembahasan templating pada aplikasi sistem informasi penjualan dengan Codeigniter 4 ini.

Dalam kesempatan berikutnya Anda akan belajar mengenai CRUD pada manajement Category.

Terus ikuti tutorial ini untuk mendapatkan informasi dan update terbaru dari Ilmu Coding.

Jangan lupa share dan beri komentar dukungan untuk project kali ini.

Semoga tutorial ini bermanfaat luas dan tidak hanya berhenti pada Anda.

Aamiin.

Download Source Code

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

4 Replies to “Sistem Informasi Penjualan dengan Codeigniter 4 Part #2 –…”

  1. Thanks tutorialnya
    Apakah CI4 ini udah stabil untuk digunakan buat aplikasi web sehari2?

  2. itu url ke ‘themes’ nya apa gak perlu ditambahkan public ya? jd ‘public/themes/..’

    1. Nggak Mas. Karena pas ketik perintah php spark serve dan menjalankan 127.0.0.1:8080 sudah seperti menjalankan localhost/nama_project/public

      Semoga membantu.

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.