PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 8, A Complete Prototype Example

Creating the Primary Web Page

Now that we have all of the server-side code in place, it's time to build the client-side aspect of this site. As mentioned near the start of the article, the application consists of a single HTML file with a series of JavaScript files.

As I showed you in the previous article in this series, the goal when developing web applications that use JavaScript is to try and include none of the JavaScript code in your HTML file. Rather, you should use external JavaScript files.

Listing 7 shows the code for the index.html file, which is the file that users of the contact manager load in their web browser. Note that for now the file is trying to load JavaScript files that we have not yet created.

Listing 7 The HTML file used to load the application (index.html)
<html>
    <head>
        <title>Prototype Address Book</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
        <script type="text/javascript" src="/js/Application.js"></script>
        <script type="text/javascript" src="/js/AddressBook/Creator.js"></script>
        <script type="text/javascript" src="/js/AddressBook/Contacts.js"></script>
 
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div>
            <h1>Prototype Address Book</h1>
 
            <div id="creator">
                <form method="post" action="create.php">
                    <dl>
                        <dt>Name:</dt>
                        <dd><input type="text" name="name" /></dd>
                        <dt>Email:</dt>
                        <dd><input type="text" name="email" /></dd>
                        <dt>Location:</dt>
                        <dd><input type="text" name="location" /></dd>
                    </dl>
 
                    <div>
                        <input type="submit" value="Create Contact" />
                    </div>
                </form>
            </div>
 
            <h2>Contacts</h2>
 
            <div id="contacts"></div>
        </div>
    </body>
</html>

The two key elements of this file are the form used to create a new contact (the #creator div), and #contacts div, used to hold all existing contacts.

When we implement the JavaScript code for this application we will read the values from the form and submit them using Ajax, however the beauty of this code is that if the user's browser does not support JavaScript then the form will be submitted normally. Even when using Ajax we will read the form action and method from the HTML code.

Note: We are going to populate the #contacts div with contacts that are retrieved using Ajax. If you really want your application to be accessible to users who do not have JavaScript, you would realistically want to pre-populate this div when the page is loaded rather than using JavaScript. I have chosen not to do so in this example since the point of the article is to demonstrate development of JavaScript code.

The other file referenced in this HTML is the styles.css file. There's nothing overly complex in here, but I've still included it below in Listing 8. All this code does it format each contact in the list of contacts obviously you can format this further if required.

Listing 8 Styling the contact list (styles.css)
.contact { margin : 5px 0; }
.contact .name { font-weight : bold; }
.contact .email { color : #999; }
.contact .location { color : #008000; }

In This Article