Tutorial Memasang dan memadukan template pada phalcon php framework

Baiklah pada tutorial kali ini saya akan memberikan cara menegenai pembuatan template menggunakan phalcon php framework atau memasang template pada phalcon framework.

Konsep template yang akan kita buat yaitu :

1. Sebagai header yang nantinya kita akan pisan dengan nama header.volt
2. menu kiri kita akan beri nama dengan menu.volt
3. footer yang nanti kita akan buat dengan nama footer.volt
4. index.volt untuk menggabungkan semua bagian-bagian yang sudah dibuat

Template yang kaan kita gunakan adalah seperti berikut :

Template bisa didownload gratis di :
https://drive.google.com/file/d/0B-NWqiDMG2MQMWJDUzFudzNBbjQ/view?usp=sharing
Oke langsung saja seperti biasa buat project phalcon dengan nama tutorial_phalcon_template, apabila anda belum membuat project phalcon anda bisa lihat pada tutorial berikut :

 http://antzstudioblog.blogspot.com/2014/12/membuat-project-dengan-phalcon-framework.html

atau anda bisa menggunakan dengan project phalcon yg sudah ada.



Lalu kita set config nya yang berada di folder app/config/config.php . Lalu kita set menjadi seperti ini  :

<?php
return new \Phalcon\Config(array(
    'database' => array(
        'adapter'     => 'Mysql',
        'host'        => 'localhost',
        'username'    => 'root',
        'password'    => '',
        'dbname'      => 'test',
    ),
    'application' => array(
        'controllersDir' => __DIR__ . '/../../app/controllers/',
        'modelsDir'      => __DIR__ . '/../../app/models/',
        'viewsDir'       => __DIR__ . '/../../app/views/',
        'pluginsDir'     => __DIR__ . '/../../app/plugins/',
        'libraryDir'     => __DIR__ . '/../../app/library/',
        'cacheDir'       => __DIR__ . '/../../app/cache/',
        'baseUri'        => '/tutorial_phalcon_template/',

    )
));

Setelah kita sudah mengatur confignya , kita rubah settingan dalam file services.php .
Cari code berikut :

$volt->setOptions(array(
                'compiledPath' => $config->application->cacheDir,
                'compiledSeparator' => '_'
       ));
dan rubah menjadi seperti berikut :

 $volt->setOptions(array(
                'compiledPath' => $config->application->cacheDir,
                'compiledSeparator' => '_',
 'compileAlways' => true
            ));

Baiklah setelah semua settingan dirubah sekarang kita akan mengcopy file file tempalte yang sudah kita download tadi ke project kita. Pertama yg akan kita copy adalah file-file css.

1. Copykan file css dari tempalate yang sudah kita download tadi , filenya bernama templatemo_style.css. Pindahkn ke project phalcon kita ke public/css
2. Setelah itu kita buat folder images didalam folder public/css
3. Copykan seluruh gambar didalam folder images dari tempalate yg usdah kita buat ke dalam folder images yang sudah kita buat tad di public/css/images

Oke setelah semua diikuti. Langkah selanjutnya kita akan membuat file .volt untuk membuat sistem template.

1. Sekarang kita buka file index.html dari template yg sudah kita download (buka dengan notepad++ atau dengan editor lainya).
2. Buat sebuah folder dengan nama template pada project phalcon kita di app/views setelah itu buat file dengan nama index.volt.
3. Copy seluruh isi dari file index.html lalu paste seluruhnya ke dalam file index.volt yang berda dalam folder template yg tadi kita buat.

Setelah itu kita buka file index.volt yang berada dalam folder dan cari script dibawah ini :

<link href="templatemo_style.css" rel="stylesheet" type="text/css" />

lalu kita rubah menjadi :
{{ stylesheet_link('css/templatemo_style.css') }}

Sampai saat ini pemangglan css dalam folder templates sudah berhasil. Selanjtnya kita akan memanggil template tersebut ,caranya :

1. Buka file index.volt yang ada dalam folder index (app/views/index/index.volt)
2. Rubah seluruh isinya menjadi seperti berikut :
{% extends 'template/index.volt' %}
{% block content %}

{% endblock %}

3. Lalu run projet kita dengan browser http://localhost/tutorial_phalcon_template/ :
Seharusnya seperti berikut :

Oke pemanggilan template sudah berhasil sekarang kita akan memisahkan header ke dalam header.volt , menu ke dalam menu.volt, dan footer menjadi footer.volt serta cara membuat content berubah rubah.

1. Sekarang kita akan memindahkan header yang ada didalam index.volt. Cari code berikut :
<div id="templatemo_sitetitle">
        <div class="title">Free <span>Template</span></div>
        <div class="tagline">HTML CSS by TemplateMo</div>
       
</div>

Setelah itu kita cut kode tersebut , lalu kita buat file bernama header.volt setelah itu kita paste kode yang kita cut ke dalam file header.volt. file header.volt disimpan pada folder template

2. Kita akan memindahkan menu pinggir yang ada didlam index.volt. Cari kode berikut :

<div id="templatemo_menu">
        <div class="templatemo_menu_top"></div>
        <ul>
              <li><a href="#">Main Page</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Our Clients</a></li>
            <li><a href="#">Portfolio Gallery</a></li>
            <li><a href="#">Our Company</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
      <div class="templatemo_menu_bottom"></div>
    </div>

Setelah itu kita cut kode tersebut , lalu kita buat file bernama menu.volt setelah itu kita paste kode yang kita cut ke dalam file menu.volt yang disimpan pada folder template

3. Kita akan memindahkan footer yang ada didlam index.volt. Cari kode berikut :
<div id="templatemo_footer">
   Thanks for downloading
      </div>      
Setelah itu kita cut kode tersebut , lalu kita buat file bernama footer.volt setelah itu kita paste kode yang kita cut ke dalam file footer.volt. file footer.volt disimpan pada folder template


4. Kita akan membuat sebuah fungsi untuk membuat halaman content kita dinamis. Cari kode berikut dalam fler template/index.volt :

<div id="templatemo_one_column">   
        <h3>Featured Clients</h3>
       
        <div class="section">
            <p>Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Duis vitae velit.</p>
      </div>
       
       
       </div>

lalu rubah menjadi :
<div id="templatemo_one_column">   
    {% block content %}{% endblock %}
    </div>

Baiklah semua persiapan kita dalam membuat sistem template sudah berhasil. Selanjutnya bagaimana kita membuat content dinamis ?

Kita buka file index.volt yang berada pada folder index maka source nya akan seperti berikut :
{% extends 'template/index.volt' %}
{% block content %}

{% endblock %}

Lalu kita rubah seluruh isi filenya menjadi :
{% extends 'template/index.volt' %}


{% block content %}

    <h3>Halaman Index</h3>
       
        <div class="section">
          
            <p>Ini adalah halaman index</p>
      </div>

{% endblock %}

Setelah itu kita run project kita di browser http://localhost/tutorial_phalcon_template/ :

Selamat tutorial dalam membuat template pada phalcon sudah selesai :D

Siahkan jika ada yg ingin ditanyakan atau didiskusikan untuk komentar dibawah ini :)

Saya sangat senang apabila ada hal-hal yang didiskusikan :)

Download File Lengkap :
https://drive.google.com/file/d/0B-NWqiDMG2MQZkk1RlE5VlpDeUE/view?usp=sharing.

Seiring dengan ada nya permintaan mengenai memadukan bootstrap dan phalcon berikut link nya :
http://antzstudioblog.blogspot.co.id/2016/01/memadukan-template-bootstrap-dengan.html