6 : ページを作ろう!②

前の章:ページを作ろう!①

Header6 この章は、前章の「ページの作成」の続きになります。
前章の内容がまだ終わっていない方は、こちらからお願いします。

 ③ : 新しいデータを記入する(new)


ここまでで をやってみました。
ですが、データを表示させるだけで、追加することができなかったら意味はありませんですよね。

ここでページでのデータの作成をやってみましょう。
基本的には「rails c」でやった

1 Post.create(:name => "名前", :content => "内容", :place => "場所")

を設定する感じだと思ってもらえれば分かりやすいと思います。
データの作成には「new」と「create」の2つがありますが、

  • 「new」でデータを記入する画面を表示
  • 「create」でデータを実際に保存してその保存完了画面を表示

する流れになります。

具体的には、新しいデータの記入(new)をするページでデータを入力して登録するボタンを押すと、 Chrome posts new 2 「データを作成(create)」ページに移動します。 Chrome posts create 1 そして、Sequel Proでデータベースを確認すると、下のようにデータが保存されるようになることを目指します。
 Windowsでは、SqliteBrowserを使って開きます。 Sequel pro myapp posts 3
まずは、この新しいデータを記入する(new)ページから作っていきましょう。

 ⑴ : ページを設定する


 まずは前回の復習です。ページを設定するには3つのことを設定する必要がありました。その設定はなんでしょうか?

その設定は、
  • 7つのページのうちどのページを使うかの設定
  • →「config > routes.rb」の内容を設定

  • データの操作の方法を設定
  • →「app > controllers > データベース名_controller.rb」の内容を設定

  • ページの内容を設定
  • →「app > views > ページ名.html.erb」の内容を設定
の3つになります。
「新しいデータの記入(new)」をするページでは、
なにも入っていないデータを作り、そこに内容をいれるためのページの入力欄を作ります。

