Understanding Forms and Changesets: Difference between revisions

From ElixirBlocks
Jump to: navigation, search
No edit summary
No edit summary
Line 5: Line 5:
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 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=
=Getting Started=
Line 17: Line 12:


[[How to Create an Empty Phoenix Application|How to Create an Empty Phoenix Application]]
[[How to Create an Empty Phoenix Application|How to Create an Empty Phoenix Application]]
When complete, run this command to create database tables and Ecto context code.
<source>
mix phx.gen.context Items Item items name:string
</source>
Run the migrate command
<source>
mix ecto.migrate
</source>
==Seed Data==
In the file named app/priv/repo/seeds.ex  type the following code to create "dummy data" for this exercise.
<source>
App.Items.create_item(%{name: "item-1"})
App.Items.create_item(%{name: "item-2"})
App.Items.create_item(%{name: "item-3"})
</source>
In the terminal type:
mix run priv/repo/seeds.exs
==Routes==
In routes, add the the following routes.
<source>
get "/items", ItemController, :index
</source>




==Controller==


In app/lib/app_web/controllers create a file controller named:
==Creating an HTML Form and Post Request==


item_controller.ex
In the [[router]] create these two routes:
 
Copy the following code into it.


<source>
<source>
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
</source>
In the same directory create a file named:
'''item.html.ex'''
Open the file and type the following code:
<source>
defmodule AppWeb.ItemHTML do
  use AppWeb, :html
  embed_templates "item_html/*"
end
</source>
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.
<source>
<div> Items go here</div>
</source>
Start the app and make sure everything works.
'''mix phx.server'''
In your browser go to:
<source>
http://localhost:4000/items
</source>
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'''
<source>
   scope "/", AppWeb do
   scope "/", AppWeb do
     get "/items/:data", ItemController, :index  #:data is a variable
     pipe_through :browser
    get "/items", ItemController, :index
    get "/", PageController, :home
  end
</source>
 
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:
 
<source>
  def index(conn, _params) do
    IO.inspect _params
    render(conn, :index, layout: false)
  end
 
</source>
 
Open the Item template in '''app_web/controllers/item_html/index.html.heex'''
 
Write a hyper link like this:
 
<source>
<a href ="items/some-data-goes-here>Click me</a>
</source>
 
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:
 
<source>
%{"data" => "some-data-goes-here"}
</source>
 
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. 
 
 
Elixir Phoenix has it's own syntax for writing forms. This syntax is named Embedded Elixir or Heex for short. It lets you write Elixir code in your HTML template files to work with data from the server, database and user interface.
 
An example of a form with Heex used looks like this:
 
<source>
 
<.form for={@form} phx-change="validate" phx-submit="save">
  <.input type="text" field={@form[:username]} />
  <.input type="email" field={@form[:email]} />
  <button>Save</button>
</.form>
 
</source>
 
 
Prior to using Heex, you will create a working HTML form ''without'' Heex, and gradually integrate Heex into it.
 
To do this you need to create:
 
* A POST route
* A Controller for the POST
* An Html form


===HTML Form in Template ===
    get "/", PageController, :index      # First route
    post "/create", PageController, :new  # Second route


Go to your item index template: '''app_web/controllers/item_html/index.html.heex'''


Create basic HTML form.
<source>
<form method="POST" action="/submit">
  <input type="text" name="example" />
  <input type="submit">
</form>
</source>
===Route===
In your router, create the following route. The endpoint must be "submit".
<source>
post "/submit", ItemController, :index
</source>
===Controller===
<source>
  def submit(conn, _params) do
    # The home page is often custom made,
    # so skip the default app layout.
    IO.inspect _params
    redirect(conn, to: "/items")
   end
   end
 
</source>
</source>


Go to localhost:4000/items


You will see a form. Click the submit button.
Create this controller code in a file named  '''page_controller.ex'''. Place the file in the controller directory.


An error will appear:


<source>
<source>
invalid CSRF (Cross Site Request Forgery) token, please make sure that:
  * The session cookie is being sent and session is loaded
  * The request include a valid '_csrf_token' param or 'x-csrf-token' header
</source>
To fix the error add the following line to your form right above the index element.
<source>
<%# <input type="hidden" name="_csrf_token" value={@csrf_token} /> %>
</source>
It will look like this:
<source>
<form method="POST" action="/submit">
  <input type="hidden" name="_csrf_token" value={@csrf_token} />
  <input type="text" name="example" />
  <input type="submit">
</form>
</source>
The controller now needs to be configured to render the CSRF token. Change your Item controller code to reflect the following example:
<source>
  def index(conn, _params) do
    IO.inspect _params


defmodule AppWeb.PageController do
  use AppWeb, :controller


  def index(conn, params) do
    IO.inspect params
     csrf_token = Plug.CSRFProtection.get_csrf_token()
     csrf_token = Plug.CSRFProtection.get_csrf_token()
     render(conn, :index, [csrf_token: csrf_token])
     render(conn, :index, data: "Hello World",form: %{},csrf_token: csrf_token)
   end
   end


  def new(conn, params) do
      IO.inspect params
      redirect(conn, to: "/")
  end
end


</source>
Start the server and go to localhost:4000/items
Submit data to the form.
In the terminal, the submitted data and CSRF content is viewable.
<source>
%{
  "_csrf_token" => "CAgbPih1d3QuUwIpW1t1byQvEAIUQz8beoJkRF4BxcNv38LYLHr6ZnLo",
  "example" => "Test"
}
</source>
The key "example" is the name of the form, and has your form submission data.
==Example Using <.form>==
<source>
  <.form :let={f} action={~p"/create"}>
    <.input field={f[:x]} name="submitted-data" />
  </.form>
</source>
</source>

Revision as of 00:50, 15 March 2024

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.


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


Creating an HTML Form and Post Request

In the router create these two routes: 

  scope "/", AppWeb do
    pipe_through :browser

    get "/", PageController, :index       # First route
    post "/create", PageController, :new  # Second route


  end


Create this controller code in a file named page_controller.ex. Place the file in the controller directory. 



defmodule AppWeb.PageController do
  use AppWeb, :controller

  def index(conn, params) do
    IO.inspect params
    csrf_token = Plug.CSRFProtection.get_csrf_token()
    render(conn, :index, data: "Hello World",form: %{},csrf_token: csrf_token)
  end

  def new(conn, params) do
      IO.inspect params
      redirect(conn, to: "/")
  end
end
Retrieved from "http://elixirblocks.com/index.php?title=Understanding_Forms_and_Changesets&oldid=1800"