概要

脱初心者に向けて、メモ帳アプリをつくっていく！
おなかすいた、絵文字使う練習を兼ねて....
かわいい

まずは新規アプリの作成から

ubuntu@ubuntuv:~/デスクトップ/projectX$ rails new memo
ubuntu@ubuntuv:~/デスクトップ/projectX$ cd memo/
ubuntu@ubuntuv:~/デスクトップ/projectX/diary_app$ bundle install && bundle update
ubuntu@ubuntuv:~/デスクトップ/projectX/diary$ rails g controller memo index

最初のページを作成する

トップページを作成する

app/views/memo/index.html.erb

<h1>Memo app</h1>

設定ファイルでアプリにアクセスしてきたら、トップページに飛ぶように設定する

config/routes.rb

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

http://localhost:3000にアクセスするとmemo_controllerのindexアクションが呼ばれるという意味らしい。

これでアクセスしてみると、index.html.erbの内容が呼ばれる！
（すげぇ...）

新規投稿ページの作成

次に新規投稿をするためのページを作る
まずは、newというコントローラーを作成する

app/controller/memo_controller.rb

class MemoController < ApplicationController
 def index
 end

 def new
 end
end

新規投稿ページのHTMLの内容は以下の通り

app/views/memo/new.html.erb

<h1>投稿ページ</h1>

さっきの設定ファイルに書き加える

config/routes.rb

Rails.application.routes.draw do
 root to: "memo#index"
 resources :memo, only: :new
end

トップページと新規投稿ページを行き来するためのリンクを貼る

トップぺージ→新規投稿ページと移動するためのリンク

app/views/memo/index.html.erb

<h1>Memo APP</h1>

<%= link_to '新規投稿', '/memo/new' %>

新規投稿ページ→トップページと移動するためのリンク

app/views/memo/new.html.erb

<h1>新規投稿ページ</h1>

<%= link_to 'トップページ', '/' %>

それぞれのページから、このように見れてればおっけ

HTMLじゃなくて設定みたいな感じ
WOW！すごいね！

投稿する際に必要な「モデル」を作る

新規モデルを作成するために、コマンドを打つっ！

ubuntu@ubuntuv:~/デスクトップ/projectX/memo$ rails g model post

次にモデルの設定を変更する

db/migrate/20220420053955_create_posts.rb

class CreatePosts < ActiveRecord::Migration[7.0]
  def change
    create_table :posts do |t|
      t.text :content
      t.timestamps
    end
  end
end

DBに反映させるために、以下コマンドを実行するぞい

ubuntu@ubuntuv:~/デスクトップ/projectX/memo$ rails db:migrate

新規投稿ページに投稿フォームを作る

フォームがなければ投稿できませんので、作りましょう！

app/views/memo/new.html.erb

<h1>新規投稿ページ</h1>
<%= form_tag('/memo', method: :post) do %>
<input type="text" name="content">
<input type="submit" value="投稿">
<% end %>
<%= link_to 'トップページ', '/' %>

ちょっと脇道↓

erbの<%=と<%の違い
　・<%=はフロントエンドで出力するようなコード行
　・<=はバックエンドで出力しないようなコード行
このような違いがある！！

投稿を保存するためのcreateアクションを作る

app/controllers/memo_controller.rb

class MemoController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
  end

  def create
    Post.create(post_parms)
    redirect_to root_path
  end

  private
  def post_parms
    params.permit(:content)
  end
end

設定ファイルからルートを追加する

config/routes.rb

Rails.application.routes.draw do
  root to: "memo#index"
  resources :memo, only: [:new, :create]
end

トップページで投稿一覧を見られるようにする

POSTテーブルの情報を変数に入れることで、HTMLからすべて参照できるようにする

config/routes.rb

class MemoController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
  end
end

そして、HTMLを以下のように変える

app/views/memo/index.html.erb

<h1>Memo APP</h1>
  <% @posts.each do |post| %>
  <ul>
    <li>
      <%= post.content %>
    </li>
  </ul>
  <% end %>
<%= link_to '新規投稿', '/memo/new' %>

こんな感じで、入力したものが出てくればよし！

まとめ

難しかった...💦

参考にしたサイト