※本記事は、基本的に公式ページを試し、まとめた内容となっています。
*今回の内容はgitにあります。
目的
前回作成したサンプルに、ページを新たに追加する方法をまとめる。
ページの追加方法
1.新ページのパス設定を追加
編集ファイル： web/router.ex
scope "/", HelloPhoenix do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
get "/hello", HelloController, :index ←追加した行
end
# ※追加した行の説明
#
# get がHTTPリクエストメソッド
# "/hello" がパス
# HelloController が /hello へ来たアクセスを処理するエンドポイント
# :index が HelloController のどの関数と紐付けるかを表現
2.HelloControllerを作成
作成ファイル： web/controllers/hello_controller.ex
defmodule HelloPhoenix.HelloController do
use HelloPhoenix.Web, :controller
def index(conn, _params) do
render conn, "index.html"
end
end
3.HelloControllerに対応する viewクラスを定義
作成ファイル： web/views/hello_view.ex
defmodule HelloPhoenix.HelloView do
use HelloPhoenix.Web, :view
end
※ コントローラのファイル名の _ で区切った前方が一致している必要がある。
今回のケースだと「hello_」の部分が一致していないとだめ。
web/controllers/hello_controller.ex
web/views/hello_view.ex
4.実際に描画するhtmlファイルを用意
作成ファイル：web/templates/hello/index.html.eex
<div class="jumbotron">
<h2>Hello World, from Phoenix!</h2>
</div>
※htmlファイルの場合も、templatesの下に掘るフォルダは hello で統一。
５． http://localhost:4000/hello にアクセスすると、その時点で helloページが表示される！
※ webディレクトリ配下はサーバの再起動無しに勝手にコンパイルされる。
パラメータを受け取るページの追加
1.新ページのパス設定を追加
scope "/", HelloPhoenix do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
get "/hello", HelloController, :index
get "/hello/:messenger", HelloController, :show ←追加行
end
:messenger が入ったパス定義を追加し、 HelloControllerの showメソッドに紐付けた。
2.HelloController に showメソッドを定義
編集ファイル：web/controllers/hello_controller.ex
def show(conn, %{"messenger" => messenger}) do
render conn, "show.html", messenger: messenger
end
showの第二引数がパラメータを受け取るよう定義された。
描画するページは show.html と定義した。
3.描画するページを作成
作成ファイル： web/templates/hello/show.html.eex
<div class="jumbotron">
<h2>Hello World, from <%= @messenger %>!</h2>
</div>
<%= @messenger %> という定義があるが、これは先程のパラメータ messengerを参照して表示するという内容となっている。
4.http://localhost:4000/hello/Hoge にアクセス
パスパラメータとして設定した Hoge が画面に表示されていることが確認できた！
【補足】テンプレートの構成
web/templates/layout/app.html.eexを参照すると
<main role="main">
<%= render @view_module, @view_template, assigns %>
</main>
という記述がある。
実はこのlayoutが基本的なページレイアウトで、先程追加したページは、基本レイアウトに埋め込まれて表示される部分となっている。
【補足】便利な router定義 resources
ユーザの登録・一覧・編集・削除を提供するアプリを作成する場合、上記のような定義だと一つ一つコントローラ定義をしないといけない...と思いきや
で示される resources を使うと
scope "/", HelloPhoenix do
pipe_through :browser # Use the default browser stack
get "/", PageController, :index
resources "/users", UserController ←追加行
end
と定義するだけで、下記のコントローラ定義をしたことになる！楽ちん！
user_path GET /users HelloPhoenix.UserController :index
user_path GET /users/:id/edit HelloPhoenix.UserController :edit
user_path GET /users/new HelloPhoenix.UserController :new
user_path GET /users/:id HelloPhoenix.UserController :show
user_path POST /users HelloPhoenix.UserController :create
user_path PATCH /users/:id HelloPhoenix.UserController :update
PUT /users/:id HelloPhoenix.UserController :update
user_path DELETE /users/:id HelloPhoenix.UserController :delete
resourcesはネスト定義できます。
想像どおりかと思いますが、
resources "/users", UserController do
resources "/posts", PostController
end
と /postsのr resources定義を加えると、以下のようなパスで定義できます。
user_post_path GET users/:user_id/posts HelloPhoenix.PostController :index
user_post_path GET users/:user_id/posts/:id/edit HelloPhoenix.PostController :edit
user_post_path GET users/:user_id/posts/new HelloPhoenix.PostController :new
user_post_path GET users/:user_id/posts/:id HelloPhoenix.PostController :show
user_post_path POST users/:user_id/posts HelloPhoenix.PostController :create
user_post_path PATCH users/:user_id/posts/:id HelloPhoenix.PostController :update
PUT users/:user_id/posts/:id HelloPhoenix.PostController :update
user_post_path DELETE users/:user_id/posts/:id HelloPhoenix.PostController :delete
まとめ
前回と今回で、基本的な枠組み作成、画面遷移の定義、作成方法を学ぶことができました。
次回は、ドメイン実装あたりにフォーカスして学べたら良いかなと思います。