jade etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
jade etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

19 Eylül 2013 Perşembe

NodeJS & MongoDB - Controller - View İlişkisi

Hiç yorum yok: Gönderen Unknown at Perşembe, Eylül 19, 2013 Etiketler , , , , ,

Merhaba arkadaşlar. Bugün sizlere Controller View ilişkisini anlatmaya çalışacağım. Önceki dersleri biraz hatırlayalım. 

  • Projemizde gerekli olan modelleri yarattık.
  • Bu modelleri Controller içinde kullandık
Devamı »

25 Ağustos 2013 Pazar

NodeLab: çok dedikodulu etkinlik

Hiç yorum yok: Gönderen Unknown at Pazar, Ağustos 25, 2013 Etiketler , , , , , , , , , , , , , , , , ,
*fotoğraf çekimi için ev verimsiz anı bulup salonun en boş anını yakalamışım tebrik ettim kendimi :)

 Sıcak bir cumartesi gününde yoğun bir ilgi ve katılım ile tamamladık etkinliğimizi. Katılan tüm misafirlerimize teşekkür ederiz. Etkinlikten yarım saat önce kimse gelmeyecek sanırım diyenleri şaşırtıp, salona dolup taştık.

 Başka bir salonda devam etmek zorunda kaldığımız etkinlikte;

 Öncelikle Node nedir, neden NodeJS gibi soruların üzerinde konuşuldu.
İki Farklı web uygulaması örneği üzerinde konuştuk.
İdeal proje yapısından, yaşanabilecek problemlerden bahsettik.
Bir sonraki etkinlik için notlar aldık.

 Etkinlikler hakkında dönüşleriniz için hello@nodejstr.com ve hello@gdgistanbul.com adreslerinden
@gdgistanbul, @nodejstr hesaplarından bir de +GDG Istanbul ve NodeJS Türkiye üzerinden iletişime geçebilirsiniz

Örnek Kodlar

 https://github.com/nodejstr/HangiTakim
https://github.com/nodejstr/GDGIstOcak13NodeJS
https://github.com/IkiMuhendis/GDGIstOcak13Android

 Bir sonraki etkinliğimizde görüşmek üzere

27 Temmuz 2013 Cumartesi

Jade ile Partial Rendering Ajax Çağrılarını Yönetme

Hiç yorum yok: Gönderen no at Cumartesi, Temmuz 27, 2013 Etiketler , , , , ,


Bir önceki yazımda bahsettiğim Jade ile tanımladığımız tekrar kullanılabilir yapılar sayesinde ajax işlemlerini pratik bir şekilde gerçekleştirebiliriz. Tek yapmamız gereken ajax çağrısı sonucunda güncellenecek alanı-bileşen(leri) farklı bir jade dosyası içerisinde tutmak ve kullanılan sayfalarda "include" komutuyla kullanmak.

Daha sonra yapılan ajax çağrısı sonucunda tanımladığımız partial jade dosyalarını yenilenen veriyle tekrar çalıştırıp response olarak döndürebiliriz. Dönen response oluşturulmuş html içeriği olacağından response'un boyutunu büyütecek olsada bir çok durumda işimizi kolaylaştıracaktır.

Öncelikle ajax işlemi sonucunda güncelleyeceğimiz partial jade dosyasını oluşturalım.

Yükleniyor...

Oluşturduğumuz partial dosyayı ajax çağrısı yapacağımız sayfa içerisinde include komutu ile kullanalım.

Yükleniyor...

Yapılan ajax çağrısı sonucu partial dosyanın html'ini yeni veriler tekrar oluşturup response olarak döndürüyoruz.

Yükleniyor...

Artık gelen verimizi güncellemek istediğimiz html elementinin yerine yazarak işlemimizi tamamlıyoruz.

Yükleniyor...


Ajax çağırsı ile sadece veri döndürüp client-side html yazarak güncelleme işlemlerini gerçekleştirmektense partial yapılar kullanarak ajax işlemlerini gerçekleştirmek çok daha kolay ve kullanışlı.

