Bedah Website #20: Membuat file-file PHP dari Pug - MZAINI30

Kamis, 07 Mei 2020

Bedah Website #20: Membuat file-file PHP dari Pug

Di beberapa framework, sudah ada yang namanya template engine seperti Blade di Laravel, Twig di Symfony, Easy UI di Pusaka Framework, dan di framework-framework lainnya. Tapi, di Codeigniter (versi 3) nggak ada. Adanya ya cuma PHP biasa aja. Hal ini tentunya menyulitkan programmer untuk membuat view namun hal ini juga menjadi nilai lebih karena load website menjadi lebih cepat tanpa adanya template engine.

Tapi, tentu saja yang namanya developer ingin membuat website dengan lebih cepat. Di sini, aku mencoba untuk menghubungkannya dengan Pug.

Tapi bukan Phug ya (PHP Pug).

Tapi Pug ini cuma di mode dev. Artinya, mengolah file-file Pug menjadi PHP hanya dilakukan di laptop. Sehingga, kalau di production, ya PHP jadinya. Bukan seperti Laravel yang masih berbentuk Blade dan pada waktu pemuatan pertama diolah menjadi PHP yang disimpan di cache.

Pertama, untuk struktur direktorinya, aku sederhanakan hanya ada satu folder yaitu folder php untuk viewnya yang berisi file-file PHP untuk tampilan.

Jadi, struktur frameworknya ibaratnya:

- php/

Kemudian, kita buat file dev.sh yang isinya:

bash app/php.sh & bash app/pug.sh

Maka, struktur frameworknya menjadi:

- php/
- dev.sh

Lalu, kita buat lagi file app/php.sh dan app/pug.sh. Dan isi dari php.sh adalah:

php -S localhost:2020

Kemudian, isi dari pug.sh adalah:

cd pug
pug . -w -o ../php -P -E php

Maka, struktur frameworknya menjadi:

- php/
- dev.sh
- app/
-- php.sh
-- pug.sh

Kemudian, kita buat folder pug sehingga struktur frameworknya menjadi:

- php/
- dev.sh
- app/
-- php.sh
-- pug.sh
- pug/

Nanti, cara menggunakannya itu adalah, kita jalankan dev.sh yang secara otomatis akan menjalankan app/php.sh dan app/pug.sh. File php.sh itu akan menjalankan PHP Standalone yang bisa diakses di localhost:2020. Sedangkan, file pug.sh akan masuk ke folder pug, kemudian akan mengolah semua file Pug yang ada di situ, kemudian outputnya dikirim ke folder php. Gitu alurnya.

Tapi, kalau kamu belum punya PHP, install dulu dengan perintah:

sudo apt install php

Dan kalau kamu belum ada Pug, install dulu Node JS, kemudian install Pugnya dengan perintah:

sudo npm i -g pug-cli

Nah sekarang kita masuk ke folder pug. Di dalam folder pug, buat file base.pug yang isinya:

- tulis = (x) => `<?= htmlentities(${x} ?? '') ?>`

mixin if(x)
  | <?php if(!{x}): ?>
mixin elif(x)
  | <?php elseif(!{x}): ?>
mixin else
  | <?php else: ?>
mixin endif 
  | <?php endif ?>

mixin foreach(x)
  | <?php foreach(!{x}): ?>
mixin endforeach
  | <?php endforeach ?>

block base

Jadi, file base.pug ini, adalah dasar dari sintaks-sintaks PHP. Kamu bisa menambahkannya kalau kurang. Ini untuk contoh aja karena yang biasa dipakai itu if sama foreach.

Kemudian, kita buat file index.pug yang isinya:

extends base.pug

block base
  h1 Bagian nama
  +if('$nama != "Zen"')
  p Namanya bukan Zen
  +elif('$nama != "Andi"')
  p Namanya bukan Andi
  +else
  p Halo !{tulis("$nama")}
  +endif

  h1 Buah-buah yang kubutuhkan adalah:
  ol
    +foreach('$data as $x')
    li !{tulis("$x")}
    +endforeach

Jadi, strukturnya saat ini menjadi:

- php/
- dev.sh
- app/
-- php.sh
-- pug.sh
- pug/
-- base.pug
-- index.pug

Sekarang, jalankan dev.sh dengan perintah:

bash dev.sh

Sekarang, secara otomatis akan terbentuk file index.php dan base.php sehingga strukturnya menjadi:

- php/
-- base.php
-- index.php
- dev.sh
- app/
-- php.sh
-- pug.sh
- pug/
-- base.pug
-- index.pug

Kalau di base.php, isinya kosong. Sedangkan di index.php isinya:


<h1>Bagian nama</h1><?php if($nama != "Zen"): ?>
<p>Namanya bukan Zen</p><?php elseif($nama != "Andi"): ?>
<p>Namanya bukan Andi</p><?php else: ?>
<p>Halo <?= htmlentities($nama ?? '') ?></p><?php endif ?>
<h1>Buah-buah yang kubutuhkan adalah:</h1>
<ol><?php foreach($data as $x): ?>
  <li><?= htmlentities($x ?? '') ?></li><?php endforeach ?>
</ol>

Jadi lebih mudah kan develop websitenya?

Latihan ini, aku upload ke Github juga dengan nama repositori mzaini30/php-pug.

Share with your friends

2 komentar

  1. Koreksi: untuk sintaks `else if` cuma berlaku jika diikuti `{}`, kalau mau pakai sintaks alternatif `: … endif` harus pakai `elseif`.

    BalasHapus

Maskot Pelarang Adblock

Hallo Kak, Perkenalkan saya Zen. Untuk bisa mengakses situs kami, terlebih dahulu matikan atau non-aktifkan ekstensi AdBlock nya yaaa...

Ok , Saya Mengerti