Sayfa desenlerine giriş
Sayfa desenlerine giriş
Sayfa desenlerine giriş
Aslında vibe.d ile sunucu uygulaması geliştirme maceramıza biraz hızlı başladık. Şimdiden veri tabanına bağlanmayı öğrendiniz.
Bir konuyu en iyi öğrenme yöntemlerinden bir tanesi uygulayarak öğrenmektir. Bir konuyu öğrenirken, öğrendiklerinizi başkalarına aktarmanın da bu yöntemlerden bir tanesi olduğunu düşünüyorum.
Şimdi biraz geriye dönecek olursak, bu derste sayfa desenlerini öğreneceğiz.
Bildiğiniz gibi örüt ağ üzerindeki sayfalar html ismi verilen işaretleme dili kullanır.
Örnek olarak basit bir html sayfamız olsun.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>D dili ile günlük</title>
</head>
<body>
<div id="yerlesim">
<p>Merhaba Dünya</p>
</div>
</body>
</html>
Bu sayfayı vibe.d ile kullanabilmek için sayfa deseni haline getirmemiz gerekiyor.
doctype html
html(lang='tr')
head
meta(charset='utf-8')
title D dili ile günlük
body
#yerlesim
p Merhaba Dünya
Sayfa deseninde < ve > kullanmıyoruz. Ayrıca dikkat ederseniz bir etiketi sadece bir kere yazmak yeterli oluyor. Örneğin </body> gibi bir kapatma etiketi kullanmıyoruz.
Bir etikete geçilecek ek bilgiler parantezle gösteriliyor. Buradaki html(lang='tr') şeklindeki kullanımda bunun örneğini görebilirsiniz.
Hizalama için iki karakter boşluk kullanılıyor.
<div> etiketi için hiç bir şey yazmamıza gerek olmadığını görebilirsiniz.
#yerlesim
gibi bir desenin açılımı <div id="yerlesim></div> olacaktır.
Eğer
.yerlesim
şeklinde kullansaydık açılımı <div class="yerlesim"></div> şeklinde olacaktı.
Üstte oluşturduğumuz sayfa desenini kiraz dizininde views klasörü içine index.dt uzantısı ile kaydedelim. Sayfa desenleri için *.dt dosya uzantısı kullandığımıza dikkat ediniz.
Bu sefer gene kiraz dizininde iken sunucu yazılımının kaynak kodunu bir metin düzenleyici ile açıyoruz.
$ emacs source/app.d
Kaynak kodu aşağıdaki gibi değiştiriyoruz.
import vibe.vibe;
import vibe.db.mongo.mongo;
void main()
{
auto yolAtayıcı = new URLRouter;
yolAtayıcı.get("/", staticTemplate!"index.dt");
auto ayarlar = new HTTPServerSettings;
ayarlar.port = 8080;
ayarlar.bindAddresses = ["::1", "127.0.0.1"];
listenHTTP(ayarlar, yolAtayıcı);
logInfo("Lütfen tarayıcınızla http://127.0.0.1:8080/ adresini açınız.");
runApplication();
}
Burada gene bir yol atayıcı kullandık. Ama bu sefer bir işleve değil bir tasarım desenine yönlendirme yaptık.
Uygulamayı derliyoruz.
$ dub
http://localhost:8080 adresini açtığımızda ekrana "Merhaba Dünya" yazıldığını görebilirsiniz.
Bu daha önce geliştirdiğimiz uygulamalara göre çok ilginç olmayabilir. Ama sayfa desenlerinin oldukça kullanışlı olduğunu ilerleyen bölümlerde görebilirsiniz.
Bu sayfa açıkken Araçlar -> Kaynağı görüntüle yolunu izleyerek sayfa kaynağına bakabiliriz.
Chrome tarayıcısı için bu şekilde sayfa kaynağını görüntüleyebiliyoruz. Siz de kullandığınız tarayıcıya göre sayfa kaynağına bakabilirsiniz.
Sizin de görebileceğiniz üzere oluşturduğumuz sayfa deseni tekrar html işaretleme diline çevrilmiş.
Sayfa desenleri içerisinde D değişkenleri, işlevlerini kullanmak
vibe.d kütüphanesi bize D değişkenleri ve işlevlerini sayfa tasarım deseni üzerinden çağırmamıza olanak sağlıyor.
Sadece bununla da sınırlı kalmıyor. Başka bir kaynak kütüğünden bir D işlevini çağırmamıza olanak sunuyor.
Bu bir çok ağ geliştirme çatısında bulunmayan güçlü bir özellik.
Bu örnekte app.d kütüğünde bir değişiklik yapmıyoruz.
Uygulamanın kaynak dizininde hayvan isimli bir klasör oluşturuyoruz. Bu klasörün içinde de kedi.d isimli bir kaynak kütüğü oluşturuyoruz.
$ emacs source/hayvan/kedi.d
Kaynak kütüğün içeriği şu şekilde olacak.
module hayvan.kedi;
string isim() @safe
{
return "Minnoş";
}
Bu görebileceğiniz üzere basit bir işlev. Sadece kedinin ismini döndürüyor.
Daha önce oluşturmuş olduğumuz index.dt tasarım desenini bir metin düzenleyici ile açıyoruz.
$ emacs views/index.dt
İçindeki bilgileri aşağıdaki gibi değiştiriyoruz.
- import std.string:toUpper;
- import std.random:uniform;
- import hayvan.kedi;
- string günlük = "Kiraz";
doctype html
head
title= günlük.toUpper
body
h1 Günlüğümüzün ismi #{ günlük }
|
- foreach (i; 1..4)
p Sayıyorum #{i}
|
- int enBüyük (int ilk, int ikinci)
- if (ilk > ikinci) return ilk; else return ikinci;
p 5 ve 12 sayıları arasında en büyük olan #{ enBüyük(5, 12) } 'dir.
|
- auto sayı = uniform(0, 6);
p 0 ve 5 arasında rastgele bir sayı oluşturalım : #{ sayı }
|
p Aramızda bir kedi mi dolaşıyor? #{ isim() }
|
Burada ilk gözümüze çarpan nokta - karakteri ile sayfa desenine D kodu ekleyebiliyoruz.
Eğer D kodunun sonunda ; kullanılması gerekiyorsa tasarım deseninde de kullandığımıza dikkatinizi çekmek istiyorum.
İlk satırda D'nin standart kütüphanesinden toUpper işlevini ekliyoruz. Bu bir metinin karakterlerini büyük harf yapıyor.
Sonucunu görebilmek için sayfa başlık çubuğuna bakabilirsiniz.
İkinci satırda import hayvan.kedi; ile biraz önce oluşturduğumuz kaynak kütüğünden bir işlevi çağırmak istediğimizi belirttik. İsteseydik
import hayvan.kedi:isim;
şeklinde de sadece bir işlevi kullanmak istediğimizi ifade edebilirdik.
Üçüncü satırda, daha önce öğrendiğimiz rastgele bir sayı üreten uniform işlevini kaynak koda ekledik.
Bir değişkeni, ya da bir işlevi sayfa deseni içinde kullanmak için #{ } kullanıldığını görebilirsiniz.
Son olarak | karakterleri ne işe yarıyor diye düşünebilirsiniz. Bu karakterler html etiketlerinin bir alt satıra geçmesini sağlıyor.
Ne işe yaradığını daha iyi anlamak için | karakterlerini kaldırdıktan sonra, uygulamayı derleyip sayfa kaynağına bakabilirsiniz.
$ dub
ile uygulamamızı çalıştıralım. http://localhost:8080 adresini açtığınızda şuna benzer bir ekran görebilirsiniz.
Sayfa başlığının büyük harflerle yazıldığını görebilirsiniz. Sayfayı her yenilediğinizde oluşturduğumuz rastgele sayının değiştiğini görebilirsiniz.
Yorumlar