Örnek Kodlar:https://github.com/nodejstr/Jade-Examples

19 Temmuz 2013 Cuma

Jade ile Master Page ve Tekrar Kullanılabilir Yapılar.

Hiç yorum yok: Gönderen no at Cuma, Temmuz 19, 2013 Etiketler , , ,


Jade ile şablon yapısı yapmak, master page'ler oluşturmak sayfaları birbiri içinde tekrar kullanılabilir hale getirmek çok kolay.

Block layout yapısı ile master page tanımlaması yapmak şablonlar ve tekrar kullanılabilir sayfalar oluşturmak oldukça pratik.
Örnek olarak bir master page ve bu template'i kullanan bir sayfa düzenlemesi yapalım.
Yükleniyor...

Yukarıda tanımladığımız template dosyasında head ve content olarak iki adet block belirleyerek genel layout'u oluşturduk. Belirlediğimiz bu blockların içeriği my-layout templatini kullanan sayfalarda değiştirlebilecektir.Bunun dışında kalan özelliklerin hepsi template dosyasından gelecektir.

Şimdi bu template'i kullanan bir sayfa yazalım

Yükleniyor...

Yukarıdaki template dosyası ise daha önce oluşturduğumuz "my-layout" templatini extend edip içerisinde tanımlanan head ve content blocklarının içeriğini tekrar yazmaktadır.

Peki tüm içeriği yeniden yazmak yerine ekleme yapmak istiyorsak ne yapmalıyız. Örneğin template sayfasında yer alan css linklerine veya scriptlere sadece görüntülenen sayfada ekleme yapalım.
Yükleniyor...

 Yukarıdaki append komutu template içerisinde yer alan kodlarımızı alıp yeni kodlarımızıda ekleyerek sayfa görüntülemesini gerçekleştirilmesini sağlar. "prepend" komutu ise aynı mantıkla çalışan "append" komutunun aksine yeni tanımlanan kod blogunu template'ten gelen kod blogunun başına ekler.
include komutu ise jade içerisinde tekrar kullanılabilir yapılara imkan sağlamaktadır. Örneğin listeleme yapısını ele alalım. Bir web uygulaması içerisinde listeleme yapısı sık kullanılan farklı sayfalarda görüntülenmesi gereken bir yapıdır. Arama sonuçlarının listelenmesi kullanıcıya ait verilerin listelenmesi vb.

Örnek olarak yapacağımız yapıda sitemizde yer alan makalelerin listelenmesi, arama sonucunda makalelerin listelenmesini, kullanıcıya ait makalelerin listelenmesini tek bir listeleme sayfası ile gerçekleştirelim.

Yapmamız gereken listeleme sayfasını oluşturmak ve bu yapıyı çağıracak olan farklı sayfalarda "include" komutu ile aynı yapıyı tekrar kullanılabilir hale getirmek.

makaleListesi.jade isimli bir dosya oluşturalım
Yükleniyor...

 Daha sonra bu oluşturduğumuz yapıyı search.jade, profile.jade ve index.jade sayfalarında include komutuyla kullanalım.
Yükleniyor...

Örnek Kodlar:https://github.com/nodejstr/Jade-Examples

14 Temmuz 2013 Pazar

NodeJS & MongoDB - Proje Yapısının Ayarlanması

