Rails 投稿詳細ページ & 新規投稿ページの作成
今日は前回の続きで
- 投稿詳細ページ
- 新規投稿ページ
を書いていきます
今の状態は
ルーティングとコントローラはposts/index,
ビューもindex.html.erbのみになります
DBにはPostモデルが作成されています
- 投稿詳細ページ
まずルーティングは
get "posts/:id" => "posts#show"
とします
これは投稿されたデータが持つidカラムがいくつでもshowコントローラに移動するということです。(つまりposts/1でもposts/2でもposts/〜の投稿をshowコントローラに持っていきたいということです)
ここで重要なのはposts/〜を全てshowコントローラに送ってしまうのでルーティングを後に書かないエラーが起きるので注意しましょう!
次にshowコントローラは
def show
@post = Post.find_by(id: params[:id])
end
とします
ここに出てくるfind_byというのはDBから情報を持ってくるメソッドで、params[:カラム名]の役割は
以上の2点です。
次にshow.html.erbファイルをpostsビューに作成してそのファイル内に
<%= @post.content %>
など必要な情報が入ったカラム名を書いて表示されるようにしましょう
次にposts/index.html.erbファイルにshow.html.erbファイルへのリンク
<%= link_to(post.content, "/posts/#{post.id}") %>
ここで@postじゃなくてpostなのはposts/index.html.erb内に@posts.each do |post| 文があって定義されているからです(詳しくは前回の記事を参照)
これで投稿詳細ページは完成です
新規投稿ページ
まずはこちらもルーティング→コントローラ→(必要に応じて)ビューにファイル作成の流れに乗って
ルーティング
get "posts/new" => "posts#new"
コントローラ
def new
end
newコントローラはここではとりあえず空でOKです
次にnew.html.erbファイルを作成し、その中に入力フォームに必要な
< textarea name="content"></textarea>
<input type="submit" value="投稿">
を書きます
そしてここで必要なのがcreateアクションになるのですが、今まではDBから情報を得てそれを表示するだけだったのですが、DBに情報を与える,もしくは変更がある場合にはルーティングを書く際にも書き方などが変わってきます
ではまずルーティング
post "posts/create" => "posts#create"
ここではgetがpostに変わってます
次はコントローラ
def create
@post = Post.find_by(id: params[:id])
@post.save
redirect_to("/posts/index")
end
値を取得し、DBに変更があるので@post.saveで保存
redirect_to("URL")はそのURLのページに転送することです
最後にpost ルーティングはビューファイルを持たないので、new.html.erbの方に
<%= form_tag("/posts/create") do %>
〜
<% end %>
で< textarea>と<input>を囲います
form_tagで送信されたURLではDBに情報を加えるなどの変更があります
そしてこれで新規作成ページの完成です
お疲れ様でした…
土日は時間が中々取れなくてプログラミングの勉強もちゃんとしたブログを書く時間もありませんが、細々とでも毎日続けたいです
Rails 投稿一覧ページ作成
今日は昨日に引き続きTwitterクローンアプリの作成をやりましたが、どうでもいいところでつまづいたりして投稿の新規作成(ProgateでいうところのRails Ⅲ章)までしか出来ませんでした…泣
今日実装出来たのは、
- 投稿一覧ページの作成
- 投稿詳細ページの作成
- 新規投稿ページの作成
その中から今日は復習も兼ねて投稿一覧ページ作成の一連のの流れを書いていきます(ターミナルで行うコマンドは青色で書きます)
最初に
昨日の続きでルーティングは
get 'profile' => 'profile#index'
get 'about' => 'profile#about'
コントローラは
def index
end
def about
end
ビューはindex.html.erbのみになります。
これらはトップページを表示するためのものになります。
投稿一覧ページ
投稿一覧ページを作成する際に、まず新しいコントローラを作る必要があるのでターミナルで
rails g controller posts index
と入力します
そうするとposts/index のルーティング、コントローラ、ビューが作成されて、投稿一覧を作成するための土台が出来ました。
そうすると今度は投稿の情報を送信して保存したり、引き出したりするためのDB(データベース)にマイグレーションファイルの作成をする必要があります
こちらを入力したら、DBの変更が行われたのでDBの変更があった場合は忘れずに
rails db:migrate
を入力しこれで投稿の情報が表示出来る準備が整いました
投稿の作成はターミナルで
rails console
を起動し、
post1(好きな変数) = Post.new(content(カラム名): '好きなものを代入する')
を入力し、
post1.save
を入力して投稿を保存します
DBを扱う時はデータの変更がある度に保存コマンドを入力してください(ファイルを上書き保存する際のcommand+Sのように)
次はDBに保存された投稿データを全て取得するためにまずコントローラに
def index
@posts = Post.all
end
と定義します。
そして投稿が一覧で表示されるようにビューの'posts/index.html.erbファイルに
<% @posts.each do |post| %>
<div 〜 >
<%= post.content %>
</div>
<% end %>
を入力したら投稿一覧は完成です!
(post.contentのcontentはここではDBに保存されてるカラム名で情報の中身を表しています)
写真や画像が無いせいでわかりにくくてすみません😔
一応今日の記事は備忘録的なものなので…(言い訳)
もし気が向いたらProgateのRailsチュートリアルを全て書いていきたいです
本日も読んでくださりありがとうございました!
ではまた明日
追伸
本当はⅤ章の投稿情報の編集&削除まで実装したかったですが、出来なかった言い訳を聞いてください。
- 睡眠不足により途中から集中が出来なかった
- HTML&CSSが思った通り書けずに時間が凄くかかった
- サイトデザインを考えだすとこれまた時間がとてもかかる
HTML&CSSとかはLPですらまともなものを作れないので模写とかして練習する必要がありますね…
(特に苦手なのは親要素と子要素によるあらゆる数値の指定やポジションの変更とか)
100DaysOfCode Day.1
こんばんは🌚
日付は変わってしまいましたが9/6(木)の1日に学んだことを書いていきます。
今日やったことは
です。
まずはこちら↓
今日は@yoshito410kamさんの記事の通り進めてRailsのインストールからwebアプリの立ち上げまでしてみました。
— Yanagi@初心者プログラマー (@yanagi_prg) 2018年9月6日
ターミナルのコマンドに少しつまづきましたが無事作成する事が出来ました!
Progateの復習を兼ねて明日にはツイッタークローンアプリを完成させたいと思います💪#rubyonrails https://t.co/5pQ5XRbtDM
Railsを実際に自分で立ち上げてwebアプリ?を作り始めました。
ProgateのRailsを2~3周してⅠ~Ⅴまでなら8割程理解しここら辺でアウトプットをしたいと思い、そろそろRails tutorialでもやろうかなと思っていたところ、こちらの記事を見つけRailsをターミナルで立ち上げてTwitterのクローンアプリを作ってみることにしました!
今日やった流れはこちらです。
まずは上のツイートの記事の中にあるqiita【2018年版】Rails5の環境構築 for Mac(こちらも神里さんによる有難いチュートリアル)からコピペをしまくりRailsの環境構築をパパッと終わらせました。(Xcodeがインストール済みだったので5分ないくらいで終わった)
そしていよいよRailsを立ち上げるため記事に沿って進めていったところ、アプリを作成したいフォルダをターミナルで" cd ~/フォルダ名 "と書く際にFinder内の既存のフォルダ名を書いても-bash not found(見つかりません)ばかり(-_-)
それで色々ググってみるも解決方法は出て来ず…
結局mkdirで自分でフォルダを作成しそのフォルダをFinder内の検索で見つけ出し元々入れたかったフォルダの中へ手動でドラッグ&ドロップし何とか乗り切る。
この時にコマンドラインの復習を兼ねて色々と調べました
初心者でも覚えておきたい基本的なUNIXコマンド一覧20 | TechAcademyマガジン
Progateのコマンドライン講座
https://prog-8.com/lessons/commandline/study/1
つまづいたのはここだけで後は分かりやすい記事の通りに進めて無事Railsを立ち上げる事が出来、トップページまで作成完了!
(トップページは自分のPortfolioサイトを作りたいと思っていたのでこういう風になっていますが、Twitterクローンアプリを作るにあたっては投稿機能などの実装などを考えるとPortfolioサイトとの相性が良くないと思い、Portfolioサイトはまた別の機会に作りたいと思います。)
ブログとTwitterを始めて1日目から多くの反応やPVを頂きました
ありがとうございます😭🙏
ブログの記事は慣れないのもあってか1000字書くのに1時間程かかるので毎日書くのはかなり大変ですが何とか維持していきたいです。
これからも応援よろしくお願いします!
コメントもどんどんください!
ブログ開始時のスキル💻
この記事ではブログ開始時点での
現在のプログラミングのスキルレベル
今までに学習した教材や講座
今目指している目標
を書いていきたいと思います。
まず現在のプログラミングスキルについては、
HTML&CSS ・・・基本的な文法などは覚えていて理解出来るが、positionの重なり具合、幅の調整等の理解度に不安があり、1人では満足にサイトデザインを出来ない状態。
JavaScript・・・JavaScriptは基礎文法を一通りやったくらいで正直今のところは何に使うのかがわからない。 理解度も浅め。
jQuery・・・コピペでアコーディオンメニューなどがかろうじて実装出来るくらいで、画面固定のパララックスとかは少し前に試してみたが出来なかった。
Rails・・・初めはほとんど理解出来なかったが、最近Progateで何周もやっているおかげかTwitterクローンアプリの"投稿"や"ユーザー"の一覧~編集まである程度理解出来るようになってきた。
次は今までの学習に利用した教材や講座は、
ドットインストール https://dotinstall.com/
その他ググってヒットしたサイト
ドットインストールではHTML&CSSとJavaScriptなどを写経して学び、ProgateではiOSのアプリ版も使いHTML&CSSの復習やRubyとRailsやSassとコマンドライン、Gitをやりました。
最後に今後にやろうと思っていることは、
以上で全て今月中(9月)にやろうと思っています。
最後にTwitterも始めたのでよろしくお願いします!