本教程中创建的应用程序瞄准销售流程的前端，这个前端有时称为商机。您在本教程中创建的应用程序允许用户直接从他或她的移动电话管理新的机遇。什么原因呢？很简单。当商务人士不在办公室、参加会议或参与网络活动时，他们经常会遇到可能对他们的产品和服务干兴趣的人士。这个应用程序的目标是向用户提供一种简单的方法来采集三个重要信息片段：

例如，下面是一个可能的条目：

简短、美观、达意。当我返回办公室时，就可以向 Joe 发送一封电子邮件，进一步了解他的痛点，或向他提供一些关于我的公司的产品和服务的信息，这些信息可能会引起需要身份管理帮助的人士的兴趣。

这个应用程序不可能是一个完整的销售力量自动化应用程序；但是，它足以充当开始采用一些 JQM 功能的用例场景，而且，如果运用得当，可能会改善某位路途中的销售员的业绩。而且，如果您的销售团队拥有各种设备，比如 iPhone、Android、BlackBerry Torch 和 WebOS，这个应用程序可以任一和所有设备上运行。下面介绍如何构建这个应用程序。

应用程序架构

本节探索本教程的样例应用程序的架构，逐步演示构建过程的每个主要步骤。您可以逐步跟随本教程的操作，自己重建应用程序；或者，您也可以从 下载完整的项目。

应用程序架构

这个应用程序 — 简单地命名为 jQuery tutorial — 跨两个主要平台实现：

移动代码，利用 JQM

服务器端代码，在一个 MySQL 数据库中提供数据持久性

所有服务器端交互通过一些 PHP 文件完成，数据在一个 MySQL 数据库中的一个名为 opportunities 的表中进行管理。

数据库结构非常简单，只有 4 个字段（参见 ）。

表 2. 数据库结构的 4 个字段

列名注释

opp_id一个条目的数值标识符，这个标识符通过数据库自动递增。

opp_person潜在客户的姓名或名称。

opp_contact潜在客户的联系信息。

opp_description简短的商机说明。

展示了 phpMyAdmin 中的文件的结构。列标题包括 Field、Type、Collation、Attributes、Null、Default、Extra、Action。（查看图 5 的 大图。）

图 5. 数据库表结构

您可以看到简单的结构和数据库类型。大部分条目是默认值。在一个生产应用程序中，您可能需要仔细考虑您的数据词典。

要启动应用程序，我使用 phpMyAdmin 的插入特性向数据库插入一些数据。 显示了与本教程中显示的设备屏幕图像相关的数据的屏幕快照。列标题包括 opp_id、opp_person、opp_contact、opp_description。（查看图 6 的 大图。）

图 6. 一些初始数据记录

测试应用程序时，跳转到直接浏览下表是一个有用的健康检查。 显示了应用程序使用的源文件清单。

表 3. 必要的应用程序源文件

文件注释

header.php包括 HTML 文档的头部分，包含必要的脚本标记来包含 JQM 文件。这个文件的内容在前面的 中已显示。

footer.php包括任何 HTML 页脚信息。对于许多应用程序而言，这个信息包含 Google Analytics JavaScript glue 以帮助收集关于应用程序的统计数据。

index.php应用程序用户界面的主页，充当部件控制器、来自一个类 MVC 范式的部件视图、或一个松散配置的 MVC 设计中的控制器的部件。

utils.php这个文件用于放置所有数据访问例程。

db.php这个文件用于存储数据库凭证。

utils.js这个文件用于存储几个表单级验证脚本。

了解这些文件如何协同工作的最好方法是逐步检查每个文件，这是我们下面将介绍的内容。

构建应用程序

大多数应用程序的关键是创建正确的数据模型。如上节所述，这个应用程序的数据模型非常直观。在代码详解中，可以从 中的数据库定义开始。

清单 5. opportunities SQL 脚本

CREATE TABLE IF NOT EXISTS `opportunities` ( `opp_id` int(11) NOT NULL AUTO_INCREMENT, `opp_person` varchar(100) NOT NULL, `opp_contact` varchar(50) NOT NULL, `opp_description` varchar(500) NOT NULL, UNIQUE KEY `opp_id` (`opp_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;

如果您想通过包含额外的字段来修改应用程序，可以通过两种方法将它们添加到数据库：一是通过 phpMyAdmin 这样的工具手动添加，如前面的 所示；二是通过扩展 SQL 脚本。数据库表就绪后，下一步是连接到数据库。可以通过一些 mysql 函数连接到数据库，如 中的 db.php 所示。

清单 6. db.php

<? $mysql_db = "databasename"; $mysql_user = "username"; $mysql_pass = "password"; $mysql_link = mysql_connect("localhost", $mysql_user, $mysql_pass); mysql_select_db($mysql_db, $mysql_link); ?>

显然，您需要使用您自己的环境的数据库名、用户名和密码。如果您不能访问支持 MySQL 和 PHP 的主机帐户但想跟随本教程操作，则现在是配置您的环境的好时机。参见 了解一些可用选项。

数据库就绪后，下一步是切换到一个自上而下的方法，这需要查看这个应用程序的主源文件 index.php，如 所示。

清单 7. 主 UI 源文件

<? require('db.php'); require('utils.php'); require('header.php'); ?> <div data-role="page"> <div data-role="header"> <h1>JQuery Tutorial</h1> </div> <div data-role="content"> <? $action = $_REQUEST['action']; if ($action == 'addnew') { showOneOpp(-1); } else if ($action == 'upsert') { if ($_REQUEST['id'] == '-1') { addOpp($_REQUEST['person'],$_REQUEST['contact'],$_REQUEST['description']); } else { updateOpp($_REQUEST['id'],$_REQUEST['person'],$_REQUEST['contact'], $_REQUEST['description']); } showOpps(); } else if ($action == 'delete') { killOpp($_REQUEST['id']); showOpps(); } else if ($action == 'details') { showOneOpp($_REQUEST['id']); } else { showOpps(); } ?> </div> <div data-role="footer"> Sample code for IBM developerWorks </div> </div> <? require('footer.php'); ?> </body> </html>