Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8577

Qiita風 ブログアプリ作ってみよう ver- 2

$
0
0

Modelの作成

$ rails g model blog
      invoke  active_record
      create    db/migrate/20200311152022_create_blogs.rb
      create    app/models/blog.rb
      invoke    test_unit
      create      test/models/blog_test.rb
      create      test/fixtures/blogs.yml

上記のコマンドを実行すると 『app/models/blog.rb』が作成される。

テーブルの作成

マイグレーションファイルを編集する

classCreateBlogs<ActiveRecord::Migration[5.2]defchangecreate_table:blogsdo|t|t.string:name# 追加t.string:text# 追加t.text:image# 追加t.timestampsendendend

マイグレーションする

$ rails db:migrate
== 20200311152022 CreateBlogs: migrating ======================================
-- create_table(:blogs)
   -> 0.0383s
== 20200311152022 CreateBlogs: migrated (0.0384s) =============================

コンソールを使用してDateを保存

$ rails c
[1]pry(main)>Blog.create(name:'Qiita1',text:'sample1')[1]pry(main)>Blog.create(name:'Qiita2',text:'sample2')[1]pry(main)>Blog.create(name:'Qiita3',text:'sample3')

routes.rbを編集

Rails.application.routes.drawdoresources:tweets,only: :index#追加end

blogsコントローラーを作成する

$ rails g controller blogs
      create  app/controllers/blogs_controller.rb
      invoke  erb
      create    app/views/blogs
      invoke  test_unit
      create    test/controllers/blogs_controller_test.rb
      invoke  helper
      create    app/helpers/blogs_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/blogs.coffee
      invoke    scss
      create      app/assets/stylesheets/blogs.scss

blogs controller に追加する

classBlogsController<ApplicationControllerdefindex@blogs=Blog.allendend

viewを作成する

index.html.erb
<div class="contents row">
    <% @blogs.each do |blog| %>
      <div class="content_post" style="background-image: url(<%= blog.image %>);">
        <%= simple_format(blog.text) %>
        <span class="name">
          <%= blog.name %>
        </span>
      </div>
    <% end %>
  </div>

『app/views/blogs』にindex.html.erbを作成する。

ローカルサーバーを起動する

$ rails s

http://localhost:3000/blogs


Viewing all articles
Browse latest Browse all 8577

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>