23 Nisan 2025 Çarşamba

Rails 7 Denemeler 6

<-- Önceki Sonraki -->
https://ujk-ujk.blogspot.com/2025/04/rails-7-denemeler-6.html
İçindekiler +

 

Selam Rails 7 ile uygulama geliştirmeye kaldığımız yerden devam ediyoruz.


Kayıt olma işlemleri

Şu anda çalışan bir User modelimiz mevcut, sırada kullanıcıların kayıt olması için sayfalar hazırlamak var. 

Kullanıcıların uygulamamıza kayıt olması için bir HTML form kullanacağız. Bu sayede yeni kullanıcı ekleyip veri tabanına kaydını yapacağız. Kayıt işlemi sonunda, kullanıcının girdiği bilgileri görebileceği bir profil sayfasına yönlenmesini sağlamalıyız. Daha önce de yaptığımız REST yapısına uygun olarak ilk önce kullanıcıların gösterildiği bir sayfa ile başlayacağız. 



Kullanıcıları göstermek

İlk hedefimiz kullanıcının resmi ve ismini içeren bir profil sayfası. Nihai hedefimizde ise kullanıcının resmi, bilgileri ve mikro gönderilerinin olacağı bir sayfa hazırlamak olacak. 



Debug ve Rails ortamları (environments)

Bu kısımdaki profiller uygulamamızın ilk dinamik sayfaları olacak. Görsel dosyamız tek bir sayfa olmasına rağmen içinde gösterilecekler veri tabanından alınan değerlere göre değişecek. Bu noktada uygulama görsel şablonumuza bir şeyler eklesek de , uygulamada kullanılan bazı değerleri sayfada görerek kontrol etsek. Bu amaçla debug metodu ve params değişkeni çok işimizi görecektir.  Yerleşim dosyamıza şu eklemeyi yapalım.

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    ....
  <body>
    <%= render "layouts/header" %>
    <div class="container">
      <%= yield %>
      <%= render "layouts/footer" %>
      <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>


Uygulamamızı yayınladıktan sonra bu bilgilerin gösterilmesini istemediğimiz için 

      if Rails.env.development?

İfadesi kullanıyoruz. Eğer Rails geliştirme ortamında değilse o satırdaki bilgiler sayfaya yayınlanmaz, yani karşı tarayıcıya verilen cevap içinde yer almaz. 


Rails ortamları

Rails test, development, ve production ortamlarına sahiptir. Rails consolunda default ortam development'dır.

$ rails c
Loading development environment (Rails 7.2.2)
>> Rails.env
=> "development"
>> Rails.env.development?
=> true
>> Rails.env.test?
=> false

Gördüğümüz üzere Rails nesnesinin env özelliği her ortam için boolean cevap dönen bir metoda sahip. Konsolu test ortamında da başlatabiliriz.

$ rails c --environment test
Loading test environment (Rails 7.2.2)
>> Rails.env
=> "test"
>> Rails.env.test?
=> true

Konsol gibi server da default olarak development ortamı olarak çalışır ama istersek onu da değiştirebiliriz.

$ rails server --environment production


Server çalıştırıp ana sayfayı açarsak görsel olarak en altta Debug metodunun yazdıkları gelecektir.


Görünüm biraz daha güzel olsun diye stil dosyamıza ilave yapabiliriz. 

app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

.....

/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  color: blue;
}
 


Şu anda Debug satırlarında yayınlanmakta olan sayfa ile ilgili bilgiler var.

#<ActionController::Parameters {"controller"=>"static_pages",
"action"=>"home"} permitted: false>




Users Resource

Bir kullanıcının profil sayfasını yapmak için veri tabanında kayıtlı bir kullanıcı olması lazım, kayıt etmek için de kayıt sayfası lazım, yumurta mı tavuktan , tavuk mu yumurtadan gibi oldu. Neyse ki önceki bölümde manual olarak veri tabanına bir kullanıcı eklemiştik. Rails konsolda bu kullanıcıyı görelim.

$ rails c
>> User.count
=> 1
>> User.first
=>
#<User:0x00007f5c095727b0
 id: 1,
 name: "Ümit Kayacık",
 email: "[FILTERED]",
 created_at: "2025-04-23 13:29:41.239473000 +0000",
 updated_at: "2025-04-23 13:29:41.239473000 +0000",
 password_digest: "[FILTERED]">


Yukarıda konsol çıktısından görüldüğü üzere yegane kullanıcımızın id değeri 1.

Daha önce de Users Resource dosyalarının tanımlanmalarını incelemiştik.  REST yapısını takip ettiğimize göre /users/1 adresinde bu kullanıcı bilgileri görünecek. Default olarak Rails bunu kontrolörün show eylemine bağlar, daha önce görmüştük. Şimdi server çalıştırıp /users/1 sayfasına gitsek sayfa hazır olmadığı için hata alırız.


Benim yapılandırmamda /users/1 şeklinde bir yönlendirme tanımı yok diyor. REST yapısına uygun adres yönlendirmelerini bir kerede eklemek için routes.rb dosyamıza tek satır ilave etmemiz yeterli.

config/routes.rb

Rails.application.routes.draw do
  root "static_pages#home"
  get "/help", to: "static_pages#help"
  get "/about", to: "static_pages#about"
  get "/contact", to: "static_pages#contact"
  get "/signup", to: "users#new"
  resources :users
...


Bu satırla yönlendirmelere eklenen adreslere bir daha bakalım.

