Modern Codeigniter Project Part 4 – Membuat Layout Frontend

Advertisements

Seperti pada tutorial aplikasi alumni tentang templating pada codeigniter sebelumnya, kali ini kita akan membuat layout frontend untuk aplikasi voting yang akan kita bangun bersama. Di project ini kita akan menggunakan materialize css yang pada saat artikel ini ditulis sudah dalam versi 1.0.0.

Membuat Layout Codeigniter Frontend

Seperti judul diatas, kita akan membuat layout yang dapat diakses oleh public user. Layout ini akan dibagi menjadi tiga bagian besar yaitu header, master, dan footer yang akan kita simpan pada folder application/views/layouts/frontend. Jadi teman-teman yang belum membuat folder tersebut dipersilahkan meninggalkan lapangan upacara.

File application/views/layouts/frontend/header.blade.php akan berisi kode berikut:

<header class="navbar-fixed">
    <nav class="z-depth-3 white">
        <div id="main-preloader" class="progress hidden">
            <div class="indeterminate"></div>
        </div>
        <div class="nav-wrapper container">
            <a href="#" class="brand-logo orange-text text-darken-2"><b>coblos.in</b></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a class="black-text">Pemilu 2019</a></li>
                <li><a class="black-text">Polling Terbaru</a></li>
            </ul>
        </div>
    </nav>
</header>

Kenapa kita menggunakan ekstensi .blade.php saya harap teman-teman masih ingat dengan Blade templating yang sudah kita bahas kan? Oke lanjut ke file berikutnya yaitu application/views/layouts/frontend/master.blade.php berisi:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@yield('title') | E-Coblos App</title>
        <link id="favicon" rel="icon" type="image/x-icon" href="/favicon.ico">
        
        <!-- Compiled and minified CSS -->
        <link href="https://fonts.googleapis.com/css?family=Material+Icons|Nunito" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        
        <link rel="stylesheet" href="{{ base_url('assets/css/app.css') }}">
        <link rel="stylesheet" href="{{ base_url('assets/css/page.css') }}">
        @yield('style')
    </head>
    <body>
        @include('layouts.frontend.header')
        
        <main>
            @yield('content')
        </main>

        @include('layouts.frontend.footer')

        <!-- Compiled and minified JavaScript -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        @yield('script')
    </body>
</html>

Beberapa poin penting yang teman-teman perlu ketahui yaitu:

  • Pada baris ke 19 dan 25 terdapat directive @include() yang berfungsi untuk memanggil file view lain dalam kasus ini kita kingin memanggil file view header dan file view footer.
  • Pada baris ke 16, 22, dan 30 terdapat directive @yield() yang akan kita bahas sebentar lagi.
Advertisements

File view berikutnya adalah footer.blade.php yang masih berada dalam satu folder yang sama yaitu application/views/layouts/frontend/footer.blade.php

<footer class="page-footer white">
    <div class="container">
        <div class="row">
            <div class="col s12 m4">
                <span class="grey-text">&copy; Copyright {{ date('Y') }} 
                    <a href="//kcdev.id">KCDEV</a>
                </span>
            </div>
            <div class="col s12 m4">
                <span class="grey-text">Made with ❤️in Makassar, Indonesia</span>
            </div>
            <div class="col s12 m4 center-align">
                <span class="grey-text">Find Us: &nbsp;</span>
                <a href="https://www.facebook.com/kacedev/" target="__blank" class="btn-floating btn-small social-button waves-effect waves-light color-facebook"><i class="zmdi zmdi-facebook"></i></a>
                <a href="https://www.instagram.com/kacedev/" target="__blank" class="btn-floating btn-small social-button waves-effect waves-light color-instagram"><i class="zmdi zmdi-instagram"></i></a>
                <a href="https://twitter.com/kcdev_id" target="__blank" class="btn-floating btn-small social-button waves-effect waves-light color-twitter"><i class="zmdi zmdi-twitter"></i></a>
                <a href="mailto:kacedev.id@gmail.com" target="__blank" class="btn-floating btn-small social-button waves-effect waves-light red"><i class="zmdi zmdi-email"></i></a>
            </div>
        </div>
    </div>
</footer>

Setelah membuat file view di atas mari kita coba untuk menampikan file tersebut melalui controller baru yang bernama Page. Controller ini akan berisi kode berikut:

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

class Pages extends CI_Controller 
{
	public function home()
	{
		view('pages.home');
	}
}

Seperti yang bisa kita lihat di atas,  method home() akan memanggil file view home.blade.php yang berada pada folder applications/views/pages.

@extends('layouts.frontend.master')

@section('title', 'Home')

@section('style')
@endsection

