Làm quen với Elixir on Phoenix qua phương trình bậc 2

Ở bài trước chúng ta đã lướt qua được cách cài đặt và khởi động được server của Elixir trên Phoenix. Đối với những tài liệu ở bài trước thì các bạn hoàn toàn có thể tìm hiểu được chi tiết qua các đề mục đó. Nhưng với mình thì việc tìm hiểu một cách nhanh nhất và hiệu quả nhất là bắt tay vào làm một trang web và tìm được những gì mình thực sự cần chứ không phải đọc một cách lan man. Chính vì vậy, ở bài này mình sẽ làm một trang web đơn về việc giải phương trình bậc 2. Trang web này có 1 trang chính giới thiệu rồi link tới trang điền thông số để tính toán.

I. Tạo trang introduction

Chúng ta đã có thể vào localhost và hiển thị trang chủ. Đó chính là trang default được định nghĩa sẵn.

Để có thể có một trang web như vậy thì ta cần phải làm các bước sau:

1. Tạo controller có action nào đó

defmodule HelloPhoenix.PageController do
  use HelloPhoenix.Web, :controller

  def index(conn, _params) do
    render conn, "index.html"
  end

  def introduction(conn, _params) do
    render conn, "introduction.html"
  end
end

Ở đây mình đã tạo thêm action introduction trong PageController (/web/controllers/page_controller.ex). Trong đó hàm index chính là link tới trang chủ.

2. Tạo file view tương ứng với action đó. View thì được đặt tại thư mục web/templates/controller với trang introduction thì sẽ là web/templates/page/introduction.html.eex

<h2>Lê Văn Ban</h2>
Chương trình tính giải phương trình bậc 2: <img src="<%= static_path(@conn, "/images/ptb2.png") %>">
Nhập vào các giá trị a,b,c rồi ấn nút Giải</br>
Chương trình mang tính chất giải trí và làm quen với Elixir on Phoenix</br>
</br>
Ấn <%= link "vào đây", to: log_path(@conn, :index), class: "btn btn-default" %> để đến chương trình giải phương trình bậc 2

3. Tạo routes

Để chỉ đường dẫn trang web tương ứng với action nào thì chúng ta phải đặt chúng tại file web/router.ex

  scope "/", HelloPhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "introduction", PageController, :introduction
  end

Ta thêm get "introduction", PageController, :introduction vào trong scope "/" để link đường dẫn /introduction vào action trong PageController.

Ở view web/templates/page/introduction.html.eex các bạn thấy được ta sử dụng các hàm của Phoenix trong view chính là được đặt trong dấu <%= ... %> hoặc <% .. %> điều này cũng tương tự như trong rails. Nhưng với Phoenix thì ta chỉ sử dụng dấu " chứ không sử dụng được ' như rails

• "<%= static_path(@conn, "/images/ptb2.png") %>" => OK
• "<%= static_path(@conn, '/images/ptb2.png') %>" => EROR Để sử dụng đường dẫn static_path này với các file ảnh, js hay css thì ta thường đặt trong thư mục web/static và phải định nghĩa chúng ở trong file lib/hello_phoenix/endpoint.ex

plug Plug.Static,
    at: "/", from: :hello_phoenix, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt framgia.jpg)

Với file ptb2.png thì được đặt trong thư mục images nên không cần phải thêm. Còn file framgia.jpg thì đặt ở trong thư mục asset nên ta phải thêm vào danh sách trên. Nó cũng gần giống với asset preconpile của rails.

Đối với Phoenix thì routes có khác biệt một chút so với rails.

• Rails sử dụng hàm: introduction_page_path
• Phoenix sử dụng hàm: page_path(@conn, :introduction) Như vậy với Phoenix thì thường sẽ là dùng tên controller để gọi hàm và truyền tên action vào chứ không sinh sẵn path như rails.

II. Tạo controller, model, view

Với rail thì ta có rails generate controller (model) còn với Phoenix thì ta có thử sử dụng

• mix phoenix.gen.html tạo ra cả html, controller, model với đủ 7 action theo chuẩn
• mix phoenix.gen.model chỉ tạo model

Tham khảo tại đây

Ví dụ khi tạo controller với model và view Log để lưu lại các phương trình bậc 2 thì ta sử dụng lệnh sau

mix phoenix.gen.html Log logs a:integer b:integer c:integer result:text

Khi đó các file sẽ được tạo tự động và ta chỉ cần vào chỉnh sửa và điều hướng theo ý của mình là xong.

