Rails 7 Denemeler 2

<-- Önceki Sonraki -->

https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html

İçindekiler +

 Selam Rails 7 ile denemelerimize devam ediyoruz. 

Statik Sayfalar

Bu seferki uygulamamızda biraz daha gelişmiş ve bundan sonraki uygulamalarımıza temel teşkil edecek bir uygulama planlıyoruz. Burada veri tabanına bağlı olmayan statik web sayfaları yapacağız. Statik web sayfalarını Rails yöntemiyle yapmak , bize Rails işleyişini anlamak için çok yararlı olacaktır. 

Rails, veri tabanına dayalı web siteleri yapmak için geliştirilse bile , her uygulamanın statik sayfalara ihtiyacı vardır .Rails ile geliştirilen statik sayfalar ise her ne kadar statik dense de kolayca içlerine dinamik davranışlar eklenebilir. Bu uygulama da ayrıca otomatik testler için de bir giriş yapacağız. 

yeni_app adında bir Rails uygulaması üretelim

Uygulamamızın iskeletini oluşturalım.

$ cd ~/rails7

$ rails _7.2.2_ new yeni_app --skip-bundle

Gemfile içinde rails versiyonunu sabitleyelim.

gem "rails", "7.2.2"

Şimdi bundler çalıştırıp gemleri yükleyebiliriz. 

$ cd ~/rails7/yeni_app

$ bundle install

Uygulamamızın server'ını çalıştırıp default Rails başlangıç sayfasını http://[::1]:3000/ ya da http://localhost:3000/ sayfasında görelim. 

$ rails server

Default başlangıç sayfasını gördüysek devam edebiliriz. Önceki uygulamalarımızda da yaptığımız merhaba eylem tanımlamasını burada da yaparak değişikliklerimizin sağlıklı çalıştığını da test edelim.

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base

  allow_browser versions: :modern

  def merhaba

    render html: "Merhaba Dünya!"

  end

end

config/routes.rb

Rails.application.routes.draw do

 .....

  # Defines the root path route ("/")

  root "application#merhaba"

end

Artık http://localhost:3000/ sayfasında Merhaba Dünya! mesajımızı görüyor olmalıyız.

Statik sayfalar

Bu kısımda Rails eylemleri ve kontrolörleri kullanarak statik HTML sayfaları oluşturacağız. Rails eylemleri kontrolörler ( MVC'nin C'si ) içinde tanımlanır. Bu kısımda çoğunlukla  app/controllers ve app/views klasörlerinde çalışacağız. 

Sayfaları Rails'e ürettirmek

Statik sayfaları scaffold işleminde kullandığımız rails generate komutu yardımı ile oluşturtacağız. Statik sayfalarımızı bir kontrolör içinde toplayacağız, bu amaçla StaticPages adında bir kontrolör planlıyoruz (standart CamelCase Ruby sınıf adı kuralı). Ana sayfamız home , hakkında sayfamız about ve yardım sayfamız help ise kontrolör içinde istediğimiz eylemler. Şimdilik Rails'e sadece home ve help eylemlerini Rails'e ürettireceğiz, about eylemini sonradan kendimiz ekleyerek , onun da nasıl yapılacağını göreceğiz. 

Uygulama dizinimizde şu komutu girelim.

$ rails generate controller StaticPages home help

Bu arada belirtelim rails generate komutunu kısaca rails g olarak yazabiliriz, diğer kısaltmalar şunlar

Tam komut           Kısaltması

------------------------------

rails server        rails s

rails generate      rails g

rails console       rails c

rails test          rails t

bundle install      bundle

Kontrolörümüz ve eylemlerimiz app/controllers/ dizininde üretilmiş olmalıdır. Kontrolör sınıfımız StaticPagesController adında ve odsya ismi ise CamelCase olan sınıf adının snake_case olan versiyonu static_pages_controller.rb.

class StaticPagesController < ApplicationController

  def home

  end

  def help

  end

