Building our first pages

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. The landing page (index)

2. The "Login"-page

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:

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:

We will now delete our /test-route, and instead add the /login and /signup-routes:

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:

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).

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:

We'll also update our index page, so that you can log in and sign up from there directly:

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:

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 (Routes.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:

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:

Now, just wait for the page to reload and... tada!

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:

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!