Express.js ile Web Uygulamaları

Express.js Nedir?

Express.js, Node.js için minimalist ve esnek bir web uygulama çatısıdır. Web uygulamaları ve API'ler geliştirmek için güçlü bir dizi özellik sunar. Node.js'in yerleşik HTTP modülünün üzerine inşa edilmiştir ve web geliştirme sürecini büyük ölçüde basitleştirir.

Neden Express.js Kullanmalıyız?

• **Hızlı Geliştirme:** Express.js, web uygulamalarını ve API'leri hızlı bir şekilde oluşturmak için gerekli araçları sağlar.
• **Esneklik:** Minimalist yapısı sayesinde, projenizin ihtiyaçlarına göre istediğiniz middleware ve kütüphaneleri entegre edebilirsiniz.
• **Büyük Topluluk:** Geniş bir geliştirici topluluğuna sahip olması, sorunlarınıza kolayca çözüm bulabileceğiniz anlamına gelir.
• **Performans:** Node.js'in asenkron ve olay güdümlü yapısını kullanarak yüksek performanslı uygulamalar geliştirmenizi sağlar.

Kurulum ve İlk Uygulama

Express.js projesi oluşturmak oldukça basittir. İlk olarak, projeniz için bir dizin oluşturun ve içine girin:

mkdir my-express-app
cd my-express-app

Ardından, `package.json` dosyasını oluşturmak için projenizi başlatın:

npm init -y

Şimdi Express.js'i projenize yükleyin:

npm install express

Proje dizininizde `app.js` adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Merhaba Express.js!");
});

app.listen(port, () => {
  console.log(`Uygulama http://localhost:${port} adresinde çalışıyor`);
});

Uygulamayı çalıştırmak için terminalde:

node app.js

Tarayıcınızda `http://localhost:3000` adresine giderek

Routing (Yönlendirme)

Routing, bir uygulamanın istemci isteklerine nasıl yanıt verdiğini belirlemektir. Express.js, HTTP metotlarına (GET, POST, PUT, DELETE vb.) ve URL yollarına göre istekleri yönlendirmenizi sağlar.

Temel Yönlendirme

const express = require("express");
const app = express();

// GET isteği için kök dizin (/) rotası
app.get("/", (req, res) => {
  res.send("Ana Sayfa");
});

// GET isteği için /about rotası
app.get("/about", (req, res) => {
  res.send("Hakkımızda Sayfası");
});

// POST isteği için /submit rotası
app.post("/submit", (req, res) => {
  res.send("Veri Gönderildi!");
});

// Dinamik rota parametreleri
app.get("/users/:userId/books/:bookId", (req, res) => {
  res.send(`Kullanıcı ID: ${req.params.userId}, Kitap ID: ${req.params.bookId}`);
});

// Query string parametreleri
app.get("/search", (req, res) => {
  const query = req.query.q;
  res.send(`Aranan kelime: ${query}`);
});

app.listen(3000, () => console.log("Sunucu 3000 portunda çalışıyor"));

Middleware (Ara Yazılım)

Middleware fonksiyonları, Express.js uygulamasının istek-yanıt döngüsüne erişimi olan fonksiyonlardır. Bir isteğin işlenmesi sırasında çeşitli görevleri yerine getirmek için kullanılırlar.

Middleware Kullanımı

const express = require("express");
const app = express();

// Basit bir middleware fonksiyonu
const logger = (req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next(); // Sonraki middleware veya rota işleyicisine geç
};

// Uygulama seviyesinde middleware kullanımı
app.use(logger);

// JSON body parser middleware
app.use(express.json());

// URL-encoded body parser middleware
app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.send("Ana Sayfa");
});

app.post("/data", (req, res) => {
  console.log("Gelen veri:", req.body);
  res.json({ message: "Veri alındı", data: req.body });
});

app.listen(3000, () => console.log("Sunucu 3000 portunda çalışıyor"));

npm install ejs

Express uygulamanızda EJS'i yapılandırmak için:

const express = require("express");
const app = express();
const path = require("path");

// EJS'i şablon motoru olarak ayarla
app.set("view engine", "ejs");
// Görünüm dosyalarının bulunduğu dizini belirt
app.set("views", path.join(__dirname, "views"));

app.get("/", (req, res) => {
  const data = {
    title: "EJS ile Dinamik Sayfa",
    heading: "Merhaba EJS!",
    items: ["Elma", "Armut", "Kiraz"]
  };
  res.render("index", data);
});

app.listen(3000, () => console.log("Sunucu 3000 portunda çalışıyor"));

`views` klasörü içinde `index.ejs` adında bir dosya oluşturun:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= heading %></h1>
    <ul>
        <% items.forEach(function(item){ %>
            <li><%= item %></li>
        <% }); %>
    </ul>
</body>
</html>

const express = require("express"); const app = express(); const path = require("path"); // 'public' klasöründeki statik dosyaları sun app.use(express.static(path.join(__dirname, "public"))); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "public", "index.html")); }); app.listen(3000, () => console.log("Sunucu 3000 portunda çalışıyor"));

Bu örnekte, public klasöründeki tüm dosyalar doğrudan erişilebilir olacaktır. Örneğin, public/css/style.css dosyanız varsa, tarayıcıdan http://localhost:3000/css/style.css adresinden erişilebilir.

Form İşlemleri

Web uygulamalarında kullanıcıdan veri almak için formlar kullanılır. Express.js, form verilerini işlemek için 

body-parser (Express 4.16.0+ ile Express'in kendi içinde gelir) middleware'ini kullanır.

GET ve POST Formları

const express = require("express");
const app = express();

// Form verilerini işlemek için middleware
app.use(express.urlencoded({ extended: true })); // x-www-form-urlencoded verisi için
app.use(express.json()); // JSON verisi için

app.get("/form", (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
        <title>Form Örneği</title>
    </head>
    <body>
        <h1>Kayıt Formu</h1>
        <form action="/submit-form" method="POST">
            <label for="name">Ad:</label><br>
            <input type="text" id="name" name="name"><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <input type="submit" value="Gönder">
        </form>
    </body>
    </html>
  `);
});

app.post("/submit-form", (req, res) => {
  const { name, email } = req.body;
  res.send(`Teşekkürler, ${name}! Email adresiniz: ${email}`);
});

app.listen(3000, () => console.log("Sunucu 3000 portunda çalışıyor"));

Pratik Alıştırma: Basit Bir Blog Uygulaması

Bu alıştırmada, Express.js kullanarak basit bir blog uygulaması oluşturacaksınız. Uygulama aşağıdaki özelliklere sahip olmalıdır:

• Ana sayfa (/) tüm blog yazılarını listelemeli.
• Her blog yazısı için detay sayfası (/posts/:id) olmalı.
• Yeni blog yazısı eklemek için bir form (/new-post) ve POST rotası olmalı.
• Statik dosyaları (CSS) sunabilmeli.
• EJS gibi bir şablon motoru kullanmalı.