ORTA SEVİYE BİR RAİLS TUTORIAL - 1

Merhaba,

Öğrenirken sizlerle paylaşmaya devam ediyorum. Çoook uzun bir çalışma olacak bu yazı bir sürü bölümlerden oluşuyor. Amacımızda sadece bir yönü öne alarak Ruby on Rails uygulaması yapmak değil görsel stillleri JavaScript kodları vs. ile gelişmiş bir web sitesi tasarımı nasıl yapılır. Santim santim orta seviye bir uygulama nasıl gelişir göreceğiz. Ben bu tutorial'ı freecodecamp'ta buldum. Hadi birlikte devam edelim. 

KURULUM

Sisteminizde Ruby on Rails kurulu olduğunu kabul ediyoruz. Ben Windows kullanıyorum ve Rails Installer ile yaptığım kurulumu kullanıyorum. Windows’ta Rails kullanmak oldukça sıkıntılı olabiliyor. Kurulumu yaptığımda sqlite3 gem son versiyonunun çalışmadığını farkettim ve bu amaçla Gemfile’ı değiştiren bir Rails starter dosyası yazdım. Rails Installer default olarak “c:\sites” klasöründe bir komut isteği açıyor. Bu yüzden starter dosyamı bu klasöre koydum.

c:\sites\gemfile.rb

remove_file "Gemfile"
run "touch Gemfile"
add_source 'https://rubygems.org'
gem 'rails', '~> 5.1.7'
gem 'sqlite3', '< 1.4'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

gem_group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
end

gem_group :development do
  gem 'web-console', '>= 3.3.0'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Bu dosyayı yeni Rails uygulaması çalıştırırken aktif etmek için mesela “super” isimli bir site yapacaksak:

rails new super

yerine:

rails new super -B -m gemfile.rb

yazarak istediğimiz Gemfile dosyasını orjinal üretilenle değiştiriyoruz. Ayrıca bu komut “bundle” işleminin otomatik olarak çalıştırılmasını da engelliyor.

Yeni Uygulama Üretelim

Hadi yeni bir uygulama ile yola çıkalım. Rails komut istemi çalıştırıp şu komutu girelim.

rails new yeni

Yeni bir uygulama “yeni” adında bir klasör içinde üretildi.

cd yeni

komutuyla klasörün içinde geçelim. İstersenizi hangi dosya ve klasörlerin üretildiğine kısaca bir göz atın. Eğer benim yaptığım gibi starter kullanarak yaptıysanız

bundle

komutu ile gem’lerin yüklenmesini sağlayın. Sıra geldi test etmeye, Rails için server çalıştırma komutu

rails server ya da kısaca rails s

Server çalıştı ve hata mesajı yoksa http://localhost:3000 adresini tarayıcımızda açıp Rails’in “Hoşgeldin” sayfasını karşımızda görebiliriz.

Yerleşim

Artık kod yazma zamanı. İlk önce statik sayfalardan başlayalım. Bu amaçla statik sayfalarımızı içinde bulunduracak bir kontrolör oluşturalım. Ctrl+C basarak server’ı durduralım ve

rails g controller pages

komutunu girelim. Komut bir sürü gereken dosyayı üretecektir. Konsolda şuna benzer bişey görünecektir.

Girdiğimiz rails g komutu aslında rails generate komutunun kısaltılmışıdır.

Statik sayfalarımızı işte bu PagesController kontrolörü içinde yerleştireceğiz. Editörde “yeni” klasörünü proje olarak açın. Ben Sublime Text kullanıyorum.

app/controllers/pages_controller.rb dosyasını açalım. Ana sayfamızı burada tanımlayacağız. Bu dosyada şu anda sadece kontrolör sınıfının tanımlaması var.

class PagesController < ApplicationController
end

Bu kontrolör sınıfı “ApplicationController” sınıfından üretilmiş, onu da aynı klasördeki “application_controller.rb” içinde göreceksiniz.

Kontrolörümüz içinde adı index olan bir metod ekleyeceğiz. Kontrolör içindeki bu metodlara “aksiyon” adı verilir.

app/controllers/pages_controller.rb

class PagesController < ApplicationController
 
 def index
 end

end

Şimdi bu aksiyonun hoşgeldin sayfası yerine uygulamamızın ana sayfası olması için routes.rb dosyasında yönlendirme yapmalıyız.

config/routes.rb

Rails.application.routes.draw do
  root to: "pages#index"
end

Buradaki # karakteri kontrolöre ait metodu ifade eder. Yani eklediğimiz komut satırı Rails’e ana sayfanın pages kontrolörünün index aksiyonu olmasını emrediyor.

Eğer server’ı çalıştırıp http://localhost:3000 adresine gidersek server index aksiyonumuza gidecek fakat bu sefer görsel kalıp dosyasının olmadığına dair bir hata alacağız.

PagesController#index is missing a template ...

Bu kontrolörün görsellerinin olduğu app/views/pages klasörüne gidelim ve index.html.erb adında yeni bir dosya oluşturalım. Bu dosyaya HTML ve Embedded Ruby kodları karışık yazabileceğimiz bir dosya. Şimdilik içine sadece şunları yazalım.

