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

Önceki bölümü okumadan buraya geldiyseniz hiç kasmayın geri dönün

• ORTA SEVİYE BİR RAİLS TUTORIAL - 1 (Kurulum, ilk stiller)
• ORTA SEVİYE BİR RAİLS TUTORIAL - 2 (Kullanıcı girişi - Bootstrap CSS)

Ana Sayfa Listesi

Ana sayfada gönderiler listesi yayınlamak istiyoruz. Bu listede tüm gönderileri kart formatında göstereceğiz.

İşe gönderileri kaydedecek Post modelini tanımlayarak başlıyoruz. Konsolda

rails g model post

Ayrıca yazıları kategorize etmek için Category modeline ihtiyacımız var

rails g model category

User , Category ve Post modelleri arasındaki ilişkileri tanımlayalım.

Her gönderi yazarına ve bir kategoriye aittir. Model dosyalarını açalım ve ekleyelim.

app/models/post.rb

class Post < ApplicationRecord
    belongs_to :user
    belongs_to :category
end

app/models/user.rb

  ...

  has_many :posts, dependent: :destroy
end

app/models/categoy.rb

class Category < ApplicationRecord
    has_many :posts
end

User modeli içindeki dependent: :destroy kullanıcı kaydı silindiğinde ona ait tüm gönderilerin de silineceğini emreder.

Migrasyon dosyaları içinde tablo sütunlarını ekleyelim

db/migrate/yyyymmddhhMMss_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content
      t.belongs_to :category, index: true
      t.belongs_to :user, index: true
      t.timestamps
    end
  end
end

db/migrate/yyyymmddhhMMss_create_categories.rb

class CreateCategories < ActiveRecord::Migration[5.1]
  def change
    create_table :categories do |t|
      t.string :name
      t.string :branch
      t.timestamps
    end
  end
end

Migrasyonları çalıştıralım.

rails db:migrate

Yerleşim

Henüz ana sayfamız bomboş. Şimdi onun yerleşimini Bootstrap ile düzenlemeye geldi. views/pages/index.html.erb dosyasını açalım ve içine yerleşimi düzenlemek için şunları yazalım:

app/views/pages/index.html.erb

<div class="container">
    <div class="row">
        <div id="side-menu" class="col-sm-3"></div><!-- sol kenar menü -->

        <div id="main-content" class="col-sm-9"></div><!-- ana içerik -->
    </div><!-- row -->
</div><!-- container -->

Şimdi biraz CSS ile sayfa stilini değiştirelim. assets/stylesheets/partials klasöründe home_page.scss adında bir dosya ekleyelim.

app/assets/stylesheets/partials/home_page.scss

#main-content {
    background: white;
    min-height: 800px;
    margin: 0;
    padding: 10px 0 0 0;
}

#side-menu {
    padding: 0;
    #links-list {
        margin-top: 20px;
        padding: 0;
        font-size: 14px;
        font-size: 1.4rem;
        a {
            display: block;
            padding: 5px 15px;
            margin: 2px 0;
        }
        li {
            min-width: 195px;
            max-width: 195px;
        }
        li, li a {
            color: black;
            text-decoration: none;
        }
        li:hover {
            border-radius: 50px;
            background: $navbarColor;
        }
        li:hover a, li:hover i {
            color: white;
        }
    }
}

mobile.sccs içinde max-width: 767px bloğu içine şunu ekleyelim:

app/assets/stylesheets/responsive/mobile.scss

    #side-menu {
        display: none !important;
    }

Şimdi sayfamız büyük ekranda böyle görünecek:

Küçük ekranda da böyle görünecek:

Seed’ler

Gönderileri ana sayfada gösterebilmek için önce veritabanına eklememiz gerekiyor. Verileri manual olarak hem sıkıcı hem de çık vakit alacaktır. Bu işi otomatik olarak yapmak için seed kullanırız. seeds.rb dosyasını açalım ve aşağıdaki kodu ekleyelim:

db/seeds.rb

def seed_users
    user_id = 0
    10.times do
        User.create(
            name: "test#{user_id}",
            email: "test#{user_id}@test.com",
            password: "123456",
            password_confirmation: "123456"
        )
        user_id += 1
    end
end

def seed_categories
    hobby = ["Sanat", "Elişi", "Spor", "Bilim", "Kolleksiyon", 
         "Okuma", "Diğer"]
    study = ["Sanat ve İnsanlık", "Fizik bilimi ve Mühendisliği", 
        "Matematik ve Mantık", "Bilgisayar Bilimleri", 
        "Veri Bilimleri", "Ekonomi ve Finans", "İş Hayatı", 
        "Sosyal Bilimler", "Dil", "Diğer"]
    team = ["Çalışma", "Geliştirme", "Sanat ve Hobi", "Diğer"]

    hobby.each do |name|
        Category.create( branch: "hobby", name: name )
    end

    study.each do |name|
        Category.create( branch: "study", name: name )
    end

    team.each do |name|
        Category.create( branch: "team", name: name )
    end
