Manajemen Aset Phalcon

Phalcon \ Assets adalah komponen Manajemen Aset Phalcon, yang membantu pengembang untuk mengelola sumber daya statis seperti stylesheet css atau perpustakaan javascript dalam aplikasi web.

Phalcon \ Assets \ Manajer tersedia dalam wadah layanan, sehingga Anda dapat menambah sumber daya dari setiap bagian dari aplikasi di mana wadah yang tersedia.

Menambahkan Sumber Daya 

Aset mendukung dua built-in sumber: css dan javascripts. Anda dapat menciptakan sumber daya lainnya jika Anda membutuhkan. Manajer aset internal menyimpan dua koleksi standar sumber daya satu untuk javascript dan satu lagi untuk css.

Anda dapat dengan mudah menambahkan sumber daya untuk koleksi ini seperti berikut:

<?php

class IndexController extends Phalcon\Mvc\Controller
{
    public function index()
    {

        //Add some local CSS resources
        $this->assets
            ->addCss('css/style.css')
            ->addCss('css/index.css');

        //and some local javascript resources
        $this->assets
            ->addJs('js/jquery.js')
            ->addJs('js/bootstrap.min.js');

    }
}

Kemudian dalam view sumber daya tambahan dapat dicetak:

<html>
    <head>
        <title>Some amazing website</title>
        <?php $this->assets->outputCss() ?>
    </head>
    <body>

        <!-- ... -->

        <?php $this->assets->outputJs() ?>
    </body>
<html>

Volt sintaks:

<html>
    <head>
        <title>Some amazing website</title>
          {{ assets.outputCss() }}
    </head>
    <body>

        <!-- ... -->

          {{ assets.outputJs() }}
    </body>
<html>

Sumber daya lokal / Remote 

Sumber daya lokal adalah aset yang disediakan oleh aplikasi yang sama dan mereka terletak di root dokumen aplikasi. URL dalam sumber daya lokal yang dihasilkan oleh layanan ‘url’ , biasanya Phalcon \ MVC \ Url .

Sumber daya remote adalah mereka seperti perpustakaan umum seperti jquery, bootstrap, dll yang disediakan oleh CDN.

<?php

public function indexAction()
{

    //Add some local CSS resources
    $this->assets
        ->addCss('//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css', false)
        ->addCss('css/style.css', true);
}

Koleksi 

Koleksi adalah  sekelompok Sumber daya dari jenis yang sama, manajer aset secara implisit menciptakan dua koleksi: css dan js. Anda dapat membuat koleksi tambahan untuk kelompok sumber daya khusus untuk kemudahan menempatkan sumber daya dalam view:

<?php

//Javascripts in the header
$this->assets
    ->collection('header')
    ->addJs('js/jquery.js')
    ->addJs('js/bootstrap.min.js');

//Javascripts in the footer
$this->assets
    ->collection('footer')
    ->addJs('js/jquery.js')
    ->addJs('js/bootstrap.min.js');

Kemudian dalam view:

<html>
    <head>
        <title>Some amazing website</title>
        <?php $this->assets->outputJs('header') ?>
    </head>
    <body>

        <!-- ... -->

        <?php $this->assets->outputJs('footer') ?>
    </body>
<html>

Volt sintaks:

<html>
    <head>
        <title>Some amazing website</title>
          {{ assets.outputJs('header') }}
    </head>
    <body>

        <!-- ... -->

          {{ assets.outputJs('footer') }}
    </body>
<html>

Prefix 

Koleksi dapat diberi prefix-URL, ini memungkinkan untuk dengan mudah mengubah dari server ke yang lain setiap saat:

<?php

$scripts = $this->assets->collection('footer');

if ($config->environment == 'development') {
    $scripts->setPrefix('/');
} else {
    $scripts->setPrefix('http:://cdn.example.com/');
}

$scripts->addJs('js/jquery.js')
        ->addJs('js/bootstrap.min.js');

Sebuah sintaks chainable tersedia juga:

<?php

$scripts = $assets
    ->collection('header')
    ->setPrefix('http://cdn.example.com/')
    ->setLocal(false)
    ->addJs('js/jquery.js')
    ->addJs('js/bootstrap.min.js');

Minification / Filter 

Phalcon \ Assets menyediakan built-in minification Javascript dan sumber daya CSS. Pengembang dapat membuat koleksi sumber daya menginstruksikan Aset Manajer mana yang harus disaring dan mana yang harus dibiarkan sebagaimana adanya. Selain di atas, JSMin oleh Douglas Crockford merupakan bagian dari core-extension menawarkan minification file javascript untuk kinerja maksimum. Di ranah CSS, CSSMin oleh Ryan Day juga tersedia untuk mengecilkan file CSS:

Contoh berikut menunjukkan bagaimana untuk minify/mengecilkan sebuah koleksi sumber:

<?php

$manager

    //These Javascripts are located in the page's bottom
    ->collection('jsFooter')

    //The name of the final output
    ->setTargetPath('final.js')

    //The script tag is generated with this URI
    ->setTargetUri('production/final.js')

    //This is a remote resource that does not need filtering
    ->addJs('code.jquery.com/jquery-1.10.0.min.js', true, false)

    //These are local resources that must be filtered
    ->addJs('common-functions.js')
    ->addJs('page-functions.js')

    //Join all the resources in a single file
    ->join(true)

    //Use the built-in Jsmin filter
    ->addFilter(new Phalcon\Assets\Filters\Jsmin())

    //Use a custom filter
    ->addFilter(new MyApp\Assets\Filters\LicenseStamper());

