menu

Phalcon - Restruktur volt


Tutorial kemarin kita sudah mempelajari rules atau cara kerja route-controller-view pada phalcon, sekarang kita akan mempelajari struktur volt sehingga lebih struktural, oke langsung saja kita mulai experimentnya,

Pertama, buka halaman users yang sudah kita buat sebelumnya pada browser sehingga akan tampak gambar seperti ini,


Pada gambar diatas dapat dilihat ada margin kiri pada text "Hello codedoct!!!" sedangkan pada halaman read.volt kita hanya menambahkan code ini,


Adanya margin tersebut dikarenakan pada phalcon secara default setiap akan request halaman, halaman akan memanggil halaman /app/views/index.volt sebagai deafultnya, untuk memudahkan development dengan multi layouts kita akan ubah code index.volt pada path /app/views/ menjadi seperti ini,
{{ content() }}

Kemudian, pada path /app/views/layouts/ tambahkan file default1.volt dan isikan code berikut,
<!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">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>{{ title ? title|e|striptags : 'Untitled' }}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>
Pada code diatas kita sudah menambahkan condition untuk menampilkan title maka pada UserController.volt pada path /app/controllers/ kita ubah codenya menjadi seperti ini,
<?php

class UserController extends ControllerBase
{
    public function readAction()
    {
     $this->view->title = "Phalcon - User";
    }
}

Terakhir ubah code file read.volt pada path /app/views/user/ menjadi seperti ini,
{% extends 'layouts/default1.volt' %}

{% block content %}
 <br/>
 Hello codedoct!!!
{% endblock %}

Dapat dilihat pada code diatas, kita meng-extends halaman read.volt pada halaman default1.volt sehingga akan tampak seperti pada gambar dibawah,


===DONE!===