Web uygulamaları geliştirilirken, dinamik içeriğin oluşturulması ve istemciye sunulması büyük önem taşır. İşte burada devreye view engine'ler girer. Bu blog yazısında, view engine kavramını, en popüler view engine'leri ve özellikle EJS (Embedded JavaScript) ile dinamik içerik oluşturmayı ele alacağız.
View engine, bir web uygulamasında dinamik içeriği oluşturmak için kullanılan bir araç veya çatıdır. View engine'ler, sunucu tarafında çalışarak HTML, CSS ve JavaScript gibi frontend teknolojilerini dinamik verilerle birleştirir ve sonuç olarak istemciye (tarayıcıya) hazır bir HTML çıktısı gönderir. Bu sayede web uygulamaları, değişken verilerle oluşturulmuş dinamik içerikleri hızlı ve etkin bir şekilde sunabilir.
Hayal et, bir yapbozun parçalarını bir araya getiriyorsun. Yapboz parçaları, senin oluşturduğun resmin parçalarıdır. İşte view engine de web sayfasının yapboz parçalarını bir araya getiren araç gibidir.
EJS (Embedded JavaScript), JavaScript kodları ile HTML şablonları oluşturmayı sağlayan basit ve etkili bir view engine'dir. EJS, özellikle JavaScript geliştiricilerinin aşina olduğu bir sözdizimi kullanarak HTML içinde JavaScript yazmaya imkan tanır.
Öncelikle, EJS'i kullanmak için gerekli olan paketleri yükleyelim:
npm install express ejs
Basit bir Express.js uygulaması oluşturarak EJS ile dinamik içerik nasıl oluşturulur görelim.
const express = require('express');
const app = express();
const port = 3000;
// EJS'i view engine olarak ayarla
app.set('view engine', 'ejs');
// Ana sayfa route'u
app.get('/', (req, res) => {
const message = 'Merhaba EJS!';
res.render('index', { message: message });
});
app.listen(port, () => {
console.log(`Sunucu http://localhost:${port} adresinde çalışıyor`);
});
Proje kök dizininde views adında bir klasör oluşturun ve bu klasör içinde index.ejs adında bir dosya oluşturun. Aşağıdaki kodları bu dosyaya ekleyin:
<!DOCTYPE html>
<html>
<head>
<title>EJS Örneği</title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
Şimdi daha kapsamlı bir örnek yapalım. Bir kullanıcı listesi görüntüleyelim ve bu listeyi dinamik olarak oluşturalım.
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
// Kullanıcı listesi
const users = [
{ name: 'Ali', age: 25 },
{ name: 'Ayşe', age: 22 },
{ name: 'Mehmet', age: 30 }
];
app.get('/', (req, res) => {
res.render('index', { users: users });
});
app.listen(port, () => {
console.log(`Sunucu http://localhost:${port} adresinde çalışıyor`);
});
index.ejs dosyasını aşağıdaki gibi güncelleyin:
<!DOCTYPE html>
<html>
<head>
<title>Kullanıcı Listesi</title>
</head>
<body>
<h1>Kullanıcı Listesi</h1>
<ul>
<% users.forEach(function(user) { %>
<li><%= user.name %> - <%= user.age %></li>
<% }); %>
</ul>
</body>
</html>
Bu örnekte, kullanıcı listesini dinamik olarak oluşturduk ve EJS ile HTML içinde görüntüledik.
Bu yazıda, view engine kavramını, popüler view engine'leri ve özellikle EJS ile dinamik içerik oluşturmayı inceledik. EJS'in basit ve etkili yapısı sayesinde, Express.js ile dinamik web sayfaları oluşturmak oldukça kolaydır. Verdiğimiz örnekler ile EJS'in gücünü ve esnekliğini daha iyi anlamış olmalısınız. Artık kendi projelerinizde EJS'i kullanarak dinamik içerikler oluşturabilirsiniz.