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

Application Structure

As mentioned in the introduction, the sample application created in this article is that of a simple contact manager. This will be presented to the user in the form of a single HTML page with primarily two sections: a list of existing contacts and a form with which to add a new contact. 

A separate JavaScript class will be created for each of these two primary functions, with another JavaScript file used to instantiate these classes. Additionally, server-side scripts are required to return a list of contact and to process a submitted contact and save it to the database. 

Therefore, the following files are required: 

• index.html – The HTML file that the user visits in their web browser.
• /js/Application.js – The JavaScript file that creates the contact manager once the page has loaded.
• /js/AddressBook/Contacts.js – The JavaScript file containing the AddressBook_Contacts class, used to display the list of existing contacts. Contacts are retrieved from the server using Ajax.
• /js/AddressBook/Creator.js – The JavaScript file containing the Address_Creator class, used to save contacts to the MySQL database using Ajax.
• contacts.php – The PHP script that lists existing contacts
• create.php – The PHP script that new contact data is submitted to so it can be saved to the database.
• styles.css – A basic stylesheet used to make the main page look nicer.

In addition to these main files, we are also going to create some utility PHP scripts: 

• ContactManager.php – This file will declare the ContactManager PHP class, used to retrieve contacts from the database and to save new contacts to the database.
• database.php – This file will make the connection to the database so it can be used in the ContactManager class.

If you were going to create a more complex PHP application, you would perhaps consider using something like the Zend Framework's Zend_Controller_Front class to structure your code (using the MVC design pattern); however in an effort to keep the example concise I've simplified things as much as possible.

• Next: Creating a Database and Connecting To It