Phalcon Framework

Phalcon View

View bileşeni uygulamamızın kullanıcı arabirimini temsil eder. View genel olarak yalnızca verilerin gösterilmesi ile ilgili görevleri yerine getiren PHP kodu içeren HTML dosyalarıdır. View, web tarayıcısına veya uygulamamızdan istekte bulunacak diğer bir araçlara veri sağlama işini gerçekleştirir.

Phalcon\Mvc\View and Phalcon\Mvc\View\Simple, MVC uygulamamızın görünüm katmanını yönetmekle sorumludur.

Views bileşenlerini Controllers bileşenleri ile entegre etme

Phalcon belirli bir Controller çalışmasını tamamladığında, işlemi otomatik olarak View bileşenine aktarır. View bileşeni, çalıştırılan en son Controller ile aynı adı taşıyan bir dizin için ve daha sonra çalıştırılan en son Action ile aynı adı taşıyan bir dosya için "Views" dizinini arar. Örneğin, URL satırından http://127.0.0.1/blog/posts/show/301 şeklinde bir istek yapılırsa, Phalcon URL'yi şu şekilde ayrıştırır:

Server Address 	    127.0.0.1
Phalcon Directory   blog
Controller          posts
Action              show
Parameter           301

Gönderici, "PostsController" adında bir Controller ve ona ait "showAction" adlı bir Action arar. Bu örnek için basit bir Controller dosyası:

<?php

use Phalcon\Mvc\Controller;

class PostsController extends Controller
{
    public function indexAction()
    {

    }

    public function showAction($postId)
    {
        // Pass the $postId parameter to the view
        $this->view->postId = $postId;
    }
}

Aşamalı Rendering

Phalcon\Mvc\View, Phalcon'da görünüm oluşturma için kullanılan ön tanımlı bir bileşen olup dosyalar için sıralı işlem gerçekleştirir. Bu sıralama, Controller'lar ile aynı adı taşıyan ve ilgili görünüm şablonlarını içeren dizinlerle birlikte ortak layout noktaları (sık kullanılan Views) sağlar.

Bu bileşen ön tanımlı şablon motoru olarak PHP'yi kullandığından, görünümlerin .phtml uzantısı olmalıdır. Views dizini "app/views" ise, View bileşeni aşağıdaki 3 görüntüleme dosyasını otomatik olarak bulur.

Adı Dosya Açıklama
Action View app/views/posts/show.phtml Bu, Action ile ilgili görüntüdür. Sadece, Show Action yürütüldüğünde gösterilir.
Controller Layout app/views/layouts/posts.phtml Controller ile ilgili görünümdür. Sadece "posts" Controller içinde yürütülen her Action için gösterilir. Layout içinde uygulanan tüm kodlar bu Controller içindeki tüm eylemler için tekrar kullanılacaktır.
Main Layout app/views/index.phtml Bu, uygulama içinde yürütülen her Controller veya Action için gösterilecek ana bileşendir.

Yukarıda bahsedilen dosyaların tümünü uygulamak zorunda değiliz. Phalcon\Mvc\View dosya sıralamasında bir sonraki görünüme geçecektir. Üç görüntüleme dosyası da uygulanırsa, aşağıdaki şekilde işlenir:

app/views/posts/show.phtml

<h3>This is show view!</h3>

<p>I have received the parameter <?php echo $postId; ?></p>


app/views/layouts/posts.phtml

<h2>This is the "posts" controller layout!</h2>

<?php echo $this->getContent(); ?>


app/views/index.phtml

<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <h1>This is main layout!</h1>

        <?php echo $this->getContent(); ?>

    </body>
</html>

$this->getContent() fonksiyonu, Phalcon\Mvc\View bileşenine bir önceki görünümün içeriğinin nereye ekleyeceğini bildirir.

Sonuç olarak, elde edilen app/views/index.phtml dosyası aşağıdaki şekilde olacaktır.

app/views/index.phtml

<!-- app/views/index.phtml -->
<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <h1>This is main layout!</h1>

        <!-- app/views/layouts/posts.phtml -->

        <h2>This is the "posts" controller layout!</h2>

        <!-- app/views/posts/show.phtml -->

        <h3>This is show view!</h3>

        <p>I have received the parameter 101</p>

    </body>
</html>