Hiç yorum yok: Gönderen Unknown at Pazar, Temmuz 14, 2013 Etiketler , , , , ,
Merhaba arkadaşlar, NodeJS & MongoDB derslerinin ikincisine hemen başlayalım. Bir önceki dersi şuradan inceleyebilir ya da bu dersi okumaya devam edebilirsiniz. Bu yazıda bir önceki derste kurulum ve ayarları yapılmış olan projemize biraz daha somutluk kazandıracağız.

 Önceki dersimizde package.json adında bir dosya oluşturup içinde express.js modülünün bağımlılık ayarlarını yazmıştık ve sonra npm install komutu ile express.js modülünü indirmiştik. Bu derste proje için gerekli olan dosya yapısını oluşturarak derse devam edeceğiz.

 Projenin dosya yapısı için daha önce yazdığım şu makaleye göz atabilirsiniz. 

 Projenin dosya ve klasörlerini adım adım inceleyecek olursak;
  • app.js : Projemizin ana dosyası. Ana dosyadan kastım, bütün modüllerin, modellerin, controller ların yüklenip konfigüre edildiği dosya.
  • package.json : Paket bağımlılıklarını belirten dosya.
  • public : Bu klasörde prokemizin statik dosyalarını tutacağız. Bu javascript, css, resim, ... olabilir.
  • controller : Projemizin controller larının tutulduğu klasör
  • model : Prokedeki her bir objenin modellenip saklandığı klasör. Biz bu derste örnek bir blog uygulaması yapacağız ve örnek olarak User modeli verilebilir.
  • views : Projedeki view dosyalarının tutulduğu klasör. Biz Jade ile yazdığımız dosyaları burada tutacağız.
  • lib : Burada ise, projede sıkça kullandığımız fonksiyonlara yer vereceğiz. Bu  klasördeki dosyaları helper gibi düşünebilirsiniz .
  • config : Projemizdeki ayarların tutulduğu yer. 
Dosya yapısının son aşağıdaki gibi olacaktır;


















Şimdi gelelim bu klasördeki dosyaların işlevlerine;
  • config
    • development.json : Burdaki dosya adını siz kendiniz belirleyebilirsiniz. Ama bu ismin sistemdeki ortam değişkeniyle uyuştuğuna emin olun.
  • contoller
    • SiteController.js : Projedeki temel sayfalar için tanımlanan fonksiyonların bulunduğu klasördür. Mesela; anasayfa, hakkında, iletişim gibi temel sayfaların fonksiyonları burada yer alır
    • BlogController.js : Blog ile ilgili işlem fonksiyonlarının tutulduğu controller burasıdır. Mesela; yeni blog yarat, blog görüntüle, ... gibi
    • UserController.js : Kullanıcı işlemlerinin bulunduğu controller. Mesela; kullanıcı profili görüntüle, login, logout, register, gibi fonksiyonlar örnek olabilir
  • lib
    • utils.js : Projede lazım olan helper fonksiyonları içerir. Örnek; database bağlantısı kurma, ...
    • validator.js : Model kısmında belirli validasyonlar için kullanılan fonksiyonlarını burda tanumlayabiliriz. Mesela; kullanıcı adı en az 6, en fazla 8 olabilir gibi işlemler burada tanımlanabilir.
  • models
    • User.js : Sistemde kayıtlı kullanıcıların bilgilerinin modellendiği model dosyadır ve kullanıcının temel bilgilerinin başlıklarını tutar. username, password, gibi.
    • Blog.js : Blog objesinin model bilgisini tutan dosyadır. blog başlığı, blog detayı, yaratılış tarihi gibi bilgiler bu model de belirlenir.
  • public
    • css : Projenin css dosyaları bu klasördedir
    • js : Projede kullanılan javascript dosyaları burada yer alır
    • img : Projede kullanılan resimler burada yer alır.
  • views
    • layout.jade : Projenin temel şablonu bu view dosyasında yer alır.
    • header.jade : Sayfanın başlık kısmının jade kodlarını içerir.
    • footer.jade : Sayfa altındaki copyright, link gibi objelerin yer verildiği sayfadır.
    • blog-detail.jade : Blog detay sayfasını için yazdığımız view burada yer alır.
    • blog-list.jade : Bütün blogları listelemek için jade kodlarının yer aldığı dosyadır
    • blog-new.jade : Adından da anlaşıldığı üzere yeni blog yaratmak için kullanılan view.
Proje hiyerarşik klasör yapısnı ve içindeki dosyalrın ne amaçla kullanacağımızı anlatmaya çalıştım umarım anlaşılır olmuştur.

