Memulai Pembuatan Aplikasi Web dengan Panada v2

Muhammad Arslan 28 Juni 2016

Memulai Pembuatan Aplikasi Web dengan Panada v2

Iskandar Soesman atau Pak Kandar, seorang web developer yang senang sekali ngulik dan membuat karya telah membuat sebuah web framework untuk PHP yang dinamainya dengan Panada. Panada sendiri telah rilis dengan v1.x nya sampai akhirnya Pak Kandar merilis versi terbaru Panada yaitu v2.x yang sekarang menggunakan Composer sebagai alat untuk mengelola versi Panada yang diunduh oleh web developer.

Panada sendiri sekarang menjadi lebih modular yang dapat diunduh perkomponen melalui Composer. Dengan demikian setiap komponen Panada dapat diperbaharui per masing - masing komponen. Di versi terbarunya ini, Pak Kandar menggunakan PureCSS untuk menjadi landasan default bagi yang memulai pembuatan aplikasi web dengan Panada. Tidak hanya itu, dukungan terhadap PHP v5.5 pun dipenuhi sesuai dengan kaidah dan aturan terbaru dari versi PHP tersebut. Anda juga dapat mengelola berbagai action melalui routes ataupun sistem modules yang didukung oleh Panada.

Panada sendiri mendukung beberapa cache engine seperti APC, Memcached dan Redis. Secara default Panada menggunakan SQLite dan MySQL. Namun Anda dapat menyesuaikan konfigurasi tersebut bila menggunakan database engine lainnya seperti PostgreSQL. Di episode pendahuluan ini, kita akan mengenal terlebih dahulu Panada v2.0 sebelum nantinya kita lanjut mengulik lebih lanjut bagaimana Panada dapat membantu Anda membuat aplikasi web.

Walaupun v2.0 ini masih dalam tahap pengembangan, Anda tetap dapat mencoba berbagai fitur yang sudah ada.

Instalasi

Pertama kali yang harus kita lakukan adalah tentu saja mengunduh template Panada. Anda harus menggunakan Composer untuk mendapatkan source code Panada 2.0. Pastikan Anda sudah memasang composer dan Anda dapat menjalankan perintah berikut melalui console Anda (silahkan masuk ke folder favorit Anda untuk mengunduh source code Panada 2.0):
$ composer create-project panada/app --prefer-dist --stability=dev hello-panada;
$ cd hello-panada/
$ php -S localhost:8181 -t public;
Sekarang mari kita lihat halaman web Panada melalui web browser seperti pada gambar berikut:

Struktur folder dan file

Sekarang mari kita coba lihat struktur folder Panada v2.0:
  • public, berisi folder assets dan file index.php yang akan diakses secara publik. File index.php adalah sebuah resepsionis yang akan menerima setiap request dari client
  • src, berisi folder dari inti aplikasi yang akan kita bangun. Di dalamnya terdapat folder Controller, Module, config, dan view
  • src/Controller, berisi file - file controller untuk aplikasi web Panada
  • src/Module, berisi struktur untuk HMVC (Hierarchical Model View Controller) dimana Anda dapat membuat sub aplikasi di dalam folder tersebut. Di dalam sebuah module terdapat folder Controller, Model, dan View
  • src/config, berisi file konfigurasi untuk cache, database, routes, security, dan session
  • src/view, berisi file untuk menulis view yang akan digunakan oleh controller
  • vendor, berisi library Panada atau PHP lainnya yang dikelola oleh Composer
[caption id="attachment_10671" align="alignnone" width="320"]Struktur folder Panada Struktur folder Panada[/caption]

 

[caption id="attachment_10672" align="alignnone" width="226"]Struktur folder Panada di dalam vendor Struktur folder Panada di dalam vendor[/caption]

Mencoba halaman demo Panada

