Örnek Uygulama – Sayfalar

Örnek uygulamalarımızın servislerini yazdığımıza göre artık frontend’in ayrıntılarına girebiliriz. Ä°lk önce kullandığımız HTML Template‘i projemize adepte edeceÄŸiz. Ardından serverside rendering kullanarak sayfalarımızı oluÅŸturacağız.

Örnek Uygulama: Profile.me

1. Hazırlık
2. Modellerin oluşturulması ve MongoDB Bağlantılarının yapılması
3. Servislerin yazılması
4. Serverside rendering ile sayfaların oluşturulması

4. Sayfaların Hazırlanması

Bir önceki bölümde sistemde kayıtlı bir portfolioyu servisler üzerinden username kullanarak nasıl çekeceÄŸimizi belirtmiÅŸtim. Åžimdi ise kullandığımız HTML Template‘i üzerinden sayfalarımızı oluÅŸturacağız. Bunun için öncelikle indirip, tempalte’i, css dosyalarını ve istemci tarafındaki javascript dosyalarını projemize ekleyelim. Arıdından deÄŸiÅŸiklik yapmamız gereken yerleri düzenleyelim. Son olarakta Jade kullanarak sunucu tarafında saylarımızın nasıl render edeceÄŸimize bakalaım.

4.1 HTML Template

Öncelikle HTML Template‘in MultiPage versiyonunu indiriyoruz. Bunun için Link‘ten projeye ulaşıyoruz, ve Download Mp butonuna basarak MultiPage versiyonunu indiriyoruz. IndirdiÄŸimiz zip dosyasının içinde demoda kullanılan HTML dosyalarının yanı sıra css dosyalarının bulunduÄŸu css klasörünü, javascript dosyalarının bulunduÄŸu js klasörünü ve custom fontların bulunduÄŸunu font klasörü bulunuyor.

HTML Template‘i geliÅŸtiren adamın demosunda kullandığı HTML sayfalarını biz Jade kısmına geldiÄŸimizde, kendi Jade template’lerimizi oluÅŸturmak için kullanacağız. Bundan önce diÄŸer tüm klasörleri projemize kopyalamamız gerekiyor.

Tüm klasörleri projemize kopyalamadan önce projemizde biraz temizlik yapmamız gerekiyor. Profile.me projesinde aşağıdaki klasörlerin içeriğini siliyoruz.

• views: Bu klasörde WebStorm ile projemizi oluÅŸtururken, otomatik olarak oluÅŸan index.jade ve user.jade dosyaları bulunmakta. Åžu anda bizim için gereksiz ondan dolayı silebiliriz.
• public: Bu klasörde, istemci tarafında kullanılan dosyalar yani css, javascript ve resimler bulunuyor. Bunlarda proje ile birlikte otomatik olarak oluÅŸturulmuÅŸ. Biz HTML Template‘i örnek alıcaz ve farklı bir klasör yapısı kullanacağız. Ondan dolayı bu public klasörünün içerisindeki tüm klasör ve dosyaları kaldırıyoruz.

Projemizi temizlediÄŸimize göre kopyalama iÅŸlemine baÅŸlayabiliriz. IndidiÄŸmiz HTML Template‘i içerisinden çıkan css, js, img ve font klasörlerini Profile.me projesinin içerisindeki public klasörünün içerisine kopyalıyoruz.

4.2 Sitillerin Güncellenmesi

Kopyalama işlemi de bittiğine göre artık css dosyalarındaki bir iki ufak değişikliği yapabiliriz. Değişiklik için public/css/style.css dosyasını açıyoruz ve aşağıdaki satırları css dosyasının sonuna ekliyoruz.

style.css

style.css dosyasının sonuna eklediÄŸimiz bu kod, skills sayfasındaki bilgilerin programlanabilir olmasını saÄŸlıyor. ÖrneÄŸin siteden indrdiÄŸimiz halinde, skills sayfasındaki photoshop deÄŸeri hep %90 lık deÄŸerde gösteriliyor. Bu deÄŸiÅŸiklikle biz deÄŸeri %70’e çektiÄŸimizde renki bar otomatik olarak %70lik deÄŸer göstermeye baÅŸlayacak.

4.3 Jade

Sayfalarımızı hazırlamaya baÅŸlamadan önce biraz Jade’den bahsetmek istiyorum. Jade aslında kelimenin tam anlamıyla bir Template Engine. Yani sunucu tarafında HTML sayfaları üretmenize yarayan template’ler sunan bir sistem. Yine java ile karşılaÅŸtırmalı gidecek olursak, JSF’in Facelets’ları gibi düşünebilirsiniz. JSF‘te nasıl Facelets‘lar render edilirken, Context içerisinde ki Bean‘ler kullanılıyorsa, Jade dosyaları render edilirkende anlık olarak oluÅŸturulan context içerisinde Javasciprt nesneleri kullanılıyor.