app/views/pages/index.html.erb

<h1>Ana sayfa</h1>

Şimdi sayfayı yenilersek

Artık basit bir başlangıç noktası elde ettik. Bootstrap ile devam edelim.

Bootstrap

Navigasyon ve grid yerleşim kullanmak için Bootstrap kütüphanesini kullanacağız. Bu kütüphaneyi kullanmak için bootstrap-sass gem’i kurmalıyız.

Gemfile dosyamızı açalım ve şu satırları ekleyelim

yeni/Gemfile

...
gem "bootstrap-sass", "~> 3.3.6"
...

Dosyayı kaydedelim ve

bundle install ya da kısaltılmışı bundle komutu çalıştıralım. Aslında Stillerle çalışmak için sass-rails gem de lazım ama o zaten default gem dosyamızda vardı.

Server çalışıyorsa yeni gemler için tekrar başlatmamız gerekir. Şimdi uygulama geneli stil dosyası olan application.css dosyasını açalım ve en sona şunları ekleyelim.

app/assets/stylesheets/application.css

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

Şimdi de application.css dosyasının adını application.scss olarak değiştirerek sass özellikleri kullanabilme imkanı oluşturalım

İlerde tüm stil dosyalarının yayınlanmasını kontrol altına alabilmek için (mesela bazı sass değişkenleri tanımlayacağız, onların kullanılmadan önce tanımlanması gerekli) dosyadan şu satırları silelim.

 *= require_tree .
 *= require_self

Hemen hemen Bootstrap kütüphanesini kullanmaya hazırız. Yapmamız gereken bir şey daha var. bootstrap-sass dökümanının söylediğine göre , Bootstrap JavaScrip ile jQuery kütüphanesi birlikte kullanılması gerekiyor. Rails ile jQuery kütüphanesi kullanabilmek için jquery-rails gem’i uygulamaya eklemeliyiz. Gemfile içine şu satırı ekleyelim.

yeni/Gemfile

...
gem "jquery-rails"
...

Gemfile değiştiği için server’ı durdurup bundle komutu çalıştırıp tekrar başlatmalıyız.

Son adım uygulamanın JavaScript dosyasında Bootstrap ve jQuery kullanması için ilave yapmalıyız. application.js dosyasına şu satırları ekleyelim.

app/assets/javascripts/application.js

...
//= require jquery
//= require bootstrap-sprockets

Gezinti Bar

Gezinti bar için başlangıç noktası olarak Bootstrap’ın navbar component elemanını kullanacağız ve sonra modifiye deceğiz. Gezinti bar kodlarımızı hakim olabilmek amacıyla bir parça görsel kalıbı içine koyacağız. Hem ayrı iş yapan kodları ayrı yerde saklayarak hakimiyeti kolaylaştıracağız hem de bu parçaları daha sonra uygulamamızın başka yerlerinde kullanarak aynı şeyleri kopyalamaktan kurtulacağız.

app/views/layouts klasörüne gidelim ve _navigation.html.erb adında yeni bir dosya ekleyelim.

Parça görsel kalıpları için altçizgi ile başlayan isimler kullanılır. Böylece Rails o dosyanın bir parça dosya olduğunu anlar. Şimdi Bootstrap dökümanlarından navbar elemanı için verilen örnek kodu kopyalayalım ve bu dosyaya koyalım.

app/views/layouts/_navigation.html.erb

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Parça görseli sitemizde görmek için bir yerlere koymamız lazım.  views/layouts/application.html.erb dosyasını açalım. <body> tag içinde sayfa içeriğini yerleştiren

<%= yield %>

satırı üzerine şu ilaveyi yazalım

...
<%= render "layouts/navigation" %>
<%= yield %>
...

Şimdi http://localhost:3000 adresine gidelim ve bakalım.

Yukarıda dediğimiz gibi bu gezinti barını değiştireceğiz. İlk önce tüm <li> ve <form> elemanlarını silelim. Gelecekte buralara kendi elemanlarımızı koyacağız. _navigation.html.erb dosyamız şöyle olacak.

app/views/layouts/_navigation.html.erb

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      </ul>

      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Artık daha sade bir gezinti bara sahibiz. Gezinti bar ismi şu anda default Brand ama bunu da Yeni Uygulama olarak değiştirelim. Link olarak da ana sayfamıza link_to metodu ile yönlendireceğiz. Bu metodla kullanılabilecek linkler için uygulamamıdaki linkleri bir sıralayalım. Konsolda

rails routes

komutu girdiğimizde çıktı olarak bize uygulamadaki linklerin bir listesi çıkar.

Şimdilik sadece tanımlı bir tek linkimiz var , o da root linki. Bu Rails’de root_path değişkeni ile ifade edilir. Şimdi gezinti bar kodunda

app/views/layouts/_navigation.html.erb

<a class="navbar-brand" href="#">Brand</a>

satırını bulalım ve