HTTP metod   URL          Eylem       İsimlendirilmiş       Amacı
--------------------------------------------------------------------------------
GET         /users        index       users_path            Tüm kullanıcıların listesi
GET         /users/[id]   show        user_path(user)       Tek kullanıcının gösterimi
GET         /users/new    new         new_user_path         Yeni kullanıcı (kayıt ol)
POST        /users        create      users_path            Yeni kullanıcı ekleme işi
GET         /users/1/edit edit        edit_user_path(user)  Kullanıcıyı düzenle sayfası
PATCH       /users/1      update      user_path(user)       Kullanıcı değiştirme işi
DELETE      /users/1      destroy     user_path(user)       Kullanıcı silme işi


Şimdi sayfayı yenilersek show görselini bulamadığını belirtir bir mesaj alırız. 


Uygulama görsel sayfalarımıza show.html.erb dosyasını elle kendimiz ekleyeceğiz. Şimdilik içinde şunlar olsun.

app/views/users/show.html.erb

<%= @user.name %>, <%= @user.email %>


Bu görsel dosyası @user içinde verilen kullanıcının name ve email özelliklerini basit bir şekilde sayfaya yazıyor. @user değeri nereden gelecek? tabii ki kontrolörden. Kontrolörümüzde show metodu içinde @user değişken değerini şöyle veririz. 

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def new
  end

  def show
    @user = User.find(params[:id])
  end
end


Burada istenen kullanıcı id değerini adresten almak için params nesnesini kullanıyoruz. /users/1 adresine çağrı yapıldığı için params nesnesinin id özelliği değeri 1 olacaktır ve User.find(1) işlemi yapılarak veri tabanına elle kaydettiğimiz kullanıcı kaydı gelecektir (Teknik olarak params[:id] değeri string olarak "1" dir ama find metodu bunu tamsayıya çevirecek kadar akıllıdır).  

Şimdi sayfayı yenilersek görselimiz gelecektir.


Alta eklediğimiz debug satırında params nesnesi içinde neler olduğu görülüyor. Rails girilen adresten ve yapılan çağrı cinsinden yukarıdaki tabloda gördüğümüz REST temellerine göre bu değerleri oluşturur. 



Debugger

Daha önce yerleşim görsel kalıbında params nesnesini göstermek için debug metodu kullandık. Ama daha direk olarak debug işlemleri yapmak için program çalışmasını durdurabiliriz de. Kontrolörde bir satır ekleyelim.

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def new
  end

  def show
    @user = User.find(params[:id])
    debugger
  end
end


Şimdi sayfayı yenilersek Rails server çalışan terminalde bir debugger prompt'u açılacaktır. 

Started GET "/users/1" for ::1 at 2025-04-28 11:42:43 +0300
Processing by UsersController#show as HTML
  Parameters: {"id"=>"1"}
  User Load (8.4ms)  SELECT "users".* FROM "users" WHERE ....
  ↳ app/controllers/users_controller.rb:6:in `show'
[2, 9] in ~/rails7/yeni_app/app/controllers/users_controller.rb
     2|   def new
     3|   end
     4|
     5|   def show
     6|     @user = User.find(params[:id])
=>   7|     debugger
     8|   end
     9| end
=>#0    UsersController#show at
        ~/rails7/yeni_app/app/controllers/users_controller.rb:7
  #1    ActionController::BasicImplicitRender#send_action(method="show", args=[])
at /usr/share/rvm/gems/ruby-3.2.7/gems/actionpack-7.2.2/lib/action_controller/
metal/basic_implicit_render.rb:8
  # and 77 frames (use `bt' command for all frames)
(rdbg)


Burada (rdbg) ile bir prompt gösteriliyor , bunu Rails konsol gibi kullanabiliriz. 

(ruby) @user.name
"Ümit Kayacık"
(ruby) @user.email
"umit@example.com"
(ruby) params[:id]
"1"


Göreceğinizi gördükten sonra Ctrl+D basarak çıkarsınız ve kontrolörde debugger satırını silerek server'ı tekrar çalıştırır ve normal çalışmaya dönersiniz.




Bir Gravatar resmi ve yan bar

Görselimizi düzenlemeye devam edeceğiz, ilk hedefimiz sayfaya email adresine karşı gelen bir Gravatar profil resmi koymak. İlk önce sayfa görselimizi değiştirelim.

app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<h1>
 <%= gravatar_for @user %>
 <%= @user.name %>
</h1>


Buradaki gravatar_for metodunu biz tanımlayacağız, bu metod Gravatar sitesinden kullanıcının email'ine ait resmi getirecek ve oraya koyacak. Default olarak helper dosyası içinde tanımlanan metodlara tüm görsellerde ulaşılabilir. Biz de Users kontrolör helper dosyasına bu metodu ekleyeceğiz ama önce bir konsol Rails açalım denemeler yapalım. 

>> email = User.find(1).email
=> "umit@example.com"
>> Digest::MD5::hexdigest(email.downcase)
=> "30bef47435f2b019b28ad1ae5928b446"


Bunu neden yaptık? Gravatar sitesi kendilerine yapılan isteklerde email adreslerinin açıkça yazılmasını güvenlik sebebiyle kabul etmiyor, bunun yerine hash koda dönüştürülmüş halini istiyor, ve Rails de bunu Digest modülünün hexdigest metodu ile yapar. Şimdi helper metodumuzu ekleyebiliriz. 

app/helpers/users_helper.rb

module UsersHelper
  # verilen email adresi için Gravatar resmini döner
  def gravatar_for(user)
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}"
    image_tag(gravatar_url, alt: user.name, class: "gravatar")
  end  
end


Sayfamızı yenilersek tabi uyduruk bir email adresi girdiğimiz için default Gravatar resmi gelir. 


Ama benim ujk7107 gmail adresimi kullanırsam Gravatarım gelir.


Burada mevcut kullanıcının email adresini değiştirmek için Rails konsolda değiştirip save etmeye kalkarsak hata verir.