end

Yapılanı geri almak

Ola ki bir typo hatası falan yaptık, Rails'in otomatik yaptığı işlemleri nasıl geri alacağız? Ben eski kafalı olarak sürekli uygulama klasörü ve veri tabanı yedeklemeyi tercih ederim. Ancak Rails yapılanları geri almak için yöntem sunuyor. 

$ rails generate controller StaticPages home help

# geri almak için

$ rails destroy controller StaticPages home help

-----------------------

$ rails generate model User name:string email:string

# geri almak için

$ rails destroy model User

-----------------------

$ rails db:migrate

# geri almak için

$ rails db:rollback

# en başa dönmek için

$ rails db:migrate VERSION=0

Neyse uygulamamıza geri dönelim. config/routes.rb dosyasına yeni eylemlerimizin yönlendirmeleri otomatik eklenmiş olmalıdır.

Rails.application.routes.draw do

  get "static_pages/home"

  get "static_pages/help"

.......

get "static_pages/home" satırı tarayıcıdan /static_pages/home adresine yapılan isteği static_pages_controller kontrolörü home  eylemine yönlendirir. Bir ayrıntı daha var, get ifadesi kullanılması HTTP istek tipinin GET olması gerektiğini (yani normal sayfa okuma isteği) de bildiriyor.  O zaman sayfalar da mevcuttur. Server'ı çalıştırıp http://localhost:3000/static_pages/home adresine gidersek home eylemine karşı Rails'in hazırladığı görseli görebiliriz. 

Mesaja görsel dosyasının yerini de yazmış , app/views/static_pages/home.html.erb dosyası. 

Öncelikle kontrolör dosyamıza bir bakalım. Normal Ruby işleyişine bakarsak orada tanımlı home ve help metodları hiçbir şey yapmıyor, ama Rails için bu metodların orada olması o eylemlere karşı gelen görseller de olabileceğini ifade eder. Eğer metod içinde bir görsel yayınlamasına ait kod yoksa Rails bu eylemlere yapılan isteklerde otomatik olarak mesela home eylemi için home.html.erb şablonu ile oluşturulan HTML sayfayı cevap olarak tarayıcıya döner. app/views/static_pages/ dizininde ik görsel için şablon dosyası bulunuyor.

help.html.erb

<h1>StaticPages#help</h1>

<p>Find me in app/views/static_pages/help.html.erb</p>

home.html.erb

<h1>StaticPages#home</h1>

<p>Find me in app/views/static_pages/home.html.erb</p>

Statik sayfalarımızı düzenlemek

Şu anda görsel dosyalarımız standart HTML kodlarında birer sayfa. Bunları isteğimize göre değiştirebiliriz. Örnek olarak şunları yapabiliriz.

home.html.erb

<h1>Yeni Uygulama</h1>

<p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

Sayfamızı tarayıcıda açarsak

help.html.erb

<h1>Yardım Sayfası</h1>

<p>

  Bu uygulamanın nasıl yapıldığı

  <a href="https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html">

  Boş Gezenin Boş Kalfası</a>

  bloğunda anlatılıyor.

</p>

Rails testleri

Testler sayesinde Rails uygulamamızda değişiklikler yaptıkça , hala uygulama amaçlarımıza uygun çalışmaya devam ediyor mu? sorusunu otomatik cevaplamak için yapılır. Buradaki gibi 2 sayfası , 3-5 verisi olan bir uygulama için test işlemi bir şey ifade etmeyebilir, her değişiklikten sonra olasılıkları tek tek kendimiz deneyebiliriz. Ancak uygulama büyüdükçe tüm fonksiyonlar hala çalışıyormu denemek için çok fazla vakit harcamak gerekir. ve insan doğası olarak bir şeyleri atlayabiliriz. 

Testler temelde kontrolörler ve modellerin işleyişlerini kontrol etmek için yapılır. Başlangıç olarak kontrolörlerin testi daha basit olmaları sebebiyle iyi bir nokta. 

