Bu yazıya girmeden önce daha önceki yazılarımı da okumanızı tavsiye ederim. Node.js nedir?, Express Modülü ve Router Nedir? makalelerim konuyu anlamanıza yardımcı olacaktır.
Ejs, html şablonlarıyla, servis tarafımızdan gelen verileri birleştirebilmemizi sağlayan javascript kütüphanesidir.
Projenizin terminaline aşağıdaki satırı yazarak ejs frameworkünü indirebilirsiniz.
npm install ejs --save
Birde ejs layout var. Bildiğiniz gibi sitelerde header ve footer kısmı bütün sayfalarda aynıdır, ortadaki içerik değişkendir. Bu durumda header ve footer için olan kodları her site için tekrar tekrar yapıştırmak gerekir. Bu da kod kirliliğine yol açar. Ejs layout ile sitenin ana iskeletini yani layout.ejs’yi yazarız ve ortasında <%-body%> isimli bir yer bırakarız. İşte buraya hangi sayfadaysak o sayfanın kodlarını renderlayabiliriz. Böylece layout.ejs’deki kodları tekrar ve tekrar yazmamıza gerek kalmaz. Ejs layout aşağıdaki gibi indirilebilir.
npm install express-ejs-layout --save
Ejs kodlarını yazarken,kodları renklendirmek için visual studio code’ta extensionlar sekmesine ejs yazarak language supportu indirmeniz gerekmektedir. Bunu da unutmayalım :)
Şimdi ejs ve ejs layout’tu kullanmak için app.js dosyamıza aşağıdaki kodları eklemeliyiz. Ben dosyalarımı daha okunaklı olsun diye app_server klasörü altında controller, models, routers ve views diye sınıflandırdım. Views klasörü altında artık yazacağım ejs dosyaları yer alacak. app.js’de de ilk önce app.ser(‘view engine’, ‘ejs’) ile kullanılacak görüntü motorunu belirttik, ardındanda app.set(‘views’,’./app_server/views’); ile görüntülerin bulunacağı motoru belirttik.
Bir de express-ejs-layouts kütüphanesini import ederek app.use(ejsLayouts) ile bunu kullanacağımızı belirttik.
Şimdi ilk olarak views klasörü altında layout.ejs dosyamızı oluşturalım. Burada h1 etiketleri arasındaki header ve footer’a bootstrap import ederek hazır templateler kullanabilirsiniz. Bootstrap hakkında detaylı bilgi için Bootstrap Nedir? ya da Bootstrap İleri Özellikler yazıma göz atabilirsiniz.
Ben sembolik olarak h1 etiketleri arasında belirttim. <%-body%> ise sayfanın değişken olan içeriği. Buraya farklı ejs dosyalarını renderlatacağız.
Şimdi bir de <%-body %> kısmına renderlayabileceğimiz iki dosya hazırlayalım. Biri index.ejs olsun diğeri ise login.ejs olsun. Aşağıda görüldüğü gibi bunlarda <html> ve <body> etiketi koymuyoruz.
Şimdi controllerlarımıza göz atalım. Controllerda res.render denilerek ejs uzantılı dosyanın sadece ismi verilir. Burada layout.ejs içerisinde body kısmına hangi dosyanının renderlanacağı bilgisi giriliyor.
Şimdi routerlarımızı inceleyelim. Routerlar içerisinde express modülü ve ardından express modülünün Router sınıfı çağrılır. Birde ilgili controllerımız çağrılır. Ardından router.get ile uzantıya göre controller bilgisi verilir. Module.exports ile başka sayfada kullanılabilir hala getirilir.
Route manager ile routerlarımız bu sayfaya require ile çağrılır ve app.use ile uzantıya göre hangi router kullanıcağı bilgisi girilir.
Şimdi son olarak app.js dosyasına bakalım. app.js dosyasında express’i çağırıyoruz. Ardından express-ejs-layouts’u çağırıyoruz. Görüntü moturunu ejs olarak alıp, ejs dosyalarının nerede olduğunu bildiriyoruz.
Son olarak routermanager’a app’i atarak yönlendirme yapmasını istiyoruz.
localhost üzerinden sayfamızı incelediğimizde header ve footer’ın her seferinde gelip, url’ye göre aradaki yazıların değiştiğini gözlemleyebiliriz.
Ejs formatında değinmek istediğim sonra bir konu daha var. Biz controller içeirsinde değişkenlere bilgi girip, bu bilgiye ejs formatında =mesaj şeklinde erişip ekrana yazdırabiliriz.
Yine aynı şekilde örneğin bir diziyi kisiler değişkenine controllerda atadık. Bu dizideki verileri for döngüsü ile ekrana aşağıdaki gibi yazdırabiliriz.
Okuduğunuz için teşekkür ederim. Beğendiyseniz alkışlamayı unutmayın :)
