11 Ağustos 2012 Cumartesi

NodeJS Express Framework MVC yapısı

Daha önceki yazımızda NodeJS ve express framework'unu kullanarak uygulama geliştirmeye giriş yapmıştık.Bu yazımızda ise edindiğimiz tecrübe ile birlikte tam bir MVC yapısı kullanarak NodeJS ile nasıl uygulama geliştireceğimizi inceleyeceğiz.

Anlatımı tam olarak takip edebilmeniz için WebMatrix kullanmanızı tavsiye etmekle birlikte, istediğiniz editörü kullanmakta özgürsünüz.

Daha önce yaptığımız gibi WebMatrix üzerinden yeni bir şablon uygulama ile boş bir NodeJS uygulaması oluşturuyoruz.Boş oluşturmamızın sebebi Express framework'unu daha sonra kurarak en güncel versiyon ile geliştirme yapmak.

Daha önceki yazımızda belirttiğimiz şekilde command prompt'dan yeni oluşturduğumuz proje dizinine gelerek;

npm install express komutunu çalıştırıyoruz.

Yazımıza devam etmeden önce Express framework'ünün güncellenmesi ile birlikte daha önce yazdığımız kodlar yeni versiyonda hata verecektir. Daha önce

express.createServer();

şeklinde kullandığımız yapı express'in artık http.Server'dan inherit ederek geliştirilmediğinden dolayı hata verecektir. Bu nedenle yeni kullanım şekli olan

var express = require('express'),
    app = express();
app.listen(3000);

şeklinde değiştirmemiz gerekmektedir.

Projemize sağa tıklayıp 2 yeni klasör oluşturuyoruz. model ve view isimlerini verdiğimiz bu klasörler isminden de anlaşılacağı üzere model sınıflarımızı ve view'lerimizi saklayacağımız klasörler.

Model klasörüne sağa tıklayarak new File deyip yeni bir javascript dosyası oluşturalım. "urun.js" adını verdiğimiz dosyamıza aşağıda yer alan kod blogunu ekleyerek ilk modelimizi oluşturalım.

function urun(data, id) {
    this.id = id;
    this.adi = String(data.adi) || "Tanımlanmamış";
    this.kategoriler = (data.kategoriler || []).map(function(c, index) {
        return { id: Number(c.id) || index, kategoriAdi: String(c.kategoriAdi) };
    });
}
module.exports = urun;

module.exports = urun;

satırı modelimizin proje genelinde kullanabilir, referans verilebilir hale getirmektedir.

Ürün modelimiz içerisinde id, adi , ve kategoriler alanları bulunmaktadır. Kategori ise kendi içerisinde id, kategoriAdi attribute'lerine sahiptir.
Şimdi uygulamamuz için bir request tanımlayıp yeni oluşturduğumuz modeli kullanarak bir cevap dönelim.

app.get('/urun', function(req, res) {
    var urun1 = new urun({ adi: 'Portakal', kategoriler: [{ kategoriAdi: 'Meyve'}] });
    res.send(urun1);
});

Response olarak döndürdüğümüz objenin görüntülendiğini göreceğiz.

{
    "adi":"Portakal",
    "kategoriler": [
      {
        "id":0,
        "kategoriAdi": 'Meyve'
      }
    ]
}

Şimdi Jade template engine'inin kullanarak oluşturduğumuz modeli görüntüleyeceğimiz bir sayfa geliştirmesi yapalım.

Bu işlem için ilk olarak projemiz içerisine Jade kurulumu yapmamız gerekiyor.

Command prompt ile proje dizinimize ulaştıktan sonra (C:\Users\<kullaniciAdi>\Documents\My Web Sites\Express MVC Sample)
npm install jade komutunu çalıştırıyoruz. Jade kurulumu gerçekleşecektir.

Daha sonra önceden oluşturmuş olduğumuz view klasörüne urun.jade dosyasını ekleyelim.

Açılan dosya içerisine görüntülemek istediğimiz html'i Jade yapısına uygun olarak yazalım

urun.jade

h1 
 p adi: #{data.adi}
 p Kategoriler
 ul  
 - each kategori in data.kategoriler
   li=kategori.kategoriAdi

Her ne kadar Jade ile ilgili detaylı bir konu yazacak olsak da Jade'den kısaca söz edelim.

Jade node için geliştirilmiş yüksek performans sağlayan bir template engine.

Oluşturmuş olduğumuz urun.jade dosyası içerisinde göndereceğimiz ürün modelinin adını ve kategorilerini listeleyeceğiz. "data.adi" tahmin edebileceğiniz gibi ürünün adı, Kategoriler başlığı altında yer alan liste ise kategoriler listesinde yer alan her bir kategori için kategori adını listleyecek. Bu işlemin yapılması için

server.js dosyası içerisine ilgili get metodunu ekleyelim.

app.get('/urun', function(req, res) {
    var urun1 = new urun({ adi: 'Portakal', kategoriler: [{ kategoriAdi: 'Meyve'},{ kategoriAdi: 'Kış Meyvesi'}] });
    //res.send(urun1);
    res.render('index', {data :urun1});
});

Gördüğünüz gibi server'a yapılan request bu method tarafından karşılanarak "urun1" değişkenine ürünümüz tanımlanacak.

"res.render" methoduna hangi jade dosyasının render edileceğini ve parametre verimizi gönderiyoruz.

"data" template içerisinde veriye erişim için kullanacağımız değişken adı.

Template içerisinde #{} ifadesi içerisinde gönderdiğimiz data değişkenine erişim yapabilirz.
"- each kategori in data.kategoriler" ifadesi data değişkeni içerisinde yer alan her bir kategori için html list item oluşturacak ve kategoriAdi alanının yazacak.

Çalıştırdığımızda karşılaşmayı beklediğimiz sonuç aşağıdaki gibi olacaktır.

GitHub:

jade@0.27.2 node_modules\jade
├── commander@0.6.1
└── mkdirp@0.3.0

express@3.0.0rc2 node_modules\express
├── methods@0.0.1
├── cookie@0.0.4
├── crc@0.2.0
├── fresh@0.1.0
├── range-parser@0.0.4
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.0.3 (mime@1.2.6)
└── connect@2.4.2 (pause@0.0.1, bytes@0.1.0, qs@0.4.2,formidable@1.0.11)