İlk test kodumuz

Test Driven Development ( TDD ) adı verilen bir yazılım geliştirme tekniği varmış. Yazılımcı önce test kodunu yazıyor sonra uygulamayı testlerden geçecek hale getiriyor. Bunu bir örnekle görmek için about eylemini kullanacağız. Hatırlarsak StaricPages kontrolörü ve eylemleri rails generate komutu ile üretirken Hakkında sayfası about eylemini kasıtlı olarak sonraya bırakmıştık. Öncelikle şu anda uygulamamızda mevcut kontrolör ve eylemlerin testinin nasıl yapıldığını görelim. 

 rails generate komutunun kontrolörler için oluşturduğu test rutinleri test/controllers/ dizininde bulunuyor. Statik sayfalarımızın test kodunu açalım

static_pages_controller_test.rb

require "test_helper"

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do

    get static_pages_home_url

    assert_response :success

  end

  test "should get help" do

    get static_pages_help_url

    assert_response :success

  end

end

Rails'in test metodu argümanında test amacını açıklayan bir string ve test için işlenecek bir kod bloğu alıyor. Sayfaya bir GET çağrısı yapılıyor ve assert_response metodu server'ın çağrıya :success (yani status kodu 200) dönmesini bekliyor, eğer olmazsa test hata verir. static_pages_home_url argümanını Rails otomatik olarak /static_pages/home url adresine çevirir. 

Şimdi uygulamamızı test edelim

$ rails test

Running 2 tests in a single process (parallelization threshold is 50)

Run options: --seed 14678

# Running:

..

Finished in 2.341251s, 0.8542 runs/s, 0.8542 assertions/s.

2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

Sonunda diyor ki 2 test çalıştırdım, 2 beklenti vardı, 0 hata, 0 error. Yani test başarılı. Testlerimiz kodlarda belirtilen kriterleri karşıladı. 

Reddedilen test

TDD kurallarına göre öncelikle reddedilen testler yazacağız, sonra da kodumuzu testten geçecek şekilde elden geçireceğiz. Bazı sistemlerde testten geçince sonuç yeşil, geçmeyince kırmızı renkli yazılarla ifade edildiği için bu işlem sırasına red-green-refactor adı da veriliyor. 

Amacımız "Hakkında" sayfamız about eylemi için reddedilen bir test yazmak. Bunu yapmak için diğer statik sayfa eylemlerimiz için otomatik yazılan kodun bir eşleniğini about eylemi için yazmak. 

static_pages_controller_test.rb

require "test_helper"

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do

    get static_pages_home_url

    assert_response :success

  end

  test "should get help" do

    get static_pages_help_url

    assert_response :success

  end

  test "should get about" do

    get static_pages_about_url

    assert_response :success

  end

end

Beklendiği üzere Rails test çalıştırınca başarısız olacaktır.

$ rails test

Error:

StaticPagesControllerTest#test_should_get_about:

