Memadukan Template Bootstrap dengan Framework Phalcon

Bootstrap with phalcon framework

Sebelumnya saya mau minta maaf setelah sekian lama tidak menulis tutorial mengenai phalcon karena banyaknya waktu yang tersita untuk pekerjaan dan game DOTA . hehe

Oke langsung saa pada tutorial kali ini ,saya akan memberikan ilmu dan tutorila mengenai Memasang atau Memadukan Template bootstrap dengan framework phalcon.

Ada baiknya anda untuk memahami atau megikuti tutorial memadukan template dengan phalcon pada link dibawah ini :

http://antzstudioblog.blogspot.co.id/2015/02/tutorial-memasang-dan-memadukan.html

Pada tutorial kali ini , saya hanya memberikan cara untuk memasangkan bootstrap pada phalcon , karena jika ingin mendalami mengenai bootstrap ada baiknya langsung anda mengunjungi website bootstrap :

http://getbootstrap.com/

Skenario dan tujuanya dari tutorial ini :

1. Memadukan bootstrap pada phalcon.
2. Membuat menu yang dibuat di satu halaman(template) untuk dibaca di setiap page.
3. Membuat navigation menu dan form dengan bootstrap.

Bahan-bahan yang harus dimiliki :

1. Bootstrap
2. Phalcon

Bootstrap yang saya gunakan bisa di download link dibawah ini :

https://drive.google.com/file/d/0B-NWqiDMG2MQVHR2czFrT0xIQXM/view?usp=sharing

Setelah anda download silahkan extract file tersebut. Lalu setelah itu copykan seluruh folder hasil extract tersebut ke folder public di phalcon project.

Setelah file dicopy. Kita edit/rubah file services.php di app/config/services.php. Kita cari script berikut :

$volt->setOptions(array(

                'compiledPath' => $config->application->cacheDir,

                'compiledSeparator' => '_',

            ));

dan tambahkan satu baris :

'compileAlways' => true  

Sehingga menjadi :

$volt->setOptions(array(

                'compiledPath' => $config->application->cacheDir,

                'compiledSeparator' => '_',

                'compileAlways' => true  

            ));

Apa maksud dari satu baris script diatas ?

Maksudnya adalah semua file .volt itu akan selalu di compile ulang sehingga setiap kita melakukan perubahan pada file .volt maka akan di compile ulang. Jika kita tidak menambahkan baris tersebut file .volt akan dicompile sekali dan akan dipindah ke folder cache yang ada pada app/cache dan akan berubah ketika kita menghapus file didalam folder cache.

berikut adalah script dari services.php setelah perubahan :

services.php

<?php
/**
 * Services are globally registered in this file
 *
 * @var \Phalcon\Config $config
 */

use Phalcon\Di\FactoryDefault;
use Phalcon\Mvc\View;
use Phalcon\Mvc\Url as UrlResolver;
use Phalcon\Mvc\View\Engine\Volt as VoltEngine;
use Phalcon\Mvc\Model\Metadata\Memory as MetaDataAdapter;
use Phalcon\Session\Adapter\Files as SessionAdapter;
use Phalcon\Flash\Direct as Flash;

/**
 * The FactoryDefault Dependency Injector automatically register the right services providing a full stack framework
 */
$di = new FactoryDefault();

/**
 * The URL component is used to generate all kind of urls in the application
 */
$di->setShared('url', function () use ($config) {
    $url = new UrlResolver();
    $url->setBaseUri($config->application->baseUri);

    return $url;
});

/**
 * Setting up the view component
 */
$di->setShared('view', function () use ($config) {

    $view = new View();

    $view->setViewsDir($config->application->viewsDir);

    $view->registerEngines(array(
        '.volt' => function ($view, $di) use ($config) {

            $volt = new VoltEngine($view, $di);

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

            return $volt;
        },
        '.phtml' => 'Phalcon\Mvc\View\Engine\Php'
    ));

    return $view;
});

/**
 * Database connection is created based in the parameters defined in the configuration file
 */
