Applikasi Web dg CodeIgniter dan Smarty (2)

Tutorial kali ini akan membahas lebih jauh tentang CI (CodeIgniter) v2.x, serta bagaimana menggabungkan Smarty template engine agar bisa menjadi template engine bagi CI v2.x.

Seperti yang telah dibahas sebelumnya, bahwa CI adalah sebuah framework yang cukup elegan untuk aplikasi Web berbasis PHP, karena keunggulannya dengan motto “very low footprint“, sederhana, cepat, dan ringan. Akan tetapi disamping keunggulan2nya itu, mungkin akan lebih lengkap dan menyenangkan jika pengembangan Web bisa lebih apik dan tertata rapi, yaitu dengan menambahkan fasilitas templating yang handal.Smarty sebagai template engine yang sudah terkenal, sangat ideal untuk mewujudkan nilai lebih keunggulan-keunggulan yang diharapkan itu. Keunggulan Smarty adalah sangat baik dalam menata kode-kode “bakmi” ala PHP yang diramu dengan HTML, menulis web template langsung dengan basis bahasa yang digunakan (tanpa bantuan template engine) memang akan membuat proses display halaman web menjadi lebih cepat, akan tetapi hal itu (menurut saya pribadi) hanya ideal kalau membangun web-site yang memiliki tampilan interaktif sedikit, berbeda dengan aplikasi web semisal Sistem Informasi Akademik, Kepegawaian, dan lain sebagainya, tentu akan sangat membutuhkan proses kontrol yang lebih interaktif antara halaman web dengan pengguna, inilah mengapa template engine khususnya Smarty saya pilih, seperti yang disebutkan sebelumnya, yaitu untuk membuat pengembangan web lebih tertata rapi dan menyenangkan saat memerlukan penambahan fitur pasca maintenance.

Lalu apa hubungannya dengan model pembagian tugas seperti yang disinggung sebelumnya? baiklah, sekarang mari kita ulas bersama-sama dengan memulai dari template engine Smarti terlebih dahulu.

Sebagai template engine, Smarty versi 3.x terbaru telah menambahkan fitur “block”, yaitu sebuah fitur yang memungkinkan desain halaman template tetap “utuh”, sehingga web theming bisa jauh lebih menyenangkan bagi web desainer. Melalui fitur ini, template halaman utama seakan-akan menjadi “induk”, dan halaman-halaman lain adalah halaman “anak” atau halaman perluasan yang menurunkan karakteristik halaman-utama dengan mere-definisi blok-blok yang sudah ditandai sesuai dengan kebutuhan halaman “anak” tersebut. Anda akan lebih cepat memahami hal ini, jika anda sudah mengenal konsep “polimorfisme” atau method override yang dikenal di pemrograman berorientasi objek (OOP — Object Oriented Programming).

Coba perhatikan ilustrasi berikut:

A. pada templating tradisional, web desainer memecah bagian-bagian utuh template halaman utama sehingga bisa “diracik” tepat saat halaman web akan ditampilkan, biasanya satu halaman utama dipecah menjadi beberapa bagian seperti file header, top menu, bagian body, bagian side bar, footer, dan lain-lain, yang kemudian masing-masing bagian itu di-include oleh bagian viewer.

halaman-utama.html
|-file-> bagian-header.html
|-file-> bagian-top-menu.html
|-file-> bagian-body.html (salah satu string tag tertentu disubstitusi dg content hasil query database)
|-file-> bagian-sidebar.html
\-file-> bagian-footer.html

dan ketika akan ditampilkan halaman kedua, misalkan halaman ‘tentang’ atau ‘kontak-kami’, maka langkah “meracik” halaman tersebut adalah sebagai berikut:

halaman-tentang.html (tanpa sidebar)
|-include-> bagian-header.html
|-include-> bagian-top-menu.html
|-include-> bagian-body.html (salah satu string tag tertentu disubstitusi dg content hasil query database)
\-include-> bagian-footer.html

halaman-kontak-kami.html (tanpa sidebar dan footer)
|-include-> bagian-header.html
|-include-> bagian-top-menu.html
\-include-> bagian-body.html (salah satu string tag tertentu disubstitusi dg content hasil query database)

Kelemahannya jelas, yaitu web desainer tidak bisa melihat template atau theme secara utuh, karena bagian-bagian halaman sudah dipecah menjadi beberapa bagian (kecuali ada web editor yang sangat ampuh yang bisa mensunting file-file tersebut seakan-akan satu halaman utuh).

B. pada templating smarty dengan menggunakan blok, halaman utama dibuat secara utuh terlebih dahulu lengkap dengan style css-nya, kemudian bagian-bagian yang mungkin berubah diberi pengenal menggunakan penanda “block” di Smarty. Contoh pada halaman utama poin a.:

halaman-utama-template.html
|-block-> {bagian-header}
|-block-> {bagian-top-menu}
|-block-> {bagian-body}
|-block-> {bagian-sidebar}
\-block-> {bagian-footer}

dan ketika akan ditampilkan halaman beranda, tentang dan kontak-kami adalah dengan menggunakan keyword extend sebagai berikut:

halaman-utama.html {extends halaman-utama-template.html}
\-override-> {block bagian-body}di ganti dg tag html baru dg content hasil query database{/block}

halaman-tentang.html {extends halaman-utama-template.html}
\-override-> {block bagian-body}di ganti dg tag html baru dg content hasil query database{/block}

halaman-kontak-kami.html {extends halaman-utama-template.html}
\-override-> {block bagian-body}di ganti dg tag html baru dg content hasil query database{/block}

Perhatikan alurnya, jika halaman dinamis yang dibuat sudah mulai banyak (sampai ke halaman-halaman form, data-view, report, dan sebagaimnya), templating dengan konsep “block” akan jauh lebih mudah ditangani, karena strukturnya sangat menyerupai konsep penurunan (inheritance) pada OOP. Belum lagi smarty juga membuat halaman web anda tidak bercampur dengan tag-tag html, karena dengan Smarty, tag-tag smarty bisa dibuat web browser mengenalnya seakan-akan sebagai tag komentar html biasa, atau oleh web browser dianggap sebagai text biasa (lebih jauh tentang Smarty sepertinya lebih baik dibahas di tutorial terpisah).

(bersambung)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s