Bir sonraki dersimizde, proje için gerekli olan ayar dosyalarını hazırlayıp modelleri oluşturacağız. Sonraki derste görüşmek üzere...

8 Temmuz 2013 Pazartesi

Jade Nedir?

Hiç yorum yok: Gönderen no at Pazartesi, Temmuz 08, 2013 Etiketler , , , ,

Jade NodeJs tarafında sıkça kullanılan, performansıyla öne çıkan bir template engine. Jade'i diğer template enginelerden ayıran en büyük özelliği performansı. Bunun yanında farklı, alışması zor ama kullanması çok pratik syntax'ı ile de dikkat çekiyor.

Kuruluım

npm install jade
komutuyla ilgili kütüphanenin kurulumu sağlanmaktadır.

Express ile birlikte kullanırken
app.set('view engine', 'jade')
yapılması jade dosyalarının işlenmesi için yeterlidir.

Jade bilenen tag açıp kapatma yapısını ortadan kaldırarak boşluk ve girintilerle okunması kolay bir şekilde yazım olanağı sağlıyor. Aşağıda jade-lang.com 'in ana sayfasında da yer alan kullanım örneğini görüyoruz.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple
         templating language with a
         strong focus on performance
         and powerful features.</p>
    </div>
  </body>
</html>
doctype 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.



Yukarıda standart html ve jade ile yazılan aynı kod blogunu görülmektedir.
Jade ile tag açıp kapatma derdinden kurtuluyoruz. Bu sayede açık kalan taglarden kaynaklı sorunlardan da kurtulmuş oluyoruz. Indentation(girinti) ile hangi elemanın hangi eleman altında yer alacağını belirliyoruz.

Bunun yanı sıra if else yapısı gibi conditional operasyonlar ve loopları jade ile çalıştırabilirsiniz.
"#" ilgili elemana id vermek için kullanılırken "." ile ilgili html elamanına eklenecek css classlarını arka arkaya ekleyebiliyoruz. Atamasını yapmamız gereken diğer attributeler içinse yukarıdaki örnekte görüldüğü gibi 
(attrName="value",attrName2="value2")
şeklinde ilgili değerlerin atamasını yapabiliyoruz.

Express ile kullanımına bakacak olursak

exports.new = function(req, res){
  res.render('posts/yeni', {
    baslik: 'Yeni Makale',
    makale: new Makale({})
  })
}

Yukarıda yer alan kod parçacığı posts klasörü altında yer alan 'yeni.jade' dosyasını gönderdiğimiz baslik ve makale parametreleriyle işleyerek oluşturduğu html'i render edilmek üzere göndermektedir.

Id Kullanımı

div#container

<div id="container"></div> olarak görüntülenecektir.

Css Class Kullanımı

div#foo.bar.baz
<div id="foo" class="bar baz"></div> olarak görüntülenecektir.

#foo
.bar

<div id="foo"></div><div class="bar"></div>

İçerik Görüntüleme
  
p merhaba!

<p>merhaba!</p>.

Parametre Kullanımı 
Jade' parametre olarak gönderdiğimiz değerleri template içerisinde #{} yapısıyla kullanıyoruz.

Örneğin gönderdiğimiz parametreler :{baslik:'Ana Sayfa',girisMesaji:'Hoşgeldiniz'} olsun.
#{baslik} #{girisMesaji} olarak jade şablonları içerisinde kullanabiliriz.Peki #{} yapısnı text olarak kullanmamız gerekiyorsa yani yazı içerisinde "#{format}" bu şekilde görüntülemek istiyorsak ne yapmalıyız. Escape mekanizması burada yardımımıza yetişiyor.

p \#{format}
<p>#{format}</p>

Bir sonraki yazıda Jade'in daha detaylı kullanım örneklerini, jade ile yapılabilecek tekrar kullanılabilir bileşenleri inceleyeceğiz.

Kaydol: Kayıtlar (Atom)