$di->setShared('db', function () use ($config) {
    $dbConfig = $config->database->toArray();
    $adapter = $dbConfig['adapter'];
    unset($dbConfig['adapter']);

    $class = 'Phalcon\Db\Adapter\Pdo\\' . $adapter;

    return new $class($dbConfig);
});

/**
 * If the configuration specify the use of metadata adapter use it or use memory otherwise
 */
$di->setShared('modelsMetadata', function () {
    return new MetaDataAdapter();
});

/**
 * Register the session flash service with the Twitter Bootstrap classes
 */
$di->set('flash', function () {
    return new Flash(array(
        'error'   => 'alert alert-danger',
        'success' => 'alert alert-success',
        'notice'  => 'alert alert-info',
        'warning' => 'alert alert-warning'
    ));
});

/**
 * Start the session the first time some component request the session service
 */
$di->setShared('session', function () {
    $session = new SessionAdapter();
    $session->start();

    return $session;
});

Setelah kita merubah file services.php saatnya kita membuat file pada folder views, yang nantinya file tersebut kan menjadi template aplikasi
.
Oke langsung saja , buat folder template pada views dan buat file dengan nama index.volt.
pada file index.volt isi script berikut :

<html>
 <head>
  <title>Tutorial Bootstrap dan Phalcon</title>
  {{ stylesheet_link('css/bootstrap.min.css') }}
  {{ javascript_include('js/bootstrap.min.js') }}
 </head>
 <body>
 <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                 <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="#">ANTZ Studio</a>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="navbarCollapse">
             <ul class="nav navbar-nav">
                 <li><a href="{{ url('Home/index') }}">Home</a></li>
                 <li><a href="{{ url('Pegawai/index') }}" >Pegawai</a></li>
                 
             </ul>
         </div>
     </div>
 </nav>
  {% block content %}
  {% endblock %}
 </body>
</html>

oke untuk sedikit penjelasan pada phalcon saya akan jelaskan diawali dengan beberapa baris kode dibawah ini :

{{ stylesheet_link('css/bootstrap.min.css') }}
{{ javascript_include('js/bootstrap.min.js') }}

kode baris diatas adalah , tag bawaan phalcon yang mana langsung memanggil ke folder public.

{% block content %}

{% endblock %}

Kode baris diatas adalah kode yang nantinya akan "mendinamiskan" sebuah halaman, untuk lebih pahamnya setelah ini akan dijelaskan.

Setelah kita membuat file index.volt pada folder views/template. sekarang kita buat controller dengan nama HomeController.php

HomeController.php :

<?php

class HomeController extends ControllerBase
{

    public function indexAction()
    {

    }

    

}

Seteleh itu kita buat folder Home pada views dan buat file didalamnya dengan nama index.volt
Home/index.volt

{% extends 'template/index.volt' %}

{% block content %}
 

<div class="jumbotron">
    <div class="container-fluid">
        <h1>Selamat Datang</h1>
        <p>Tutorial memadukan Template bootstrap dengan phalcon. Untuk dokumentasi lebih jelas mengenai bootstrap silahkan klik link di bawah ini : </p>
        <p><a href="http://getbootstrap.com/" target="_blank" class="btn btn-success btn-lg">Flying to bootstrap</a></p>
    </div>
</div>
<div class="container-fluid">
    
    <hr>
    <div class="row">
        <div class="col-xs-12">
            <footer>
                <p>&copy; Tutorial Memadukan Template Bootstrap dengan Phalcon </p>
            </footer>
        </div>
    </div>
</div>
{% endblock %}

Simpan dan kita eksekusi , berikut link yang saya gunakan untuk menjalankan file :
http://localhost:8012/phalconproj/Home

Halaman diatas adalah halaman dengan memanggil Controler home yang otomatis memanggil fungsi index.

Oke setelah itu kita buat controller dengan nama PegawaiController.php.

PegawaiController.php :

<?php
class PegawaiController extends ControllerBase
{

    public function indexAction()
    {

    }

    

}

Setelah itu kita buat folder Pegawai pada views dan buat file didalamnya dengan nama index.volt . Pegawai/index.volt :

