Menggunakan Bootstrap Sebagai Layout Pada NG Framework

Bagikan jika Anda sukai postingan ini!

Logo Bootstrap
Logo Bootstrap

Sebagai framework, tentunya NG Framework harus mudah berkolaborasi dengan pustaka-pustaka lain, contohnya dengan pustaka Bootstrap CSS untuk penataan tampilan antar muka pengguna situs web. NG Framework diimplementasikan dengan Bootstrap, Material Design, atau pustaka-pustaka lain. Anda bisa memadukan NG Framework dengan template Boostrap populer seperti AdminLTE dan sebagainya. Berikut ini contoh penggunaan Bootstrap pada NG Framework.

Mari kita mulai dengan membuat proyek baru. Buat folder baru pada server lokal Anda, namai dengan ng-bootstrap. Unduh kode sumber NG Framework modifikasi di sini: https://github.com/InochiSoft/ng-mod, kemudian ekstrak pada folder ng-boostrap.

Seperti pada pembahasan sebelumnya, Memperkenalkan NG Framework untuk PHP, ubah berkas .htaccess.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /ng-bootstrap
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]
</IfModule>

Ubah juga nilai kunci SUB_DIR pada berkas config.ini di folder \apps\Config.

SUB_DIR = "ng-bootstrap";

Unduh pustaka Bootstrap, kemudian ekstrak berkas unduhan.

Berkas unduhan Bootstrap
Berkas unduhan Bootstrap

Pilih folder css dan js dari hasil ekstraksi berkas Bootstrap kemudian salin.

Memilih dan menyalin folder css dan js Bootsrap
Memilih dan menyalin folder css dan js Bootsrap

Tempel folder css dan js di \assets.

Menempel folder css dan js di assets
Menempel folder css dan js di assets

Bootstrap selalu membutuhkan JQuery agar dapat berjalan dengan baik, unduh pustaka JQuery kemudian tempel di \assets\js.

Menempel JQuery di \assets\js
Menempel JQuery di \assets\js

Buka berkas Layout.phtml di \apps\Layout, lakukan perubahan seperti di bawah ini.

<?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>

Sekarang kita coba mengakses situs web kita melalui peramban.

Tampilan Layout Bootsrap
Tampilan Layout Bootstrap

Sekarang cobalah mengklik menu-menu yang tersedia, seperti: Tentang, Kontak, Artikel -> Artikel 1, atau Artikel 2, sambil melihat alamat URL yang dituju. Sebagai contoh saat mengklik menu Tentang, URL akan menunjukkan lokasi http://localhost/ng-bootstrap/halaman/tentang.

Route halaman dikelola oleh kelas PageController. Ini bisa Anda lihat pada berkas config.ini di \apps\Config. Mari kita edit berkas PageController.php di \apps\Controller.

<?php
class PageController extends NG\Controller {
    protected $config;
    protected $cache;
    protected $session;
    protected $cookie;
    
    public function init() {
        $this->config = $this->view->config = \NG\Registry::get('config');
        $this->session = $this->view->session = new \NG\Session();
        $this->cookie = $this->view->cookie = new \NG\Cookie();
        $this->cache = $this->view->cache = new \NG\Cache();
    }
    
    public function IndexAction() {
        $config = $this->config;
        /*
        $requests mengambil URL yang dikirimkan peramban, misal:
        - http://localhost/ng-bootstrap/halaman/tentang
        maka $requests akan menghasilan array dengan nilai:
        param1 => tentang.
        */
        $requests = \NG\Route::getRequests();
        
        $viewRoute = $config['ROUTE_PATH_1'];
        $siteName = $config['SITE_NAME'];
        
        $viewType = '';
        $viewTitle = '';
        $viewContent = '';
        $viewKeywords = '';
        $viewDescription = '';
        
        $param1 = '';
        
        if ($requests){
            if (isset($requests['param1'])){
                $param1 = $requests['param1'];
                if ($param1){
                    switch($param1){
                        case 'tentang':
                            $viewTitle = 'Tentang';
                            $viewContent = "<p><strong>$siteName</strong> adalah situs percobaan NG Framework dengan Bootstrap. Terima kasih sudah mengunjungi <strong>$siteName</strong>.</p>";
                            
                            $viewKeywords = 'Tentang, NG Framework, Bootstrap';
                            $viewDescription = $viewContent;
                        break;
                        case 'kontak':
                            $viewTitle = 'Kontak';
                            $viewKeywords = 'Kontak';
                            $viewDescription = "Halaman kontak $siteName";
                        break;
                    }
                }
            }
        }
        
        $viewType = $param1;
        $viewDescription = htmlentities(strip_tags($viewDescription));
        
        $this->view->viewRoute = $viewRoute;
        $this->view->viewType = $viewType;
        $this->view->viewTitle = $viewTitle;
        $this->view->viewContent = $viewContent;
        $this->view->viewKeywords = $viewKeywords;
        $this->view->viewDescription = $viewDescription;
        $this->view->viewImage = '';
    }
}
?>

Selanjutnya kita akan menentukan tampilan View dari route halaman. Berkas untuk View disimpan di alamat \apps\View.

Lokasi penyimpanan berkas View
Lokasi penyimpanan berkas View

Pada lokasi \apps\View Anda dapat melihat beberapa folder seperti: Download, Index, News, Page, dan Post. Folde-folder tersebut mewakili View untuk tiap route. Nama folder disesuaikan dengan nama Controller yang Anda buat/tambahkan. Contoh untuk PageController, maka folder untuk View-nya adalah Page. Pada setiap folder akan terdapat sebuah berkas dengan nama Index.phtml.

Kita akan memodifikasi berkas View untuk route halaman, maka silakan buka berkas Index.phtml pada folder Page. Ubah berkas Index.phtml menjadi seperti di bawah ini.

<?php
    $viewType = isset($this->viewType) ? $this->viewType : '';
    $viewTitle = isset($this->viewTitle) ? $this->viewTitle : '';
    $viewContent = isset($this->viewContent) ? $this->viewContent : '';
?>
<h1><?php echo $viewTitle ?></h1>
<div class="content">
<?php 
    /* Menyeleksi kondisi berdasarkan $viewType */
    if ($viewType == 'tentang'){
        echo $viewContent;
    } else if ($viewType == 'kontak'){
?>
    <form method="POST">
        <table class="table">
            <tr>
                <td width="180">Nama Lengkap</td>
                <td width="30">:</td>
                <td><input class="form-control" type="text" name="fullname" placeholder="Nama Lengkap" /></td>
            </tr>
            <tr>
                <td>Email</td>
                <td width="30">:</td>
                <td><input class="form-control" type="email" name="email" placeholder="Email" /></td>
            </tr>
            <tr>
                <td>Pesan</td>
                <td width="30">:</td>
                <td><textarea class="form-control" rows="2" name="message" placeholder="Pesan"></textarea></td>
            </tr>
            <tr>
                <td colspan="3" class="text-center"><input type="submit" class="btn btn-primary" name="send" value="Kirim" /></td>
            </tr>
        </table>
    </form>
<?php } else { ?>

<?php } ?>
</div>

Sekarang coba akses URL di bawah ini pada peramban Anda.

http://localhost/ng-bootstrap/halaman/tentang

Halaman Tentang
Halaman Tentang

http://localhost/ng-bootstrap/halaman/kontak

Halaman Kontak
Halaman Kontak

Pembahasan selanjutnya kita akan mencoba bagaimana menyimpan informasi yang dikirim dari halaman Kontak ke dalam database.