목적

Elixir+Phoenix+MongoDB를 사용하여 최소한의 게시판을 작성하고,
Phoenix의 기본 기능에 대한 습관을 구현합니다.

구현 환경

OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.4
Phoenix Framework: v0.13.1
elixir-mongo: v0.5.1
MongoDB: v3.0.3

시작하기 전에

Phoenix Framework를 사용하여 게시판을 작성합니다.
개인적으로는 제일 작성이 간단하고 기본 기능의 습관이 된다고 생각하고 있으므로・・・
매번 새로운 언어와 웹 프레임 워크를 사용할 때는 나의 항례 행사가되고 있습니다 (웃음)

프로젝트는 다음과 같이 작성되었다.

>cd プロジェクト作成ディレクトリ
>mix phoenix.new phoenix_bbs
>cd phoenix_bbs
>mix phoenix.server (localhost:4000)
>Ctrl+c

※ MongoDB등의 실행 환경은 스스로 정돈해 주세요.

목차

작업 목록

소스 코드 목록

요약

1. 작업 목록

- 프로젝트 생성

-/web/router.ex에 범위 및 라우팅 대상 추가
--액션은 "index"와 "create"를 지정

- 신규 컨트롤러 작성
- 양식의 입력 값 가져 오기
- 리디렉션 설정
--index 액션에 컬렉션의 내용을 모두 표시하는 처리 추가
--create 액션에 컬렉션에 입력 내용을 삽입하는 처리 추가

- 신규 뷰 작성

- 새 템플릿 만들기
- 렌더링 할 디렉토리 만들기
- 렌더링 할 템플릿 만들기
- 템플릿에 양식 추가
- 양식을 사용한 페이지 전환
- 데이터를 반복적으로 표시하는 프로세스 만들기

-MongoDB
--MongoDB 시작

2. 소스 코드 목록

작성 또는 편집한 소스 코드는 다음과 같다.

mix.exs
종속성 설정.
: mongo를 추가하고 있습니다.

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

/web/router.ex
라우팅 대상 추가.
새롭게 스코프를 작성해 기술하고 있습니다.

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

/web/controllers/bbs_controller.ex
라우팅 대상에 정의한 액션을 작성.
또, Model 클래스는 작성하고 있지 않기 때문에, DB의 처리는 여기에 쓴 글.

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

/web/view/bbs_view.ex
뷰는 작성했을 뿐, 특별히 처리는 추가하고 있지 않다.

bbs_view.ex

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

/web/templates/bbs/bbs.html.eex
템플릿의 큰 처리는
코멘트의 일람을 표시하는 것과 코멘트를 입력하는 부분을 표시하는 것.
일부, eex의 기술(<%= %>)로 Elixir 코드를 실행하고 있다.

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>

실행합니다.>mix phoenix.server액세스 페이지 : http://localhost:4000/bbs
이런 느낌의 화면이 나옵니다.

3. 정리

작성중에 약간의 문제는 일어났지만 일수 2일간으로 완성~
(이것을 느리다고 보는지, 빠르다고 보는지・・・그럼 어떨까・・・)

디자인이 불행한 것은 신경 쓰지 마십시오.
CSS는 거의 무지와 같기 때문에 (웃음)

소스 코드 세트는 다음 Github 리포지토리에 있습니다.
원한다면 부디 ~
Github - phoenix_bbs

참고문헌

없음! !