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.

Glossary

Changeset:
Phoenix Template:

Getting Started

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.

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.

Capture Parameter Data of URL Link

When a user clicks a hyper-link you should know how to capture the url parameters via controller. To do so follow these steps:

Open the router file router.ex. Create a new route that looks like this:

get "/items/:item", ItemController, :index


  scope "/", AppWeb do
    get "/items/:data", ItemController, :index   #:data is a variable
    get "/items", ItemController, :index
    get "/", PageController, :home
  end

The :item is a variable and represents a value that is unknown. When you type a URL like

localhost:4000/item/some-data

The value "some-data" is assigned to the variable :data as a string and the variable is captured in the controller. Once in the controller, the data can be manipulated.

Open the item_controller.ex

Place IO.inspect(_params) in the Item index controller body like this:

  def index(conn, _params) do
    IO.inspect _params
    render(conn, :index, layout: false)
  end

Open the Item template in app_web/controllers/item_html/index.html.heex

Write a hyper link like this:

<a href ="items/some-data-goes-here>Click me</a>

Start the server, go to localhost:4000/items/some-data-goes-here

Open the terminal. While it is open click the link in the website that says Click me.

In the terminal the the following text is presented:

%{"data" => "some-data-goes-here"}

The key is the name of the variable you placed in the route (data) and the string is the data assigned to it in the hyper link (some-data-goes-here)

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.