Setelah Anda berhasil memasang Panada v2.0, sekarang mari kita coba URL berikut yang merupakan demo untuk Anda yang baru memasang Panada v2.0:
  • http://localhost:8181/
  • http://localhost:8181/home/name
  • http://localhost:8181/home/test1
  • http://localhost:8181/home/test2
  • http://localhost:8181/blog/codepolitan (diatur dai dalam config/routes.php)
  • http://localhost:8181/ExampleModule/home (diatur di dalam Module)
  • http://localhost:8181/admin (akan error 404 karena URL tersebut tidak ada)
[caption id="attachment_10666" align="alignnone" width="700"]Halaman default index Panada Halaman default index Panada[/caption]

 

[caption id="attachment_10667" align="alignnone" width="700"]Mengakses URL /home/name Mengakses URL /home/name[/caption]

 

[caption id="attachment_10668" align="alignnone" width="700"]Mengakses URL /home/test1 Mengakses URL /home/test1[/caption]

 

[caption id="attachment_10669" align="alignnone" width="700"]Mengakses URL /home/test2 Mengakses URL /home/test2[/caption]

 

[caption id="attachment_10670" align="alignnone" width="700"]Mengakses URL /blog/codepolitan Mengakses URL /blog/codepolitan[/caption]

 

[caption id="attachment_10665" align="alignnone" width="700"]Mengakses URL /ExampleModule/home Mengakses URL /ExampleModule/home[/caption]

 

[caption id="attachment_10664" align="alignnone" width="700"]Halaman default 404 Panada Halaman default 404 Panada[/caption]

Darimanakah URL - URL diatas terbentuk? untuk URL dari controller non-modul, dapat Anda lihat source code-nya di src/Controller/Home.php:

<?php

namespace Controller;

use Panada\Resource\Controller;

class Home
{
    use Controller
    {
        Controller::__construct as private _construct;
    }

    public function __construct()
    {
        $this->_construct();
    }

    public function index()
    {
        return $this->output('index', ['name' => 'Panada']);
    }

    public function name($name = 'mandriva')
    {
        return $name;
    }

    public function test1()
    {
        return __METHOD__;
    }

    public function test2()
    {
        return __METHOD__;
    }
}

Ada juga beberapa URL yang diatur di dalam config/routes.php:

<?php

return [
    'pattern' => [
        'year' => '/^[0-9]{4}$/i',
        'month' => '/^[0-9]{2}$/i',
        'id' => '/^[1-9][0-9]+$/i',
        'name' => '/^[a-z][a-z0-9_]+$/i'
    ],
    'defaults' => [
        'method' => 'GET|POST',
        'protocol' => 'http',
        'subdomain' => '',
        'domain' => 'localhost',
        'port' => 8081,
    ],
    'route' => [
        'archive' => [
            'url'=>'/news/:year/:month',
            'controller'=>'news',
            'action'=>'archive'
        ],
        'article' => [
            'url'=>'/post',
            'controller'=>'posts',
            'action'=>'view'
        ],
        'test1' => [
            'url'=>'/test1',
            'controller'=>'Controller\Home',
            'action'=>'test1'
        ],
        'blog' => [
            'url'=>'/blog/:name',
            'controller'=>'Controller\Hidden\HiddenPage',
            'action'=>'index'
        ]
    ]
];

Sedangkan Anda juga dapat melihat source code yang ada di dalam module ExampleModule:

<?php

namespace Module\ExampleModule\Controller;

class Home
{
    use \Panada\Resource\Controller;

    public function index()
    {
        return $this->output('index', ['name' => 'modul example']);
    }
}

Penutup

Panada v2.0 hadir dengan berbagai perubahan yang tentunya cukup berbeda dibandingkan Panada v1.0. Strukturnya yang sudah diatur dengan menggunakan Composer ini, dapat meminimalisir ukuran folder proyek saat akan disimpan di repository Git atau SVN. Tidak hanya itu, perubahan versi pun dapat fokus pada package Panadanya saja tanpa mengubah keseluruhan folder proyek karena sudah dikelola dengan menggunakan Composer.

Tetap nantikan tutorial Panada lainnya hanya di Codepolitan ;().

(codepolitan/panadawebframework)