Handlebars, Koleksiyon ve Routing Eğitimi

Eğitim Hakkında

Handlebars derlemesi, koleksiyon-model bağlama ve hash/history tabanlı routing

Bu eğitim, istemci tarafında veri odaklı arayüzler kurmanın üç temel taşını birleştirir: Handlebars ile şablonlama, koleksiyon/model mimarisiyle veri yönetimi ve istemci tarafı yönlendirme. Handlebars ifadeleri, blok yardımcıları (each, if, unless), partial'lar ve özel helper yazımı; Backbone.Model ve Backbone.Collection ile REST uç noktalarından veri çekme, event'lerle görünümü güncelleme; Backbone.Router ve History API ile hash/pushState tabanlı rotalama ve deep-linking ele alınır. Katılımcı; şablon derleme, koleksiyon render, olay delegasyonu ve rota parametreleriyle dinamik bir tek sayfa uygulama (SPA) kurar.

Süre ve Format

3 Gün. Her gün dört modül; her modülde kısa anlatımın ardından tarayıcıda çalışan kod yazılır.

Seviye

Orta Seviye — Handlebars şablonlama, Backbone koleksiyon/model mimarisi ve istemci tarafı yönlendirme ile tek sayfa uygulama (SPA) geliştirme.

Öğrenme Metodu

Her katılımcı adım adım gerçek bir SPA kurar; şablon, koleksiyon ve router kodunu tarayıcıda canlı test eder.

Neden Bu Eğitim?

🧩Temiz Şablon

Handlebars ile HTML'i mantıktan ayırıp okunabilir, yeniden kullanılabilir şablonlar yazarsınız.

🔄Veri Bağlama

Koleksiyon event'leriyle veri değiştiğinde görünümü otomatik güncellemeyi kurarsınız.

🔗Derin Bağlantı

Router ile her ekranı adreslenebilir yaparak geri/ileri ve yer imi desteği sağlarsınız.

Anahtar Konular

handlebars eğitimijavascript şablonlamabackbone collectionistemci tarafı routingspa geliştirmefrontend eğitimihandlebars helperbackbone routertek sayfa uygulamajavascript mvc

“İyi bir arayüz şablonla temizlenir, koleksiyonla beslenir, rotayla gezilir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

JavaScript Temeli

Fonksiyon, nesne, dizi ve callback kavramlarına aşinalık beklenir.

2

HTML/CSS

DOM yapısı ve CSS seçicileri hakkında temel bilgi gerekir.

3

HTTP ve JSON

REST uç noktaları ve JSON veri biçimi hakkında genel fikir faydalıdır.

4

Geliştirme Ortamı

Modern bir tarayıcı, metin editörü ve basit bir HTTP sunucusu (ör. live-server).

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı, Handlebars ile veriyi HTML'e dönüştüren yeniden kullanılabilir şablonlar yazabilir.

Modül 1

Handlebars Temelleri

{{ifade}} ile veri bağlama ve HTML kaçışı (escaping)
{{{üçlü}}} ile kaçışsız HTML enjeksiyonu ve riskleri
Handlebars.compile ile şablonun fonksiyona derlenmesi
Context (bağlam) nesnesinin şablona geçirilmesi
Nokta gösterimiyle iç içe nesne alanlarına erişim
Derlenmiş şablonun DOM'a eklenmesi

Modül 2

Blok Yardımcıları