>> user = User.find(1)
=>#<User:0x00007fb01f0b07a8
>> user.email = "gecerli@example.com"
=> "gecerli@example.com"
>> user.save
=> false
>> user.valid?
=> false


Neden bunu yapıyor, çünkü geçerli olması için password ve password_confirmation sahte öznitelikleri olması gerekiyor ve onlar veri tabanındaki kayıtta yoklar. Maalesef kaydedebilmek için onları tekrar girmeliyiz.

>> user.password = "foobar"
=> "foobar"
>> user.password_confirmation = "foobar"
=> "foobar"
>> user.valid?
=> true


Bundan sonra user.save metodu çağırarak kaydedebiliriz. Bu da aklımızın bir yerinde dursun.

Şimdi Bootstrap css sınıfları ve bir <aside> elemanı kullanarak bu bilgileri sol kenarda bir side barda yayınlayalım.

app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
</div>


Bu değişiklikten sonra bilgilerimiz sayfa içerik genişliğinin sol tarafında 1/3 lik bir barda yayınlanacaktır. 


Şimdi stil dosyamıza bu soldaki side bar için ilaveler yapalım.

app/assets/stylesheets/custom.scss

......
/* sidebar */
aside {
  section.user_info {
    margin-top: 20px;
  }
  section {
    padding: 10px 0;
    margin-top: 20px;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }  
    h1 {
      font-size: 1.4em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
      margin-top: 0px;
    }    
  }
}

.gravatar {
  float: left;
  margin-right: 10px;
}
 
.gravatar_edit {
  margin-top: 15px;
}


Bu stil kurallarının hepsi şimdi için değil ileride eklenecekler için de bir şeyler var. Ama şu andaki görselde etkisi şöyle oluyor.




Kayıt olma formu

Şimdilik idare eder bir profil sayfası oluşturduk. Sitemize yeni kullanıcının kaydolması için gereken kayıt formu sayfasına geçebiliriz. Şu anda önceden geçici olarak hazırladığımız kayıt olun sayfası http://localhost:3000/signup bir işe yaramaz halde. 


Bu sayfada bir form içerip kullanıcının kayıt için bilgiler girmesini sağlayacağız.



form_with kullanmak

Kayıt olma sayfasının kalbi isim, email, şifre ve şifre doğrulama değerlerini kullanıcının gireceği bir form. Bunu Rails form_with yardımcı metodu kullanarak yapacağız. Bu metod bir Active Record nesnesini kullanarak özelliklerinden bir form oluşturmak için kullanılır.  

Öncelikle kontrolörümüzde new eyleminde boş bir kullanıcı oluşturalım. 

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def show
    @user = User.find(params[:id])
  end
end


Şimdi de görselimize bir form ekleyelim.

app/views/users/new.html.erb

<% provide :title, "Kayıt Ol" %>
<h1>Kayıt Olun</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with model: @user do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>
     
      <%= f.label :password %>
      <%= f.password_field :password %>
     
      <%= f.label :password_confirmation, "Doğrulama" %>
      <%= f.password_field :password_confirmation %>

      <%= f.submit "Hesabımı Oluştur", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>


Görseli düzgün görünen bir hale getirmek için biraz stil ekleyelim.

app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixin'ler, değişkenler, vs. */
$gray-medium-light: #eaeaea;
@mixin box_sizing {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.....


/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}
 input {
  height: auto !important;
}


Bu stil ilavelerinden sonra formumuz şöyle görünecektir.


Burada form label değerleri için Türkçeleştirme yapmak istersek "Doğrulama" label'inde olduğu gibi görsel kodu içinde ilave olarak Türkçesini belirtebiliriz. 

      <%= f.label :name, "İsim" %>
      <%= f.text_field :name %>

      <%= f.label :email %>
      <%= f.email_field :email %>
     
      <%= f.label :password, "Şifre" %>
      <%= f.password_field :password %>


gibi. Yok ben bir sürü form kullanacağım her birinde bunu yapmayım da bir yerde label Türkçeleştirmeleri yapayım dersek iş biraz uzuyor. Öncelikle, şu anda tek bir uluslararası dil dosyası var o da config/locales/en.yml dosyası. Bizim burada tr.yml adında yeni bir dosya oluşturup orada bu etiket yazılarının Türkçelerini yazmamız gerekiyor.

config/locales/tr.yml

tr:
  activerecord:
    attributes:
      user:
        name: "İsim"
        password: "Şifre"

user modeli özniteliklerinden name için "İsim" ve password için "Şifre" kelimelerinin kullanılacağı belirtiliyor. Bir şey daha yapmamız gerekiyor, uygulamamıza kullanacağımız dilleri ve default dili belirtmek için config/initializers/locale.rb adında bir dosya eklemeliyiz. 

config/initializers/locale.rb

I18n.available_locales = [:en, :tr]
I18n.default_locale = :tr


Bu locale.rb dosyasını ekledikten sonra server'ı yeniden başlatmak gerekiyor. Ben bu ikinci yöntemi tercih ettim, çünkü kaşınıyorum (Rails standart kodlarına sadık kalmaya çalışıyorum) Rabbim sonumu hayır etsin. 

En son değişiklik sonrası sayfa şöyle görünüyor.




Kayıt formu incelemesi

Form kodunu anlamak için küçük parçalara ayıralım. Temel olarak form_with metodu kullanılıyor.

    <%= form_with model: @user do |f| %>
      ..
..
..
    <% end %>


