AssetController pada NG Framework Modifikasi, untuk Apa?

Bagikan jika Anda sukai postingan ini!

Jika Anda perhatikan pada kode sumber dari NG Framework modifikasi, khususnya pada \apps\Controller, terdapat sebuah berkas kelas Controller dengan nama AssetController.php. Apa kegunaan Controller tersebut? Controller tersebut berhubungan dengan sebuah kunci setting pada berkas config.ini di \apps\Config, yaitu COMPACT_MODE.

Mari buka kembali proyek ng-bootstrap sebelumya. Kemudian buka berkas config.ini dan ubah nilai kunci COMPACT_MODE menjadi 1.

COMPACT_MODE = 1;

Akses http://localhost/ng-bootstrap/ melalui peramban, kemudian klik kanan pada peramban dan klik menu View Page Source. Apa yang Anda lihat, tampak skrip html menjadi lebih ramping dengan dihapusnya whitespace (karakter-karakter kosong, seperti: spasi, dan tab). Dengan skrip html yang ramping tersebut otomatis akan membuat ukuran berkas skrip menjadi lebih kecil sehingga situs web akan lebih cepat dimuat.

Kode Sumber yang diperingkas
Kode Sumber yang diperingkas

AssetController digunakan untuk melengkapi fungsi peringkasan skrip. AssetController digunakan untuk membuang whitespace pada berkas-berkas yang dipanggil oleh AssetController melalui route asset. Bingung? Simak langkah-langkah berikut ini.

Buka kembali berkas config.ini di \apps\Config kemudian ubah nilai kunci COMPACT_MODE menjadi 2.

COMPACT_MODE = 2;

Kemudian buka berkas style.css di \assets\css. Tambahkan skrip-skrip CSS sesuai selera. Sebagai contoh, tambahkan skrip di bawah ini.

/* Custom CSS */
p {
    text-align: justify;
    font-size: 12pt;
    line-height: 14pt;
}

section.main-content {
    padding: 10px;
    margin-left: 10px;
}

Selanjutnya buka berkas Layout.phtml di \apps\Layout. Perhatikan kode sumbernya.

<?php
    $config = $this->config;
    $viewTitle = isset($this->viewTitle) ? $this->viewTitle : "";
    $viewDescription = isset($this->viewDescription) ? $this->viewDescription : "";
    $viewImage = isset($this->viewImage) ? $this->viewImage : "";
    $viewKeywords = isset($this->viewKeywords) ? $this->viewKeywords : "";
    
    $baseUrl = \NG\Uri::baseUrl();
    $siteName = $config['SITE_NAME'];
?>
<!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, maximum-scale=1, user-scalable=no" />
    <meta name="image" content="<?php echo $viewImage; ?>">
    <meta name="keywords" content="<?php echo $viewKeywords; ?>" />
    <meta name="description" content="<?php echo $viewDescription ?>" />
    <title><?php echo $viewTitle . ' - ' . $siteName ?></title>
    
    <link rel="stylesheet" type="text/css" href="<?php echo $baseUrl ?>assets/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $baseUrl ?>asset/css/style.css" />
</head>
<body>
    <section class="header">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="<?php echo $baseUrl ?>"><?php echo $siteName ?></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo $baseUrl ?>halaman/tentang">Tentang</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo $baseUrl ?>halaman/kontak">Kontak</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Artikel
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="<?php echo $baseUrl ?>artikel/artikel-1">Artikel 1</a>
                            <a class="dropdown-item" href="<?php echo $baseUrl ?>artikel/artikel-2">Artikel 2</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
    <section class="main-content">
        <?php 
            /* rendering View */
            $this->render(); 
        ?>
    </section>
    <script type="text/javascript" src="<?php echo $baseUrl ?>assets/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $baseUrl ?>assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo $baseUrl ?>asset/js/script.js"></script>
</body>
</html>

Perhatikan baris kode ke-22 dan ke-23, sekilas nampak sama ya? Mungkin juga Anda menduga kesalahan penulisan. Walaupun sebetulnya keduanya itu berbeda satu sama lain. Baris ke-22 mengambil berkas bootstrap.min.css dari filder assets, sementara baris ke-23 mengambil berkas style.css melalui route asset dengan perantara AssetController.

Melalui peramban, coba Anda buka http://localhost/ng-bootstrap/asset/css/style.css, lihat konten yang ditampilkan. Kemudian buka http://localhost/ng-bootstrap/assets/css/style.css, bandingkan dengan yang sebelumnya.

Memanggil file style.css dengan route asset
Memanggil file style.css dengan route asset
Memanggil file style.css langsung dari folder assets
Memanggil file style.css langsung dari folder assets

Tampak perbedaannya ketika memanggil berkas style.css dengan route asset dan secara langsung tanpa route asset, bukan? Dengan penggunaan AssetController ini maka berkas penunjang situs akan menjadi lebih kecil ukurannya saat diakses sehingga dapat lebih mempercepat pemuatan situs web.

Kita sebut saja fungsi AssetController ini untuk mengompresi. Selain CSS, AssetController juga bisa untuk mengompresi berkas JS (JavaScript) bahkan berkas gambar (image) berekstensi jpg, jpeg, dan png, dengan ketentuan berkas yang akan dikompresi berada di folder assets dan sub folder level 1, misalnya di: \assets\css, \assets\js, dan \assets\img.

Sebagai contoh lainnya, Anda dapat menambahkan baris-baris kode sumber pada berkas script.js di \assets\js.