Lesson 2

Controllers, Views and Templates

Phoenix is a Model/View/Controller Web Framework and it has many parallels to Ruby on Rails. New projects have the root page displayed from the page controller's index action, but in this lesson we will override that. We will point it to a new controller, the quote controller and the homepage action.

Pro-tip! One subtle difference you'll notice from rails is that in Phoenix, controller names tend to be in the singular rather than plural.

As of v 0.8 there aren't generators to create controllers yet, so we need to create them manually.

In this lesson we'll setup a new controller, called the quote controller and setup an action called homepage.

Quick Overview

Quickly look at the file structure that was generated when we created a blank Phoenix web application. The bulk of the interesting code is in the folder called web, it's like the app folder in Rails. You'll see channels, controllers, models, templates, views.

Pro-tip! If you're coming from rails, views is serving a role close to what helpers do, and templates are the templates for HTML, that are generally put in Ruby on Rails views.

Create a Controller

Build a new file in the folder web/controllers called quote_controller.ex, and have it be a blank controller. You can compare this to the page controller, as it's code is quite similar.

defmodule Splurty.QuoteController do
  use Phoenix.Controller

  plug :action
end

Save the file.

Our goal now is to hook-up request to the root url of our application to go to the QuoteController and the homepage action (we'll hook the homepage action up in the controller a bit later).

Run the following command to see which URLs are hooked up to which controllers and actions.

$ mix phoenix.routes

Right now it will say:

page_path  GET  /  Splurty.PageController.index/2

Next, we want to change our routes so the root page goes to the QuoteController.

To do this, edit web/router.ex to look like this:

defmodule Splurty.Router do
  use Phoenix.Router

  pipeline :browser do
    plug :accepts, ~w(html)
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
  end

  pipeline :api do
    plug :accepts, ~w(json)
  end

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

get "/", QuoteController, :homepage
end # Other scopes may use custom stacks. # scope "/api", Splurty do # pipe_through :api # end end

Save the file.

Then run the command to generate and display the routes table for our application

$ mix phoenix.routes

Now it will say:

quote_path  GET  /  Splurty.QuoteController.homepage/2

This indicates we properly hooked up the routes to our new controller.

We now need to add the homepage action into our controller. Edit web/controllers/quote_controller.ex to look like this:

defmodule Splurty.QuoteController do
  use Phoenix.Controller

  plug :action
  
def homepage(conn, _params) do render conn, "homepage.html" end
end

Save the file.

Building the View

We'll need to build the view file to support our QuoteController.

Build a new file in the web/views directory called quote_view.ex and put the following content in it:

defmodule Splurty.QuoteView do
  use Splurty.View
end

Save the file.

We are very close to having the root of our web application changed.

Build the template

Create a new folder for quote templates in the application by running the following command:

$ mkdir web/templates/quote

Then add a file to the web/templates/quote directory called homepage.html.eex with the following content:

Number of reasons I yolo everyday <%= 10 + 14 %>

Save the file.

Return to your web browser. Refresh the page at localhost:4000 and the page should update.

You'll notice html.eex is similar to html.erb files in ruby. This allows you to template out HTML, and will execute elixir code, and display it to the page between the <%= and %>.

Your application should look just like this at this step.

Next Lesson