Node.js (Express) – Pug Nedir? Genel Bakış
Merhaba,
Dünya değişiyor, iyi kötü bir hale bürünüyor. Her geçen gün bir öncekinden ya nesnel değişiklikle farkını ortaya koyuyor ya da bambaşka bir renk ile yeni hayata kaldığı noktadan devam ediyor. Tabiatın fıtratında bir matematik varken insanı hesaba katınca kompleks ve öngörülemez bir vaziyet ortaya çıkıyor. İnsan hayatı “bugün < yarın” bağıntısıyla yorumlamakta ve dünlere, yarınlara nazaran beyhude bir anlam katıyor. Dünyanın girmiş olduğu bu anlamsız maratondan mesleklerde nasibini alıyor. Hangisi olursa olsun icrasında dünde kalan sanatçı çok geçmeden bu günden antika muamelesi görüyor.
Velhasıl, bizler kendi icra ettiğimiz yazılım sanatında dünü geçebilmek ve bu güne bir nebze eşlik edebilmek için bu çabayı göze almış ve mesleğimizin bir parçası olarak başından beri kabul etmiş bulunmaktayız. Şimdi bu içeriğimizde zamanla HTML yapısındaki devrimsel gelişimin neticesi olan Node.js’de ki Express.js modülünün Pug yapısı üzerine konuşuyor olacağız.
Pug Nedir?
HTML mimarisel olarak etiket aç/kapat mantığında çalışan bir yapısal özelliğe sahiptir.
Örneğin aşağıdaki kod bloğunu incelersek;
<html> <head> <title>Örnek HTML</title> </head> <body> <p>Merhaba</p> </body> </html>
şeklinde oluşturulan html yapısı biz yazılımcılar için aç/kapat işleminde zaman maliyetini getirmektedir.
Pug ise bu maliyeti oldukça düşürmekte ve html’e nazaran daha kolay bir yaklaşım sergilememizi sağlamaktadır.
Yukarıdaki örneği Pug ile gerçekleştirirsek eğer;
html head title Örnek HTML body p Merhaba
şeklinde çalışmamız yeterlidir. Bu görmüş olduğunuz yapı aslında yukarıdaki ile birebir aynı özelliği sergilemektedir.
Tabi ki de Pug yapısının, yapısal ve işlevsel kritik noktalarını makalemizin devamında gerektiği noktada konuşacağız lakin şimdilik Pug’ı tanımlamaya devam edelim.
Pug’ın genel özellikleri;
- Eski adı Jade’dir.
- Dosyaları birbirlerine nodule etmemize yarar.
- Layout’u extend ederek yani paylaşmamızı sağlayarak farklı dosyalarda kullanabilmemizi sağlar.
- Klasik html’de olmayan programatik yapıları kullanmamıza imkan sağlar;
- Değişkenler
- Döngüler
- Kontrol Mekanizmaları
- Diziler vs…
Pug Entegrasyonu
Pug’ı kullanabilmek için projenize aşağıdaki kodlarla entegrasyonu sağlayabilirsiniz.
npm install pug --save
Pug Yapısal Kriterleri ve Özellikleri
Pug yapısını oluştururken dikkat edilmesi gereken özelliklere ve kurallara göz atarsak eğer;
-
Kural 1
Pug ile oluşturulacak html yapısında bir nesne bir üstteki nesnenin dahili veya harici olup olmayacağını kullanılan “tab” yahut “space” değeri ile belirlemektedir.div p
Yukarıdaki şekilde tanımlanan bir pug yapısı aşağıdaki gibi çıktı verecektir.
<div></div><p></p>
Eğer ki “p” etiketini “div” içerisine almak istiyorsak;//--space div p
gibi ya da
//--tab div p
şeklinde çalışmamız gerekecektir.
<div><p></p></div>
Örnek;
div p p strong p div br hr div
Çıktı;
<div><p></p><p></p></div><strong></strong><p><div><br/><hr/></div></p><div></div>
şeklinde olacaktır. -
Kural 2
Html nesnelerine bir yazı/değer/veri yazarken iki türlü yazım şekli mevcuttur.-
Direkt olarak nesnenin yanına tek satırlık değer yazılabilir.
div p x p y div z
Bu kullanımın çıktısı;
<div><p>x</p><p>y</p></div><div>z</div>
-
İlgili nesnenin bir satır altında “|” karakterinin eşliğinde değer yazılabilir.
div |x p |y p |z |w div p
Çıktı;
<div>x<p>y</p><p>z</p>w</div><div>p</div>
-
Direkt olarak nesnenin yanına tek satırlık değer yazılabilir.
-
Kural 3
Html etiketlerine attribute atarken aşağıdaki şekilde çalışılmaktadır.div(style="background-color:gray; width:350px; color:yellow;") |Merhaba p |Nasılsın? p(style="font-size:8px;") İyi diyelim, iyi olsun...
Çıktı;
<div style="background-color:gray; width:350px; font-color:yellow;">Merhaba<p>Nasılsın?</p><p style="font-size:8px;">İyi diyelim, iyi olsun...</p></div>
Pug Dosyasını Render Etmek
Bir önceki Node.js – Express Nedir? başlıklı makalemde Node.js’de Express.js’in ne olduğundan ve express.js ile sunucu oluşturmaktan bahsetmiştik. İşte bizler Pug dosyalarını ilgili makaledeki yapıyı kullanarak render edeceğiz.
Tabi öncelikle projemizin ana dizininde “views” adında bir klasör oluşturalım ve ardından içerisine herhangi bir isimde “.pug” uzantılı dosyamızı ekleyelim. Örneğin “pug2.pug”
html head title Örnek HTML body | Merhaba
Ardından “.js” uzantılı çalıştığımız dosyamızda aşağıdaki çalışmaları gerçekleştirelim;
const express = require("express"); const app = express(); //İlgili uygulamaya pug mtooru belirtilmektedir. app.set("view engine", "pug"); app.get("/", (request, response) => { //pug dosyası response ile render edilmektedir. response.render("pug2"); }); app.listen(5000, () => { console.log("Yayın başladı..."); });
Gördüğünüz gibi “app.set” fonksiyonuyla ilgili route’a pug motoru tanımlanmakta ve “response.render” fonksiyonu ile “pug2” isimli pug dosyamız render edilmektedir. “Peki hoca sistem “pug2” dosyasının views klasörü altında olduğunu nereden biliyor?” diye sorma ihtimalinize nazaran pug’un varsayılan olarak view nesnelerini ana dizindeki “views” klasörü altında aramakta olduğunu söylemekte fayda var.
Bu işlem neticesinde ilgili pug dosyamız render edilmiş olacaktır ve belirtilen portta belirtilen route adresinde çalıştırılacaktır.
Pug Programatik Özellikleri
Pug yapısında html’de olmayan programatik yapıları kullanabilmekteyiz. Şimdi sırasıyla bu yapıları inceleyelim;
-
Render Esnasında Parametre Olarak Değer Gönderme
Pug dosyasını render ederken parametre olarak belirli değerleri gönderebiliriz.const express = require("express"); const app = express(); app.set("view engine", "pug"); app.get("/", (request, response) => { response.render("pug2", { degisken1: "değişken 1", degisken2: "değişken 2", degisken3: { x: 3, y: true } }); }); app.listen(5000, () => { console.log("Yayın başladı..."); });
Gördüğünüz gibi “render” fonksiyonunda ikinci parametreye değerlerimizi belirtmiş olduk. Bu değerlere aşağıdaki gibi ulaşabilmekteyiz;
html head title Örnek HTML body p=degisken1 p=degisken2 p=degisken3.x
Şimdi bu değerlere karşılık gelen paremetre isimlerinin yani değişkenlerin nasıl kullanıldığını inceleyelim.
-
Değişken Tanımlama ve Değerini Çağırma
Pug dosyalarında değişken tanımlamak için “-(tire)” karakterinin kullanılması gerekmektedir.html head title Örnek HTML body - let degisken1 = "değişken 1" - let degisken2 = "değişken 2" - let degisken3 = [3, 5, 7]
Gördüğünüz gibi “degisken1”, “degisken2” ve “degisken3” olmak üzere değişkenlerimiz tanımlanmıştır. Bu tanımlamaların sonuna “;” karakterinin koyulmasına gerek yoktur.
Tanımlanan değişkenleri kullanabilmek için iki farklı yol mevcuttur;
-
Değişkenlerin değerini “=” operatörü ile direkt olarak getirebilmekteyiz.
html head title Örnek HTML body - let degisken1 = "değişken 1" - let degisken2 = "değişken 2" div= degisken1 div =degisken2
-
Eğer ki değişken değeri metinsel ifadelerin arasına yazdırılacaksa “#{degiskenadi}” kalıbı kullanılmalıdır.
html head title Örnek HTML body - let degisken1 = "değişken 1" - let degisken2 = "değişken 2" - let degisken3 = [3, 5, 7] div degisken1 değişkeninin değeri = #{degisken1} div |degisken2 değişkeninin değeri = #{degisken2}
-
Değişkenlerin değerini “=” operatörü ile direkt olarak getirebilmekteyiz.
-
Pug Dosyalarını Include Etmek
Bir pug dosyasını bir başka pug dosyası içerisine aşağıdaki gibi include edebiliriz.//-head.pug head title Include
//-body.pug body |Merhaba
//-pug2.pug html include head include body
-
Kontrol Yapılarını Kullanma(If – Else If- Else)
If – Else If – Else kalıbını aşağıdaki gibi kolayca kullanabilmekteyiz.body div - let sayi = 12 if !sayi |Sayı değişkeni yok else if sayi < 10 |Sayı değişkeninin değeri 10'den küçüktür. Sayı : #{sayi} else |Sayı değişkeninin değeri 10'a eşit ya da büyüktür. Sayı : #{sayi}
Burada dikkat edilmesi gereken husus, ‘if – else if – else’ yapısının hangi html nesnesi içerisinde kullanıldığıdır. Ayriyetten her bir kontrol sonrası yapılan işlem bir “tab” ya da “space” içeride gerçekleştirilmelidir.
-
Döngü Kullanımı
Pug dosyalarında genellikle “each” döngüsü işimizi görecektir.
Örnek 1;body ul each val in [1, 3, 5, 7, 9] li= val
Örnek 2;
body ul -let array = [1, 3, 5, 7, 9] each val in array li= val
Örnek 3;
body ul -let array = "Merhaba Dünya" each val in array li= val
Eğer ki “each” döngülerinde elemanların index numarasını kullanmak isterseniz aşağıdaki gibi çalışılması gerekmektedir;
body ul -let array = [1, 3, 5, 7, 9] each val, index in array li= index + "- " + val
Eğer ki ilgili dizide veri kontrolü yapmak istiyorsanız “each” döngüsüne özel “else” yapısını kullanabilirsiniz.
body ul -let array = [] each val in array li= val else li Veri Yok
“each” döngüsüne nazaran “while” döngüsünüde kullanmak isterseniz aşağıdaki örneği inceleyiniz.
body ul - let sayac = 0 while sayac < 100 li= sayac++
Evet, bu içeriğimiz ile Pug yapısı üzerine güzel bir giriş yaptığımızı ve olaya tam teferruatlı sağlam temeller attığımızı düşünüyorum. İçeriğimizde genel olarak bilinmesi gerekenleri sunduğumuzdan dolayı bundan sonraki Pug ile ilgili kalan diğer konuları kendilerine has içeriklerde ele almayı tercih ediyorum.
O halde sonraki yazılarımda görüşmek üzere diyelim…
İyi çalışmalar…
Elinize sağlık yararlı bir paylaşım olmuş