Node.js express MVC

Yazıda express modülü ile uygulama geliştirirken kullanılan MVC tasarım mimarisi ile ilgili bilgiler yer almaktadır.

Geliştirilen web uygulamalarındaki bölümlerin artmasıyla beraber yazılan kodlarda artmaktadır.

Yazılan kodların artması, geliştirilen uygulama için uygun bir tasarım mimarisinin seçilmemesi kodların karmaşıklaşmasına, kod bakım süresinin uzamasına neden olur.

Web uygulaması geliştirirken çoğunlukla MVC tasarım mimarisi kullanılır.

MVC yani Model-View-Controller en basit şekilde geliştirilen uygulamaların parçalara ayrılmasıdır.

Her bir parçanın kendine göre görevleri vardır.

• Model – Uygulamada kullanılacak verilerin bulunduğu, veritabanı ile ilgili bağlantının yapıldığı katmandır.
• View – Model içerisindeki verilerin görselleştirilmesinden sorumlu katmandır.
• Controller – Model ile View arasındaki bağlantıyı sağlayan katmandır. View’dan gelen ekleme, silme, güncelleme vb. isteklere cevap verir.

Örneğin; Kullanıcı View katmanındaki görsel form alanı aracılığıyla ekleme işlemi için veri gönderir.

Gönderilen veriler Controller katmanında kontrol edilir.

Kontrol edilen veriler uygunsa Model katmanına aktarılarak ekleme tamamlanır.

Kontrol başarısızsa View katmanına geri bildirim gönderilir.

Controller katmanındaki kontrol işlemleri zorunlu değildir.

Ancak iyi bir uygulama için gereklidir.

Express ile MVC tasarım mimarisinin uygulanması basittir.

Node.js Dersleri bölümündeki Node.js expres Şablon Motorları yazısındaki şablon motorlarını kullanarak View katmanı projeye eklenebilir.

Verilerin bulunduğu Model katmanı uygulamaya göre veritabanı bağlantısının bulunduğu bölüm olabilir.

MVC mimarisinin anlaşılması için Model içerisinde kişilerin bulunduğu, Controller içerisinde Model katmanında bulunan verileri View katmanına ileten ve express route yönetimini sağlayarak isteklere cevap veren bir yapı oluşturalım.

Model katmanı için proje klasöründe model klasörü oluşturup verileri index.js dosyasına JavaScript Dizisi olarak saklayalım.

'use strict';

let sira = 0;
let kisiler = exports.kisiler = [];

function Kisi(adi, soyadi) {
  this.id = sira++;
  this._adi = adi;
  this._soyadi = soyadi;
}

Kisi.prototype.kisiAdi = function () {
  return this._adi;
}

Kisi.prototype.kisiSoyadi = function () {
  return this._soyadi;
}

function kisiEkle(gelenAdi, gelenSoyadi) {
  kisiler.push(new Kisi(gelenAdi, gelenSoyadi));
}

kisiEkle('Yusuf', 'SEZER');
kisiEkle('Ramazan', 'SEZER');
kisiEkle('Sinan', 'SEZER');
kisiEkle('Mehmet', 'SEZER');

Model katmanındaki kodlar incelendiğinde kodların anlaşılır olması için veriler Kisi kurucu fonksiyonu ile oluşturulmuş ve kisiEkle fonksiyonu ile kisiler adlı diziye eklenmiştir.

Controller katmanı için controller klasörü oluşturup gerekli route yönetimini ve diğer işlemleri index.js dosyasında yapalım.

'use strict';

const express = require('express');
const kisiRouter = express.Router();
const veri = require('../model');

kisiRouter.get('/', function (req, res) {

  res.render('index', {
    liste: veri.kisiler
  });

})

kisiRouter.get('/:id(\\d+)', function (req, res) {

  let id = req.params.id;

  let mevcutKisi = veri.kisiler.find(kisi => kisi.id == id);

  if (!mevcutKisi) return res.send('Böyle bir kullanıcı yok');

  res.render('kisi', {
    adi: mevcutKisi.kisiAdi(),
    soyadi: mevcutKisi.kisiSoyadi()
  });

});

