![[DEV]AB](/data/avatars/s/2135/2135420.jpg?1657747839){kind=avatar}
Türkiye'de ilk Mobil & PC Aynı Anda Metin2 Oyna. Triarchonline kalıcı ve uzun ömürlü yapısı ile 24 Temmuz'da açılıyor. | 1-99 Mobil Metin2 Triarch HEMEN TIKLA!
[NODE JS] Express'te EJS Template Engine Kullanımı
Template engine'ler sunucu tarafında dinamik HTML sayfaları oluşturmanızı sağlar. Veritabanından çektiğiniz verileri HTML şablonlarına yerleştirip kullanıcıya tam bir sayfa gönderirsiniz. EJS (Embedded JavaScript) en popüler ve öğrenmesi en kolay template engine'lerden biri. Adından da anlaşılacağı gibi HTML içine JavaScript kodu gömmemize izin veriyor.
EJS'nin avantajı zaten bildiğiniz HTML ve JavaScript syntax'ını kullanmasıdır. Yeni bir syntax öğrenmenize gerek yok. <% %> etiketleri arasına JavaScript kodu yazarsınız, <%= %> ile değişkenleri HTML'e basarsınız. Bu kadar basit. Pug (eski adıyla Jade) gibi farklı syntax kullanan engine'lere göre öğrenme eğrisi çok daha düşük.
Ben ilk template engine olarak Pug kullanmıştım ve indentation tabanlı syntax'ına alışmakta zorlanmıştım. EJS'ye geçtiğimde işler çok kolaylaştı çünkü zaten bildiğim HTML'in içine JavaScript ekliyordum. Tabii ki Pug'ın da avantajları var ama başlangıç için EJS çok daha ulaşılabilir.
EJS'de üç temel etiket var: <% %> JavaScript kodu çalıştırır ama çıktı vermez (if, for gibi kontrol yapıları için), <%= %> değişkenin değerini HTML'e yazar ve otomatik olarak HTML escape eder (XSS koruması), <%- %> değişkenin değerini escape etmeden yazar (ham HTML eklemek için, dikkatli kullanın).
Partials yani kısmi şablonlar EJS'nin güçlü özelliklerinden biri. Header, footer, navbar gibi tekrar eden bileşenleri ayrı dosyalara çıkarıp <%- include('partials/header') %> ile dahil edebilirsiniz. Bu DRY prensibine uymanızı sağlar ve bakımı çok kolaylaştırır.
Layout sistemi EJS'de built-in olarak yok ama express-ejs-layouts paketi ile ekleyebilirsiniz. Layout dosyasında genel HTML yapısını tanımlar, her sayfada sadece değişen içeriği yazarsınız. Bu özellikle çok sayfalı uygulamalarda çok kullanışlı.
EJS dosyaları .ejs uzantısına sahiptir ve varsayılan olarak views/ klasöründe aranır. Bu klasörü app.set('views', path.join(__dirname, 'views')) ile değiştirebilirsiniz. Template engine'i app.set('view engine', 'ejs') ile ayarladıktan sonra res.render('sayfa', data) ile template'leri render edebilirsiniz.
Güvenlik açısından her zaman <%= %> kullanmaya özen gösterin. <%- %> kullandığınızda HTML escape yapılmaz ve XSS saldırılarına açık olursunuz. Sadece güvendiğiniz içeriklerde (kendi oluşturduğunuz HTML gibi) <%- %> kullanın. Kullanıcı girişi olan her yerde <%= %> tercih edin.
EJS performansı konusunda endişelenmenize gerek yok. Template'ler ilk render'da derlenir ve cache'lenir. Production'da app.set('view cache', true) ayarı zaten varsayılan olarak aktiftir. Geliştirme ortamında cache kapalıdır ki template değişikliklerini hemen görebiliniz.
JavaScript:
const express = require('express');
const path = require('path');
const app = express();
// EJS ayarlari
// npm install ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// Statik dosyalar
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.urlencoded({{ extended: true }}));
// Ornek veri
const urunler = [
{{ id: 1, ad: 'Gaming Laptop', fiyat: 35000, resim: '/images/laptop.jpg', aciklama: 'Yuksek performansli oyun laptopu' }},
{{ id: 2, ad: 'Mekanik Klavye', fiyat: 2500, resim: '/images/klavye.jpg', aciklama: 'RGB aydinlatmali mekanik klavye' }},
{{ id: 3, ad: 'Gaming Mouse', fiyat: 1800, resim: '/images/mouse.jpg', aciklama: '16000 DPI oyuncu mouse' }},
{{ id: 4, ad: 'Monitor 27"', fiyat: 12000, resim: '/images/monitor.jpg', aciklama: '144Hz IPS gaming monitor' }},
];
const blogYazilari = [
{{ id: 1, baslik: 'Node.js ile API Gelistirme', yazar: 'Ahmet', tarih: '2024-03-15', icerik: 'Node.js ile RESTful API gelistirmek artik cok kolay...' }},
{{ id: 2, baslik: 'Express Middleware Rehberi', yazar: 'Zeynep', tarih: '2024-03-10', icerik: 'Middleware kavrami Express.js in temel taslarindan biridir...' }},
{{ id: 3, baslik: 'MongoDB ile Veri Yonetimi', yazar: 'Mehmet', tarih: '2024-03-05', icerik: 'NoSQL veritabanlari arasinda en populer olan MongoDB...' }},
];
// Tum sayfalarda kullanilacak global degiskenler
app.use((req, res, next) => {{
res.locals.siteAdi = 'TechBlog';
res.locals.yil = new Date().getFullYear();
res.locals.aktifSayfa = req.path;
next();
}});
// ===== ROUTE'LAR =====
app.get('/', (req, res) => {{
res.render('index', {{
baslik: 'Ana Sayfa',
urunler: urunler.slice(0, 3),
sonYazilar: blogYazilari.slice(0, 2),
}});
}});
app.get('/urunler', (req, res) => {{
const kategori = req.query.kategori;
const sirala = req.query.sirala || 'ad';
let filtrelenmis = [...urunler];
if (sirala === 'fiyat-artan') filtrelenmis.sort((a, b) => a.fiyat - b.fiyat);
if (sirala === 'fiyat-azalan') filtrelenmis.sort((a, b) => b.fiyat - a.fiyat);
res.render('urunler', {{
baslik: 'Urunler',
urunler: filtrelenmis,
seciliSiralama: sirala,
}});
}});
app.get('/urunler/:id', (req, res) => {{
const urun = urunler.find(u => u.id === parseInt(req.params.id));
if (!urun) {{
return res.status(404).render('404', {{ baslik: '404 - Bulunamadi' }});
}}
res.render('urun-detay', {{ baslik: urun.ad, urun }});
}});
app.get('/blog', (req, res) => {{
res.render('blog', {{
baslik: 'Blog',
yazilar: blogYazilari,
}});
}});
app.get('/iletisim', (req, res) => {{
res.render('iletisim', {{
baslik: 'Iletisim',
mesajGonderildi: req.query.basari === '1',
}});
}});
app.post('/iletisim', (req, res) => {{
console.log('Iletisim formu:', req.body);
res.redirect('/iletisim?basari=1');
}});
// 404
app.use((req, res) => {{
res.status(404).render('404', {{ baslik: '404 - Sayfa Bulunamadi' }});
}});
app.listen(3000, () => {{
console.log('EJS sunucusu http://localhost:3000');
}});
// ===== EJS TEMPLATE ORNEKLERI =====
// Asagidaki template'leri views/ klasorune .ejs uzantisiyla kaydedin
// --- views/partials/header.ejs ---
// <%- kodu asagidaki gibi olur:
/*
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%%= baslik %> | <%%= siteAdi %></title>
<style>
body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; }}
nav {{ background: #333; padding: 15px; }}
nav a {{ color: white; text-decoration: none; margin-right: 20px; }}
nav a.active {{ border-bottom: 2px solid #007bff; }}
.container {{ max-width: 1200px; margin: 0 auto; padding: 20px; }}
</style>
</head>
<body>
<nav>
<a href="/" class="<%%= aktifSayfa === '/' ? 'active' : '' %>">Ana Sayfa</a>
<a href="/urunler" class="<%%= aktifSayfa === '/urunler' ? 'active' : '' %>">Urunler</a>
<a href="/blog" class="<%%= aktifSayfa === '/blog' ? 'active' : '' %>">Blog</a>
<a href="/iletisim" class="<%%= aktifSayfa === '/iletisim' ? 'active' : '' %>">Iletisim</a>
</nav>
<div class="container">
*/
// --- views/index.ejs ---
/*
<%%- include('partials/header') %>
<h1>Hosgeldiniz</h1>
<h2>One Cikan Urunler</h2>
<%% urunler.forEach(function(urun) { %>
<div class="urun-kart">
<h3><%%= urun.ad %></h3>
<p><%%= urun.fiyat.toLocaleString('tr-TR') %> TL</p>
<a href="/urunler/<%%= urun.id %>">Detay</a>
</div>
<%% }); %>
<h2>Son Yazilar</h2>
<%% sonYazilar.forEach(function(yazi) { %>
<article>
<h3><%%= yazi.baslik %></h3>
<small><%%= yazi.yazar %> - <%%= yazi.tarih %></small>
<p><%%= yazi.icerik.substring(0, 100) %>...</p>
</article>
<%% }); %>
<%%- include('partials/footer') %>
*/EJS template engine server-side rendered uygulamalar için mükemmel bir seçim. Öğrenmesi kolay, performansı iyi ve Express ile entegrasyonu sorunsuz. Küçük ve orta ölçekli projelerde React veya Vue gibi framework'lere ihtiyaç duymadan hızlıca dinamik sayfalar oluşturabilirsiniz.
Emeğiniz ve katkınız için teşekkür ederiz!
Konunuz gerekli incelemelerden geçerek onaylandı. Topluluğumuza katkılarınızın devamını bekliyoruz.
İyi forumlar!
Konunuz gerekli incelemelerden geçerek onaylandı. Topluluğumuza katkılarınızın devamını bekliyoruz.
İyi forumlar!