Önce Main Layout adı verilen app/views/index.phtml dosyasına işlem yapılır. Sonra, Controller Layout adı verilen app/views/layouts/posts.phtml dosya içeriği app/views/index.phtml dosyasına yerleştirilir. Daha sonra, Action View adı verilen app/views/posts/show.phtml dosya içeriği app/views/layouts/posts.phtml dosyasına yerleştirilir.

1. Önce app/views/index.phtml dosyasına işlem yapılır.

2. app/views/layouts dizininde bulunan ve Controller ile aynı adı taşıyan dosyaya (posts.phtml) işlem yapılır. Dosya içeriği app/views/index.phtml dosyasına yerleştirilir.

3. app/views dizini altında Controller ile aynı adı taşıyan dizin (posts) altında Action ile aynı adı taşıyan (show.phtml) dosya içeriği app/views/layouts/posts.phtml dosyasına yerleştirilir.

Şablon kullanımı

Şablonlar, ortak görünüm kodunu paylaşmak için kullanılabilen görünümlerdir. Controller layout gibi davranırlar, bu nedenle onları "layout" dizinine yerleştirmemiz gerekir.

Şablonlar layout'dan önce oluşturulabilir ($this->view->setTemplateBefore() kullanılarak) veya layout'dan sonra oluşturulabilir (this->view->setTemplateAfter() kullanılarak). Aşağıdaki örnekte, şablon (layouts/common.phtml), Controller layout'dan sonra (layouts/posts.phtml) oluşturulur:

<?php

use Phalcon\Mvc\Controller;

class PostsController extends Controller
{
    public function initialize()
    {
        $this->view->setTemplateAfter('common');
    }

    public function lastAction()
    {
        $this->flash->notice(
            'These are the latest posts'
        );
    }
}


app/views/index.phtml

<!-- app/views/index.phtml -->
<!DOCTYPE html>
<html>
    <head>
        <title>Blog's title</title>
    </head>
    <body>
        <?php echo $this->getContent(); ?>
    </body>
</html>


app/views/layouts/common.phtml

<!-- app/views/layouts/common.phtml -->

<ul class='menu'>
    <li><a href='/'>Home</a></li>
    <li><a href='/articles'>Articles</a></li>
    <li><a href='/contact'>Contact us</a></li>
</ul>

<div class='content'><?php echo $this->getContent(); ?></div>


app/views/layouts/posts.phtml

<!-- app/views/layouts/posts.phtml -->

<h1>Blog Title</h1>

<?php echo $this->getContent(); ?>


app/views/posts/last.phtml

<!-- app/views/posts/last.phtml -->

<article>
    <h2>This is a title</h2>
    <p>This is the post content</p>
</article>

<article>
    <h2>This is another title</h2>
    <p>This is another post content</p>
</article>

Sonuçta elde edilecek çıktı aşağıda gösterildiği şekilde olacaktır.

app/views/index.phtml

<!-- app/views/index.phtml -->
<!DOCTYPE html>
<html>
    <head>
        <title>Blog's title</title>
    </head>
    <body>

        <!-- app/views/layouts/common.phtml -->

        <ul class='menu'>
            <li><a href='/'>Home</a></li>
            <li><a href='/articles'>Articles</a></li>
            <li><a href='/contact'>Contact us</a></li>
        </ul>

        <div class='content'>

            <!-- app/views/layouts/posts.phtml -->

            <h1>Blog Title</h1>

            <!-- app/views/posts/last.phtml -->

            <article>
                <h2>This is a title</h2>
                <p>This is the post content</p>
            </article>

            <article>
                <h2>This is another title</h2>
                <p>This is another post content</p>
            </article>

        </div>

    </body>
</html>

$this->view->setTemplateBefore('common') komutu kullanıldığında ise, elde edilecek çıktı aşağıda gösterildiği şekilde olacaktır.

app/views/index.phtml

<!-- app/views/index.phtml -->
<!DOCTYPE html>
<html>
    <head>
        <title>Blog's title</title>
    </head>
    <body>

        <!-- app/views/layouts/posts.phtml -->

        <h1>Blog Title</h1>

        <!-- app/views/layouts/common.phtml -->

        <ul class='menu'>
            <li><a href='/'>Home</a></li>
            <li><a href='/articles'>Articles</a></li>
            <li><a href='/contact'>Contact us</a></li>
        </ul>

        <div class='content'>

            <!-- app/views/posts/last.phtml -->

            <article>
                <h2>This is a title</h2>
                <p>This is the post content</p>
            </article>

            <article>
                <h2>This is another title</h2>
                <p>This is another post content</p>
            </article>

        </div>

    </body>
</html>