module.exports = kisiRouter;

Controller katmanı Model katmanında yer alan verileri alarak Node.js express route Yönetimi yazısında yer alan Router ile gelen isteklere göre View katmanında bulunan şablon motoruna iletmiştir.

Express ile HTTP sunucusu oluşturmak Controller içerisindeki Router kurallarını HTTP sunucusuna uygulamak ve View katmanında kullanılacak şablon motoru ayarları için aşağıdaki kodları proje klasörüne index.js olarak kaydedin.

'use strict';

const express = require('express');
const app = express();
const kisiController = require('./controller');

app.set('view engine', 'ejs');
app.set('views', './view');

app.use('/kisi', kisiController);

app.listen(1453, function () {
  console.log('Sunucu çalışıyor...');
});

Projede şablon motoru olarak EJS kullanıldığından Controller tarafından kişilerin listesi View katmanında bulunan (view klasörü içerisindeki) index.ejs dosyasına iletmiştir.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kişiler</title>
</head>
<body>
  <ul>
  <% for(let sira = 0; sira < liste.length; sira++) { %>
    <li><a href="/kisi/<%=liste[sira].id%>"><%=liste[sira].kisiAdi()%> <%=liste[sira].kisiSoyadi()%></a></li>
  <% } %>
  </ul>
</body>
</html>

View katmanı Controller katmanında gelen verileri görselleştirerek kullanıcıya iletir.

Ayrıca Controller katmanında yer alan ve kişi id numarasına göre bilgisinin View katmanına iletildiği kisi.ejs dosyasını hazırlayalım.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kişi bilgileri</title>
</head>
<body>
  <h1>Burası <%=adi%> <%=soyadi%> kişisine ait bilgilerin bulunduğu alan</h1>
</body>
</html>

Gerekli olan MVC tasarım mimarisi tamamlanmış oldu.

Kullanıcıya gönderilen bölümde değişiklik yapıldığında sadece View katmanının değiştirilmesi yeterli olacaktır.

Kodların katmanlara ayrılarak parçalara bölünmesiyle proje bakımı ve projeye yeni özelliklerin eklenmesi kolaylaşmıştır.

Hazırlanan uygulama için kişi ekleme bölümü yapalım.

Ekleme işlemi için ilk olarak Controller içerisinde Router kuralını ekleyelim.

kisiRouter.get('/ekle', function (req, res) {

  res.render('ekle');

});

View katmanındaki ekle.ejs dosyasını hazırlayalım.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kişi ekle</title>
</head>
<body>
  <h1>Yeni kişi ekle</h1>
  <form method="GET">
    <label for="adi">Adı:</label>
    <input type="text" name="adi" required="required" /> <br /> <br />
    <label for="soyadi">Soyadı:</label>
    <input type="text" name="soyadi" required="required" />
    <input type="submit" value="Ekle" />
  </form>
</body>
</html>

View katmanından gönderilen verilerin kayıt edilmesi için Model katmanındaki kisiEkle fonksiyonun ihraç edelim.

exports.kisiEkle = kisiEkle;

Gönderilen verilerin Model katmanında bulunan kisiler dizisine eklenmesi için Controller katmanında View katmanından gelen verileri Model katmanındaki kisiEkle fonksiyonuna parametre olarak geçirelim.

kisiRouter.get('/ekle', function (req, res) {

  if (req.query.adi && req.query.soyadi) {

    veri.kisiEkle(req.query.adi, req.query.soyadi);

    return res.redirect('/kisi');

  }

  res.render("ekle");

});

Uygulama için kişi ekleme işlemini yapmış olduk.

Uygulama için ayrıca silme, güncelleme ve arama işlemlerini de benzer adımlarla yapabilirsiniz.

Uygulama verileri herhangi bir dosyada kaydedilmediğinden eklenen veriler Node.js yeniden başlatıldığında Model katmanındaki kisiler dizisinde yer almayacaktır.

Node.js Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.