NameError: undefined local variable or method `static_pages_about_url

...

Finished in 1.606637s, 1.8673 runs/s, 1.2448 assertions/s.

3 runs, 2 assertions, 0 failures, 1 errors, 0 skips

Yazanların bir kısmını kaldırdım, ama bu kadarına bakarsak test_should_get_about test işleminde static_pages_about_url nesnesini bulamadığını belirten bir hata veriyor. Şimdi kodumuzu düzenlemeye başlayalım.

Kabul edilen test

İlk olarak hata mesajındaki yönlendirme url değerini bulamamasından başlayalım. Biliyoruz ki yönlendirmeler config/routes.rb dosyasında. Bu dosya içine about sayfası için ilavemizi yapalım. 

Rails.application.routes.draw do

  get "static_pages/home"

  get "static_pages/help"

  get "static_pages/about"

....

Şimdi testi bir daha çalıştıralım.

$ rails test

Failure:

Expected response to be a <2XX: success>, but was a <404: Not Found>

Finished in 0.891882s, 3.3637 runs/s, 3.3637 assertions/s.

3 runs, 3 assertions, 1 failures, 0 errors, 0 skips

Bu sefer server'a adres sorulmuş fakat beklenen HTTPresponse kodu olan 200: success yerine server'dan 404: Not Found kodu dönmüş. Aslında server çalıştırıp http://localhost:3000/static_pages/about sayfasını açmaya kalkarsak bize daha net bir bilgi veriyor.

 Yani kontrolör istek yapılan eylem hakkında bilgiye sahip değil. Kontrolörümüz app/controllers/static_pages_controller.rb dosyası ve burada about eylemini kontrolörümüze eklememiz gerekiyor. 

class StaticPagesController < ApplicationController

  def home

  end

  def help

  end

  def about

  end

end

Hemen testi tekrar çalıştıralım.

$ rails test

Failure:

... to be a <2XX: success>, but was a <406: Not Acceptable>

Bu sefer de server 406: Not Acceptable durum kodu döndü. Neler olduğunu anlamak için server çalıştırırsak. 

Server da diyor ki "görsel şablonun yok". Default olarak görsel şablonu aradığı dosya adını da server mesajında görüyoruz. app/views/static_pages/ dizinindeki diğer görsellerden mesela home.html.erb dosyasının bir kopyasını about.html.erb adıyla oluşturalım ve içini düzenleyelim.

<h1>Hakkımda</h1>

<p>Ben <a href="#">Ümit Kayacık</a></p>

<p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyorum</p>

Test çalıştırırsak başarılı olacaktır. Artık uygulamamız about eylemine de sağlıklı cevap veriyor. 

Kodu düzenleme

Sıra geldi red-green-refactor sıralamasındaki refactor , yani kodumuzu düzenleme kısmına. Uygulamalar geliştikçe kodlarımız , dosya yapımız vs. karmaşıklaşmaya başlar. Bu durum Ruby yorumlayıcıyı ilgilendirmez, ancak kodu kullanmaya ve geliştirmeye devam edecek olanlar, yani yazılımcılar için önemli bir konu. Sürekli tekrarlanan kodları fonksiyonlara toplamak, aslında olması gereken dosyadan başka bir dosyada olan kodu yerine taşımak, kodun görsel olarak daha anlaşılabilir olmasını sağlamak vs işlemler refactoring işlemleridir ve uygulama geliştirirken düzenli olarak yapılması gerekir. 

Uygulama geliştirirken arada nefes almak için durduğumuzda kendimize "şimdi neler yaptım?" sorusunu bir sorup eğer yakınımızda bizi kafayı yemekle suçlayacak biri yoksa yüksek sesle kendimizi cevaplamamız gerekir. Nasıl bir düzenleme yapılabilir, bu değişkenin adını doğru mu verdim, bu kod parçasını şu dosyaya taşısam daha iyi değil mi gibi sorular ile kendimizi motive ettiğimiz gibi , eğer yanlış bile yapsak kendimizi daha geliştirmiş oluruz. 

Azıcık dinamik sayfalar

Bazı statik sayfalar için gereken eylemleri ve görselleri uygulamamıza ekledik. Şimdi sayfalarımıza içeriğini anlatan başlık etiketine sahip olması için biraz dinamik içerik ekleyeceğiz. Sayfalarımız her ne kadar statik olsa da Rails onların dosyalarını dinamik içerik eklemeye müsait olarak oluşturdu. 

Planımız home, help ve about sayfalarını düzenleyerek her sayfanın başlık etiketini <title> tag'inin içeriğini kontrol ederek dinamik hale getirmek. Birçok tarayıcı title tag içeriğindeki yazıyı sekme etiketinde gösterir. Amacımıza ulaşmak için yine TDD tekniği ile red-green-refactor işlem zincirinde ilerleyeceğiz. Önce sayfalarımızın etiketlerini kontrol eden ve olumsuz dönen bir test yazacağız, sonra her sayfaya etiket ekleyip testin olumlu sonuç vermesini sağlayacağız, en son da tekrarlanan kodları uygulamamız yerleşim dosyası içinde birleştirip kod düzenlemesi (refactor) yapacağız. 

Bu işlemler sonucunda sayfa etiketlerimiz <sayfa etiketi> | Yeni App şeklinde olacak. Etiketin ilk parçası sayfa içeriğini anlatıyor.

Sayfa       URL                   Ana Etiket  Değişken Etiket

-------------------------------------------------------------

Ana Sayfa   /static_pages/home    Yeni App    Ana Sayfa

Yardım      /static_pages/help    Yeni App    Yardım

Hakkımızda  /static_pages/about   Yeni App    Hakkımızda

Rails new komutu ile uygulamamızı oluştururken Rails uygulamamız için default bir layout (yerleşim) dosyası oluşturdu. Bunu app/views/layouts/application.html.erb dosyasında görebiliriz. 

Şimdilik bu yerleşimi kullanmamak için dosyanın geçici olarak adını değiştirelim.

$ mv app/views/layouts/application.html.erb app/views/layouts/layout_file

# geçici isim değiştirme

isterseniz kod editörünüz açıksa dosya adını orada da değiştirebilirsiniz. Bu isim değiştirme işini gerçek uygulamalarda yapmayız, ama burada amacımız yerleşim dosyasının ne işe yarayacağını da öğrenmek. 

Reddedilen test

Sayfa etiketlerini anlamak için bir HTML dosyasının temel yapısına bakalım.

<!DOCTYPE html>

<html>

  <head>

    <title>Selamlam</title>

  </head>

  <body>

    <p>Merhaba Dünya!</p>

  </body>

</html>

Burada <title> tag içeriğindeki Selamlama yazısı tarayıcıda sekme etiketinde yazılacak değerdir. 

Reddedilen testlerimiz için testlerimizde her sayfaya yapılan get çağrılarımızda bir beklenti daha ekleyeceğiz. Bunu assert_select metodu ile yapacağız, bu metod gelen HTML cevap içinde verilen isimdeki tag'i bulur ve verilen değerle içeriğinin eşit olmasını bekler. 

    assert_select "title", "Ana Sayfa | Yeni App"

Tüm sayfalarımız için bu test ilavesini test/controllers/static_pages_controller_test.rb dosyasına yapalım.

require "test_helper"

class StaticPagesControllerTest < ActionDispatch::IntegrationTest

  test "should get home" do

    get static_pages_home_url

    assert_response :success

    assert_select "title", "Ana Sayfa | Yeni App"

  end

  test "should get help" do

    get static_pages_help_url

    assert_response :success

    assert_select "title", "Yardım | Yeni App"

  end

  test "should get about" do

    get static_pages_about_url

    assert_response :success

    assert_select "title", "Hakkımızda | Yeni App"

  end

end

Şimdi test çalıştıralım bakalım.

$ rails t

.....

Failure:

Expected at least 1 element matching "title", found 0.

Expected 0 to be >= 1.

.......

3 runs, 6 assertions, 3 failures, 0 errors, 0 skips

Mesajlarda server'dan dönen HTML kod içinde "title" adında bir eleman bulunamadığı belirtiliyor. Haydi bu etiketleri görsellere ekleyelim.

Olumlu dönen test

Görsel dosyalarımızı yukarıda verdiğimiz temel HTML sayfa düzeninde olacak şekilde düzenleyelim.

home.html.erb

<!DOCTYPE html>

<html>

  <head>

    <title>Ana Sayfa | Yeni App</title>

  </head>

  <body>

    <h1>Yeni Uygulama</h1>

    <p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

  </body>

</html>

help.html.erb

<!DOCTYPE html>

<html>

  <head>

    <title>Yardım | Yeni App</title>

  </head>

  <body>

    <h1>Yardım Sayfası</h1>

    <p>

      Bu uygulamanın nasıl yapıldığı

      <a href="https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html">

      Boş Gezenin Boş Kalfası</a>

      bloğunda anlatılıyor.

    </p>

  </body>

</html>

about.html.erb

<!DOCTYPE html>

<html>

  <head>

    <title>Hakkımızda | Yeni App</title>

  </head>

  <body>

    <h1>Hakkımda</h1>

    <p>Ben <a href="#">Ümit Kayacık</a></p>

    <p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyorum</p>

  </body>

</html>

Şimdi testimiz başarılı olur.

$ rails t

...

Finished in 0.220451s, 13.6085 runs/s, 27.2170 assertions/s.

3 runs, 6 assertions, 0 failures, 0 errors, 0 skips

Sayfa etiketlerimizi server'ı çalıştırıp tarayıcımızda da görebiliriz.

Yerleşim dosyaları ve gömülü Ruby kodları

Bu uygulamada çok şeyler öğrendik. Ama geldiğimiz noktada can sıkıcı bazı şeyler var.

• Sayfa etiketleri neredeyse aynı (çok az farkları var) 
• Tüm etiketlerde " | Yeni App" yazısı ortak
• Her görselde tüm HTML sayfa temel yapısı tekrarlanmış

Sürekli tekrarlanan kodlar Ruby (ve aslında tüm diğer programlama dillerinin) “Don’t Repeat Yourself”(DRY) ilkesine aykırı. Tekrarlamaları düzenleyerek , we’ll "DRY out our code". Düzenlemelerimiz sonrası tekrar test çalıştırarak düzenlemelerimizin uygulama davranışını etkilemediğini kontrol edeceğiz. 

Paradoksal olarak tekrarlamaları önlemek için atacağımız ilk adımda biraz daha kod ekleyeceğiz, sonra sadeleştireceğiz. 

Görsel dosyalarımızın uzantıları .html.erb yani bu dosyalar embedded ruby kodu içerebilir (gömülü Ruby kodu). Bu kodlama yardımıyla <title> tag içeriğinde değişken olan etiket kısmını bir Ruby değişkenine bağlayabiliriz. 

Örneğin home.html.erb dosyasındaki "Ana Sayfa" değerini bir değişkene bağlayalım.

<!DOCTYPE html>

<html>

  <head>

    <title><%= yield(:title) %> | Yeni App</title>

  </head>

  <body>

    <h1>Yeni Uygulama</h1>

    <p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

  </body>

</html>

Burada <%= ve %> arasında kalan kısım Rails tarafından bir Ruby kodu olarak değerlendirilir. Bu yapıya birazdan değiniriz, şimdilik içindeki koda bakalım. yield(:title) tam o bulunduğu yere :title nesnesini getirir. Peki :title nesnesi değerini nerede vereceğiz? Onu da dosyanın ilk satırında yapabiliriz.

<% provide(:title, "Ana Sayfa") %>

<!DOCTYPE html>

<html>

  <head>

    <title><%= yield(:title) %> | Yeni App</title>

  </head>

  <body>

    <h1>Yeni Uygulama</h1>

    <p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

  </body>

</html>

Kısa bir bilgi , bu sefer gömülü Ruby kodumuzu <% ile başlattık az evvelki <%= ile başlıyordu. Sadece <% ile başlarsa blok içindeki kod çalıştırılır ama çıktısı olmaz, <%= ile başlarsa blok içindeki kod çalıştırılır, oluşan değer o noktaya yazılır. provide metodu ile anlatılmak istenen, bundan sonra :title gördüğün yerde "Ana Sayfa" anlayacaksın. Şimdi sayfamızı yeniler ya da test yaparsak bir şey değişmediğini hala etiketin doğru yazıldığını görürüz. Diğer iki görsele de bu gömülü Ruby kodlarını ekleyelim. 

help.html.erb

<% provide(:title, "Yardım") %>

<!DOCTYPE html>

<html>

  <head>

    <title><%= yield(:title) %> | Yeni App</title>

  </head>

  <body>

    <h1>Yardım Sayfası</h1>

    <p>

      Bu uygulamanın nasıl yapıldığı

      <a href="https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html">

      Boş Gezenin Boş Kalfası</a>

      bloğunda anlatılıyor.

    </p>

  </body>

</html>

ve

about.html.erb

<% provide(:title, "Hakkımızda") %>

<!DOCTYPE html>

<html>

  <head>

    <title><%= yield(:title) %> | Yeni App</title>

  </head>

  <body>

    <h1>Hakkımda</h1>

    <p>Ben <a href="#">Ümit Kayacık</a></p>

    <p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyorum</p>

  </body>

</html>

Test çalıştırırsak hala etiketlerimizin sorunsuz geldiğini ve testlerden geçtiğini görürüz. 

Görsel kodlarına ilave yaptık ama bir düzenleme sonucu olarak artık tüm görsellerimizde ortak olan bir temel HTML yapısı var.

<% provide(:title, "Sayfa Etiketi") %>

<!DOCTYPE html>

<html>

  <head>

    <title><%= yield(:title) %> | Yeni App</title>

  </head>

  <body>

    Sayfa içeriği

  </body>

</html>

Şimdi geri dönelim ve daha önce layout_file olarak adını değiştirdiğimiz dosyanın adını tekrar application.html.erb olarak değiştirelim ve dosyayı editörümüzde açalım. 

<!DOCTYPE html>

<html>

  <head>

    <title><%= content_for(:title) || "Yeni App" %></title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <%= csrf_meta_tags %>

    <%= csp_meta_tag %>

    <%= yield :head %>

    <link rel="manifest" href="/manifest.json">

    <link rel="icon" href="/icon.png" type="image/png">

    <link rel="icon" href="/icon.svg" type="image/svg+xml">

    <link rel="apple-touch-icon" href="/icon.png">

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

  </head>

  <body>

    <%= yield %>

  </body>

</html>

Bizim tüm görsellerde ortak dediğimiz HTML iskeleti koduna oldukça benziyor değil mi? (özellikle title tag düşünüldüğünde). Bu kodda sadece <title> tag satırını az önce gördüğümüz şekilde  

    <title><%= yield(:title) %> | Yeni App</title>

olarak değiştirip kaydedelim. Kodun geri kalanında bizim görsellerimizde yaptıklarımızdan farklı olan ilave satırları şimdilik dikkate almayın, daha sonra görürüz ne işler yaptıklarını.

application.html.erb dosyasını tüm görseller ortak yerleşim dosyası olarak kullanır. Bu dosya içinde kilit bir kod var. 

  <body>

    <%= yield %>

  </body>

HTML sayfanın <body> içeriğine denk gelen kısmı <%= yield %> Ruby kodu sayesinde hangi görsel açılıyorsa onda yazılı olanları alır ve tam oraya yazar. Şimdi bu yerleşim tüm görsellerde ortak kullanılacağına göre görsellerimizde kısaltma yapabiliriz. 

home.html.erb

<% provide(:title, "Ana Sayfa") %>

<h1>Yeni Uygulama</h1>

<p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

help.html.erb

<% provide(:title, "Yardım") %>

<h1>Yardım Sayfası</h1>

<p>

  Bu uygulamanın nasıl yapıldığı

  <a href="https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html">

  Boş Gezenin Boş Kalfası</a>

  bloğunda anlatılıyor.

</p>

about.html.erb

<% provide(:title, "Hakkımızda") %>

<h1>Hakkımda</h1>

<p>Ben <a href="#">Ümit Kayacık</a></p>

<p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyorum</p>

Testlerimiz hala olumlu sonuç dönüyor ve server'ı çalıştırıp bakarsak sayfalarımız hala düzgün etiketlerle geliyor. Mesela http://localhost:3000/static_pages/home sayfasını tarayıcımızda açalım ve sayfaya sağ tıklayıp "Sayfa kaynağını görüntüle" seçelim. Kaynak şöyle

<!-- BEGIN app/views/layouts/application.html.erb --><!DOCTYPE html>

<html>

  <head>

    <title>Ana Sayfa | Yeni App</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="csrf-param" content="authenticity_token" />

<meta name="csrf-token" content="la7e2uBlZFjKmh9QeJ-sO_DUxXJ0PX3lifHvCfDfgI-

CTDq8AFTtjcNfA3lT7TDmyj8vXdZ-d2MhMWSlZHRJGg" />

   

   

    <link rel="manifest" href="/manifest.json">

    <link rel="icon" href="/icon.png" type="image/png">

    <link rel="icon" href="/icon.svg" type="image/svg+xml">

    <link rel="apple-touch-icon" href="/icon.png">

    <link rel="stylesheet" href="/assets/application-

e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css"

data-turbo-track="reload" />

  </head>

  <body>

    <!-- BEGIN app/views/static_pages/home.html.erb -->

<h1>Yeni Uygulama</h1>

<p>Bu uygulama ile Rails <b>Statik Sayfaları</b> öğreniyoruz</p>

<!-- END app/views/static_pages/home.html.erb -->

  </body>

</html>

<!-- END app/views/layouts/application.html.erb --> 

Bizim home.html.erb içeriği <%= yield %> ile tam buraya yerleştirilmiş. Dosyadaki 

<% provide(:title, "Ana Sayfa") %>

satırını burada göremiyoruz, çünkü Rails yorumcusu bu satırı gömülü kod olarak algıladı ve çalıştırdı ama blok <%= ile başlamadığı için sonuç yazılmıyor sadece :title değerine "Ana Sayfa" atanıyor. Bunun etkisini de yerleşim kodundaki 

    <title><%= yield(:title) %> | Yeni App</title>

Satırı yerine 

    <title>Ana Sayfa | Yeni App</title>

Yazılmasında görüyoruz. Sayfa kaynağına tarayıcıda baktığımızda bize gömülü Ruby kodları gelmez, onların çalışması sonucu oluşan HTML sonuçlar gelir, yani Ruby kodları server tarafında çalışır ve sayfayı saf HTML olarak tarayıcıya gönderir. 

root yönlendiricisini ayarlamak

Statik sayfalarımızdan "Ana Sayfa" sayfasını yani home eylemini uygulamamızın root sayfası yapmak için config/routes.rb dosyasındaki 

  root "application#merhaba"

satırını

  root "static_pages#home"

yapalım. Artık tarayıcımızda http://localhost:3000/ sayfasını açarsak "Ana Sayfa" gelecektir. 

Bu bölümde neler öğrendik?

• Üçüncü defadır yeni bir Rails uygulaması üretmeyi , gem dosyalarını ayarlamayı ve yüklemeyi , çalıştırıp görmesini sıfırdan yaptık
• Yeni bir kontrolörü rails komutu kullanarak rails generate controller KontrolörAdı <opsiyonel eylem isimleri> ile uygulamaya eklemesini yaptık
• config/routes.rb içine yeni yönlendirmeler ekledik.
• Rails görsel dosyalarının statik HTML ve gömülü Ruby kodları içerdiğini gördük.
• “Red, Green, Refactor” sıralaması ile Test Driven Development yaptık.
• Rails yerleşim dosyaları yardımı ile görsellerde tekrarlanan kodlardan kurtulmasını öğrendik.

Burada bu yazıyı da bitirelim. Sonraki bölümde Rails uygulama geliştirirken kullandığımız Ruby programlama temellerine bir bakış atacağız, zaten Ruby programlamayı biliyorsanız sadece bir bakıp geçebilirsiniz. Şimdilik kalın sağlıcakla..

<-- Önceki Sonraki -->