Codeigniter Latihan : Part #3 - Membuat template

Oleh: Admin - Fri, 21 September, 2018

Model, View, Controller atau lebih dikenal dengan sebutan MVC

Hallo sob, apa kabar? Fiuhhh punya banyak PR jadi ga sempet buat nulis lagi nih. Kayak kemarenan tuh, PR bikin tabel dengan rowspan dinamis. Cuma bikin tabel aja, ampe seharian lebih hahahaha. Udah keburu eneg duluan ya n'ga?. Tapi semakin sulit, harus makin dinikmati sob. Berarti kita makin nambah lagi nih ilmunya. Kalo kalian gimana? ada PR yang ampe sebegitunya kah?? hahaahaaa :p

Mumpung sempet nulis, jadi mau ng'lanjutin nih sinetron codeigniter kita :D . Terakhir tuh baru sampe tahap instalasi codeigniter -nya ya. Nah, semoga kalian masih pada inget nih. Inget apaan min??? hahhaa, inget dokumentasi codeigniter -nya maksud gw :p . Codeigniter memiliki design pattern MVC, dimana MVC itu sendiri adalah Model atau struktur data, View atau informasi yang ditampilkan/output dan Controller atau jembatan antara data dan output, atau bisa disebut juga gerbang logika hahahaa ngarang bebas :D. Yah, konsep MVC ini bisa kalian pelajari sendiri lah ya. Tapi kurang lebihnya kayak gitu itu :p . Dimana kita bisa lebih terstruktur dalam peng-kode-an, jadi si-doi pasti kecantol nih :D.

Data ?? emang apaan sih

Pada tutorial kali ini saya akan share cara templating untuk view di codeigniter ini. Sebelumnya bisa kalian buka controller Welcome (Welcome.php di folder application/controllers/). Perhatikan method index() pada class tersebut. Pada method index(), terdapat suatu fungsi yang memanggil file view (default: welcome_message.php). File ini bisa kita rename, atau ganti sesuai kebutuhan. Untuk pemanggilannya sebagai berikut,

    $this->load->view('welcome_message');

Perlu kita perhatikan kembali, method view() pada kode diatas memiliki beberapa parameter. Nah, untuk parameter lainnya bisa kita kosonngkan, tapi parameter pertama ini tidak boleh kosong. Atau salah nama file yang akan dipanggil, apabila salah akan menampilkan pesan. Gak percaya?? coba aja diganti ato dihapus parameternya :D.

    $data = [];
    $data['title'] = 'Judul web';
    $this->load->view('welcome_message', $data);
Tidak bisa bukan berarti bodoh, kadar bodoh adalah dimana kita berhenti untuk bisa.

Pada penerapan kali ini kita akan mengirimkan data kedalam file view tersebut, bisa dilihat kode diatas. Dimana terdapat 1 parameter lagi setelah nama file view. Data yang dikirimkan kedalam view ini, memiliki tipe data Array. Dan yang kita panggil pada file view -nya nanti adalah key atau index dari array tersebut (contoh: title). Oke, sampai disini kita bisa simpulkan. Method view() pada codigniter ini bisa menampung 2 parameter, dimana parameter pertama bersifat wajib dan parameter berikutnya opsional.

Selanjutnya kita buka file welcome_message.php tadi, kali ini kita akan men-slice file ini menjadi beberapa bagian. File welcome_message ini kita akan jadikan dasar dari template aplikasi kita nanti. Dan juga teknik slicing ini juga bisa kita implementasikan dengan template-template responsive yang lebih bagus lagi, kalian bisa search dan download sesuai selera. Langsung aja, dari file welcome_message tadi kita potong menjadi beberapa bagian (header, body, footer).

1. Kita akan membuat header templatenya, copy dan paste kode berikut. Simpan dengan nama header.php pada folder application/views/templates

<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        <?=$title;?>
    </title>

    <style type="text/css">
        ::selection {
            background-color: #E13300;
            color: white;
        }

        ::-moz-selection {
            background-color: #E13300;
            color: white;
        }

        body {
            background-color: #fff;
            margin: 40px;
            font: 13px/20px normal Helvetica, Arial, sans-serif;
            color: #4F5155;
        }

        a {
            color: #003399;
            background-color: transparent;
            font-weight: normal;
        }

        h1 {
            color: #444;
            background-color: transparent;
            border-bottom: 1px solid #D0D0D0;
            font-size: 19px;
            font-weight: normal;
            margin: 0 0 14px 0;
            padding: 14px 15px 10px 15px;
        }

        code {
            font-family: Consolas, Monaco, Courier New, Courier, monospace;
            font-size: 12px;
            background-color: #f9f9f9;
            border: 1px solid #D0D0D0;
            color: #002166;
            display: block;
            margin: 14px 0 14px 0;
            padding: 12px 10px 12px 10px;
        }

        #body {
            margin: 0 15px 0 15px;
        }

        p.footer {
            text-align: right;
            font-size: 11px;
            border-top: 1px solid #D0D0D0;
            line-height: 32px;
            padding: 0 10px 0 10px;
            margin: 20px 0 0 0;
        }

        #container {
            margin: 10px;
            border: 1px solid #D0D0D0;
            box-shadow: 0 0 8px #D0D0D0;
        }
    </style>
</head>

<body>
    <div id="container">

2. Untuk file body, tidak kita buat. Berhubung keterbatasan pada template dasarnya sendiri (welcome_message.php) jadi kita skip ke langkah berikutnya.
3. Copy dan paste kode berikut. Simpan dengan nama footer.php pada folder application/views/templates

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

<p class="footer">Page rendered in
    <strong>1.7008</strong> seconds.
    <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?>
</p>
</div>
</body>
</html>

Oke, sedikit lagi template kita akan selesai. Kali ini kita ubah file welcome_message jadi seperti berikut.

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

<h1>Welcome to CodeIgniter!</h1>

<div id="body">
    <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

    <p>If you would like to edit this page you'll find it located at:</p>
    <code>application/views/welcome_message.php</code>

    <p>The corresponding controller for this page is found at:</p>
    <code>application/controllers/Welcome.php</code>

    <p>Models data</p>
    <code><?php print_r($models);?></code>

    <p>If you are exploring CodeIgniter for the very first time, you should start by reading the
        <a href="user_guide/">User Guide</a>.</p>
</div>

Lalu untuk penerapannya bisa lihat gambar dibawah. Sekian tutorial singkat ini, kalo ada yang mau nambahin silahkan. Kurang lebihnya moon maap, apabila ada sumur diladang lebih baik bikin deket kamar.
salam tempel :D

Codeigniter MVC