Understanding Forms and Changesets

This page is in progress

This tutorial assumes you have a basic understanding of Elixir and that you have explored Phoenix. It also assumes that you understand HTML forms.

The methodology of this tutorial includes converting a conventional HTML form into a Phoenix template that uses Elixir to communicate with back end code. You also learn how changesets integrate with controllers.

The setup for the tutorial requires the creation of a database table named Item and its Ecto "Context" data. We walk through the entire process.

To begin, create a new empty Phoenix app named app. If you do not know how to do that follow this tutorial:

How to Create an Empty Phoenix Application

When complete, run this command to create database tables and Ecto context code.

mix phx.gen.context Items Item items name:string

Run the migrate command

mix ecto.migrate

Seed Data

In the file named app/priv/repo/seeds.ex type the following code to create "dummy data" for this exercise.

App.Items.create_item(%{name: "item-1"})
App.Items.create_item(%{name: "item-2"})
App.Items.create_item(%{name: "item-3"})

In the terminal type:

mix run priv/repo/seeds.exs

Routes

In routes, add the the following routes.

post "/items", ItemController, :create
get "/items", ItemController, :index

Controller

In app/lib/app_web/controllers create a file controller named:

item_controller.ex

Copy the following code into it.

defmodule AppWeb.ItemController do
  use AppWeb, :controller

  def index(conn, _params) do
    # The home page is often custom made,
    # so skip the default app layout.
    render(conn, :index, layout: false)
  end

end

In the same directory create a file named:

item.html.ex

Open the file and type the following code:

defmodule AppWeb.ItemHTML do
  use AppWeb, :html

  embed_templates "item_html/*"
end

Create a folder named index_html in the same directory like this:

app/lib/app_web/controllers/index_html

In index_html create a file named index.html.heex and copy type the following code into it.

<div> Items go here</div>

Start the app and make sure everything works.

mix phx.server

In your browser go to:

http://localhost:4000/items

You will see the phrase "Items go here" in the upper left corner of the screen.

Submitting Data Through an HTML Form to a Controller

You are now going to write code that lets you submit data through a form and inspect that data from within a controller.

Form

In index.html.heex copy the following HTML form

<form method="POST" action="/items">
    <input type="hidden" name="_csrf_token" value={@csrf_token} />
  <input type="text" name="example" />
  <input type="submit">
</form>

For now, do not concern yourself with the hidden input field. It will be explained later.

    <input type="hidden" name="_csrf_token" value={@csrf_token} />

This page is in progress