Adı : PHP Templating Sistemleri: Nunjucks İle JavaScript Tabanlı Şablonlar Oluşturma

PHP, internetin gelişmesiyle birlikte popüler hale gelen bir programlama dilidir. PHP ile dinamik web siteleri, e-ticaret siteleri ve yönetim panelleri geliştirilebilir. Web siteleri her zaman güncellenmeye ihtiyaç duyar, bu nedenle web geliştiricileri dinamik web siteleri oluştururken PHP kodlarını kullanabilirler.

PHP, HTML ile birlikte kullanılarak veri tabanlarından veri çekebilir ,dinamik bir web sitesinin görünümünü değiştirebilir. PHP kodu ve HTML kodu birleştirildiğinde, kodlar arasında her zaman bir ayırıcı işaret, , kullanılır. Bu yardımcı madde, tarayıcıya PHP kodu gönderildiğinde, PHP kodunu yorumlaması gerektiğini bildirir.

Ancak, PHP file’larının olduğu bir projelerde, tamamen dinamik özellikler istendiğinde, her html sayfasına PHP bloğunun eklenmesi gerekiyor. Ancak, bu işlem karmaşık olabilir. Bu nedenle, birçok web geliştiricisi, sunulan farklı seçeneklere yönelirler. Bu yazımızda, Nunjucks adlı bir JavaScript tabanlı şablondan bahsedeceğiz.

Nunjucks, HTML dosyalarındaki PHP blokları yerine, JavaScript kullanarak şablon oluşturmanızı sağlar.

Nunjucks Nasıl Kullanılır?

Öncelikle, web geliştiricisi Nunjucks yüklemesi yapmalıdır. Node.js'in kurulu olması gereklidir, burada Node.js yüklemesi yer alıyor.

Nunjucks şablonu satır içi JavaScript ifadeleri içerebilir, ayrıca JavaScript fonksiyonları, koşullar, anahtarları ve döngüleri destekleyebilir. Nunjucks, Django ve Jinja2 gibi şablon programlama dilleriyle benzerdir.

Bu yazıda, HTML sayfasına bir örnek verilecek. Örnek olarak, web sitesinde bir başlık, bir resim, bir iletişim formu ve bir yorum bölümü bulunabilir. Nunjucks ile, bu örneği şu şekilde oluşturabiliriz:

```html

{{ title }}

{{ description }}

Name

Email

Message

{% if comments.length > 0 %}

Comments

{% for comment in comments %}

• 
  

  {{ comment.author }} {{ comment.date }}

  
  

  {{ comment.content }}

  
  

{% endfor %}

{% endif %}

```

Bu örnekte, Nunjucks kullanılarak bir HTML sayfası oluşturulmuştur. HTML sayfasında yer alan her yer, Nunjucks ifadesine sahip bir değişken veya bir blokla değiştirilir. Örneğin, başlık ve img html etiketleri, {{ title }} değişkeninin değeri ile değiştirilir. Yorum bölümü için, Nunjucks, {% if comments.length > 0 %} bloğu içinde, comments listesinde yorumları döndürür.

Sıkça Sorulan Sorular

S: Nunjucks nedir?

C: Nunjucks, JavaScript tabanlı bir şablon motorudur. HTML dosyalarındaki PHP blokları yerine, JavaScript kullanarak şablon oluşturmanızı sağlar.

S: Nunjucks neden kullanırız?

C: Nunjucks, web geliştiricilerinin HTML dosyalarında PHP kod blokları kullanmak zorunda kalmamasını sağlar. Bu nedenle, PHP kod bloklarının eklenmesinden kaynaklanan karmaşıklığı önler ve daha hızlı bir uygulama sağlar.

S: Nunjucks'ta koşul ifadeleri nasıl kullanılır?

C: Nunjucks'ta, koşul ifadeleri {% if %} ve {% elif %} kullanılarak belirtilir. Koşul ifadeleri ile birlikte {% else %} kullanmak mümkündür. Aşağıdaki örnek kullanımları gösterir:

```html
{% if count > 0 %}

{{ count }} results found:

{% else %}

No results found.

{% endif %}

{% if x > y %}
x is greater than y.
{% elif x == y %}
x is equal to y.
{% else %}
x is less than y.
{% endif %}
```
S: Nunjucks'ta döngüler nasıl kullanılır?

C: Nunjucks'ta döngüler {% for %} kullanılarak belirtilir. Aşağıdaki örnek kullanımları gösterir:

```html
{% for item in items %}

{{ item }}

{% endfor %}

{% for index, value in items %}

{{ index }}: {{ value }}

{% endfor %}
```

Bu örnekler, değişken items'e her bir öğe için bir HTML listesi oluşturur. {% for index, value in items %} örneğinde, değişkenler index ve value, dizi öğelerini temsil eder."

npm install nunjucks