Node.js Dersleri : Bölüm 3 - Express ile Websitesi Yapımı
Aslında chat aplikasyonu yapımını anlatacaktım bu derste ama kullandığım library'ler arasında express'te olduğu için önce bir express anlatımı yapsam iyi olacak diye düşündüm. Efenim express dediğim library; node.js ile çok hızlı, zahmetsiz ve yüksek performanslı website hazırlamanızı sağlayan bir web framework'udur (türkçe ne diyebilirim bulamadım :D). Framework nedir diyecek arkadaşlar için wikipedia yardımcı olacaktır. Hızlıca örneklere girişelim. Şimdi efenim Deve Market için bir websitesi yapmak istiyorsunuz ve bunun içinde Node.js kullanmayı düşünüyorsunuz (Önermem :D). Bunun için öncelikle command prompt'u yönetici modunda açıp (eğer çalışmazsa nodejs command prompt'unu çalıştırın) "npm install express -g" diyorsunuz. Böylelikle global olarak express'i bilgisayarınıza kurmuş oluyorsunuz. Yani istediğiniz yerden express library'sine ulaşabilmeniz anlamına geliyor. Bundan jade kurulumu için "npm install jade -g" yazıp çalıştırın. Sonrasında ise command prompt üzerinden sitenizi yaparken kullanacağınız klasöre gidin. Klasörü açtıktan sonra sadece "express" yazıp enter'a basın. Bunu yaptığınız taktirde klasörünüze temel bir websitesi için gerekli dosyaları kuracaktır. Bittikten sonra hiç duraksamadan "npm install express -d" yazıp enter'a basıyoruz ve böylelikle klasörümüze express library'sini de aktarmış oluyoruz. Sonrasında express için gerekli olan JADE library'sini kuruyoruz. Bunu da "npm install jade -d" yazarak kuruyoruz. Böylelikle temel anlamda websitemiz hazır. Bu dediklerim aşağıdaki gibi bir görüntü oluşturması gerek.
Şimdi efenim dosyalar hazır, library hazır ama bu attığı dosyalar neler bunu geçelim temeli bilelim. "Node_Modules" klasöründe sitemizde kullanacağımız library'ler bulunuyor. Bu projede express ve jade library'leri bulunmakta. Eğer yeni bir library kurarsanız yine bu klasöre eklenecek ve buradan kontrol edilecek. "Public"te ise kullanacağınız javascriptler, stil dosyaları, resimler ve her türlü client'ın ulaşabileceği dosyalar bulunacak. Sayfanızı çalıştırdığınız vakit client dosyaları için her zaman buraya bakacaktır. "routes" klasörü birnevi sizin geçiş kapınız diyebilirim. Diyelim ki www.devemarket.com.tr adresine girmek istediğinizde öncelikle sistem routes klasöründeki index.js dosyanıza gidiyor ve burada tanımlanmış sayfayı çalıştırıyor. İlk aşamada burada; exports.index = function(req, res){ res.render('index', { title: 'Express' }) }; Yazacaktır. Bu şu demek oluyor; Sitenin anasayfası çağrıldığı vakit "index" view'ını kullan, title olarakta "Express" yazsın. View? diyenlere geçelim hemen. Index dedim, view'a geçiyor dedim. Bu nedir hacı diyenleriniz haliyle olmuştur. Bende ilk duyduğumda aynı tepkiyi vermiştim. Bunun için aslında birnevi MVC yapısı diyebiliriz diye düşünüyorum. Yanlışsam düzeltin :D Şöyle ki; Routes kısmında yönlendirilen kod view kısmına aktarılır ve burada belirtilen view dosyasını okuyarak sayfaya görüntüyü basar. Burada kullanılan sayfalar JADE stilinde yazılır. Aslında mantık html'den hiç farklı değil ancak burada sizin routes'tan gönderdiğiniz bilgiler basılır. Örneğin yukarıdaki kodda title olarak Express gönderilirken aslında bu bilgi view'a yollanır ve view'da title için belirtilen yere basılır. Hepsi bu. Sadece Jade'i öğrenmeniz başta karışık gelebilir ama sonradan çok basit gelecektir. View'ı anlattığıma göre şimdi "views" klasörüne geçeyim. Bu klasörde ilk aşamada iki dosya vardır. Birincisi index.jade yani anasayfanın template'i, ikinci ise layout.jade bu da asp.nette masterpage gibi düşünebilirsiniz. Yani eğer sistemde layout kullanacağınızı belirttiyseniz her view'ınız temel olarak layout.jade dosyasını alır ve layout.jade içine kendini basar. Böylelikle websitenizdeki aynı kısımları tekrar tekrar yazmak zorunda kalmazsınız. Ana klasördeki package.json dosyasında, yaptığınız aplikasyonun bilgileri bulunuyor. Diyelim ki yaptığınız aplikasyonu library'i olarak dağıtmak istiyorsunuz yada bir yerde yayınlayacaksınız, o zaman bu dosyadaki bilgileri doldurmanız gerekir. Böylelikle sisteminizin ne olduğunu, neler yaptığını, hangi library'leri kullandığını rahatça gösterebilirsiniz. Ve gelelim App.js dosyasına. Bu dosya beyniniz, kalbiniz oluyor. Burada bütün işlemlerinizi yapıyorsunuz (başlangıç için :D). Burada tek tek kodları anlatmayı düşünmüyorum açıkcası ama öğrenmek isteyenler yorum kısmını kullanabilir :D Burada önemli olan ise 32.satırda baslayan routes tanımlama kısmımız. Örnekteki 32.satırda; app.get('/', routes.index); yazıyor. Yani bunda demek istediği, eğer kullanıcı anasayfaya gitmek istiyorsan routes.index'e yönlendir. Şimdi herşey bittiğine göre yeni bir sayfa ekleyelim. Kafamızdaki sayfa hakkımızda bölümü olsun. Öncelikle app.js dosyasında 32.satırdan sonra; app.get('/Hakkimizda', routes.hakkimizda); diye ekleyelim. Böylelikle eğer kullanıcı www.devemarket.com.tr/Hakkimizda sayfasına gitmek isterse routes kısmındaki hakkimizda kodunu çalıştırsın diyoruz. Sonrasında ise "routes" klasöründeki index.js dosyasını çalıştırıyoruz. Ve buraya; exports.hakkimizda = function(req, res){ res.render('hakkimizda', { title: 'Deve Market | Hakkımızda' }) }; kodunu ekliyoruz. Böylelikle bu kısma ulaşıldığı vakit title olarak "Deve Market | Hakkımızda" kullan diyip, view olarakta hakkimizda.jade dosyasını kullan diyoruz. Şimdi ise geri dönüp views klasörüne geliyoruz ve burada "hakkimizda.jade" adında bir dosya yaratıyoruz. Bu dosyaya ise; h1 HAKKIMIZDA p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum laoreet tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dignissim adipiscing sodales. Aenean et dui at erat facilisis gravida. Suspendisse nec nunc diam. Donec ornare est sed quam auctor mollis. Sed quam turpis, semper vel placerat ac, eleifend nec urna. Nam porttitor interdum velit eget adipiscing. Ut id turpis at mauris pharetra laoreet eu at nunc. p Vivamus vehicula neque et purus semper sodales. Nulla ac libero sed nunc mattis posuere vel non urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque ante vitae purus tincidunt sit amet sollicitudin neque sollicitudin. Vestibulum quis turpis libero. Duis rutrum hendrerit metus sed adipiscing. Curabitur mattis lacus ut tortor ornare tempor. Curabitur sed dolor ac ligula viverra scelerisque vel sed nulla. Suspendisse potenti. In hac habitasse platea dictumst. Vivamus ornare mi ac odio condimentum vitae euismod risus luctus. img(src='http://2.bp.blogspot.com/-7p-7akdyB88/TzWYs2UJolI/AAAAAAAAAI8/GkgkpyyAUVQ/s320/camel-deve.jpg') yazıyoruz. Burada yaptığımız ise tamamen html sayfa hazırlamak. Başka hiçbir özelliği yok. Sadece temel html ile değil, jade ile yazdık :) Sonrasında bunları da kaydettikten sonra yapmamız gereken tek şey kalıyor, projeyi çalıştırmak. Command prompt'a geri dönüyoruz ve "node app.js" yazıyoruz. Eğer yanlış birşey yapmadıysanız "Express server listening on port 3000 in development mode" demesi gerekiyor. Yani server'ımız hazır. Şimdi ise browser'ımızı açıp "localhost:3000/hakkimizda" diyip sayfamıza giriyoruz. Aşağıdaki gibi bir görüntü oluşmuşsa herşey tamamdır hayırlı olsun siteniz hazır :D Bundan sonrası artık sizin hayal gücünüze kalsın.
//////////////////////////////////////////// blog.ilkerguller.com by Ilker Guller