Dimulai mendapatkan koleksi sumber dari manajer aset, koleksi dapat berisi javascript atau sumber daya css tetapi tidak keduanya. Beberapa sumber daya mungkin remote, yaitu, mereka diperoleh dgn HTTP dari sumber remote untuk penyaringan lebih lanjut. Disarankan untuk mengubah sumber daya eksternal untuk lokal menghilangkan beban untuk mendapatkannya.

<?php

//These Javascripts are located in the page's bottom
$js = $manager->collection('jsFooter');

Seperti yang terlihat di atas, metode addJs digunakan untuk menambah sumber daya untuk koleksi, parameter kedua menunjukkan apakah sumber daya eksternal atau tidak dan parameter ketiga menunjukkan apakah sumber daya harus disaring atau dibiarkan sebagaimana aslinya:

<?php

// This a remote resource that does not need filtering
$js->addJs('code.jquery.com/jquery-1.10.0.min.js', true, false);

// These are local resources that must be filtered
$js->addJs('common-functions.js');
$js->addJs('page-functions.js');

Filter terdaftar dalam koleksi, beberapa filter diperbolehkan, konten dalam sumber daya yang disaring dalam urutan yang sama seperti filter yang terdaftar:

<?php

//Use the built-in Jsmin filter
$js->addFilter(new Phalcon\Assets\Filters\Jsmin());

//Use a custom filter
$js->addFilter(new MyApp\Assets\Filters\LicenseStamper());

Perhatikan bahwa kedua built-in dan filter kustom dapat secara transparan diterapkan untuk koleksi. Langkah terakhir adalah memutuskan apakah semua sumber daya dalam koleksi harus bergabung dalam satu file atau berdiri sendiri. Untuk memberitahu koleksi bahwa semua sumber daya harus bergabung Anda dapat menggunakan metode ‘join’:

<?php

// This a remote resource that does not need filtering
$js->join(true);

//The name of the final file path
$js->setTargetPath('public/production/final.js');

//The script html tag is generated with this URI
$js->setTargetUri('production/final.js');

Jika sumber daya akan digabung, kita juga perlu untuk menentukan dimana hasil file akan disimpan dan yang uri yg akan digunakan untuk mengaksesnya. Pengaturan ini diatur dengan setTargetPath() dan setTargetUri().

Built-In Filter 

Phalcon menyediakan 2 built-in filter untuk mengecilkan baik javascript dan css masing-masing, mereka C-backend memberikan overhead minimum untuk melakukan tugas ini:

Filter Deskripsi
Phalcon\Assets\Filters\Jsmin Minifies Javascript menghapus karakter yang tidak perlu yang diabaikan oleh interpreter Javascript / compiler
Phalcon\Assets\Filters\Cssmin Minifies CSS menghapus karakter yang tidak perlu yang telah diabaikan oleh browser

Filter kustom 

Selain built-in filter, pengembang dapat membuat filter sendiri. Ini dapat mengambil keuntungan dari alat yang ada dan lebih maju seperti YUI , Sass , Closure , dll:

<?php

use Phalcon\Assets\FilterInterface;

/**
 * Filters CSS content using YUI
 *
 * @param string $contents
 * @return string
 */
class CssYUICompressor implements FilterInterface
{

    protected $_options;

    /**
     * CssYUICompressor constructor
     *
     * @param array $options
     */
    public function __construct($options)
    {
        $this->_options = $options;
    }

    /**
     * Do the filtering
     *
     * @param string $contents
     * @return string
     */
    public function filter($contents)
    {

        //Write the string contents into a temporal file
        file_put_contents('temp/my-temp-1.css', $contents);

        system(
            $this->_options['java-bin'] .
            ' -jar ' .
            $this->_options['yui'] .
            ' --type css '.
            'temp/my-temp-file-1.css ' .
            $this->_options['extra-options'] .
            ' -o temp/my-temp-file-2.css'
        );

        //Return the contents of file
        return file_get_contents("temp/my-temp-file-2.css");
    }
}

Penggunaan:

<?php

//Get some CSS collection
$css = $this->assets->get('head');

//Add/Enable the YUI compressor filter in the collection
$css->addFilter(new CssYUICompressor(array(
     'java-bin' => '/usr/local/bin/java',
     'yui' => '/some/path/yuicompressor-x.y.z.jar',
     'extra-options' => '--charset utf8'
)));

Output Kustom 

Metode outputJs dan outputCss yang tersedia untuk menghasilkan kode HTML yang diperlukan sesuai dengan masing-masing jenis sumber daya. Anda dapat mengganti metode ini atau mencetak sumber daya secara manual dengan cara berikut:

<?php

foreach ($this->assets->collection('js') as $resource) {
    echo \Phalcon\Tag::javascriptInclude($resource->getPath());
}

 

Terjemah dari
http://docs.phalconphp.com/en/latest/reference/assets.html