Web Tutorial: Multilingual Easter Form (Part 1/3)

Happy April Fool's Day! And incidentally, Happy Easter!

Last February, we did a Ruby On Rails tutorial that switches languages on-the-fly. And it worked. But sometimes, that just isn't enough. The site depends on refreshing pages in order to bring forth new content. Which is well and peachy when you're only delivering static content.

Now, what happens if your site has a form?

Imagine filling up a form with data and stuff, and you find you can't really understand the labels because they're in a language you're unfamiliar with. No problemo - there's this nifty drop-down list that allows you to select a different language! Once the language is selected, the page is refreshed, and the labels change. Wunderbar! But there's a catch - all the data you keyed into the fields is gone.

Well, there are ways around that annoying problem, and we're going to explore one way today - the client-side equivalent of what we did in February. This time, the site's theme will be Easter! We'll reuse the code from February as much as is reasonable... which means we'll be dealing with Ruby On Rails again! However, there will be minimal MVC in this tutorial.

First, make a copy of whatever we did in February. If you need the code, it's here. We'll work in that new folder.

Now, go to routes.rb file in your config folder. Delete everything except for the langs route, which we'll be using.

routes.rb

Rails.application.routes.draw do
    get "langs/index" => "langs#index"
    get "langs/index/:lang" => "langs#index"
end

Then add this. This means that about will be your default index route.

routes.rb

Rails.application.routes.draw do
    get "about/" => "about#index"
    get "langs/index" => "langs#index"
    get "langs/index/:lang" => "langs#index"

    root "about#index"
end

Models

Go to the models directory in your app folder. Delete trait.rb, year.rb, fortune.rb and welcome.rb. Create a new file, about.rb. You won't have to add anything in there except a class definition.

about.rb

class About

end

Controllers

Now, go to your controllers directory within the app folder. Delete trait_controller.rb, year_controller.rb, fortune_controller.rb and welcome_controller.rb. Create a new file, about_controller.rb.

about_controller.rb

class AboutController < ApplicationController
      def index
         
      end
end

Views

This is where it gets interesting. Go to the views directory in the app folder. Delete the folders trait, year, fortune and welcome. Create a new folder, about, and in it, a new file index.html.erb.

Now we'll put some form elements in there using the built in helpers from Rails. First is a label tag. The first argument provides the control for which the label is bound to. The second provides the text, and the third argument is any extra HTML attributes. In this case, we want to give it a class name of lblName.

about\index.html.erb

<%= label_tag(:txtName, "Name", class:"lblName") %>

Next, let's create a field. This helper will create an input tag, a basic textbox with the name txtName.

about/index.html.erb

<%= label_tag(:txtName, "Name", class:"lblName") %>
<%= text_field_tag(:txtName) %>

Add a couple break points. Rinse and repeat for a email label and textbox!

about\index.html.erb

<%= label_tag(:txtName, "Name", class:"lblName") %>
<%= text_field_tag(:txtName) %>
<br /><br />
<%= label_tag(:txtEmail, "Email", class:"lblEmail") %>
<%= text_field_tag(:txtEmail) %>

Next, add more breaks and a submit button. Here, we use the button_tag() helper. The first argument we pass in, is the text of the button followed by a class name of lblSendEmail.

about\index.html.erb

<%= label_tag(:txtName, "Name", class:"lblName") %>
<%= text_field_tag(:txtName) %>
<br /><br />
<%= label_tag(:txtEmail, "Email", class:"lblEmail") %>
<%= text_field_tag(:txtEmail) %>
<br /><br />
<%= button_tag("Send mail", class:"lblSendEmail") %>

Before we do anything else, go to the layouts directory within the views directory, and open application.html.erb. Erase everything from the file and start over with a basic layout.

layouts\application.html.erb

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <%= csrf_meta_tags %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>

    <body>
        <%= yield %>
    </body>
</html>

Whoops! This is one ugly-ass form. That's because we haven't changed the CSS, and thus we're still displaying everything in red background and yellow text. Nothing against those colors, but this is Easter, right?

So, here's what we'll do. For the background, we'll use the pic we used last year for the Easter 2017 web tutorial. Yeah, I'm cheap that way. Save this in the images directory within the assets folder as bg_easter.jpg.

bg_easter.jpg

Now let's go the the CSS and replace it. A lot of the CSS remains the same, with the exception of background and font colors. Note that you don't have to worry about relative links for bg_easter.jpg if you save everything where it's supposed to go. Convention over configuration, baby.

assets\stylesheets/application.css

body, html
{
    color:#000000;
    font-size:16px;
    font-family:arial,sans-serif;
    margin:0px;
    padding:0px;
    height:100%;
}

body
{
    background: url(bg_easter.jpg) left top no-repeat;
    background-size: cover;
}

.container
{
    width:700px;
    height:300px;
    margin:10% auto 0 auto;
    position:relative;
    padding:15px;
    border-radius:10px;
    background-color:rgba(255,255,255,0.5);
}

.header
{
    width:100%;
}

.headertext
{
    font-size:2.5em;
    font-weight:bold;
}

.lblFooter
{
    font-size:0.8em;
    position:absolute;
    top:95%;
    left:5%;
}

.lang
{
    font-size:0.8em;
}

a:visited, a:link {color:#FFFF00;text-decoration: none;}
a:hover, a:active {color:#FF4400;text-decoration: none;}

.right {float:right;}
.clearfix {clear:both;}

Still ugly, but we're getting there!

In the stylesheet, you'll notice styling for container and such. Let's use it! We'll also include the drop-down list we made for the February web tutorial. I already explained how it works back then, and I'm not about to repeat myself, so if you really want to know, head over here.

layouts\application.html.erb

    <body>
        <div class="container">
            <div class="header">
                <div class="right">
                    <span class="lang">
                      <label class="lblLang"></label>
                      <select name="ddlLang" onchange="changeLang(this.value)">
                      <% Lang.allowedVals["languages"].each do |key, value|%>
                          <option value="<%= key %>" <%= selectedLang(key) %>><%= value %></option>
                      <% end %>
                      </select>
                    </span>
                </div>
                <h1 class="lblTitle">

                </h1>
                <div class="clearfix"></div>
            </div>

            <div class="content">
                <%= yield %>
                <div class="clearfix"></div>
            </div>

            <div class="lblFooter">

            </div>
        </div>
    </body>

Oooh, pretty.

Next

We're far from done! I will show you how to switch languages, front-end style.