Jade dosyalarının diğer template sağlayıcılarından en büyük farkı doğrudan XHTML gibi HTML türevi bir yazım şekli kullanmaması. HAML benzeri, boşluk ve tablara dayalı bir yazım dili kullanıyor. İlk sayfamızı geliştirdiğimizde ne demek istediğimi daha iyi anlayacağınızı düşünüyorum.

4.4 Index ve ilk Sayfa

Åžimdi ilk sayfamızı oluÅŸturalım ve Jade’in ne olduÄŸuna bakalım. Bunun için views klasörünün içerisine index.jade isminde bir dosya oluÅŸturuyoruz. İçeriÄŸini ise, indirdiÄŸimiz HTML Template‘i içerisinden çıkan Index.html’den örnek alarak aÅŸağıdaki gibi dolduruyoruz.

index.jade

Template’imizi oluÅŸturduÄŸumuza göre sırada bu template’i oluÅŸturuacak servisin yazılmasına geldi. Åžimdilik bu sayfayı http://localhost:3000/jdCruz/index.html isteÄŸi yapıldığında çağıralım. Yazacağımız servis ise bir önceki yazdığımızla hemen hemen aynı. Tek farkı JSON olarak ekrana basmak yerine index.jade template’ini render edeceÄŸiz. Render ederken de içerisine portfolio nesnesini barındıran bir context göndereceÄŸiz.

Öncelikle portfolioRoute.js dosyasına aşağıdaki metodu ekliyoruz. Bu metodu ileride kaldıracağız. Ama jade dosyası ile servis ilişkisini anlamak adına ilk başta bu şekilde yapıyoruz.

portfolioRoute.js

Şimdi ise aşağıdaki satırı app.js dosyasına ekliyoruz.

app.js

Böylelikle route tanımlamamızıda yapmış oluyoruz. Åžimdi uygulamamızı çalıştırıp http://localhost:3000/jdCruz/index.html sayfasına geldiÄŸimizde demo’da gördüğümüz sayfanın hemen hemen aynısını elde ediyoruz.

4.5 Layout ve Genel Route

Åžimdi gelin index.jade dosyası ve route’u üzerinden, uygulamamızın diÄŸer sayfalarını ve route’larını inceleyelim.

• Index
  • Jade: index.jade
  • Route: http://localhost:3000/:username/index.html
• Skills
  • Jade: skills.jade
  • Route: http://localhost:3000/:username/skills.html
• Work
  • Jade: work.jade
  • Route: http://localhost:3000/:username/work.html
• Resume
  • Jade: resume.jade
  • Route: http://localhost:3000/:username/resume.html

EÄŸer tüm sayfalarımızı index.jade dosyası gibi oluÅŸturup aynı ÅŸekilde render edersek, bu route’ları tanımlamak zorundayız. Aynı zamanda her route içinde ayrı ayrı servis fonksiyonlarını yazmamız lazım. Tabi tüm header bilgilerini ve üst menü gibi her sayfada aynı olan verileri kopyalamamız gerektiÄŸini saymıyorum bile.

Bu yaptığımız örnek bir uygulama bile olsa bu ÅŸekilde yapmamız doÄŸru deÄŸil. Bunun için öncelikle route URL bilgisini parametrik hale getireceÄŸiz. Hangi sayfanın render olacağına route URL’i üzerinden karar vereceÄŸiz. Daha sonra ise tüm sayfaları tek bir sayfadan yani layout’tan türeteceÄŸiz. Layout sayfamızı oluÅŸturacağız.

4.5.1 Tek bir Route

Eğer yukarıdaki route ve jade dosyalarının incelemesine bakacak olursanız zaten hangi kısmın parametrik hale getirileceğini anlarsınız. Bizim tek yapmamız gereken render olacak sayfa adını parametrik hale getirmek ve portfolioRoute.js ile app.js dosyalarını bu şekilde güncellemek. Kullanacağımız genel route URL bilgisi aşağıdaki gibi olacak.

• http://localhost:3000/:username/:jadeTemplate.html

Öncelikle bu parametreyi okuyacak ve hangi jade template’ini render edeceÄŸine ona göre karar verecek fonksyionu yazıyoruz. Bunun için portfolioRoute.js dosyasından index fonksiyonunu çıkartıp yerine aÅŸağıdaki fonksiyonu ekliyoruz.

portfolioRoute.js

Burada dikkat ettiyseniz render olacak parametreyi URL parametresi olarak alıyoruz. Ayrıca sayfayı render edecek context bilgisinin içerisine hangi template’in render olduÄŸu bilgisini de gönderiyorum. Bu sayede ileride layout’umu oluÅŸtururken, sayfa bazlı ufak kararlar verebileceÄŸim.

Şimdi ise app.js içerisinden index ile ilgili route bilgisini kaldırıp yerine yeni route bilgisini ekleyelim. Bununla birlikte sonra durumda app.js dosyasının içeriği aşağıdaki gibidir.

app.js