<%= link_to "Yeni Uygulama", root_path, class: "navbar-brand" %>

olarak değiştirelim. Bu satır etiket yazısını ve linki değiştiriyor ama sınıf tanımını aynen giriyor. Yenileyip sayfa kaynağında ilgili satırı bulursanız <a class="navbar-brand" href="/">Yeni Uygulama</a> şeklinde yayınlanmış olduğunu göreceksiniz.

Stil dosyaları (Style sheets)

Stil dosyaları app/assets/stylesheets klasörü içinde bulunur. Burada mümkün olduğunca düzenli kalabilmek adına bir kaç alt klasör eklemek faydalı olacaktır. Örnek olarak

• Base klasörü - Tüm uygulamada kullanılan Sass değişkenleri ve stilllerin olduğu bir klasör
• Partials klasörü - Bir kısım sayfada kullanılan stilleri yerleştirmek için.
• Responsive klasörü - Farklı ekran çözünürlükleri için farklı kurallar burada olur. Örneğin masa üstü bilgisayar ekranı, tablet ekranı, cep telefonu ekranı vs.

Bir klasör oluşturarak başlayalım.

app/assets/stylesheets/partials/layout

Bu klasör içinde navigation.scss adında yeni bir dosya ekleyelim ve içine şunu yazalım:

app/assets/stylesheets/partials/layout/navigation.scss

.navbar-default, .navbar-toggle:focus, .collapsed, button.navbar-toggle {
 background: $navbarColor !important;
 border: none;
 a {
  color: white !important;
 }
}

Bu kod ile gezinti barın ve linklerin arkaplan rengini değiştiriyoruz. !important kelimesinin olduğu satır default Bootstrap stilinin üzerine kalıcı olarak yazabilmesi için. Renk değeri olarak bir değer ya da renk ismi yerine değişken kullandık. Böylece tanımlayacağımız rengi tüm uygulama genelinde kullanabileceğiz. Hadi bu değişkeni tanımllayalım. Önce şu klasörü oluşturalım.

app/assets/stylesheets/base`

Bu klasörde variables.scss dosyasını oluşturalım ve içine şunu yazalım:

app/assets/stylesheets/base/variables.scss

$navbarColor: #323738;

Eğer http://localhost:3000/ sayfasına gidersek hiçbir şey değişmemiş olduğunu görürüz. Hatırlar mısınız application.scss dosyasından 2 satır silmiştik. O yüzden eklenen stil dosyaları otomatik eklenemiyor. Şimdi bu yeni eklenen dosyaların içerilmesini tek tek application.scss dosyasına ekleyelim.

app/assets/stylesheets/application.scss

// ... önceki yorum satırları

 // Bootstrap
@import "bootstrap-sprockets";
@import "bootstrap";

// Değişkenler
@import "base/variables";

// Parça dosyalar
@import "partials/layout/*";

Dikkat edersek variables.scss dosyasını parça değişkenlerin dosyalarından önce çağırıyoruz ki, değişkenler kullanılmadan önce tanımlanmış olsun.

Şimdi navigation.scss dosyasının üst tarafına biraz daha stil ekleyelim:

app/assets/stylesheets/partials/layout/navigation.scss

nav {
 .navbar-header {
  width: 100%;
  button, .navbar-brand {
   transition: opacity 0.15s;
  }
  button {
   margin-right: 0;
  }
  button:hover, .navbar-brand:hover {
   opacity: 0.8;
  }
 }
}

Sayfayı yenileyip son değişiklikleri görün. Şimdilik sayfamızda pek birşey yok ama çok şey olduğunda gezinti barının aşağılara indikçe de görülebilir olamasını istiyoruz. Bunu sağlamak için _navigation.html.erb dosyasında nav elemanınna bir sınıf özelliği daha ekliyoruz - navbar-fixed-top .

<nav class="navbar navbar-default navbar-fixed-top">

Bir de Yeni uygulama etiketinin Bootstrap Grid Sistemi içinde kalmasını sağlamalıyız. Şu anda container-fluid olan sınıfı continer olarak değiştiriyoruz.

<div class="container">

Sayfayı yenilediğimizde Ana sayfa yazısının gezinti bar altında kaldığını görürüz. Bunu düzeltmek için navigation.scss dosyasına şunları ekleyerek yazıyı aşağıya itelim.

body {
 margin-top: 50px;
}

Sayfa görüntüsü şöyle oldu.

Bu bölüm bu kadar sonraki bölümde Uygulamamıza çok daha fazla özellikler kazandırmaya devam edeceğiz. Buraya kadar olanlar inanın en sıkıcı kısımdı. Sindire sindire öğrenmeye devam edelim...

Sırada şunlar var:

• ORTA SEVİYE BİR RAİLS TUTORIAL - 2 (Kullanıcı girişi - Bootstrap CSS)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 3 (Blog altyapısı)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 4 (JavaScript stiller)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 5 (Kolleksiyon sayfaları)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 6 (Ana sayfa güncellemesi)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 7 (Anlık mesajlaşma ilavesi)