{{#each}} ile dizi ve koleksiyon üzerinde döngü
{{#if}} ve {{#unless}} ile koşullu render
{{else}} bloğuyla alternatif içerik
this ve @index ile döngü bağlamına erişim
@first/@last ile ilk-son öğe işaretleme
İç içe blokların bağlam davranışı

Modül 3

Partial ve İç İçe Yapı

Handlebars.registerPartial ile tekrar eden parça tanımı
{{> partialAdi}} ile partial çağırma
Partial'a özel bağlam geçirme
Liste öğesi başına partial kullanımı
Layout/içerik ayrımıyla sayfa iskeleti
Precompile ile şablonların önceden derlenmesi

Modül 4

Özel Helper

Handlebars.registerHelper ile fonksiyon yardımcısı
Tarih/para biçimlendiren helper yazımı
Blok helper ile özel kontrol yapısı oluşturma
SafeString ile güvenli HTML döndürme
Helper'a argüman ve hash parametresi geçirme
XSS'i önlemek için girdinin kaçışlanması

Günün hedefiKatılımcı, REST verisini model ve koleksiyonlarla yönetip olaylarla görünümü güncelleyebilir.

Modül 1

Model Temelleri

Backbone.Model.extend ile veri modeli tanımı
get/set ile öznitelik okuma ve yazma
defaults ile varsayılan değer atama
urlRoot ve fetch ile sunucudan tekil kayıt çekme
save ile model değişikliğinin REST'e gönderilmesi
validate ile istemci tarafı doğrulama

Modül 2

Koleksiyonlar

Backbone.Collection.extend ile model listesi tanımı
model ve url özellikleriyle koleksiyon bağlama
fetch ile sunucudan liste çekme ve parse
add/remove/reset ile koleksiyon mutasyonu
comparator ile koleksiyonun sıralanması
where ve findWhere ile öğe sorgulama

Modül 3

Olaylar ve Bağlama

on/off/trigger ile özel olay yayını
'add', 'remove', 'change', 'reset' olaylarının dinlenmesi
listenTo ile bellek sızıntısı önleyen bağlama
stopListening ile dinleyicilerin temizlenmesi
change:oznitelik ile alan bazlı tetikleme
Model olayının koleksiyona yansıması

Modül 4

View ve Render

Backbone.View ile el (element) ve şablon ilişkisi
render metodunda Handlebars şablonunun kullanımı
events hash ile DOM olay delegasyonu
Koleksiyon değişiminde listenTo ile yeniden render
Alt görünümlerle (subview) liste öğesi render
remove ile görünüm yaşam döngüsünün yönetimi

Günün hedefiKatılımcı, router ile adreslenebilir ekranlar kurarak çalışan bir tek sayfa uygulama tamamlar.

Modül 1

Router Temelleri

Backbone.Router.extend ile rota tablosu tanımı
routes nesnesiyle URL kalıbı-fonksiyon eşlemesi
Backbone.history.start ile yönlendirmenin başlatılması
Hash (#) tabanlı rotalama mantığı
pushState:true ile History API kullanımı
Varsayılan ve catch-all (*splat) rotası

Modül 2

Rota Parametreleri

:param ile dinamik segment yakalama
Çoklu parametreyle (/kullanici/:id/gonderi/:no) eşleşme
Query parametresinin ayrıştırılması
Parametreye göre model fetch ve görünüm render
Geçersiz parametrede 404 benzeri ele alma
route olayının global dinlenmesi

Modül 3

History ve Navigasyon

navigate ile programatik rota değişimi
trigger:true ile rota fonksiyonunun çalıştırılması
replace:true ile geçmişe iz bırakmadan geçiş
Tarayıcı geri/ileri düğmelerinin davranışı
Deep-link ile doğrudan ekrana yer imi
Sunucu tarafı fallback gereksiniminin anlaşılması

Modül 4

Uçtan Uca SPA

Liste ve detay ekranlarının rotalarla bağlanması
Form gönderiminde model save ve liste güncelleme
Koleksiyon render ile filtre/arama ekranı
Yükleniyor ve hata durumlarının gösterimi
Bileşenlerin modül düzeninde organize edilmesi
Uygulamanın statik sunucuda yayınlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Handlebars

İfade, blok yardımcısı ve partial ile yeniden kullanılabilir şablonlar yazarsınız.

✅

Özel Helper

registerHelper ile biçimlendirme ve blok yardımcılarını XSS güvenli üretirsiniz.

✅

Modeller

Model ile REST kayıtlarını fetch/save edip istemci tarafı doğrulama yaparsınız.

✅

Koleksiyonlar

Koleksiyonlarla liste verisini çeker, sıralar ve sorgularsınız.

✅

Olay Bağlama

listenTo ile veri değişiminde görünümü sızıntısız biçimde güncellersiniz.

✅

Görünümler

View ve olay delegasyonuyla şablonları etkileşimli arayüze dönüştürürsünüz.

✅

Routing

Router ve parametrelerle adreslenebilir, derin bağlantılı ekranlar kurarsınız.

✅

SPA Geliştirme

Şablon, koleksiyon ve router'ı birleştirerek çalışan bir tek sayfa uygulama yayınlarsınız.

Kimler İçin Uygundur?

HTML
CSS
temel JavaScript bilen; jQuery veya DOM manipülasyonundan istemci tarafı mimariye geçmek isteyen ön yüz (frontend) geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML, CSS ve temel JavaScript bilen; DOM manipülasyonundan yapısal istemci tarafı mimariye geçmek isteyen ön yüz geliştiricileri için uygundur.

Handlebars tek başına mı öğretiliyor?

Hayır; Handlebars şablonlama, koleksiyon/model veri katmanı ve istemci tarafı routing birlikte ele alınarak çalışan bir tek sayfa uygulama kurulur.

React veya Angular bilmek gerekir mi?

Gerekmez; eğitim şablon, veri ve rotalama temellerini kurar, bu kavramlar sonradan modern çerçevelere geçişi kolaylaştırır.

REST API deneyimi şart mı?

Şart değildir; HTTP ve JSON hakkında temel fikir yeterlidir, fetch ve save ile sunucu iletişimi örneklerle gösterilir.

Eğitim sonunda sertifika veriliyor mu?

Katılım ve değerlendirme sonrası Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

HANDLEBARS, COLLECTIONS, & ROUTING EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Handlebars Temelleri

Blok Yardımcıları

Partial ve İç İçe Yapı

Özel Helper

Model Temelleri

Koleksiyonlar

Olaylar ve Bağlama

View ve Render

Router Temelleri

Rota Parametreleri

History ve Navigasyon

Uçtan Uca SPA

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Junos Intermediate Routing (JIR) Eğitimi

Junos MPLS Fundamentals (JMF) Eğitimi

Managing Campus Networks with the Airwave Management Platform (MCNAA) Eğitimi

Managing Microsoft Teams: Configuring Network Settings Eğitimi

Managing Microsoft Teams: Network Planning & Configuration Eğitimi