Bununla birlikte artık her yeni eklediğim jade dosyası için yeni bir route tanımlamama gerek kalmayacak. Eğer başka bir context ile render olması gereken bir sayfam olursa onun yine tanımlamam gerekecek. Uygulamanızı tekrar çalıştırıp linke gittiğinizde uygulamanızın hala sorunsuz bir şekilde çalıştığını göreceksiniz.

4.5.2 Layout

Tahmin edeceÄŸiniz gibi diÄŸer sayfaları oluÅŸturmadan önce, her sayfada tekrar edecek, header ve footer bilgilerini ayrı bir layout’a çıkarmak mantıklı olacaktır. Böylelikle sayfalarda tekrar edecek bilgileri tek bir yerden yönetebileceÄŸiz. EÄŸer daha önce web uygulaması geliÅŸtirdiyseniz zaten az çok nerelerin her sayfada yineleneceÄŸini biliyorsunuzdur. Bizim durumumuzda her sayfada, header, footer ve menu bar yinelenecek. Bizde bu bilgileri ayrı bir jade dosyasına çıkacağız.  Bunun için yine views klasörünün altına layout.jade isminde bir dosya oluÅŸturuyoruz. İçeriÄŸini ise aÅŸağıdaki gibi yapıyoruz.

layout.jade

Burada dikkatinizi çekmek istediğim bir kaç kısım olacak.

1. Her bir bilgi kendi block bilgisinin içerisine yazılmıştır. Bunun sebebi bu layout’u kullanan jade dosyalarında arzu edilirse bu bilgilerin yeniden yazılabilmesidir.
2. Bazı block tanımlamaları boş bırakılmıştır. Bu bloklardan container adındaki kısım her yeni sayfada doldurulmalıdır. Doldurulmadığı taktirde hata vermeyecektir. Fakat doldurmazsanız layout kullanmanızında çok bir mantığı kalmayacaktır.
3. Servis tarafından, URL parametresi olarak okuyup sonrasında context içerisinde gönderdiğimiz jadeTemplate parametresi burada bazı CSS bilgilerin doldurulmasında kullanılmaktadır. Menu içerisinde aktif olan sayfanın bilgisinin gösterilmesinde kullanılıyor.

Tüm bu bilgileri aldıktan sonra, index.jade dosyamızı ise aşağıdaki şekilde güncelliyoruz.

index.jade

Gördüğünüz gibi index.jade dosyamız gayet ufaldı ve okunabilecek, değiştirilebilecek hale geldi. Şimdi uygulamamızı tekrar başlattığımızda index.jade dosyasının başarılı bir şekilde render olduğunu göreceğiz. Fakat diğer sayfalara gitmeye çalıştığınızda uygulamız hata verecektir. Bu sebpten diğer sayfaları tanımlamaya başlayabiliriz.

4.6 Diger Sayfalar

Şimdi diğer sayfaları oluşturmaya başlayabiliriz. İlk önce skills sayfasından başlayalım.

4.6.1 Skills

Yine views klasörümüzün altına skills.jade isminde dosyamızı oluşturuyoruz. Bu dosyamızın içeriğinide aşağıdaki gibi değiştiriyoruz.

skills.jade

Bura da dikkatinizi çekmek istediğim kısımlar şu şekilde

• Örnek HTML template’imizi düşünecek olursak, tüm yetenekleri tek tek yazmamız gerekirdi. Fakat yetenek sayımız belirli olmadığından bunun bir döngü içerisinde yapılmasında fayda var. SaÄŸolsun jade bize bu döngü mekanizmasını da saÄŸlıyor.
• Daha projemizi oluÅŸtururken eklediÄŸimiz stilleri burada kullanıyoruz. EÄŸer o sitiller olmasa, yüzde olarak verdiÄŸimiz bilgi düzeyi ile bar arasında bir uyuÅŸmazlık yaÅŸanıyor.

Uygulamızı tekrar başlattığımızda http://localhost:3000/jdCruz/skills.html sayfası üzerinden testlerimizi gerçekleştiriyoruz.

4.6.2 Work

Work sayfamızın mantığıda skills sayfasınınkiyle hemen hemen aynı. Views klasörünün altına work.jade isimli bir dosya yaratıyoruz ve içeriğini aşağıdaki gibi yapıyoruz.

work.jade

Burada normal container bloÄŸu haricinde ek javascript’lerin yazıldığı additionaljs bloÄŸuda yazılıyor. Bu sayfada açılacak modal panel’ler için bu javascript kod parçası gerekli.

4.6.3 Resume

Son sayfamızıda yapıp projemizi sonlandırıyoruz. resume.jade dosyamızı oluşturup içeriğini aşağıdaki gibi ayarlıyoruz.

 Son

Uygulamamızın sonuna geldik. Veritabanına yeni yeni kullanıcılar kaydedip testlerinizi sürdürebilirsiniz. Uygulamanın bir kopyasını indirmek için aşağıdaki git adresini kullanabilirsiniz.

Git: https://github.com/bhdrkn/nodejs-examples/tree/master/node-js-profile

End Of Line