[NODE JS] HTML Sayfasi Donduren Sunucu
Merhaba arkadaslar, bugun Node.js ile HTML sayfasi donduren bir sunucu yazacagiz. Simdiye kadar JSON API dondurduk ama cogu web uygulamasi HTML sayfalari sunmak zorundadir. Template engine kullanmadan, saf Node.js ile dinamik HTML sayfalari olusturmayi ogrenecegiz. Bu bilgi, sonradan EJS veya Pug gibi template engine'leri kullandiginizda kaputun altinda ne oldugunu anlamanizi saglayacak.
Statik HTML Dondurme
En basit haliyle, res.end() icine HTML string'i yazarak statik bir sayfa dondurebilirsiniz. Content-Type basligini 'text/html; charset=utf-8' olarak ayarlamaniz yeterli. Ama gercek uygulamalarda HTML'i dogrudan kod icine yazmak iyi bir pratik degildir. Genelde HTML dosyalarini dosya sisteminden okursunuz veya template engine kullanirsiniz.
JavaScript:
const http = require('http');
const fs = require('fs/promises');
const path = require('path');
const { URL } = require('url');
// Basit template engine
function templateIsle(sablonStr, veriler) {
let sonuc = sablonStr;
// {degisken} kalibini degistir
for (const [anahtar, deger] of Object.entries(veriler)) {
const regex = new RegExp(`\\{\\{${anahtar}\\}\\}`, 'g');
sonuc = sonuc.replace(regex, deger);
}
// {#dongu items}...{/dongu} kalibi
sonuc = sonuc.replace(
/\{\{#dongu (\w+)\}\}([\s\S]*?)\{\{\/(dongu)\}\}/g,
(_, diziAdi, icerik) => {
const dizi = veriler[diziAdi];
if (!Array.isArray(dizi)) return '';
return dizi.map(eleman => {
let parcaStr = icerik;
if (typeof eleman === 'object') {
for (const [k, v] of Object.entries(eleman)) {
parcaStr = parcaStr.replace(
new RegExp(`\\{\\{${k}\\}\\}`, 'g'), v
);
}
} else {
parcaStr = parcaStr.replace(/\{\{this\}\}/g, eleman);
}
return parcaStr;
}).join('');
}
);
return sonuc;
}
// Sayfa olusturma fonksiyonlari
function htmlSayfasi(baslik, icerik) {
return `<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${baslik} - Node.js Egitim</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
header { background: #2d3436; color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
nav a { color: #dfe6e9; margin-right: 15px; text-decoration: none; }
nav a:hover { color: #74b9ff; }
.card { background: white; padding: 20px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
h1 { margin-bottom: 10px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.badge-yuksek { background: #e74c3c; color: white; }
.badge-orta { background: #f39c12; color: white; }
.badge-dusuk { background: #27ae60; color: white; }
form input, form select, form button { padding: 8px 12px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; }
form button { background: #0984e3; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>Node.js Gorev Yoneticisi</h1>
<nav>
<a href="/">Ana Sayfa</a>
<a href="/gorevler">Gorevler</a>
<a href="/ekle">Yeni Gorev</a>
<a href="/hakkinda">Hakkinda</a>
</nav>
</header>
${icerik}
</div>
</body>
</html>`;
}
// Veri
let gorevler = [
{ id: 1, baslik: 'Node.js ogren', oncelik: 'yuksek', tamamlandi: false },
{ id: 2, baslik: 'API gelistir', oncelik: 'orta', tamamlandi: false },
{ id: 3, baslik: 'Dokumantasyon yaz', oncelik: 'dusuk', tamamlandi: true }
];
// Sunucu
const sunucu = http.createServer(async (req, res) => {
const url = new URL(req.url, `http://${req.headers.host}`);
const yol = url.pathname;
// HTML cevap helper
const htmlGonder = (icerik, kod = 200) => {
res.writeHead(kod, { 'Content-Type': 'text/html; charset=utf-8' });
res.end(icerik);
};
// Ana sayfa
if (yol === '/' && req.method === 'GET') {
const icerik = `
<div class="card">
<h2>Hosgeldiniz!</h2>
<p>Bu basit bir Node.js web uygulamasidir.</p>
<p>Toplam gorev: <strong>${gorevler.length}</strong></p>
<p>Tamamlanan: <strong>${gorevler.filter(g => g.tamamlandi).length}</strong></p>
<p>Bekleyen: <strong>${gorevler.filter(g => !g.tamamlandi).length}</strong></p>
</div>`;
htmlGonder(htmlSayfasi('Ana Sayfa', icerik));
}
// Gorev listesi
else if (yol === '/gorevler' && req.method === 'GET') {
const gorevHtml = gorevler.map(g => `
<div class="card">
<h3>${g.tamamlandi ? '<s>' + g.baslik + '</s>' : g.baslik}</h3>
<span class="badge badge-${g.oncelik}">${g.oncelik}</span>
<span>${g.tamamlandi ? 'Tamamlandi' : 'Bekliyor'}</span>
</div>
`).join('');
htmlGonder(htmlSayfasi('Gorevler', gorevHtml));
}
// Gorev ekleme formu
else if (yol === '/ekle' && req.method === 'GET') {
const form = `
<div class="card">
<h2>Yeni Gorev Ekle</h2>
<form method="POST" action="/ekle">
<input type="text" name="baslik" placeholder="Gorev basligi" required>
<select name="oncelik">
<option value="dusuk">Dusuk</option>
<option value="orta" selected>Orta</option>
<option value="yuksek">Yuksek</option>
</select>
<button type="submit">Ekle</button>
</form>
</div>`;
htmlGonder(htmlSayfasi('Yeni Gorev', form));
}
// 404
else {
htmlGonder(htmlSayfasi('404', '<div class="card"><h2>Sayfa Bulunamadi</h2></div>'), 404);
}
});
sunucu.listen(3000, () => {
console.log('Web uygulamasi calisiyor: http://localhost:3000');
});Sonuc
HTML donduren sunucu yazmak, JSON API yazmaktan biraz daha karmasiktir cunku HTML'i guzel bir sekilde olusturmak gerekir. Gercek projelerde EJS, Pug veya Handlebars gibi template engine'ler kullanmak cok daha pratiktir. Ama alttaki mekanizmayi anlamak onemli. Ayrica modern web gelistirmede cogu zaman backend sadece API sunar, frontend ise React veya Vue gibi framework'lerle ayri olarak gelistirilir. Sonraki ve son konumuz static dosya sunucusu yazma olacak!
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!
