Elixir+Phoenix+MongoDBで掲示板(もどき)を作るだけの簡単なお仕事！

#目的

Elixir+Phoenix+MongoDBを使って掲示板(もどき)を作成する。

#実施環境

OS： Windows8.1
Erlang： Eshell V6.4
Elixir： v1.0.4
Phoenix Framework： v0.13.1
elixir-mongo： v0.5.1
MongoDB：v3.0.3

#目次

1. 作業一覧
2. ソースコード一覧
3. まとめ

#参考文献

なし！！

#始める前に

また、掲示板(もどき)を作成します。
個人的には一番作成が簡単で基本機能のおさらいになると思っているので・・・
毎度、新しい言語とWebフレームワークを使う時は私の恒例行事となっています(笑)

プロジェクトは以下の通り作成した。
>cd プロジェクト作成ディレクトリ
>mix phoenix.new phoenix_bbs
>cd phoenix_bbs
>mix phoenix.server (localhost:4000)
>Ctrl+c

MongoDBのインストール&起動、依存関係へmongoの追加等・・・
MongoDBの実行環境はご自身で整えておいて下さい。

##1. 作業一覧

-プロジェクト作成

-/web/router.exへスコープとルーティング先を追加
  -アクションは"index"と"create"

-新規のコントローラ作成
  -フォームの入力値を取得
  -リダイレクトの設定
  -indexアクションにコレクションの内容を全表示する処理を追加
  -createアクションにコレクションへ入力内容を挿入する処理を追加

-新規のビュー作成

-新規のテンプレート作成
  -レンダリングするディレクトリを作成
  -レンダリングするテンプレートを作成
  -テンプレートにフォームを追加
  -フォームを使ったページ遷移
  -データを繰り返して表示する処理を作成

-MongoDB
  -MongoDB起動

##2. ソースコード一覧

作成または編集したソースコードは以下の通り。
細かい説明は他のPhoenix系の記事を参照して下さい。
基礎的なことや今回使っている機能は全てそちらに書いてあります。

mix.exs

	defmodule PhoenixBbs.Mixfile do
	use Mix.Project
	def project do
	[app: :phoenix_bbs,
	version: "0.0.1",
	elixir: "~> 1.0",
	elixirc_paths: elixirc_paths(Mix.env),
	compilers: [:phoenix] ++ Mix.compilers,
	build_embedded: Mix.env == :prod,
	start_permanent: Mix.env == :prod,
	deps: deps]
	end
	# Configuration for the OTP application
	#
	# Type `mix help compile.app` for more information
	def application do
	[mod: {PhoenixBbs, []},
	applications: [:phoenix, :phoenix_html, :cowboy, :logger,
	:phoenix_ecto, :postgrex]]
	end
	# Specifies which paths to compile per environment
	defp elixirc_paths(:test), do: ["lib", "web", "test/support"]
	defp elixirc_paths(_), do: ["lib", "web"]
	# Specifies your project dependencies
	#
	# Type `mix help deps` for examples and options
	defp deps do
	[{:phoenix, "~> 0.13.1"},
	{:phoenix_ecto, "~> 0.4"},
	{:postgrex, ">= 0.0.0"},
	{:phoenix_html, "~> 1.0"},
	{:phoenix_live_reload, "~> 0.4", only: :dev},
	{:cowboy, "~> 1.0"},
	{:mongo, "~> 0.5.1"}]
	end
	end

view raw mix.exs hosted with ❤ by GitHub

/web/router.ex

	defmodule PhoenixBbs.Router do
	use PhoenixBbs.Web, :router
	pipeline :browser do
	plug :accepts, ["html"]
	plug :fetch_session
	plug :fetch_flash
	plug :protect_from_forgery
	end
	pipeline :api do
	plug :accepts, ["json"]
	end
	scope "/", PhoenixBbs do
	pipe_through :browser # Use the default browser stack
	get "/", PageController, :index
	end
	scope "/bbs", PhoenixBbs do
	pipe_through :browser # Use the default browser stack
	get "/", BbsController, :index
	post "/comment_input", BbsController, :create
	end
	# Other scopes may use custom stacks.
	# scope "/api", PhoenixBbs do
	# pipe_through :api
	# end
	end

view raw router.ex hosted with ❤ by GitHub

/web/controllers/bbs_controller.ex

	defmodule PhoenixBbs.BbsController do
	use PhoenixBbs.Web, :controller
	plug :action
	def index(conn, _params) do
	docs = Mongo.connect!
	|> Mongo.db("phoenix_bbs")
	|> Mongo.Db.collection("comments")
	|> Mongo.Collection.find
	|> Enum.to_list
	render conn, "bbs.html", comments: docs
	end
	def create(conn, params) do
	collection = Mongo.connect! |> Mongo.db("phoenix_bbs") |> Mongo.Db.collection("comments")
	%{name: params["name"],
	title: params["title"],
	comment: params["comment"]
	} |> Mongo.Collection.insert_one!(collection)
	redirect conn, to: "/bbs"
	end
	end

view raw bbs_controller.ex hosted with ❤ by GitHub

/web/view/bbs_view.ex

	defmodule PhoenixBbs.BbsView do
	use PhoenixBbs.Web, :view
	end

view raw bbs_view.ex hosted with ❤ by GitHub

/web/templates/bbs/bbs.html.eex

	<div class="jumbotron">
	<h2>Welcome to Phoenix BBS!</h2>
	</div>
	<div>
	<table>
	<%= for comment <- @comments do %>
	<tr>
	<td>name: <%= comment[:name] %></td>
	<td>title: <%= comment[:title] %></td>
	</tr>
	<tr>
	<td>comment: <%= comment[:comment] %></td>
	<td></td>
	</tr>
	<% end %>
	</table>
	</div>
	<div>
	<%= form_tag("/bbs/comment_input", method: :post) %>
	<table>
	<tr>
	<td>Your Name</td>
	<td><input type="text" name="name" size="40"></td>
	</tr>
	<tr>
	<td>Title</td>
	<td><input type="text" name="title" size="40"></td>
	</tr>
	<tr>
	<td>Comment</td>
	<td><textarea name="comment" rows="3" cols="85"></textarea></td>
	</tr>
	<tr>
	<td><input type="submit" value="send"></td>
	<td><input type="reset" value="reset"></td>
	</tr>
	</table>
	</form>
	</div>

view raw bbs.html hosted with ❤ by GitHub

実行ページ： http://localhost:4000/bbs
こんな感じの画面が表示されるはず(テストデータあり)

##3. まとめ

作成中に少々の問題は起こったが日数2日間で完成～
(これを遅いと見るか、速いと見るか・・・さてどうだろ・・・)

デザインが残念なのは気にしないで下さい。
CSSは殆ど無知に等しいので(笑)

ソースコード一式は以下のGithubリポジトリにあります。
よかったらどうぞ～
Github： phoenix_bbs

#管理人の独り言～

次は宣言通り、trotをやります。
また、掲示板作るかもしれません。