Metoda model olarak @user kullanıcı nesnesi veriliyor, yani formda gösterilecek olan veriler bu kullanıcı nesnesinin özniteliklerine bağlanacak. Arkasından bir kod bloğu geliyor, bloğa f değeri (yani form) gönderiliyor. Genel olarak Rails yardımcı metodlarını nasıl yapmışlar, bilmemize gerek yok, biz Rails'i kullanıyoruz, geliştirmiyoruz. Ancak burada bu f değerinin nasıl kullanıldığını anlamamız gerekiyor. 

      <%= f.label :name %>
      <%= f.text_field :name %>

Bu satırlar @user nesnesinin name özniteliğine bağlanmış form elemanları oluşturuyor. Örneğin bu kod

      <label for="user_name">İsim</label>
      <input type="text" name="user[name]" id="user_name" />

HTML elemanlarını oluşturur. Sayfa kaynağına tarayıcımızda bakarsak form_with bloğunda üretilen elemanları görürüz.

<form action="/users" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="QsyjsWmAppmpv9..."
autocomplete="off" />

  <label for="user_name">İsim</label>
  <input type="text" name="user[name]" id="user_name" />

  <label for="user_email">Email</label>
  <input type="email" name="user[email]" id="user_email" />
     
  <label for="user_password">Şifre</label>
  <input type="password" name="user[password]" id="user_password" />
     
  <label for="user_password_confirmation">Doğrulama</label>
  <input type="password" name="user[password_confirmation]"
id="user_password_confirmation" />

  <input type="submit" name="commit" value="Hesabımı Oluştur" class="btn btn-primary"
      data-disable-with="Hesabımı Oluştur" />
</form>


Burada dikkat çeken değer girişlerinin yapıldığı <input> elemanları. Type özelliklerinde text, email ya da password değerleri var. text ile normal yazı giriliyor, email de öyle ama bazı dokunmatik cihazlar bu kutulara değer girerken email yazmaya yönelik özel bir klavye çıkarır ekrana. password tipi kutular ise içindeki yazılanlar görünmeyen kutulardır (uzaktan bakan biri göremesin diye). 

name özelliğinde girilen değer ise form gönderildiğinde params değişkeni içinde bu kutulardaki bilgilerin nereye alınacağı bilgisini içeriyor. @user'den user'e nasıl gelindi bilmiyorum, herhalde form gönderirken @ işareti verilerde sorun yaratıyor ki çıkartılmış. 

İkinci dikkat çeken eleman form elemanının kendisi. 

<form action="/users" accept-charset="UTF-8" method="post">

Form içindeki submit butonu tıklanınca formdaki verilerin /users adresine POST metodu ile gönderileceğini belirtiyor. 

Bir diğer eleman da gizli (görünmeyen) bir eleman.

  <input type="hidden" name="authenticity_token" value="QsyjsWmAppmpv9..."
     autocomplete="off" />

Bu elemanda gönderilen bilgi Rails tarafından güvenlik amacıyla kullanılıyor.




Başarısız kayıt olma işlemi

Form olayını anlamaya devam etmenin en iyi yolu başarısız kayıt olma işlemi sonucu kullanıcıyı tekrar kayıt olma sayfasına geri göndererek hata mesajlarını vermek olacak.



Çalışan bir form

REST yapıya göre /users adresine POST ile çağrıda bulunulduğunda create eylemi çağrılır, önce kontrolörümüze bu eylemi ekleyelim. 

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def show
    @user = User.find(params[:id])
  end

  def create
    @user = User.new(params[:user]) # son hali değil!
    if @user.save
      # başarılı kayıt oldu.
    else
      render 'new', status: :unprocessable_entity
    end
  end  
end


