Node.js HTML Şablonları ve Dinamik İçerik

Önceki yazıda, HTML ile statik sayfa yanıtları oluşturmayı öğrenmiş ve fs modülü kullanarak HTML dosyası okuma işlemini gerçekleştirmiştik. Statik HTML sayfalar sabit içeriğe sahiptir ve içerikleri değişmez. Ancak, bazı durumlarda HTML içerisine dinamik değerler eklememiz gerekebilir. Bu tür durumlar için basit bir çözüm olan string yerine koyma yöntemini kullanacağız.

Dinamik İçerik Ekleme

Bu örnekte, giriş yapan kullanıcının adını HTML sayfasında göstermeyi hedefliyoruz. Bu işlem için HTML şablonumuzda belirli yerlere özel işaretler (örneğin, {{name}}) yerleştiriyoruz ve bu işaretleri JavaScript kodumuzda dinamik değerlerle değiştiriyoruz.

Uygulama Adımları ve Kod Örneği

JavaScript dosyamızda name adında bir sabit tanımlıyoruz ve bu sabiti "Emin" olarak ayarlıyoruz.
HTML dosyamızda Hello {{name}}, welcome to Node.js şeklinde bir ifade ekliyoruz.
JavaScript dosyamızda, {{name}} ifadesini name sabitiyle değiştiriyoruz.
fs.readFileSync ile dosya içeriğini okuyup, bu içeriği bir let değişkenine atıyoruz.
html.replace metodunu kullanarak {{name}} ifadesini name sabitiyle değiştiriyoruz.

const http = require("node:http");
const fs = require("node:fs");

const server = http.createServer((request, response) => {
  const name = "Emin";

  response.writeHead(200, { "Content-Type": "text/html" });
  let html = fs.readFileSync("./index.html", "utf-8");
  html = html.replace("{{name}}", name);
  response.end(html);
});

server.listen(3000, () => {
  console.log("Server running on port 3000");
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Node.js Eğitimi</title>
  </head>
  <body>
    <h1>Hello {{name}}, welcome to Node.js</h1>
  </body>
</html>

Sonuç

Bu yöntemle, HTML şablonlarına JavaScript kullanarak dinamik değerler ekleyebiliyoruz. Bu, Node.js'de HTML şablonları ile çalışmanın temel bir örneğidir. İlerleyen derslerde HTTP sunucusu üzerinde yönlendirme (routing) işlemlerini ele alacağız. Bu dersle, HTML şablonlarını kullanarak dinamik içerikler oluşturmanın temellerini öğrendik.