Với rails thì ta hay sử dụng f.number hay f.lable còn với Phoenix thì lại sử dụng như sau:

<%= form_for @changeset, @action, fn f -> %>
    <%= label f, :a, class: "control-label" %>
    <%= number_input f, :a, class: "form-control" %>
<% end %>

Điểm giống nhau giữa 2 cái là đều có form_for với end để bắt đầu và kết thúc một block.

Trong rails ta có active-record để gọi vào database lấy các đối tượng qua model với phoenix ta có Ecto Trong file web/web.ex có định nghĩa như sau:

  def model do
    quote do
      use Ecto.Schema

      import Ecto
      import Ecto.Changeset
      import Ecto.Query
    end
  end

  def controller do
    quote do
      use Phoenix.Controller

      alias HelloPhoenix.Repo
      import Ecto
      import Ecto.Query

      import HelloPhoenix.Router.Helpers
      import HelloPhoenix.Gettext
    end
  end

Như vậy ở trong view ta sử dụng Repo để gọi các hàm tương ứng lấy dữ liệu từ trong database ra. VD:

logs = Repo.all(Log) # Lấy tất cả
log = Repo.get(Log, 2) # Log với id = 3

Chi tiết tại ecto

Model Log

defmodule HelloPhoenix.Log do
  use HelloPhoenix.Web, :model

  schema "logs" do
    field :a, :integer
    field :b, :integer
    field :c, :integer
    field :result, :string

    timestamps()
  end

  @doc """
  Builds a changeset based on the `struct` and `params`.
  """
  def changeset(struct, params \\ %{}) do
    struct
    |> cast(params, [:a, :b, :c, :result])
    |> validate_required([:a, :b, :c, :result])
    |> validate_exclusion(:a, [0], message: "a phải khác 0")
  end
end

Ở phoenix ta thấy ngay cả cấu trúc schema của bảng ở đây, và ta cũng định nghĩa luôn các attributes được cài đặt và validate trong hàm changeset. => Để tạo một đối tương log mới tương tự với Log.new(a: 1,...) như rails thì với Phoenix ta dùng phương thức sau:

changeset = Log.changeset(%Log{}, %{a: 1, b: 0, c: 0})
Repo.insert(changeset) # Lưu object đó vào database

Ví dụ với hàm create trong log_controller:

def create(conn, %{"log" => log_params}) do
    changeset = Log.changeset(%Log{}, log_params)
    {a, _} = Integer.parse(log_params["a"])
    {b, _} = Integer.parse(log_params["b"])
    {c, _} = Integer.parse(log_params["c"])
    delta = b * b - 4 * a * c
    case delta do
      del when del < 0 ->
        log_params = Map.merge(log_params, %{"result" => "Phương trình vô nghiệm"})
      del when del == 0 ->
        log_params = Map.merge(log_params, %{"result" => "Phương trình có nghiệm kép x1 = x2 = #{-b / (2 * a)}"})
      _ ->
        :math.sqrt(delta)
        log_params = Map.merge(log_params, %{"result" => "Phương trình vô nghiệm"})
    end
    changeset = Log.changeset(%Log{}, log_params)
    case Repo.insert(changeset) do
      {:ok, _log} ->
        conn
        |> put_flash(:info, "Log created successfully.")
        |> redirect(to: log_path(conn, :index))
      {:error, changeset} ->
        render(conn, "new.html", changeset: changeset)
    end
  end

Như các bạn thấy thì log_params tương tự như params ở rails. Và nó chỉ chứ các giá trị được gửi từ form lên. Nó là một dạng Map nó gần giống như hash trong ruby, nó cũng có key và value nhưng cách sử dụng không được linh hoạt bằng ruby.

Để thay đổi hay thêm giá trị của 1 key nào đó ta thường dùng Map.merge(params1, params2) Khi các key của params2 trùng với params1 thì nó sẽ được lấy giá trị của params2.

Như vậy ta đã làm quen với các khái niệm model, controller, view, routes, kiểu dữ liệu map và case when...

Qua bài viết này các bạn có thể tạo được một trang web cơ bản thêm, sửa, xóa, thống kê với database, thêm ảnh trong asset và gọi ra trên view... Bài viết sau sẽ đi sâu thêm vào các phần. Hi vọng các bạn sẽ theo dõi

Video demo

Source code: tại đây

III. Tài liệu tham khảo

• http://elixir-lang.org/getting-started/keywords-and-maps.html
• https://hexdocs.pm/ecto/Ecto.html
• https://hexdocs.pm/phoenix/Mix.Tasks.Phoenix.Gen.Html.html ...