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.

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.