View

Selesai membuat Controller pada bagian sebelumnya <3-Controller>, sekarang kita akan membuat bagian yang berinteraksi dengan pengguna: View. Karena aplikasi yang dikembangkan merupakan aplikasi web, maka kita hanya memiliki satu pilihan bahasa untuk membuat antarmuka: HTML.

Note

Sebenarnya kita dapat menggunakan lebih dari satu pilihan bahasa untuk antarmuka. Terdapat banyak bahasa lain yang dapat dikompilasi menjadi HTML seperti Jade, Twig dan HAML. Untuk kesederhanaan, kita hanya akan menggunakan HTML standar (bahasa-bahasa lainnya toh pada akhirnya juga dikompilasi ke HTML).

Seperti layaknya Controller yang mengandalkan konvensi penamaan file dan kelas, kita juga akan menggunakan aturan penamaan untuk membuat View. Terdapat tiga aturan utama untuk View:

  1. Seluruh file View disimpan dalam direktori views. Direktori views terletak pada direktori utama kode.
  2. File View untuk Controller spesifik disimpan pada sub-direktori di dalam views. Sub-direktori ini diberi nama sama dengan nama Controller.
  3. Nama dari file View yang dibuat harus sama dengan nama action yang ada.

Ketiga aturan ini kita terapkan ketika membuat method RenderView() pada kelas BaseController. Untuk mengingatkan, berikut adalah kode dari method tersebut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
protected function RenderView($viewModel, $fullView = true) {
    $classData = explode("\\", get_class($this));
    $className = end($classData);

    $content = __DIR__ .
               "/../../../views/" .
               $className . "/" .
               $this->action . ".php";

    if ($fullView) {
        require __DIR__ . "/../../../views/template.php";
    } else {
        require $content;
    }
}

Seperti yang terlihat di atas, kita terlebih dahulu harus membuat file utama dari View, yang menampung bagian-bagian umum dari antarmuka aplikasi web kita. Bagian umum ini adalah bagian-bagian dari antarmuka yang dimiliki oleh seluruh aplikasi web, seperti header dan menu aplikasi.

Halaman Penampung: Template.php

Langsung saja, kita dapat memulai dengan membuat file template.php dalam direktori views, dengan isi seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
    <head>
        <title>Framework Testing</title>

        <base href="http://localhost/framework/">
        <link rel="stylesheet"
          href="public/css/bootstrap.journal.min.css"/>
    </head>

    <body>
        <header class="container">
            <nav class="navbar navbar-default" role="navigation">
                <!-- Brand and toggle get grouped for
                 better mobile display -->
                <div class="navbar-header">
                    <button type="button"
                        class="navbar-toggle"
                        data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                    Framework Sederhana
                </a>
                </div>

                <!-- Collect the nav links, forms, and
                 other content for toggling -->
                <div class="collapse navbar-collapse"
                 id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li class="dropdown">
                            <a href="#"
                           class="dropdown-toggle"
                           data-toggle="dropdown">
                               News
                               <b class="caret"></b>
                        </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Articles</a></li>
                                <li><a href="#">Editorials</a></li>
                                <li><a href="#">Features</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Reader's Digest</a></li>
                                <li><a href="#">Ask Me Anything</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text"
                               class="form-control"
                               placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">
                        Submit
                    </button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Login</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>
        </header>

        <div class="container">
            <?php require($content) ?>
        </div>

        <script type="text/javascript"
            src="public/js/jquery.min.js"></script>
        <script type="text/javascript"
            src="public/js/bootstrap.min.js"></script>
    </body>
</html>

Mayoritas kode di dalam template.php merupakan kode standar untuk membangun menu menggunakan framework Bootstrap. Hanya ada dua bagian kode yang relevan untuk framework kita, yaitu:

1
2
3
4
5
6
7
8
9
    <!-- ... -->

<base href="http://localhost/framework/">

    <!-- ... -->

<div class="container">
    <?php require($content) ?>
</div>

Note

Jika ingin belajar menggunakan Bootstrap, silahkan baca tutorial penggunaan Bootstrap di sini.

Apa kegunaan dua bagian kode di atas?

  1. Elemen <base> merupakan elemen yang menentukan URL dasar dari seluruh halaman kita. Dengan menggunakan elemen ini, ketika kita menuliskan public/css/style.css pada kode HTML kita, browser akan membacanya sebagai http://localhost/framework/public/css/style.css. Bagian ini cukup penting untuk memastikan seluruh file CSS dan Javascript dimasukkan dengan benar. Ingat juga untuk menyesuaikan nilai href dengan tempat anda menyimpan kode.
  2. Kode PHP <?php require($content) ?> merupakan kode yang menggabungkan file View dari Controller terhadap template. Ingat bahwa variabel $content dibuat pada fungsi RenderView() pada BaseController.

Selesai membuat template.php, selanjutnya kita akan membuat View untuk Controller “Home”.

View untuk Controller “Home”

Sesuai dengan aturan yang telah dibahas pada bagian sebelumnya, membuat View dari Controller “Home” tidaklah sulit. Cukup buat sebuah file baru pada direktori views/Home dengan nama Index.php. Isi dari file Index.php adalah seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Nama Pengguna</th>
                <th>Email</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td colspan="2">Kosong</td>
            </tr>
        </tbody>
    </table>

Ingat bahwa kita tidak lagi perlu menuliskan kode lengkap HTML, karena BaseController->RenderView() akan secara otomatis menggabungkan file Index.php dengan tempalte.php. Sampai titik ini jika menjalankan aplikasi dengan berkunjung dari browser maka kita akan mendapatkan tampilan dasar yang agak rusak seperti ini:

Tampilan Awal yang Masih Kurang Sempurna

Tampilan Awal yang Masih Kurang Sempurna

Untuk menyempurnakan tampilan, kita perlu menambahkan CSS dari bootstrap.

File Statis (CSS, Javascript, Gambar)

Seluruh file statis yang kita miliki akan kita masukkan ke dalam direktori public pada direktori utama kode (setara dengan controllers, views, dan lib). Karena telah mengikutkan file CSS dan Javascript Bootstrap pada template.php, maka kita akan menambahkan file bootstrap ke dalam direktori public saja.

Langkah pertamanya, tentunya, adalah mengambil kode bootstrap. Ekstrak file hasil download di direktori public, sehingga isi dari direktori public menjadi seperti berikut:

Isi Direktori Public

Isi Direktori Public

Dan dengan menambahkan file Bootstrap, maka kita akan mendapatkan tampilan akhir seperti berikut:

Hasil Akhir Sementara

Hasil Akhir Sementara

Akhir Kata

Sekarang kita telah berhasil membuat aplikasi bekerja dengan benar! Akhirnya! Selanjutnya kita akan menambahkan bagian Model untuk koneksi ke database. Tetapi tunggu dulu. Sebelum langsung membaca bagian Model, coba tambahkan sebuah action terlebih dahulu (misalnya untuk URL /about). Kenapa perlu melakukan hal ini? Untuk memastikan bahwa anda telah benar-benar mengerti semua konsep yang dibaca sampai sekarang. Jika ada pertanyaan, silahkan tinggalkan komentar.

Jadi, tunggu apa lagi? Selamat mencoba!

Note

Seluruh kode program sampai di titik ini dapat dilihat di repository Github kode.

Bagikan Tulisan
comments powered by Disqus
Kembali ke bertzzie.com