Phoenix Framework Pt. 3

Aug 5, 2024

The routes of the application are defined within the lib/hello_web/router.ex file. In this file, look for the following code snippet.

scope "/", HelloWeb do
  pipe_through :browser

  get "/", PageController, :home
end

In a future article, we will cover what other code does in this file. But, for now we can focus on this code block and specifically, this line - get "/", PageController, :home. It means when a GET / or root route is requested, execute the home action (function) of PageController.

You can find this PageController or page_controller.ex file within the lib/hello_web/controllers folder. Open this file, and you should see the following code.

defmodule HelloWeb.PageController do
  use HelloWeb, :controller

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

There we have the home function! This function renders home template or home.html.heex file without layout and located at lib/hello_web/controllers/page_html folder.

Don’t worry about the location of these files! Don’t memorize the locations. With some practice, you know all these eventually.

So, we have the router.ex file that defines the routes of the application that point to the controller’s action and the controller’s action to render a view. There is one more file page_html.ex located at the lib/hello_web/controllers folder. But, we haven’t talked about it yet and we’ll talk about it in future articles. But, it is required to have to complete this request-response cycle.

---

Let’s add a new route GET /about. Open router.ex file, and write the following.

scope "/", HelloWeb do
  pipe_through :browser

  get "/", PageController, :home
  get "/about", PageController, :about
end

When the GET /about is requested, we are going to call about the action of the PageController file. Let’s add this about function in the page_controller.ex file. Open the page_controller.ex file and write the following.

defmodule HelloWeb.PageController do
  use HelloWeb, :controller

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

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

I almost copied the home function with two notable changes - we are going to render about.html.heex file and remove the layout argument to use default layout. We do not have this about.html.heex file in the lib/hello_web/controllers/page_html file. So, let’s create one.

touch lib/hello_web/controllers/page_html/about.html.heex

Open this about.html.heex file and write the following code.

<h1>About<h1>

Visit http://localhost:4000/about file and you should see this header text with navigation. This navigation is coming from the default layout.

With these changes, now we have the Phoenix application with a new route!

Tags: phoenix

Kiran Chauhan