Create an HTML5 Initializr-based Subscription Page in Aptana Studio 3

Way back in 2010, Paul Irish released the HTML5 Boilerplate Template. It represented the culmination of years of best practices from top front-end development professionals. As the Internet landscape changed, so too did HTML5 Boilerplate, eventually joining forces with Initializr, an HTML5 templates generator that customizes HTML5 Boilerplate. In today’s article, we’ll employ Initializr to build a single page Web app that submits the user’s email to a server-side PHP script for the purposes of subscribing to an email newsletter.

Working with Initializr

This tutorial can be thought of as the continuation of Aptana Studio 3 Guided Tour and Tutorial: Create a Web Project Using the HTML 5 Boilerplate Framework. In that article, we downloaded and installed Aptana Studio 3 and web server, as well as created a new Web Project based on the HTML5 Boilerplate template. If you’ve followed that tutorial, you can choose to either continue to work with your existing web page or try the Responsive Initializr customization. The steps for that are as follows:

1. Navigate to the Initializr home page.

   

2. Click the Responsive button.
   Doing so will reveal all of the configuration options in the Fine tuning section.

   

3. We’ll just accept the defaults. Click on “Download it!” to save the template to your device.
4. Locate the downloaded file in your file system. It’s a compressed .zip archive.

5. Extract the contents into your project folder. To locate it, right-click on your project in Aptana Studio and select Properties from the context menu. It’s the last item at the bottom:

   

6. On the Resource screen, copy the Location value and set it as the destination folder of the archive files.

   

You should see all of the Initializr files in the Project Explorer. If not, hit the F5 key to refresh the project:

Coding the subscribe.html Page

Double-click the index.html page to open it in the editor. You can also view the page in the browser by following these steps:

1. Right-click the index.html page in the Project Explorer and select Run As > Run Configurations… from the context menu:

   

On the Run Configurations dialog, we need to create a new launch configuration for our web server that we defined back in the Aptana Studio 3 Guided Tour and Tutorial: Create a Web Project Using the HTML 5 Boilerplate Framework tutorial:

2. Select the Web Browser item in the Run Configurations list.
3. Click the New Launch Configuration button to bring up the New Configuration screen.

4. On the New Configuration screen, name the server, select your browser of choice, click the “Use selected server” radio button, and choose our local web server from the list:

   

5. click the Apply button to create the new run configuration.

6. click the Run button to display the index.html page in the browser:

   

If you drag the right side of the browser window to the left, you’ll notice that elements eventually stack vertically as the width of the viewport decreases.

Now, let’s insert our app into the index.html file. Locate the ARTICLE element in the source code and insert the following HTML into it:

<div class="main-container">
    <div class="main wrapper clearfix">

        <article>
            <header>
                <h1>Newsletter Subscription Page</h1>
            </header>
            <section>
              <form id="subscribe">
                <input id="email" name="email" type="email" class="input_bg" placeholder="Add your e-mail address" required />
                <button type="submit" class="button">Submit</button>
              </form>
            </section>
            <section>
              <div id="result" style="display: none"> </div>                   
            </section>
        </article>

        <aside>
            <h3>aside</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
        </aside>

    </div> <!-- #main -->
</div> <!-- #main-container -->

I’ve updated the code somewhat to set the input to the HTML5 email type and assigned a name attribute for the jQuery form.serialize() function. More on that in a bit…

Rename the index.html file to subscribe.html to better reflect the page’s purpose.

The JavaScript

Just below the footer and jQuery initialization code, you’ll notice a reference to the main.js script:

<div class="footer-container">
  <footer class="wrapper">
    <p>Presented by <a href="https://www.htmlgoodies.com" target="new">HTMLGoodies.com</a></p>
  </footer>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>');</script>

<script src="js/main.js"></script>

That file is where we should place all of our own JS code. Open it in the editor and place the following code in it:

 
$('form#subscribe').on('submit', function (e) {
         e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'processForm.php',
            data: $(this).serialize(),
            success: function (response) {
                  $('#result').html(response).show();
                  $('#email').val('');
            }
          });
});

Our onsubmit handler sends the form data to the processForm.php script and displays the server response in a DIV.

The processForm.php Script

For the purposes of this demo, the processForm.php script does not actually store the supplied email; it merely parrots it back in the response as if it was added to the newsletter subscription list.

There is no specific PHP file type, so create a generic file and name it “processForm.php”. Place the following code inside it:

 
<?php
if ($_POST) {
  echo $_POST['email'] . ' was added to the newsletter list.<br/>';
}
?>

Open the subscribe.html in the browser using our server Run Configuration and try the form with a few test values such as:

1. no value
2. an invalid email such as “not an email!”
3. a valid email address (though not necessarily a working email account)

In the first two cases, the browser will generate error messages and prevent the form submission due to the HTML5 email type:

The last test case should result in a success message from the server:

Here is a zip file containing the three files that we worked on today.

Conclusion

With fully customizable Responsive and Bootstrap templates, Initializr brings some of the latest and most in-demand functionality to HTML5 Boilerplate. Moreover, its inclusion of the jQuery library makes it well-suited to single page apps like the one that we built here today.