Building our first pages - Discover Elixir & Phoenix | Ludu

Building our first pages

by Tristan Edwards Tristan Edwards

8 thanks

  • Now that you know more about how routes, templates and controllers work together, let's start building the app we want! In this lesson, we're going to design three pages:

    +
    1. 1

      The landing page (index)

    2. 2

      The "Login"-page

    3. 3

      The "Signup"-page

    +
  • In case you haven't already taken a look at the Sketch-file in the "Phoenix"-lesson, this is what they should look like:

    +
  • The landing page
    +
  • The "Login"-page ("Signup" uses the same design)
    +
  • If you ever run into a problem or your app stops working while following the course, you can either compare your code with the one I have on my GitHub repo (I have organised it so that it has one commit per chapter), or leave a comment right here (hover over some text or code and click the little comment-icon on the right side).

    +
  • Creating the routes

    +
  • Let's jump back into our router.ex-file and generate our routes based on the mockup. The /-scope should currently look like this:

    +
  • Loading code...
    +
  • We will now delete our /test-route, and instead add the /login and /signup-routes:

    +
  • Loading code...
    +
  • If you try to go to one of the new routes in your browser, you'll obviously be greeted with an error message. Time to fix the controller!
    +
  • Head into the page_controller.ex-file. You can delete the say_hello/2-function that we defined earlier. Instead, we'll make sure that we define the three functions that we're referencing from our router: index, login and signup:

    +
  • Loading code...
    +
  • Note that we previously returned render conn, "index.html" in our index/2-function, however, you can actually remove that "index.html"-string. If you omit the second parameter, Phoenix will automatically look for a template with the same name as your function anyway (so the index/2-function is connected to index.html.eex).

    +
  • Getting closer. Now we just need our templates.
    +
  • Create two new files in the messengyr_web/templates/page-folder: login.html.eex and signup.html.eex. We'll keep the contents very simple and similar to each other:

    +
  • Loading code...
    +
  • Loading code...
    +
  • There we go! Similarly, if you go to /signup, you should see the "Signup" page.
    +
  • We'll also update our index page, so that you can log in and sign up from there directly:

    +
  • Loading code...
    +
  • It's not pretty yet, but that's okay!
    +
  • You can also delete the my_name/0-function in page_view.ex while you're at it, since we're not using it anymore.

    +
  • Styling the pages

    +
  • Let's make the page pretty! First, download this zip-file to get all the image assets that we're going to use. Unzip it and place the resulting images-folder in assets/static so that it overwrites the images-folder that's currently there.

    +
  • +
  • Next, we're going to make some changes to our layout-template, so open messengyr_web/templates/layout/app.html.eex. We're adding a special class to the body-tag so that we can style pages differently depending on the route we're on (thanks to @conn.path_info), and we also want to add a header that's visible on every page instead of the h1-tag. Your final body-tag and its content should look like this:

    +
  • Loading code...
    +
  • Note that we're using the special link-helper in our header so that we can easily link to other pages within the app. The first parameter is the text that we want to show inside the a-tag (for the login-link, it's just "Log in"), and in the :to-option you first specify the path type (page_path will look up our page_controller), and then the route as an atom (e.g. :login).

    +
  • This link-helper might at first seem tedious compared to just using a normal a href="/login", but the upside is that your app becomes more "aware" of your intentions . If you accidentally delete a route that you've linked to in your template for example, you'll get an error message instead of keeping a link leading to a blank page.

    +
  • Next, we remove the CSS-file located at assets/css/phoenix.css. These are some predefined styles that Phoenix uses (mostly to show its default landing page) with the Bootstrap library. Since we don't need that, there's no point in keeping it, as it might conflict with our own styling. You might have to restart your Phoenix server (CTRL + C, mix phx.server) after deleting it to see the changes.

    +
  • You should now be able to navigate from one page to the other when clicking on "Log in":

    +
  • +
  • This still looks really ugly though. Time to apply some CSS! In order to make our CSS code more manageable, we'll use the SASS preprocessor. Run this command in a terminal window, inside your assets directory, to install the sass-brunch package from NPM:

    +
  • Loading code...
    +
  • If you open your package.json from the assets folder, you should now see sass-brunch among your other devDependencies. Great! Now simply change the name of the file at assets/css/app.css to app.scss, and you're ready to use SASS!

    +
  • Since this isn't a CSS-tutorial, I won't go into detail about how the styling works here, simply copy the following code and paste it in your app.scss-file:

    +
  • Loading code...
    +
  • Now, just wait for the page to reload and... tada!

    +
  • That looks much better already!
    +
  • The plugin will automatically concatenate all the SASS-files that you add to this folder, so let's create a new header.scss file there as well, with the following content:

    +
  • Loading code...
    +
  • And now our header is there too. Great! If Phoenix doesn't pick up the header.scss file for some reason, try restarting the server.
    +
  • All your three pages should now have some basic markup and styling and we're ready to focus more on the functionality! In the next chapter, we'll go through databases with Ecto!

    +

Did it help you? Click to say "thanks" to the author!

Next lesson: Ecto

Want to create your own course on Ludu?

Back to lesson