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:
The landing page (index)
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
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
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
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
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 (
page_path will look up our
page_controller), and then the route as an atom (e.g.
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
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
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!