Merhaba arkadaşlar. Bu yazımda sizlere NodeJs in en bilinen frameworklerinden ExpressJS ile MVC standartlarında web site yapma hakkında temel bilgiler vereceğim.

Konuyu şöyle özetleyecek olursak, ExpressJS kurulumu yapıp ardından html template engine değiştireceğiz. Ardından ise controller ve model sınıflarımızı oluşturarak MVC yapısını tamamlamış olacağız. Bu arada illa da MVC kullanmak zorunda değilsiniz. Ancak işlerin bir yerden sonra sarpa sarmasını istemiyorsanız en başından bu şekilde başlamanın faydası var.

Gereksinimler;

NodeJs uygulaması http://nodejs.org
Editör (ben vscode tercih ediyorum) http://www.visualstudio.com

ExpressJS kurulumu

Bu aşamada bilgisayarınızda bulunan cmd komut yöneticisini kullanmanız yeterli olacaktır. Ben vscode un integrated PowerShell ini kullanacağım ama cmd ile aynı işlemleri yapacağız. Bu arada cmd nin ne olduğunu söylememe gerek yoktur umarım çalıştıra cmd yazın yeter.

Komut 1: ExpressJS nin bir kopyasını pc mizdeki global bir alana indirmek

npm install -g express-generator

Bu işlemi yaptıktan sonra ekranda garip gurup yazılar çıkacak ve hiç birşey olmayacaktır. Çünkü henüz expressi indirdik.

Komut 2: ExpressJS yi dizinimize kurmak

express

Bu kadar mı? Evet bu işlem ile artık express dizininize kopyalandı. Ancak bu şekilde çalışmayacaktır. Bağımlılık dediğimiz projedeki tüm kütüphanelerin indirilmesi gerekir. Tabi bu işlemden önce swig ile view template olayına gireceğiz. ExpressJS kafadan Jade adını verdiğimiz html ile alakası olmayan bir template engine ile gelir. Aslında çok az kod yazarak html yapmayı hedefleyen bu template yöntemi işimize gelmemekte. Neden? Çünkü bir yerlerden bulduğumuz html kodlarını copy-paste yapmadan çalışanını Allah için görmedim 🙂

Bu yüzden package.json dosyamızı açıp jade yazan yerdeki değerleri swig ile değiştiriyoruz. Bu arada swig in şu an ki son versiyonu 2.0.2 imiş nerden öğrendik tabiki npmjs.com da ki arama kutucuğuna swig yazarak gelen ilk sonuca girip sağ taraftaki bilgilerden. Siz daha sonra tekrar kontrol edin derim. Hemen ekleyelim.

 

Burada ki satırları karşılaşırırsanız swig yazan yerde sizde jade yazması gerekiyor. Ben swig ekleyip versiyonu ~1.4.1 yaptım. Bu başındaki şedde nedir derseniz o da bundan aşağısı kurtarmaz anlamına geliyor 🙂

Komut 3: Bağımlılıkları indirme

npm install

Evet yazılar çıktı bişiler bişiler derken kurulum tamamlandı. Ancak hala swig için işimiz bitmedi. Bunu sisteme tanıtmak gerek. Öncelikle eski template girdisini seçip sileceğiz.

Şimdide gelelim swig yapılandırma koduna. Buraya aşağıda ki gibi şu kodları eklemelisiniz.

Bu kodun detayına inmeyeceğim. Artık projemizi çalıştırıp bakabiliriz.

Komut 4: Başlatalım

npm start

Bişeyler yazıp duracak, sakın pencereyi çarpıdan kapatmayın server durur. Nodejs sunucusu local de böyle komut isteminden çalışmaktadır. Hemen localhost:3000 yapıp bakalım.

Ne oldu? Tabi ki view ler jade den kalmaydı. Hemen swig ile güncelleyelim. Burada kod düzenlemelerini göstermeyeceğim projenin github adresinden indirebilir swig in npm üzerindeki dökümanlarından konuyu öğrenebilirsiniz.

Şimdi geçelim işin aslına. Öncelikle mevcut routingi değiştirmeyeceğim bir isim telefon listesi örneği yaparak konuyu anlatmaya çalışacağım.

İlk olarak routing imizi tanıtalım.

Burada standart routing ekledik. kisiler requesti artık routes klasöründeki kisiler.js dosyasına gönderilecek. Hemen kisiler.js dosyasını oluşturalım.

Burada dikkatinizi çekecek olur ise controller adında bir nesnemiz var. Bu bir üst dizindeki controllers klasöründeki kisiler.js dosyasını belirtiyor. Ardından router.get ile /kisiler/ isteğini controller altında ki index fonksiyonuna gönderdiğimizi belirtiyoruz.

Hemen controllers klasörünü oluşturup altına kisiler.js dosyamızı oluşturarak controllerimizi de yapalım.

Burada da views altında kisiler klasöründe ki index.html dosyasını çağıracağımızı söylüyoruz. Hadi onu da oluşturalım.

Şimdilik dosyamızın içeriği bu şekilde. Çalıştırırsanız eğer karşınıza başlıktan oluşan bir sayfa gelecektir.

Gelelim modelimize. Model için ana dizine models adında bir klasör açıp kisiler.js adında bir model dosyası oluşturacağım. Burada ad ve tel alanları olan basit bir liste olacak. Siz mongo vs bağlantınızı burada yürütmelisiniz.

Modelimizde ki veriler bu şekilde. Bunu şimdi controller tarafında bağlayalım.

Controller dosyamıza modeli tanıttık ve değişkenimizi view a gönderdik. View tarafında da şu düzenlemeyi yapacağız.

View de bir for oluşturarak kisileri kisi nesnesine dağıtıp gördüğünüz üzere listelettik. Burada modelin içinde bulunan değişkenlerin view tarafında kök değişkenlere dönüştüğünü unutmayın. Çalıştırıp kontrol ediyoruz.

Bu aşamadan sonra yapacağınız işlemler, routing de kurgulayacağınız add edit gibi sayfaları ve hatta get yöntemi dışında post put delete gibi yöntemleri de bir şekilde controller tarafına geçirerek modelinize aktarımını sağlamak olacaktır. Modeliniz şu an için düz json mantığında da olsa mongodb vs kullanmanız durumunda size gelecek olan post vs datalarını da json olarak modele iletmeniz gerekecektir.

İşlemlerin bu aşaması konumuzun dışında, bunu expressjs yi araştırarak öğrenebilirsiniz. Ancak MVC yapısını sağlam oturtmak çok mühim, böylece sistem bir yerden sonra dallanıp spagettiye dönmez.

Projenin git adresi

https://github.com/halityurttas/expressjs-mvc

Bir sonraki yazıda görüşünceye dek esenlikle kalın