Metodun ilkm satırındaki kod , yorumda da belirtildiği gibi son hali değil ancak başlamak için yeterli. Bir de status: :unprocessable_entity argüman değeri var (bu HTTMP status code 422 Unprocessable Entity'ye karşılık geliyor), bu da Turbo kullanırken gerekecek bir şeymiş. 

Bu kodu anlamanın en iyi yolu geçersiz bir veri ile formu göndermek. Örneğin tüm kutular boş olarak "Hesabımı Oluştur" butonuna basarsak 


Sayfanın en altında bir debug promptu görünüyor, burada tarayıcıdan yapılan çağrıya ait bilgileri görebiliriz, örneğin params değeri.


Burada gördüğümüz user nesnesini incelersek formu üreten kodların oluşturduğu 

  <input type="email" name="user[email]" id="user_email" />

gibi elemanların içindeki bilgilerin params[:user] içinde nerelere karşı geldiğini anlayabiliriz. name özelliğinde "user[email]" değeri olan kutunun içindeki veri user nesnesinin email özelliğine gelecektir. 

Aslında verilen veriler yeni kayıt oluşturmaya engel değil, veri tabanına kaydedilemez, bunu konsolda deneyebiliriz.

$ rails c
Loading development environment (Rails 7.2.2)
>> user = User.new("name"=>"", "email"=>"", "password"=>"",
  "password_confirmation"=>"")
=>
#<User:0x00007f6f737765e8
...
>> user
=>
#<User:0x00007f6f737765e8
 id: nil,
 name: "",
 email: "[FILTERED]",
 created_at: nil,
 updated_at: nil,
 password_digest: nil>

Gördüğümüz gibi User.new komutu hata vermiyor. Ancak Rails tarayıcılardan gönderilen verilerde veri tabanına zarar verecek kodlar bulunmasını önlemek amacıyla bir güvenlik kısıtlaması getiriyor. 



Güçlü parametreler

Son haline getirilmemiş olduğunu yazdığımız satırdaki

    @user = User.new(params[:user]) # son hali değil!

Kodunu kullanarak yeni kullanıcıyı verilen hash değerle oluşturmak aslında oldukça tehlikelidir. İleride User nesnelerine kullanıcının girmeyeceği veriler ekleyebiliriz (şu anda da mesela password_digest böyle bir veri). Bu değerlerle kullanıcıya yetkiler verebiliriz. .bunları kısıtlamazsak curl gibi basit komut satırı araçlar kullanarak sitemize saldırıda bulunabilirler. Diyelim kullanıcı özelliklerinde "admin"=>"1" ise kullanıcıyı yetkili kılıyoruz, kötü amaçlı kişiler kolaylıkla form parametresi olarak "admin"=>"1" değeri de gönderebilirler. Form ile gönderilen özelliklere bir kısıtlama getirmemiz gerekir.

Rails 4.0 sonrasında bu amaçla strong parameters (güçlü parametreler) özelliği kontrolörlere eklendi. Bu sayede hangi parametrelerin zorunlu olduğu ve hangi özelliklere izin verildiğini belirtiriz. Konumuzdaki durumda params hash içinde :user özelliği olmasını istiyoruz ve onun da sadece name, email, password, ve password_confirmation özelliklerinin olmasına izin vermek istiyoruz. 

    params.require(:user).permit(:name, :email, :password,
      :password_confirmation)


Bu kod params içinde :user özelliği olmasının gerekli olmasını sağlar (eğer params içinde :user özelliği yoksa hata verir). Ayrıca user içinden sadece name, email, password ve password_confirmation özelliklerini içeren bir nesneyi oluşturur. Gelen istekte bu izin verilen özellikler dışında bir özellik varsa kırpılıp atılır. 

Bu koddan dönen değeri yeni kullanıcı oluştururken kullanmak için user_params adında bir metod içine koyarak 

    @user = User.new(user_params)

şeklinde yeni kullanıcı tanımlaması yapabiliriz. Şimdi kontrolör kodumuzun son haline bakalım.

app/controllers/users_controller.rb

class UsersController < ApplicationController
....

  def create
    @user = User.new(user_params)
    if @user.save
      # başarılı kayıt oldu.
    else
      render 'new', status: :unprocessable_entity
    end
  end  

  private
    def user_params
      params.require(:user).permit(:name, :email, :password,
        :password_confirmation)
    end
end


Burada metodumuzu private kısmına ekledik. private satırından sonra tanımlanan metodlar dışarıdan çağrılamaz (mesela create çağrılabiliyor), sadece sınıf içinde kullanılabilir. 

Bu durumda Rails artık kontrolden geçmiş değerlerle çalışacağı için bir hata mesajı vermez. Ama forma girdiğimiz değerler geçersiz olduğu için tekrar form sayfasına geri dönülür, ve ne yazık ki neden buraya döndüğümüze dair bir bilgi olmadan. 




Kayıt sayfası hata mesajları

Son adım olarak geçersiz kayıt bilgilerindeki hatayı bildirecek mesajları sayfaya ekleyeceğiz. Rails bu mesajları model dosyamızdaki geçerlik kurallarına gör otomatik hazırlar. Rails konsolda geçersiz email adresi olan ve şifresi kısa olan bir kayıt ile deneme yapalım.

$ rails c
Loading development environment (Rails 7.2.2)
>> user = User.new(name: "Foo Bar", email: "foo@invalid",
     password: "dude", password_confirmation: "dude")
=>
#<User:0x00007f5a426bbef0
...
>> user.save
=> false

>> user.errors.full_messages
=>
["Email Translation missing. ...


Eveet , gelen hata mesajından anlaşıldığı üzere Türkçe dönüşüm kullanmak yüzünden sıkıntı yaşıyoruz. Söylemiştim ben kaşındım diye. Şimdi hata mesajlarının da Türkçelerini eklemek zorundayız. 

config/locales/tr.yml

tr:
  activerecord:
    attributes:
      user:
        name: "İsim"
        password: "Şifre"
    errors:
      models:
        user:
          attributes:
            email:
              invalid: "geçersiz"
            password:
              too_short: "çok kısa"


Bunların nerelere yazılacağı konsoldaki mesajda görünüyor aslında. Bu satırları ekledikten sonra konsolu kapatıp açıp tekrar deneyelim. 

$ rails c
Loading development environment (Rails 7.2.2)
>> user = User.new(name: "Foo Bar", email: "foo@invalid",
    password: "dude", password_confirmation: "dude")
=>
#<User:0x00007f52b2caef48
...
>> user.save
=> false
>> user.errors.full_messages
=> ["Email geçersiz", "Şifre çok kısa"]


Yandık ki, ne yandık. Olası tüm mesajlar için bir yerlerde komple örnek Türkçe dosyası olsa iyi olurdu. Buradaki errors.full_messages nesnesi hata mesajlarını bir array içinde barındırıyor. Konsolda olduğu gibi kontrolörde de @user nesnesini save etmeye kalkınca başarısız olursa hata mesajları oluşur. 

Mesajları tarayıcı sayfasında görüntülemek için error-messages adında bir kısmi görsel kullanacağız. Ayrıca değer giriş kutularında Bootstrap stilleri kullanmak için tüm değer giriş kutularına form-control sınıf değeri ekleyeceğiz. 

app/views/users/new.html.erb

....
    <%= form_with model: @user do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>
     
      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>
     
      <%= f.label :password_confirmation, "Doğrulama" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %>

      <%= f.submit "Hesabımı Oluştur", class: "btn btn-primary" %>
    <% end %>
....


Dikkat ettiyseniz burada yayınlanan kısmi görsel adı 'shared/error_messages' olarak girilmiş. Rails'e göre bu dosya app/views klasörü içindeki shared alt klasöründe olmalı. Şu anda bu alt klasör yok bunu terminalden ekleyelim.

$ mkdir app/views/shared


Şimdi bu klasör içinde  _error_messages.html.erb isimli kısmi görsel dosyasını ekleyelim. Bilindiği üzere kısmi görsel dosya isimleri alt çizgi ile başlar. 

app/views/shared/_error_messages.html.erb

<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count,
      "error") %>.
    </div>
    <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
    </ul>
  </div>
<% end %>


Şimdi server'ı çalıştırıp boş form göndermeye kalkarsak yine çeviri hataları gelecek , ama bu sefer sadece bir tekk ekleme ile kurtarırız. 

config/locales/tr.yml

tr:
  activerecord:
    .....
  errors:
    messages:
      blank: "boş olamaz"


Şimdi tekrar boş form gönderirsek


En üstte pluralize metodunun etkisini görmek için metni İngilizce bırakmıştım o da çalışmadı. Bu Türkçe sevdası bize pahalıya patlamaya başladı. Vazgeçtim daha sonra uğraşırım orjinal İngilizce'ye geri dönüyorum.

config/initializers/locale.rb

I18n.available_locales = [:en, :tr]
I18n.default_locale = :en

Daha önceden Rails'in aklında kalan değerleri silmek için de terminalde 

$ rails assets:clobber

Yapıp tekrar kayıt olma sayfasına döndüm. Name ve Password label değerlerini de direk görselde değiştirdim.

app/views/users/new.html.erb

....
      <%= f.label :name, "İsim" %>
....
      <%= f.label :password, "Şifre" %>
....

Sayfa normale döndü şimdi boş bir kayıt gönderirsek


Of, rahatladım. Rails öğrenmek yerine Türkçeleştirme ile uğraşıp durmayalım. pluralize metodunun etkisini konsolda deneyebiliriz. 

$ rails c
Loading development environment (Rails 7.2.2)
>> helper.pluralize(1, "error")
=> "1 error"
>> helper.pluralize(5, "error")
=> "5 errors"
>> helper.pluralize(2, "woman")
=> "2 women"


Rails bizden akıllı vallahi. Kısmi görselimizde hata mesajları yayınlanan <div> elemanına error_explanation id değerini verdik. Ek olarak Rails hatalı olan form elemanlarını class değeri field_with_errors olan bir div elemanı ile çevreler.  Şimdi stil dosyamıza bu elemanlar için bir stil ekleyelim. Bunu yaparken Sass'ın @extend fonksiyonunu kullanarak Bootstrap has-error sınıfının stillerini stilimize dahil edeceğiz. 

app/assets/stylesheets/custom.scss

....

/* forms */
....

#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}
.field_with_errors {
    @extend .has-error;
    .form-control {
      color: $state-danger-text;
    }
}


Şimdi hatalı girilen bilgilerin de etrafı işaretlenmiş olarak gelecektir.




Geçersiz kayıt işlemi için test

Web framework'lerin yapılmasından önce tasarımcılar form girişlerini test işlemlerini elle yapıyordu. Örneğin bu kayıt sayfamızı test edebilmek için tarayıcıda sayfayı açıp geçerli ve geçersiz tüm olası değerlerle tek tek kayıt işlemi denememiz gerekiyordu. Ancak olası değerler arttıkça her seferinde tüm olasılıkları denemeyi atlayabiliriz ve bu çok sıkıcı hatalara sebep olabilir. 

Ne iyi ki Rails formları test edebilmek için hazır rutinler tanımladı. Bu kısımda geçersiz bilgiler ile kayıt olmadığını gören testler yazacağız. Daha sonra da geçerli bilgilerle kayıt olduğunu gören testler yazacağız. 

Başlamak için kullanıcı kayıtlarına dair bir entegrasyon test dosyası üreteceğiz. İsmini users_signup koyacağız (Rails kontrolör isimlendirme geleneğine uygun olsun diye). 

$ rails generate integration_test users_signup
      invoke  test_unit
      create    test/integration/users_signup_test.rb


Bu aynı dosyayı ileride geçerli kayıtları test ederken de kullanacağız. Testimizin amacı geçersiz bilgilerle kayıt olma butonuna basıldığında yeni kullanıcı üretilmediğini görmek. Bu amaçla mevcut kullanıcı sayısından yararlanacağız, böylece sayının artıp artmadığından kullanıcı eklendi mi görebiliriz. Konsolda bir denersek.

$ rails c
Loading development environment (Rails 7.2.2)
>> User.count
=> 1


Kayıtlı kullanıcı sayısı 1 çünkü daha önceki bölümlerde veri tabanına elle bir örnek kullanıcı kaydı yapmıştık. Şimdi test dosyamızın içini dolduralım.

test/integration/users_signup_test.rb

require "test_helper"

class UsersSignupTest < ActionDispatch::IntegrationTest
  test "geçersiz kayıt bilgisi" do
    get signup_path
    assert_no_difference 'User.count' do
      post users_path, params: { user: { name: "",
          email: "user@invalid",
          password: "foo",
          password_confirmation: "bar" } }
    end
    assert_response :unprocessable_entity
    assert_template 'users/new'
  end
end


İlk önce kayıt olma sayfasını ziyaret ederek başlıyoruz.

    get signup_path

Sanki tarayıcıda GET metodu ile o sayfayı açar gibi. Sonrasında geçersiz bir form gönderme işlemi yapmak için users_path adresine bir POST işlemi yaparak formun gönderilmesini sağlıyoruz.

    assert_no_difference 'User.count' do
      post users_path, params: { user: { name: "",
          email: "user@invalid",
          password: "foo",
          password_confirmation: "bar" } }
    end

İlk satır beklentimizi gösteriyor, bloğun içinde yapılan işlem sonucunda User.count değerinin değişmemesini bekliyoruz. Bloğun içinde de bir POST işlemini users_path adresine yapıyoruz. Parametreleri verirken user nesnesinde geçersiz name, email ve password değerler giriyoruz. Bu assert_no_difference bloğu yerine şunu da yapabilirdik.

before_count = User.count
post users_path, ...
after_count = User.count
assert_equal before_count, after_count


Ancak yaptığımız şekil daha açıklayıcı görünüyor. Bu noktada şunu da belirtmek gerekir, form gönderme olayını test etmek için sadece POST işlemini yapmak yeterli aslında. Öncesinde GET ile kayıt sayfasını çağırmaya gerek yok, ama onu da bir anlam birliği olsun , sanki tarayıcıdan kullanıcı bunları yapıyor gibi görünsün diye yaptık. Gerçi bana kalsa tarayıcıdan form sayfasını çağırmadan yapılan tüm form gönderme işlerini kabul etmemek lazım, birileri sitemizle uğraşıyorsa biraz sürünsün en azından. 

Kayıt sayısının artmamasının ardından 2 beklentimiz daha var. 

    assert_response :unprocessable_entity
    assert_template 'users/new'

Daha önce assert_response beklentisinde :success yani başarılı olmasını beklenti olarak görmüştük, ama bu sefer :unprocessable_entity (işlenemeyen girdi) bekliyoruz. Hatırlarsak kontrolörde geçersiz kayıt için aynı durum kodunu dönmesini istemiştik.

  def create
    @user = User.new(user_params)
    if @user.save
      # başarılı kayıt oldu.
    else
      render 'new', status: :unprocessable_entity
    end
  end

assert_template beklentisi ise yaptığımız işlemler sonucunda users/new sayfasına yönlendirilmemizi bekliyor. 



Başarılı kayıt işlemi

Geçersiz form bilgisi göndermelerini tamamladıktan sonra sıra geldi veri tabanına geçerli kayıtların eklenmesine. Öncelikle geçerli bilgi girildiğinde save işlemi başarılı olur ve veri tabanına kayıt eklenir, bunun sonucunda da eklenen profilin sayfasına gitmeliyiz. İşlem başarısız olursa neler olacağını daha önce tasarladık ve denedik zaten.



Kayıt formunun bitirilmesi

Çalışan bir kayıt formunu bitirmek için kontrolörümüzde yorum olarak bıraktığımız kısmı tamamlamamız gerekiyor. Şu anda geçerli bilgiler girerek formu göndermeye kalkarsak sayfa donar kalır. Server bildirilerine bakarsak şu mesajı görürüz.

  ↳ app/controllers/users_controller.rb:12:in `create'
No template found for UsersController#create, rendering head :no_content


Sayfa değişmedi ama konsola gider bir kontrol edersek veri tabanına yeni bir kayıt eklendi.

$ rails c
Loading development environment (Rails 7.2.2)
>> User.all
=>
[#<User:0x00007f15e8e90cf0
  id: 1,
  name: "Ümit Kayacık",
  email: "[FILTERED]",
  created_at: "2025-04-23 13:29:41.239473000 +0000",
  updated_at: "2025-04-28 09:41:57.937193000 +0000",
  password_digest: "[FILTERED]">,
 #<User:0x00007f15e94a9100
  id: 2,
  name: "Foo Bar",
  email: "[FILTERED]",
  created_at: "2025-05-13 08:45:36.803941000 +0000",
  updated_at: "2025-05-13 08:45:36.803941000 +0000",
  password_digest: "[FILTERED]">]


Yapmamız gereken şey kontrolörümüze gidip create eyleminden bir görsel dönülmesini eklemek olacak. Bu amaçla redirect_to metodunu kullanacağız.

app/controllers/users_controller.rb

....
  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to @user
    else
      render 'new', status: :unprocessable_entity
    end
  end  
....


Burada eklediğimiz satır olan 

      redirect_to @user

satırı aslında 

redirect_to user_url(@user)

satırının eşleniğidir.



Flash mesaj

Bir ekleme daha yapacağız, girilen kayıt geçerli olunca yeni kullanıcı sayfasına gideceğiz ya, orada kullanıcıya başarılı olarak giriş yapmasına karşılık bir hoş geldin mesajı verelim. Web sayfalarında buna benzer bildirimler yapmak için Bootstrap css kütüphanesinin alert- ile başlayan sınıfları var. Bunlardan yararlanacağız. Öncelikle flash adını verdiğimiz bir hash değişkene değer girerek görseli çağıralım.

app/controllers/users_controller.rb

....
  def create
    @user = User.new(user_params)
    if @user.save
      flash[:success] = "Yeni App uygulamamıza hoş geldiniz!"
      redirect_to @user
    else
      render 'new', status: :unprocessable_entity
    end
  end  
....


Bu flash değişkeni üzerinde çalışmaya örnek olarak konsolda deneme yapabiliriz.

>> flash = { success: "Çalıştı!", danger: "Çuvalladı." }
=> {:success=>"Çalıştı!", :danger=>"Çuvalladı."}

?> flash.each do |key, value|
?>   puts key
?>   puts value
>> end
success
Çalıştı!
danger
Çuvalladı.
>> flash[:success] = "Hoşgeldiniz"
=> "Hoşgeldiniz"
>> flash
=> {:success=>"Hoşgeldiniz", :danger=>"Çuvalladı."}


Bu yapıyı ve Bootstrap sınıflarını kullanarak görselimizde flash mesajlarını ekleyebiliriz. Bu mesajlar başka yerlerde de kullanılabilir diyerek bu görsel ilavesini site yerleşim ortak görselimize yapacağız.

      <% flash.each do |mesaj_tipi, mesaj| %>
        <div class="alert alert-<%= mesaj_tipi %>"><%= mesaj %></div>
      <% end %>

Burada flash değişkeninin key değeri mesaj_tipi ve value değeri de mesaj değişkenleri içeriğine konur. Bu durumda 

      flash[:success] = "Yeni App uygulamamıza hoş geldiniz!"

Satırımızın karşılığında 

  <div class="alert alert-success">Yeni App uygulamamıza hoş geldiniz!</div>

Görsel elemanı oluşur. Şimdi yerleşim görselimize bu ilaveyi yapalım.

app/views/layouts/application.html.erb

<!DOCTYPE html>
....
  <body>
    <%= render "layouts/header" %>
    <div class="container">
      <% flash.each do |mesaj_tipi, mesaj| %>
        <div class="alert alert-<%= mesaj_tipi %>"><%= mesaj %></div>
      <% end %>
      <%= yield %>
....


Şimdi kayıt olma sistemimiz başarıyla tamamlandı. Sitemize kayıtlara başlayabiliriz. 



İlk kullanıcı kaydı

Daha önce denemeler yaparken veri tabanına kaydedilmiş olan tüm kayıtlardan kurtulmak için veri tabanını sıfırlayalım.

$ rails db:migrate:reset
Dropped database 'storage/development.sqlite3'
Dropped database 'storage/test.sqlite3'
Created database 'storage/development.sqlite3'
Created database 'storage/test.sqlite3'
== 20250404135314 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0048s
== 20250404135314 CreateUsers: migrated (0.0052s) =============================

== 20250422131814 AddPasswordDigestToUsers: migrating =========================
-- add_column(:users, :password_digest, :string)
   -> 0.0225s
== 20250422131814 AddPasswordDigestToUsers: migrated (0.0229s) ================


Komutumuz sonucunda önce veri tabanları ve veri tabanına eklenen tablolar siliniyor, sonra migrasyonlar tekrar çalıştırılıyor ve tablolar boş olarak geliyor. Konsolda görelim.

$ rails c
Loading development environment (Rails 7.2.2)
>> User.all
=> []


Eğer server çalışıyorsa durdurup tekrar başlatmanız gerekir. Şimdi ilk kullanıcımızı tekrar tanımlayalım.


Bu başarılı kayıt işlemi sonucu yeni eklediğimiz kullanıcı sayfasına gidilir ve hoşgeldin mesajı gösterilir.


Sayfayı yenilersek flash mesajı olmadan kullanıcı profil sayfası gelir.




Geçerli kullanıcı kaydı için test

Devam etmeden önce geçerli kayıt işlemi için de bir test yazarak uygulama test bütünlüğümüzü korumaya çalışalım. Daha önce geçersiz kayıt işlemini test etmek için kullanıcı sayısının değişmemesini beklenti olarak yazmıştık, şimdi geçerli kayıt işlemi sonrası veri tabanında mevcut kullanıcı sayısının bir arttığını görmek beklentimiz olacak. 

    assert_no_difference 'User.count' do
      post users_path, ....
    end

Şeklindeki beklentimize benzer olarak 

    assert_difference 'User.count', 1 do
      post users_path, ...
    end

bloğu ekleyeceğiz. assert_difference bloğundaki işlemler bitirilince User.count değerinin 1 değişmiş olması bekleniyor. Geçerli kayıt işlemi sonucunda redirect ile gönderilen sayfayı da bu testin beklentilerine eklemeliyiz. Şimdi test kodumuza geçerli kayıt için olan bu testi ekleyelim.

test/integration/users_signup_test.rb

require "test_helper"

class UsersSignupTest < ActionDispatch::IntegrationTest
  test "geçersiz kayıt bilgisi" do
    .....
  end
  test "geçerli kayıt bilgisi" do
    assert_difference 'User.count', 1 do
    post users_path, params: { user: { name: "Example User",
      email: "user@example.com",
      password: "password",
      password_confirmation: "password" } }
  end
  follow_redirect!
  assert_template 'users/show'
  end
end


Burada follow_redirect! metodu form gönderimi (post) işlemi sonucunda yapılacak yönlendirmeyi yakalamak için kullanılıyor ve bunun sonucunda users/show sayfasına yönlendirme yapılmasını beklenti olarak yazıyoruz. 



Bu bölümde öğrendiklerimiz

  • Rails debug metodu yardımıyla faydalı debug bilgileri sayfamızda görebiliriz. 
  • Sass mixin sayesinde bir grup CSS kuralını birçok yerde kullanabiliriz
  • Rails development, test ve production ortamlarında çalıştırılabilir
  • Kullanıcılarla bir resource üzerinden standart REST adresleriyle etkileşim kurabiliriz.
  • Gravatar ile kullanıcı profil resimlerini internette ortak bir yerden kolayca kullanabiliriz
  • Rails form_with yardımcı metodu ActiveRecord nesnelerine bağlı form tasarımları yapılır.
  • Kayıt hatalarında yeni kullanıcı sayfasına dönülür ve ActiveRecord tarafından üretilen hatalar gösterilir
  • Rails flash değişkenini standart mesaj gösterme değişkeni olarak kullanır.
  • Başarılı kayıt veri tabanında yeni bir kayıt ekler ve kullanıcı profil sayfasına giderek bir hoş geldin mesajı gösterir
  • Form gönderimlerini test etmek için entegrasyon testlerini kullanırız. 


Bu kısım da burada bitti, sonraki bölümde nasipse kullanıcıların sisteme giriş ve çıkış yapmaları (login - logout) işlemleri üzerinde duracağız. Şimdilik kalın sağlıcakla..








<-- Önceki Sonraki -->
Gönderen ujk zaman: 07:28
Etiketler: , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)