@section('content')
    <section class="section z-depth-1" id="section-main">
        <div class="row container">
            <div class="col s12 l10">
                <h4 class="white-text title">
                    Aplikasi voting online pertama di lorong ku <br>
                </h4>
                <h5 class="white-text subtitle">Data pemilih menggunakan facebook Graph API</h5>
                <h5 class="white-text subtitle">Ayoo buat voting dan ajak semua teman untuk memilih.</h5>

                <br>
                <a href="{{ base_url('/login') }}" class="waves-effect waves-light btn grey darken-4">Masuk</a>
                <a href="{{ base_url('/register') }}"class="waves-effect waves-light btn grey darken-4">Daftar Sekarang</a>                
            </div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <h4 class="center-align">Pemilu 2019</h4>
            <div class="row">
                <div class="col s12 m6 l3">
                    <div class="card hoverable">
                        <div class="card-image orange accent-3">
                            <img src="{{ base_url('uploads/avatars/zebra.png') }}">
                        </div>
                        <div class="card-content center-align">
                            <h5>Zebra</h5>
                            <p>I am a very simple card. I am good at containing small bits of information.
                            I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a class="btn btn-coblos waves-effect waves-light color-facebook"><i class="zmdi zmdi-facebook left"></i> Coblos</a>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l3">
                    <div class="card hoverable">
                        <div class="card-image orange accent-3">
                            <img src="{{ base_url('uploads/avatars/monkey.png') }}">
                        </div>
                        <div class="card-content center-align">
                            <h5>Elephant</h5>
                            <p>I am a very simple card. I am good at containing small bits of information.
                            I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a class="btn btn-coblos waves-effect waves-light color-facebook"><i class="zmdi zmdi-facebook left"></i> Coblos</a>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l3">
                    <div class="card hoverable">
                        <div class="card-image orange accent-3">
                            <img src="{{ base_url('uploads/avatars/cat.png') }}">
                        </div>
                        <div class="card-content center-align">
                            <h5>Cat</h5>
                            <p>I am a very simple card. I am good at containing small bits of information.
                            I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a class="btn btn-coblos waves-effect waves-light color-facebook"><i class="zmdi zmdi-facebook left"></i> Coblos</a>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l3">
                    <div class="card hoverable">
                        <div class="card-image orange accent-3">
                            <img src="{{ base_url('uploads/avatars/panda.png') }}">
                        </div>
                        <div class="card-content center-align">
                            <h5>Panda</h5>
                            <p>I am a very simple card. I am good at containing small bits of information.
                            I am convenient because I require little markup to use effectively.</p>
                        </div>
                        <div class="card-action">
                            <a class="btn btn-coblos waves-effect waves-light color-facebook"><i class="zmdi zmdi-facebook left"></i> Coblos</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section grey darken-4">
        <h4 class="center-align white-text" style="">Lihat Hasil Voting Secara Realtime</h4>
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <div class="row valign-wrapper coblos-feature">
                        <div class="col s12 m6 center-align hide-on-small-only">
                            <img class="img-chart" src="{{ base_url('assets/images/chart.png') }}" alt="">
                        </div>
                        <div class="col s12 m6">
                            <h5 class="white-text">Berdasarkan Gender</h5>
                            <p class="white-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quidem corrupti fugiat odit rem optio eaque ab animi. Eius ex nemo magni repellat. Neque numquam optio fugiat dolor expedita enim?</p>
                        </div>
                    </div>

                    <div class="row valign-wrapper coblos-feature">
                        <div class="col s12 m6 ">
                            <h5 class="white-text">Berdasarkan Usia Pemilih</h5>
                            <p class="white-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quidem corrupti fugiat odit rem optio eaque ab animi. Eius ex nemo magni repellat. Neque numquam optio fugiat dolor expedita enim?</p>
                        </div>
                        <div class="col s12 m6 center-align hide-on-small-only">
                            <img class="img-chart" src="{{ base_url('assets/images/chart-gender.png') }}" alt="">
                        </div>
                    </div>

                    <div class="row valign-wrapper coblos-feature">
                        <div class="col s12 m6 center-align hide-on-small-only">
                            <img class="img-chart" src="{{ base_url('assets/images/chart-location.png') }}" alt="">
                        </div>
                        <div class="col s12 m6">
                            <h5 class="white-text">Berdasarkan Lokasi</h5>
                            <p class="white-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus quidem corrupti fugiat odit rem optio eaque ab animi. Eius ex nemo magni repellat. Neque numquam optio fugiat dolor expedita enim?</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section orange">
        <div class="container">
            <div class="row">
                <div class="col s12 m6 offset-m3">
                    <div class="card hoverable register-now">
                        <div class="card-content white-text center-align">
                            <h5 class="black-text">Buat Polling Hari Ini Juga!</h5><br>
                            <a href="{{ base_url('register') }}">
                                <button class="btn grey darken-4">Daftar Sekarang</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
@endsection

Pada file view home.blade.php diatas, terdiri dari 2 macam blade directive yang fungsinya adalah sebagai berikut:

  • Directive @extends() bertugas untuk memanggil file view lain, dalam hal ini view (application/views/layouts/frontend/master.blade.php).
  • Setelah itu blade engine akan menempatkan directive @section() sesuai dengan tempat yang telah disediakan oleh file master.blade.php pada directive @yield().
codeigniter membuat layout
Blade Templating Engine
Advertisements

Sebagai ilustrasi lain pada sebuah bangunan rumah, @extends() bertugas sebagai kerangka atau pondasi sedangkan @section bertugas sebagai pintu, jendela, atap dsb. Sehingga saat kita jalankan pada web browser hasilnya seperti gambar di bawah.

codeigniter membuat layout aplikasi voting online
Tampilan Home Page

Lanjutan tutorial ada di halaman berikutnya..

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

Leave a Reply

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