具体的には、
  • 空のデータの作成(posts_controller.rb
  • データの記入欄・送信ボタンの設定(new.html.erb
  • 空のデータと記入欄を関連させる(new.html.erb
の3つをやっていきます。
 まず「7つのページの設定」からやってみましょう!

config」フォルダにある、7つのページのうちどのページを使うかを決めるroutes.rb」ファイルを見てみましょう。

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように3行目に「new」は追加されていますか?
追加されていれば「新しいデータの記入(new)」をするページを使うことを設定できています。
 では「データ操作」の設定をしましょう。

まずは、Sublime Textでapp > controllersフォルダにある、posts_controller.rbファイルを開きましょう。
※ Sublime Textの開き方はこちらを参考にして下さい。

開けたら、「def new」と「end」の間を下のように設定しましょう。

 posts_controller.rb(12行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


11 12 13 def new @post = Post.new end

これで「新しいデータの記入(new)」をするページのデータ操作の設定が完了しました。

「new」のデータ操作はこのように、
@設定する標識 = データベース名(1文字目大文字の単数形).new
で設定します。

Post.newでは、中になにも入っていないデータを作成しています。

流れとしては、
ここで作った空のデータにページで入力させた情報を入れて、それを「データの作成(create)」をするページでデータベースに保存させます。
※ 設定する標識は、htmlファイルで同じものを指定できればなんでも大丈夫です。

ページでは、この空のデータに内容を入力させる入力欄を作ります。

 「foods」データベースの「新しいデータの記入(new)」をするためのデータ操作を書いてみましょう。


 foods_controller.rb
1 2 3 def new @food = Food.new end

 では、ページの設定をしましょう。

ここでは下のような内容を記入させる画面を設定します。 Chrome posts new 1 まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
その中にnew.html.erbファイルはあるでしょうか?あったら開きましょう!

このファイルに「新しいデータの記入(new)」をするページを表示する設定を、追加していきます。

では、ページの設定をやってみましょう!

 new.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %> <% end %> <a href="/posts">トップに戻る</a>

では、ページを表示させてみましょう!
※ 一回「rails s」で動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/posts/new」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/posts/new」を開いてみて下さい。 Chrome posts new 1 上のような入力欄があるページはでてきたでしょうか?
上のような0.0.0.0:3000/データベース名/newが、新しいデータの記入(new)をするページになります。

今回は「posts」データベースの新しいデータの記入(new)をするページなので、

 ブラウザ
1 0.0.0.0:3000/posts/new

のようにブラウザで入力しました。

 では、「tweets」データベースの「新しいデータの記入(new)」をするページをブラウザで開くにはどのように入力すればいいのでしょうか?


 ブラウザ
1 0.0.0.0:3000/tweets/new

では、ページを設定したファイルの中身を説明しましょう。

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %> <% end %> <a href="/posts">トップに戻る</a>

入力欄が実際に表示されたので、

 new.html.erb(4〜11行目)
4 5 6 7 8 9 10 11 <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %>

で、入力欄3つとボタン1つが設定されたのはなんとなく推測できるのではないかと思います。

実際その通りで、例えば中にある

5 <%= f.text_field :name %>

「name」をデータベースに保存するための入力欄を作っています。
これと比べると、「content」の入力欄を作っている

7 <%= f.text_area :content %>

は少し内容が違いますね。

これは入力欄の表示は、データベースの枠組みの設定をした時(こちらを参照)のデータの種類に応じた表記になっているからです。

この「posts」のデータベースでは「name」は短い文字列・「content」は長い文字列・「place」は短い文字列を入れる設定をしました。
※ 内容はこちらを参考

 入力欄もそれに応じた設定をしていきます。

短い文字列を入れる入力欄は、
<%= f.text_field :枠組みの名前 %>
長い文字列を入れる入力欄は、
<%= f.text_area :枠組みの名前 %>
数字を入れる入力欄は、
<%= f.number_field :枠組みの名前 %>
で設定します。

 数字を入力する「price」の入力欄はどのように設定すればいいのでしょうか?


1 <%= f.number_field :price %>

ここまでで、表示された3つの入力欄について説明しました。
もう1つ表示された「登録する」ボタンについて説明します。
このボタンは、

1 <%= f.submit "登録する" %>

で表示させています。
このボタンをクリックすると「データの作成(create)」をするページに移動して、入力された情報をデータベースに保存します。
※ まだデータの作成(create)をするページのデータ操作を設定していないので、データベースにデータは保存されません(実際にやってみて、Sequel Pro/SqliteBrowserで確認してみてください)
ここまでで、入力欄とボタンの表示の説明をしました。
ではまだ説明していない3、12行目はなにをしているのでしょうか?

 new.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %> <% end %> <a href="/posts">トップに戻る</a>

 posts_controller.rb
1 2 3 def new @post = Post.new end

この3行目は、「posts_controller.rb」の「Post.new」で新しく作った空のデータ「@post」を受け取って、「<% end %>」の間にある入力欄と空のデータ「@post」を対応づけています。

この対応づけのために、「@post」を一回「f」という標識に置き換えています。
※ 対応づけるだけなら「@post」をそのまま使ってもいいような気もしますが、ここは仕様なので覚えて下さい
※ 対応づけのための標識に「f」を使っていますが、これは「form」の頭文字をとったものだけのことなので他の好きな名前にしても構いません。
では、設定の方法を説明しましょう。
「新しいデータの記入(new)」をするページでは、「posts_controller.rb」で作った「Post.new」の空のデータをページに対応づける必要があります。

この空のデータのページへの対応づけは、
<%= form_for @設定した標識 do |好きな名前| %>
で行います。
※ 「<%=」で「<%」でないので注意

対応づけしたデータは、
<% end %>
までの間で入力欄と作成をするためのボタンを設定します。
中に設定する入力欄は、例えば短い文字列だったら、
<%= 名前.text_field :枠組みの名前 %>
で設定します。
※ 長い文字列の場合はf.text_areaで、数字の場合はf.number_fieldで設定します。

「データを作成(create)」するページへ移動するためのボタンは、
<%= f.submit "文字列" %>
で設定します。
 下のようにデータ操作をした「@stock」の名前「name(短い文字列)」持ち主「user(短い文字列)」価格「price(数字)」を記入するページを設定してみましょう。

 stocks_controller.rb
1 2 3 def new @stock = Stock.new end


 new.html.erb
1 2 3 4 5 6 7 8 <%= form_for @stock do |f| %> <p>名前</p> <%= f.text_field :name %> <p>持ち主</p> <%= f.text_field :user %> <p>値段</p> <%= f.number_field :price %> <% end %>


 ⑵ : まとめ

「新しいデータの記入(new)」をするページの3つの設定をまとめる。

「config」フォルダの中にある「routes.rb」ファイルに「new」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「new」を設定する

 posts_controller.rb
1 2 3 def new @post = Post.new end

空のデータを作るデータ操作「.new」と、htmlで表示させる標識を設定する

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「new.html.erb」に内容を設定していく。

 new.html.erb(3〜12行目)
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %> <% end %> <a href="/posts">トップに戻る</a>

ページでは、「controller」ファイルで作った空のデータに内容を加える入力欄の設定をします。

 form_for

<%= form_for @設定した標識 do |好きな名前| %>で空のデータを指定して、
<% end %>との間にデータの入力欄と「データを作成(create)」するボタンを作ります。

 入力欄・ボタン

<%= 名前.入力欄 :枠組みの名前 %>でデータの入力欄を作り、
<%= 名前.submit "表示する文字列" %>で「データを作成(create)」するボタンを作ります。
※ 短い文字列は名前.text_fieldで、長い文字列は名前.text_areaで、数字は名前.number_fieldで設定する

設定が完了したらターミナルで「rails s」をした後で、ブラウザでページを開く。
「新しいデータの記入(create)」をするページは、0.0.0.0:3000/データベース名/newで開く。

 Windowsをご利用の方は、localhost:3000/データベース名/newで開きます。
ここまででデータの記入をするページを作りました。

次は、入力された「データの作成(create)」をするページを作りましょう。

設定した内容はここにまとめてあるので見てみて下さい


 ④ : データを作成する(create)


ここまでで「新しいデータの記入(new)」が終わりました。

データの入力はできるようになったのですが、
今のままだと「新しいデータを記入する(new)」ページから「データを作成する(create)」ページに移動してもデータの保存ができません。


ここではこのデータの保存をやってみましょう!
今回の内容は、第4章でやった

1 Post.create(:name => "名前", :content => "内容", :place => "場所")

をデータ操作の部分(posts_controller.rb)で設定する、と考えてもらえれば分かりやすいと思います。

「新しいデータの記入(new)」をするページからデータを受け取って、それを上のようなデータ操作で保存します。
※ データは新しいデータの記入(new)をするページから移動するので、ブラウザにURLを入力する必要はありません。

具体的には、
  • 「新しいデータの記入(new)」をするページから来た情報にそったデータ作成(posts_controller.rb
  • データ作成完了のページの設定(create.html.erb
をやっていきます。

では、「7つのページの設定」「データ操作の設定」と「ページ内容の設定」をそれぞれやっていきましょう!

 ⑴ : ページを設定する


 まずは「7つのページのうち、どのページを使うか」の設定をします。

7つのページのうちどのページを使うかを決めるroutes.rb」ファイル(configフォルダにある)を見てみましょう。

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように「create」を追加したと思います。これで「データを作成(create)」するページを使うことを設定できました。
 では、「データ操作」の設定をしましょう。

「posts」データベースのデータ操作を設定する「posts_controller.rb」ファイルに設定を加えます。

Sublime Textで、app > controllersフォルダにあるposts_controller.rbを開きましょう。
※ Sublime Textの開き方はこちらを参考にして下さい

開けたら、「def create」と「end」の間を下のように設定しましょう。

 posts_controller.rb(16行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


15 16 17 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

今回は少し内容が複雑ですね。

@postがhtmlファイルで表示させる時の標識、Post.createでデータを作っているのはわかると思うので、

1 params.require(:post).permit(:name, :content, :place)

の部分が少し分からないと思います。
実は新しいデータの記入(new)をしたページから送られた、例えば「nameは'山田太郎'、contentは'入学式'、placeは'新宿'」のようなデータは、全てこの「params」の部分に集約されています。

なのでこの「params」が、

1 (:name => "入力された内容", :content => "入力された内容", :place => "入力された内容")

を示しています。
その後ろの

1 .require(:post).permit(:name, :content, :place)

で、postsのデータベースのname、content、placeの値以外は保存しないことを設定しています。

これはセキュリティー上、他のデータを改ざんされたりされるのを防ぐための設定になります。セキュリティーのために必要と思って下さい。

  • 「require」の後ろに変更する「:データベース名(単数形)」
  • 「permit」の後ろに作成する「:枠組みの名前」

を設定します。

まとめると、
@設定する標識 = データベース名(1文字目大文字・単数形).create(params.require(:単数形データベース名).permit(:枠組みの名前...あるだけ))
こんな感じになりますが、覚える必要はないので適宜コピペしてきて下さい。

 「tweets」データベースの「name」「content」「place」の「データを作成(create)」するページのデータ操作はどのように設定するのでしょうか?


 tweets_controller.rb
1 Tweet.create(params.require(:tweet).permit(:name, :content, :place))

データ操作はここまでなので、ページの設定をやってみましょう! Chrome posts create 1 このようなページができるようにします。

まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
その中にcreate.html.erbファイルはあるでしょうか?あったら開きましょう!

このファイルに「データを作成(create)」するページを表示する設定を追加していきます。

では、create.html.erbを下のように変更してみましょう!

 create.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 <h1>投稿が完了しました</h1> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">トップに戻る</a>

では、ページを表示させてみましょう!
※ 一回「rails s」で動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/posts/new」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/posts/new」を開いてみて下さい。

データの入力欄のページは表示されると思うで、そこで好きなデータを入力してみて「登録する」ボタンを押してみて下さい。
下のように投稿が完了しましたの画面に移動できたでしょうか? Chrome posts create 1 移動ができたら、Sequel Proで中身を確認してみましょう!

 Windowsをご利用の方は、SqliteBrowserで中身を確認してみましょう!

 データは保存できているでしょうか?
ページの内容は分かりやすいですよね。
show.html.erb」にあった、

1 <%= @post.name %>

と同じような感じで作成したデータを表示させています。

今回の「@post」は、

1 @post = Post.create(params.require(:post).permit(:name, :content, :place))

と今回は「find(idの番号)」とデータを選択しているわけではありませんが、「create」でもデータを表示することができるので覚えて下さい。


 ⑵ : まとめ

「データの作成(create)」をするページの3つの設定をまとめる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルに「create」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「create」を設定する

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

新しいデータを作る「create」の中に、データベースの指定(require)と枠組みの指定(permit)を設定します。

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「create.html.erb」に内容を設定していく。

 create.html.erb
1 2 3 4 5 6 7 8 9 <h1>投稿が完了しました</h1> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">トップに戻る</a>

なにも書かなくてもデータの作成は行えますが、使う人にとって不便なのでちゃんと設定しましょう!

データの作成(create)」をするページは、「新しいデータの記入(new)」のボタンを押して移動してくるページなので、URLを記入する必要はありません。
※ ページのURLは、0.0.0.0:3000/postsになっていると思います。
ここまでで、データの作成をするページを作りました。
次は、「データの変更」をするページを設定してみましょう!

設定した内容はここにまとめてあるので見てみて下さい


 ⑤ : 編集するデータの記入(edit)



をする4つのページをここまでで作りました。

残っているデータ操作は、「データの変更」と「データの削除」をするページのみになります。
まずはデータの変更からやってみましょう!
データの変更は「rails c」のデータ変更で行った、

1 Post.find(1).update(:content => "入学式")

をデータ操作の部分で設定していきます。
データの変更もデータの作成と同じように、
編集するデータの記入(edit)データの変更(update)の2つがあります。
  • edit」でデータを記入する画面を表示
  • update」で入力された情報をデータベースに保存
する流れになります。

具体的には、編集するデータの記入(edit)をするページでデータを入力して変更するボタンを押すと、 Chrome posts 1 edit 1 データの変更(update)ページに移動して、 Chrome posts 1 update 1 変更したデータのページ0.0.0.0:3000/posts/idの番号をブラウザで開いて、変更ができたかを確認します。 Chrome posts 1 edited まずはこの編集するデータの記入する(edit)ページから作っていきましょう!


 ⑴ : ページを設定する


 復習から始めます。ページを設定するには、どの設定が必要なのでしょうか?

  • どのページを使うかの設定
  • データ操作の設定
  • ページ内容の設定

の3つになります。
編集するデータの記入(edit)をするページでは、変更するデータを指定してページの入力欄を作ります。

具体的には、
  • 変更するデータの選択
  • データの記入欄・送信ボタンの設定
  • 変更するデータと記入欄の関連づけ
をやっていきます
 まず「7つのページの設定」からやってみましょう!

では、その設定ファイルであるconfig > routes.rbを開いてみましょう!

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように3行目に「edit」は追加されていますか?
追加されていれば編集するデータの記入(edit)をするページを使うことを設定できています。
 では、「データ操作」の設定をしましょう。

「posts」データベースのデータ操作を設定する「posts_controller.rb」ファイルから設定を加えます。

app > controllersフォルダにある「posts_controller.rb」を、Sublime Textで開きましょう。
※ Sublime Textの開き方はこちら

開けたら、「def edit」と「end」の間を下のように設定しましょう。

 posts_controller.rb(20行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


19 20 21 def edit @post = Post.find(params[:id]) end

 この追加した1行では、なにをしているのでしょうか?

この1行で、変更するデータを選択しています。
※ 詳細はこちらを参考にして下さい

 これは一つのデータの選択(show)でやった、

1 2 3 def show @post = Post.find(params[:id]) end

と全く同じことをやっています。

変更するデータはここで選択します。
編集するデータの記入(edit)」でも忘れずにこのデータの選択をしましょう!

 「tweets」データベースの「編集するデータの記入(edit)」はどのように設定すればいいのでしょうか?


 tweets_controller.rb
1 2 3 def edit @tweet = Tweet.find(params[:id]) end

 では、ページの設定をしましょう。

ここでは下のような内容を記入させる画面を設定します。 Chrome posts 1 edit 1 まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
その中にedit.html.erbファイルはあるでしょうか?あったら開きましょう!

このファイルに「編集するデータの記入(edit)」をするページを表示する設定を、追加していきます。

 では、ページの設定をやってみましょう!

 edit.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 <h1>投稿を編集する</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "変更する" %> <% end %> <a href="/posts/<%= @post.id %>">投稿に戻る</a>

今回の設定もなんとなく見覚えはありませんか?
この章の始めで説明した「new.html.erb」と似ている内容になっていますね。

 new.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を作る</h1> <hr> <%= form_for @post do |f| %> <p>名前</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "登録する" %> <% end %> <a href="/posts">トップに戻る</a>

 復習をしましょう。この「new.html.erb」ファイルの中で、「name」の入力欄とボタンを設定している部分はどこでしょうか?

 「name」の入力欄
1 <%= f.text_field :name %>

 ボタン
1 <%= f.submit "登録する" %>

new.html.erbファイルでは、

3 <%= form_for @post do |f| %>

12 <% end %>

の間に入力欄とボタンの表示をしました。

 「edit.html.erbファイルでもやっていることは全く同じです。

3 <%= form_for @post do |f| %>

10 <% end %>

の間にある

4 5 6 7 8 9 <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "変更する" %>

で、ページを表示させています。
ここでは、「content」と「place」を入力する設定をしています。
加えて

 edit.html.erb(3行目)
3 <%= form_for @post do |f| %>

にある「@post」がposts_controller.rbで設定した

 posts_controller.rb(20行目)
20 @post = Post.find(params[:id])

で選択した「posts」データベースのデータになっていて、変更するデータの選択を行っています。
 下のデータ操作をした「@user」の名字「family_name(短い文字列)」名前「first_name(長い文字列)」年齢「age(数字)」を記入するページを設定してみましょう(実際のファイルを変更する必要はありません)。

 users_controller.rb
1 2 3 def edit @user = User.find(params[:id]) end


 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>投稿を編集する</h1> <hr> <%= form_for @user do |f| %> <p>名字</p> <%= f.text_field :family_name %> <p>名前</p> <%= f.text_field :first_name %> <p>年齢</p> <%= f.number_field :age %> <hr> <%= f.submit "変更する" %> <% end %> <a href="/posts/<%= @post.id %>">投稿に戻る</a>

では、ページを表示させてみましょう!
※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで、「0.0.0.0:3000/posts/1/edit」を入力して下さい。

 Windowsをご利用の方は、「localhost:3000/posts/1/edit」を開いてみて下さい。 Chrome posts 1 edit 1 上のような入力欄のあるページが出てきたでしょうか?
上のような0.0.0.0:3000/データベース名/idの番号/editで、編集するデータの入力(edit)をするページをブラウザで開きます。

今回は「posts」データベースの「idが1」のデータベースの内容を記入するページだったので、

 ブラウザ
1 0.0.0.0:3000/posts/1/edit

で開きました。

 「videos」データベースの「編集するデータの入力」をするページをブラウザで開くにはどのように入力すればいいのでしょうか?


 ブラウザ
1 0.0.0.0:3000/videos/1/edit


 ⑵ : まとめ


編集するデータの記入(edit)ページの3つの設定をまとめる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルに「edit」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「edit」を設定する

 posts_controller.rb
1 2 3 def edit @post = Post.find(params[:id]) end

編集するデータを選択する「.find(params[:id])」と、htmlで表示させる標識を設定する

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「edit.html.erb」に内容を設定していく。

 edit.html.erb
1 2 3 4 5 6 7 8 9 10 11 <h1>投稿を編集する</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>場所</p> <%= f.text_field :place %> <hr> <%= f.submit "変更する" %> <% end %> <a href="/posts/<%= @post.id %>">投稿に戻る</a>

ページでは、「controller」ファイルで選択したデータの内容を変更する入力欄の設定と選択したデータを表示する設定をします。

 form_for

<%= form_for @設定した標識 do |好きな名前| %>で変更するデータを指定して、
<% end %>との間にデータの入力欄と「データを変更(update)」するボタンを作ります。

 入力欄・ボタン

<%= 名前.入力欄 :枠組みの名前 %>でデータの入力欄を作り、
<%= 名前.submit "表示する文字列" %>で「データを変更(update)」するボタンを作ります。
※ 短い文字列は名前.text_fieldで、長い文字列は名前.text_areaで、数字は名前.number_fieldで設定する

設定が完了したらターミナルで「rails s」をした後で、ブラウザでページを開く。
「編集したデータの入力」をするページは、0.0.0.0:3000/データベース名/idの番号/editで開く。

 Windowsをご利用の方は、localhost:3000/データベース名/idの番号/editで開きます。
ここまでで、編集するデータの記入(edit)をするページを作りました。

次は、入力された「データの変更(update)」するページを作りましょう。

設定した内容はここにまとめてあるので見てみて下さい


 ⑥ : データの変更をする(update)


ここまでで編集するデータの記入(edit)を設定しました。

これも「データの作成(create)」と同じように、データを記入するだけではなくデータを変更をするページが必要になります。
ここでは、そのデータの変更をやってみましょう!
今回の内容は、第4章でやった

1 Post.find(1).update(:content => "入学式")

をデータ操作の部分(posts_controller.rb)で設定する、と考えてもらえれば分かりやすいと思います。 編集するデータの記入(edit)」をするページからデータを受け取って、それを上のようなデータ操作で変更します。
※ データは「編集するデータの記入(edit)」をするページから移動するので、ブラウザにURLを入力する必要はありません。

具体的には、
  • 編集するデータの記入(edit)」をするページから来た情報にそったデータ変更
  • データ変更完了のページの設定
をやっていきます。
では、
  • 「7つのページの設定」
  • 「データ操作の設定」
  • 「ページ内容の設定」
をそれぞれやっていきましょう!


 ⑴ : ページを設定する


 まず、「7つのページのうち、どのページを使うか」の設定をします。

では、その設定ファイルであるconfig > routes.rbを開いてみましょう!

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように「update」を追加したと思います。これで「データを更新(update)」するページを使うことを設定できました。
 では、「データ操作」の設定をしましょう。

「posts」データベースのデータ操作を設定する「posts_controller.rb」ファイルから設定を加えます。

app > controllersフォルダにある「posts_controller.rb」を、Sublime Textで開きましょう。
※ Sublime Textの開き方はこちら

開けたら、「def update」と「end」の間を下のように設定しましょう。

 posts_controller.rb(24、25行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


23 24 25 26 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

今回追加した2行もどこかで見たことがある設定ですね。
1行目の@post = Post.find(params[:id])は、
「1つのデータの表示(show)」をするページや「編集するデータの入力(edit)」をするページで使いました。

 では、2行目はなにをしているのでしょうか?

この2行目では、選択したデータ「@post」を入力されたデータ「params」に変更(update)しています。
※ 詳細はこちらを参考
「データの作成」の部分で似た設定がありましたね。

 posts_controller.rb
1 2 3 def create @post = Post.create(params.require(:post).permit(:name, :content, :place)) end

この「params」の部分に、送られてきたデータが全て入っています。

この「params」にnameは'名前'、contentは'内容'、placeは'場所'のような情報が入ります。
そしてこのデータベースの内容以外は変更させないために、「require」と「permit」を設定しています。

ここで
  • 「posts」データベースの、「name」の枠組み
  • 「posts」データベースの、「content」の枠組み
  • 「posts」データベースの、「place」の枠組み
の枠組みのみでデータを「作成(create)
するような設定をしています。

 データの変更(update)」も同じです。

1 @post.update(params.require(:post).permit(:content, :place))

ここでは「データの変更」の「update」が使われているので、設定した「@post

 post_controller.rb(24行目)
24 @post = Post.find(params[:id])

のうち、
  • 「posts」データベースの、「content」の枠組み
  • 「posts」データベースの、「place」の枠組み
の変更だけを許可するデータ操作になります。

 「編集するデータの記入(edit)」するページから受け取った、「books」データベースの「name」「price」「page」の「データの変更(update)」をするページのデータ操作はどのようになるでしょう?


1 2 3 4 def update @book = Book.find(params[:id]) @book.update(params.require(:book).permit(:name, :price, :page)) end

 最後に、ページの設定をやってみましょう!

編集するデータの入力が終えて「登録する」ボタンを押したら、下のようなページを表示させるようにしてみます。 Chrome posts 1 update 1 まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
その中にupdate.html.erbファイルはあるでしょうか?あったら開きましょう!

このファイルに「編集するデータの入力(edit)」でボタンを押した後に表示されるページの設定をします。

では、このupdate.html.erbを下のように変更してみましょう!

 update.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 <h1>投稿を変更しました。</h1> <hr> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">トップに戻る</a>

 ここではなにを設定しているでしょうか?

ここでは変更した後のデータを表示させています。
詳しい説明は、「一つのデータの表示(show)」するページや、「データの作成(create)」するページなどを参考にして下さい。
では、ページを表示させてみましょう!
※ 一回、「rails s」で動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。これで内容の変更が適用されます。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


できたらブラウザで、「0.0.0.0:3000/posts/1/edit」を開いてみましょう!
開けたら好きな情報を入力して、変更するボタンを押しましょう!

 Windowsをご利用の方は、「localhost:3000/posts/1/edit」を開いて、内容を入力し変更するボタンをクリックして下さい。 Chrome posts 1 update 1 上のようなページは表示されたでしょうか?

出てきたらSequel Pro / SqliteBrowserを見るなり、「0.0.0.0:3000/posts/1」を見るなりして、内容が変更されたかを確認してみましょう!


 ⑵ : まとめ

「データの変更(update)」をするページの3つの設定をまとめる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルに「update」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「update」を設定する

 posts_controller.rb
1 2 3 4 def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) end

変更するデータを選択してから、データを変更する「update」の中にデータベースの指定(require)と枠組みの指定(permit)を設定する

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「update.html.erb」に内容を設定していく。

 update.html.erb
1 2 3 4 5 6 7 8 9 10 <h1>投稿を変更しました。</h1> <hr> <p>名前</p> <%= @post.name %> <p>内容</p> <%= @post.content %> <p>場所</p> <%= @post.place %> <hr> <a href="/posts">トップに戻る</a>

なにも書かなくてもデータの変更は行えますが、使う人にとって不便なのでちゃんと設定しましょう!

「データの変更(update)」をするページは「編集するデータの記入(edit)」のボタンを押して移動してくるページなので、URLを記入する必要はありません。
※ ページのURLは、「0.0.0.0:3000/posts/idの番号」になっていると思います。
ここまででデータの変更もできました。お疲れさまです。
残すのもデータの削除だけになりますので、頑張りましょう!

設定した内容はここにまとめてあるので見てみて下さい


 ⑦ : データの削除をする(destroy)


もうデータの操作をするページの説明も最後になります。
最後に「データの削除(destroy)」について説明したいと思います。
基本的には、「rails c」でやった

1 Post.find(3).destroy

を設定する感じだと思えば分かりやすいと思います。
流れとしては、
下のように「1つのデータを表示(show)」するページに「投稿を削除」するページに移動する文字列を加え、 Chrome posts 1 add destroy クリックしてページを移動すると、下のような「削除が完了」したページに移動します。 Chrome posts 1 destroy 「データの全表示(index)」をするページで確認すると、下のようにデータがなくなります。 Chrome posts all after destroy このような流れなので、
  • データ削除のページへ移動する文字列の追加
  • データ削除のデータ操作
  • データ削除完了のページの設定
をやっていきます。

では、このデータの削除をやってみましょう!


 ⑴ : ページを設定する


ページの設定をするにはなにをすればいいのか、もうそろそろ覚えたのではないでしょうか?
  • 7つのページの設定
  • データ操作の設定
  • ページの設定
の3つですね。
 まず、「7つのページのうち、どのページを使うか」の設定をします。

では、その設定ファイルである「config > routes.rb」を開いてみましょう!

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように3行目に「destroy」は追加されていますか?
追加されていればデータの削除(destroy)をするページを使うことを設定できています。
 では、「データ操作」の設定をしましょう。

「posts」データベースのデータ操作を設定する「posts_controller.rb」ファイルから設定を加えます。

app > controllersフォルダにあるposts_controller.rbを、Sublime Textで開きましょう。
※ Sublime Textの開き方はこちら

開けたら、「def destroy」と「end」の間を下のように設定しましょう。

 posts_controller.rb(29、30行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


28 29 30 31 def destroy @post = Post.find(params[:id]) @post.destroy end

この内容はなんとなく理解できるのではないでしょうか?
まず、

29 @post = Post.find(params[:id])

で削除するデータを選択して(showeditを参照)、それを削除しています。

実は下のように1行で書くこともできます

1 2 3 def destroy Post.find(params[:id]).destroy end

が、ページに削除したデータを表示させるので「@post」で一回標識を設定しました。

 「tweets」データベースの削除を行うデータ操作はどのように設定すればいいでしょうか?


 tweets_controller.rb
1 2 3 4 def destroy @tweet = Tweet.find(params[:id]) @tweet.destroy end

 では、ページの設定をしてみましょう!

まずはクリックしたらデータ削除のページに移動する「データを削除する」のリンクを、下のようにページに設定してみたいと思います。 Chrome posts 1 add destroy 「1つのデータの表示」をするページ「show.html.erb」にこの設定を追加します。
まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
そこからshow.html.erbを選択して開いてみましょう!

 show.html.erb
1 2 3 4 5 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">トップに戻る</a></p>

だいたいこんな内容になっているでしょうか?

では、ここにデータの削除をする設定を加えましょう!

 show.html.erb(6行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <p><a href="/posts">トップに戻る</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete">投稿を削除する</a></p>

今回加えた行は、データの全表示(index)をするページで加えた移動の設定(リンク)に似ていると思います。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

違っているのは中の文字列と「data-method="delete"」が加わったことですね。

削除をするページへの移動は後ろに「data-method="delete"」を加えて、
<a href="データベース名/選択するid" data-method="delete">内容</a>
で設定します。

今回の「選択するid」は、データ操作で設定した

 posts_controller.rb
3 4 5 def show @post = Post.find(params[:id]) end

「@post」から

 show.html.erb
6 <a href="/posts/<%= @post.id %>" data-method="delete">投稿を削除する</a>

「@post.id」で「id」をとってきています。

これで「データの削除(destroy)」をするページへの移動ができるようになりました!

 「songs」データベースの「idが100」のデータを削除するページに移動する「削除」の文字はどのように設定すればいいでしょうか?


1 <a href="/songs/100" data-method="delete">削除</a>

次に、削除が完了した後のページを設定しましょう!

「投稿を削除する」ボタンを押したら、下のようなページが出るようにします。 Chrome posts 1 destroy まずは、Sublime Textで開いた「myapp」でapp > views > postsを開いてみましょう。
この中にあるdestroy.html.erbが、「データの削除(destroy)」の終わった後に表示されるページになります。

では、中身を設定してみましょう!

 destroy.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 <h1>投稿を削除しました</h1> <hr> <p>名前:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>場所:<%= @post.place %></p> <hr> <a href="/posts">トップに戻る</a>

今までの設定の方法とは少し違いますが、内容は理解できるのではないかと思います。こっちのほうが綺麗に表示できているのではないかと思います。

内容に関して言うと、
データ操作の部分で選択した「@post」を表示させています。
細かい内容に関しては、show」「create」「updateらへんを参考にしてみて下さい。

このページは作らなくても大丈夫ですが、作らないと不親切なので忘れずに設定しましょう!
では、実際にページでデータを削除しましょう!
※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


例えば0.0.0.0:3000/posts/1のような、ブラウザで削除したいデータのshowページに移動しましょう。

削除したいデータのページには移動できたでしょうか? Chrome posts 1 add destroy 設定した投稿を削除するは追加されているでしょうか?

設定ができていたら、投稿を削除するをクリックしてみましょう!下のようなページは表示されたでしょうか? Chrome posts 1 destroy できたら「データの全表示(index)」をするページに行くか、Sequel Pro / SqliteBrowserでデータが削除されたかを確認しましょう! Chrome posts all after destroy
データの削除はできたでしょうか?


 ⑵ : まとめ

「データの削除(destroy)」をするページの3つの設定をまとめる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルに「destroy」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「destroy」を設定する

 posts_controller.rb
1 2 3 4 def destroy @post = Post.find(params[:id]) @post.destroy end

削除するデータを選択して、それを「.destroy」する

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「destroy.html.erb」に内容を設定していく。

 destroy.html.erb
1 2 3 4 5 6 7 <h1>投稿を削除しました</h1> <hr> <p>名前:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>場所:<%= @post.place %></p> <hr> <a href="/posts">トップに戻る</a>

ページの内容はなんでもいいんですが、なにも書かないと不親切なんでトップページに戻れるくらいにはしましょう。


データの削除(destroy)をするページは、ブラウザへの入力では移動できません。
その代わりにデータの削除(destroy)をするページへの移動は、

1 <a href="/posts/<%= @post.id %>" data-method="delete">投稿を削除する</a>

のように、
<a href="データベース名/選択するid" data-method="delete">内容</a>
で設定します。
ここまでお疲れ様でした。最後にまとめをします。

設定した内容はここにまとめてあるので見てみて下さい


2 : まとめ

Ruby on Railsで作ることができるページは、データの操作の方法にそって7つある。

  • データの全表示     index
  • 例:タイムライン
    Post.allを裏で設定
  • 一つのデータの表示   show
  • 例:一つのツイート
    Post.find(idの数字)を裏で設定
  • 新しいデータの記入   new
  • データの作成      create
  • 例:ツイートする画面
    Post.create(いろいろ)を裏で設定
  • 編集するデータの記入  edit
  • データの変更      update
  • 例:プロフィールを変更する画面
    Post.find(idの数字).update(いろいろ)を裏で設定
  • データの削除      destroy
  • 例:ツイートを削除する画面
    Post.find(idの数字).destroyを裏で設定

それぞれのページを表示させるには、
  • 7つのページのうちどれを使うかを設定
  • 「config > routes.rb」で設定
  • データ操作の設定
  • 「app > controllers」の中にある「データベース名_controller.rb」ファイルで設定
  • ページの設定
  • 「 app > views > データベース名」の中に、htmlファイルを作って設定
を設定する。
それぞれの設定について説明する。

設定の内容はこちらを参考

「config」フォルダの中にある「routes.rb」ファイルに設定する

ページを作りたいデータベースに応じた設定をする。

 routes.rb(例:3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


データ操作とページの設定をするには、設定をするためのファイルとフォルダを作る必要がある。
それをするにはターミナルで、

 ターミナル
1 rails g controller データベース名

を入力する。 Terminal rails g controller posts このような表示が出て来れば問題ない。

これで生成された
  • 「app > controllers > データベース名_controller.rb」にデータ操作

  • 「app > views」フォルダにページの内容
をそれぞれ設定することでページ表示の設定をする。
内容を加える前に設定する必要があることをまとめる。
  • データ操作
  • 「app > controllers > データベース名_controller.rb」に使うページの分だけ、下のように設定を加える。

     posts_controller.rb
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 class PostsController < ApplicationController def show end def index end def new end def create end def edit end def update end def destroy end end

  • ページ
  • 「app > views > データベース名」に使うページの分だけ、下のファイルを作る。(ファイルの保存の方法はこちら

    • 「show.html.erb」(1つのデータを表示するページ)
    • 「index.html.erb」(データの全表示をするページ)
    • 「new.html.erb」(新しいデータの記入をするページ)
    • 「create.html.erb」(データの作成)
    • 「edit.html.erb」(編集するデータの記入をするページ)
    • 「update.html.erb」(データを変更するページ)
    • 「destroy.html.erb」(データの削除をするページ)

この「データベース名_controller.rb」にそれぞれのデータ操作を、それぞれのhtmlファイルに内容を付け加えていく。
それぞれの説明は下から見てみましょう!


  ここまででRuby on Railsで作るページの説明は終了です。これで簡単なページはできるようになったのではないでしょうか?

でも今のままではすごくダサくて不便なので、次はページを便利にしましょう!

ここまでの設定の内容はこちらを参考