Ö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. node_js_full_sayfalar

Ö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.

 Songitcat

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