{% extends 'template/index.volt' %}

{% block content %}
 

<div class="container-fluid" style="margin-top:100px">
    <div class="row">
        <div class="col-md-4">
   <form>
            <h2>Form</h2>

                <div class="form-group">
            <label>NIP</label>
            <input type="text" class="form-control" id="txtnip" placeholder="NIP">
        </div>
        <div class="form-group">
            <label>Nama</label>
            <input type="text" class="form-control" id="txtnama" placeholder="NAMA">
        </div>
        <div class="form-group">
            <label>Alamat</label>
            <input type="text" class="form-control" id="txtalamat" placeholder="ALAMAT">
        </div>
        <div class="form-group">
            <label>No Hp</label>
            <input type="text" class="form-control" id="txtalnohp" placeholder="NO HP">
        </div>
        <button type="submit" class="btn btn-primary"  id="btnsimpan">Simpan</button>
      </form>
        </div>
        <div class="col-md-8">
            <h2>Data</h2>
             <table class="table table-condensed table-hover">
       <thead>
         <tr>
           <th>No</th>
           <th>NIP</th>
                    <th>NAMA</th>
                    <th>ALAMAT</th>
                    <th>NO HP</th>
           <th>AKSI</th>
         </tr>
       </thead>
       <tbody>
         <tr>
                    <td>1</td>
                    <td>NS001</td>
           <td>MAHESA</td>
                    <td>BANDUNG</td>
                    <td>085XXXXXX</td>
           <td><a href="#" class="btn btn-info">
                            <span class="glyphicon glyphicon glyphicon-pencil"></span>
                            Edit
                        </a> | <a href="#" class="btn btn-danger">
                            <span class="glyphicon glyphicon glyphicon-remove"></span>
                            Hapus
                        </a></td>
           
         </tr>
         <tr>
                    <td>2</td>
                    <td>NS002</td>
                    <td>DESTA</td>
                    <td>BANDUNG</td>
                    <td>085XXXXXX</td>
                    <td><a href="#" class="btn btn-info">
                            <span class="glyphicon glyphicon glyphicon-pencil"></span>
                            Edit
                        </a> | <a href="#" class="btn btn-danger">
                            <span class="glyphicon glyphicon glyphicon-remove"></span>
                            Hapus
                        </a></td>
                    
                  </tr><tr>
                    <td>3</td>
                    <td>NS003</td>
                    <td>ANTZ</td>
                    <td>BANDUNG</td>
                    <td>085XXXXXX</td>
                    <td><a href="#" class="btn btn-info">
                            <span class="glyphicon glyphicon glyphicon-pencil"></span>
                            Edit
                        </a> | <a href="#" class="btn btn-danger">
                            <span class="glyphicon glyphicon glyphicon-remove"></span>
                            Hapus
                        </a></td>
                    
                  </tr>
       </tbody>
     </table>
        </div>
        
    </div>
    <hr>
    <div class="row">
        <div class="col-xs-12">
            <footer>
                <p>&copy; Tutorial Memadukan Template Bootstrap dengan Phalcon </p>
            </footer>
        </div>
    </div>
</div>
{% endblock %}

Jalankan pada browser dan masukan url . Url yg saya gunakan http://localhost:8012/phalconproj/Pegawai/index Sehingga jika kitu run maka hasilnya adalah sbb :

Oke selesai sudah tutorial mengenai memadukan template bootstrap dengan phalcon.

Apabila ada kesalahan dalam penjelasan atau pengartian kata atau script dll. Mohon maaf karena saya juga sedang proses lebih baik. Jika ada yg ingin didiskusikan silahkan untuk berkomentar Terimakasih :)

Tunggu tutorial selanjutnya mengenai . CRUDS DENGAN AJAX DAN PHALCON BOOTSTRAP.

Download File lengkap tutorial mengenai memadukan template bootstrap dengan phalcon :

https://drive.google.com/file/d/0B-NWqiDMG2MQTURicG9CTGhXYWc/view?usp=sharing