end


def seed_posts
    categories = Category.all

    categories.each do |category|
        5.times do
            Post.create(
                title: Faker::Lorem.sentences[0],
                content: Faker::Lorem.sentences[0],
                user_id: rand( 1..9 ),
                category_id: category.id
            )
        end
    end
end

seed_users
seed_categories
seed_posts

Görüleceği üzere User , Category ve Post tablolarına sahte kayıtlar eklemek üzere 3 adet metod tanımlıyor ve kullanıyoruz. Faker gem ise dummy yazı üretmek için kullanılır. Bunu Gemfile içine eklemeliyiz.

gem "faker"

ve tabi konsolda

bundle

Bu verileri veritabanına yüklemek için konsolda seed komutu çalıştırmalıyız. Konsolda:

rails db:seed

Gönderilerin yayınlanması

Gönderileri yayınlamak için views klasörü altında bir posts klasörüne ihtiyacımız var. Posts adında bir kontrolör ürettiğmizde görsel kalıpları için posts klasörünü otomatik olarak üretecektir. Konsolda

rails g controller posts

Bizim uygulamamızın PagesController kontrolörü ana sayfamızdan sorumlu olduğundan pages_controller.rb dosyasındaki index aksiyonu içinde veri sorgulamamızı yapacağız. index aksiyonu posts tablosundan bazı kayıtları getirecek. Alınan kayıtlar bir oluşum değişkenine kaydedilecek, böylece bu kayıtlara görsel kalıp dosyalarından erişilebilecek.

index aksiyonuna şunları yazalım:

app/controllers/pages_controller.rb

def index
    @posts = Post.limit( 5 )
end

Ana sayfanın görsel kalıbına gidelim ve .main-content elemanı içine şunu ekleyelim:

<%= render @posts %>

Bu bize index aksiyonunda seçilmiş olan tüm gönderileri yayınlar. Ama render metodu post nesneleri Post sınıfına ait olduğu için

views/posts/_post.html.erb

parça görsel dosyasını arayacaktır. Bu görsel henüz yok, dosyayı üretelim ve içine şunları yazalım:

app/views/posts/_post.html.erb

<div class="col-sm-3 single-post-card" id=<%= post_path(post.id) %>>
    <div class="card">
        <div class="card-block">
            <h4 class="post-text">
                <%= truncate( post.title, :length => 60 ) %>
            </h4>
            <div class="post-content">
                <div class="posted-by">
                    Gönderen <%= post.user.name %>
                </div>
                <h3><%= post.title %></h3>
                <p><%= post.content %></p>
                <%= link_to "İlgileniyorum", 
                  post_path( post.id ), class: "interested" %>
            </div>
        </div>
    </div><!-- card -->
</div><!-- col-sm-3 -->

İstenen stili sağlamak için bootstrap card elemanı kullanıyoruz. Gönderinin içeriğini ve linkini bu elemana koyacağız. Ayrıca içeriğe de tüm gönderinin linkini koyduk.

Ancak gönderiler için daha route dosyamızda bilgileri girmedik, Rails nereye yönleneceğini bilemez. routes.rb dosyasına aşağıdaki yolları da ekleyelim:

  resources :posts do
      collection do
          get "hobby"
          get "study"
          get "team"
      end
  end

resources metodu tüm index , show , new , edit , create , update ve destroy aksiyonları için yolları otomatik olarak deklare eder. Bunlardan ayrı olarak birçok Post oluşumuna erişebilen uygulamamıza özel yolları da collection ile tanımladık. Bunlarla ilgili sayfaları ileride oluşturacağız.

Server’ı tekrar başlatıp http://localhost:3000 sayfasına gidelim. Şuna benzer bir sayfa karşımıza çıkacak:

Gönderilerin stilleri ile oynamak için partials klasörü altında yeni bir scss doyası üretelim:

app/assets/stylesheets/partials/posts.scss

.single-post-card {
    min-height: 135px;
    max-height: 135px;
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.3);
    color: black;
    padding: 10px;
    text-align: left;
    transition: border 0.1s, background 0.5s;
    .post-text {
        overflow: hidden;
    }
    a, a:active, a:hover {
        color: black;
    }
    &:hover {
        cursor: pointer;
        background: white;
        box-shadow: none;
        border-radius: 1%;
    }
}

.post-content {
    display: none;
}

Artık ana sayfa şuna benziyor:

Bişeyler ortaya çıkmaya başladı. Önümüzdeki bölümde JavaScript kullanımını da göreceğiz. Şimdilik kalın sağlıcakla ..

Sırada şunlar var:

• 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)