概要
脱初心者に向けて、メモ帳アプリをつくっていく!
おなかすいた、絵文字使う練習を兼ねて....
かわいい
まずは新規アプリの作成から
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
最初のページを作成する
トップページを作成する
<h1>Memo app</h1>
設定ファイルでアプリにアクセスしてきたら、トップページに飛ぶ ように設定する
Rails.application.routes.draw do
root to: "memo#index"
end
http://localhost:3000
にアクセスするとmemo_controller
のindex
アクションが呼ばれるという意味らしい。
これでアクセスしてみると、index.html.erb
の内容が呼ばれる!
(すげぇ...)
新規投稿ページの作成
次に新規投稿をするためのページを作る
まずは、new
というコントローラーを作成する
class MemoController < ApplicationController
def index
end
def new
end
end
新規投稿ページのHTMLの内容は以下の通り
<h1>投稿ページ</h1>
さっきの設定ファイルに書き加える
Rails.application.routes.draw do
root to: "memo#index"
resources :memo, only: :new
end
トップページと新規投稿ページを行き来するためのリンクを貼る
トップぺージ→新規投稿ページ
と移動するためのリンク
<h1>Memo APP</h1>
<%= link_to '新規投稿', '/memo/new' %>
新規投稿ページ→トップページ
と移動するためのリンク
<h1>新規投稿ページ</h1>
<%= link_to 'トップページ', '/' %>
それぞれのページから、このように見れてればおっけ
HTMLじゃなくて設定みたいな感じ
WOW!すごいね!
投稿する際に必要な「モデル」を作る
新規モデルを作成するために、コマンドを打つっ!
ubuntu@ubuntuv:~/デスクトップ/projectX/memo$ rails g model post
次にモデルの設定を変更する
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
新規投稿ページに投稿フォームを作る
フォームがなければ投稿できませんので、作りましょう!
<h1>新規投稿ページ</h1>
<%= form_tag('/memo', method: :post) do %>
<input type="text" name="content">
<input type="submit" value="投稿">
<% end %>
<%= link_to 'トップページ', '/' %>
ちょっと脇道↓
erb
の<%=
と<%
の違い
・<%=
はフロントエンドで出力するようなコード行
・<=
はバックエンドで出力しないようなコード行
このような違いがある!!
投稿を保存するためのcreateアクションを作る
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
設定ファイルからルートを追加する
Rails.application.routes.draw do
root to: "memo#index"
resources :memo, only: [:new, :create]
end
トップページで投稿一覧を見られるようにする
POSTテーブル
の情報を変数に入れることで、HTML
からすべて参照できるようにする
class MemoController < ApplicationController
def index
@posts = Post.all
end
def new
end
end
そして、HTML
を以下のように変える
<h1>Memo APP</h1>
<% @posts.each do |post| %>
<ul>
<li>
<%= post.content %>
</li>
</ul>
<% end %>
<%= link_to '新規投稿', '/memo/new' %>
まとめ
難しかった...💦
参考にしたサイト