Titanium教程day4-php+MySQL后台做注册登录模块

原文：http://wiki.appcelerator.org/display/guides/HTTPClient+with+PHP+and+MySQL

本课用Titanium.Network.HTTPClient对象结合php+MySQL 后台做注册登录模块。
下载源文件。
要点：
 * 用Titanium.Network.HTTPClient发送变量给后台
 * PHP后台验证用户信息
 * 接收并解析JSON

介绍

本课以iPhone为目标设备。

准备工作

安装php建站集成软件包XAMPP，集成了Apache，MySQL & PHP。
创建名为db_mobile的数据库，并创建mobile_users 表，列名如下：
*'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY
*'email' VARCHAR( 255 ) NOT NULL
*'user' VARCHAR( 255 ) NOT NULL
*'pass' VARCHAR( 255 ) NOT NULL

创建项目

创建手机项目，项目名MyDatabaseApp。
进入Resources 文件夹，是系统自动生成的文件夹，包括主文件app.js 。创建3个js文件：
*config.js
*RegistrationWindow.js
*LoginWindow.js
config.js 放全局变量，RegistrationWindow.js是注册窗口的代码，LoginWindow.js是登录窗口的代码。

app.js

删掉app.js的所有代码，改成以下代码：

//set the default background colorTitanium.UI.setBackgroundColor('#FFF'); //create tab groupvar tabGroup = Titanium.UI.createTabGroup();  //create our registration windowvar registerWindow = Titanium.UI.createWindow({  title: 'Register',  backgroundColor: '#FFF',  url: "RegisterWindow.js"});  //create our login windowvar loginWindow = Titanium.UI.createWindow({  title: 'Login',  backgroundColor: '#FFF',  url: "LoginWindow.js"});  //create the tab to hold the registration windowvar registerTab = Titanium.UI.createTab({   icon: 'register.png',  title: 'Register',  window: registerWindow});  //create the tab to hold the login windowvar loginTab = Titanium.UI.createTab({  icon: 'login.png',  title: 'Login',  window: loginWindow});  //add our tabs to the tabgrouptabGroup.addTab(registerTab);tabGroup.addTab(loginTab);  //display the tabgrouptabGroup.open();

注册表单

有几个文本框，来填写email ，用户名，和密码。
建立UI
UI内容，看Designing the User Interface guide
复制下面代码到RegistrationWindow.js:

var curWindow = Titanium.UI.currentWindow; var scrollView = Titanium.UI.createScrollView({  contentWidth:'auto',  contentHeight:'auto',  top:0,  showVerticalScrollIndicator:true,  showHorizontalScrollIndicator:true}); var view = Titanium.UI.createView({  width:"100%",  height: 400,  top:10,  paddingBottom: 15});  var lbl_Email = Titanium.UI.createLabel({  text:'Email:',  height:30,  width:"98%",  color:'#222',  font:{fontSize:16},  top: 10});  var txt_Email = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  font:{fontSize:16},  height: 40,  top: 40});  var lbl_User = Titanium.UI.createLabel({  text:'Username:',  height:30,  width:"98%",  color:'#222',  font:{fontSize:16},  top: 90});  var txt_User = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  font:{fontSize:16},  height: 40,  top: 120});  var lbl_Pass1 = Titanium.UI.createLabel({  text:'Password:',  height:30,  width:"98%",  color:'#222',  font:{fontSize:16},  top: 170});  var txt_Pass1 = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  font:{fontSize:16},  height: 40,  top: 200,  passwordMask: true});  var lbl_Pass2 = Titanium.UI.createLabel({  text:'Repeat Password:',  height:30,  width:"98%",  color:'#222',  font:{fontSize:16},  top: 250});  var txt_Pass2 = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  font:{fontSize:16},  height: 40,  top: 280,  passwordMask: true});  var btn_Register = Titanium.UI.createButton({  width: "98%",  color: "#555",  font:{fontSize: 22, fontWeight: "bold"},  height: 50,  top: 340,  title: "Register"});  view.add(lbl_Email);view.add(txt_Email);view.add(lbl_User);view.add(txt_User);view.add(lbl_Pass1);view.add(txt_Pass1);view.add(lbl_Pass2);view.add(txt_Pass2);view.add(btn_Register);  scrollView.add(view); curWindow.add(scrollView);

结果如下：

加注册代码

下面创建2个函数，一个获取文本框的值，并做验证。第2个执行HTTPClient 请求，并接收返回值。结果会是JSON 格式。
首先是getUserInfo函数，获取文本值并验证，再把值传给函数registerUser。
把下面代码加到btn_Register声明之后：

function getUserInfo(){  var email = txt_Email.value;  var user = txt_User.value;  var pass1 = txt_Pass1.value;  var pass2 = txt_Pass2.value;     if(pass1 == pass2){    registerUser(email, user, pass1);  } else {    alert("Your passwords do not match.");  }}

验证2个密码是否相同，如果是，调用registerUser函数，传进3个值。
接着给按钮加事件：

btn_Register.addEventListener('click',getUserInfo);

你也可以把这一块写成全局函数，这样登录表单也能调用。但本课还是写成私有函数。
下面用Titanium.Network.HTTPClient对象发送数据给后台。这个函数还用来解析后台返回值。

function registerUser(email, user, pass){  var request = Titanium.Network.createHTTPClient();  var url = "http://localhost/mobile.php?action=add_user&email="+email+"&user="+user+"&pass="+pass;  request.open("GET",url);  request.onload = function(){    var arrData = [];    arrData = eval('('+this.responseText+')');    var result = arrData[0].result;    if(result == "true"){      var alrt_Success = Titanium.UI.createAlertDialog({        title: 'Success!',        message: 'You have successfuly created a new account. Now you can log in.',        buttonNames: ['OK']      });      alrt_Success.show();    } else if (result == "another_user"){    var alrt_Sorry = Titanium.UI.createAlertDialog({      title: 'Sorry!',      message: 'According to our database, that username is already in use.',      buttonNames: ['OK']      });      alrt_Sorry.show();    } else {      var alrt_Fail = Titanium.UI.createAlertDialog({        title: 'Error!',        message: 'It seems we are experiencing problems... please try again later.',        buttonNames: ['OK']      });      alrt_Fail.show();    }  };  request.send();}

一行一行看：

var request = Titanium.Network.createHTTPClient();

创建Titanium.Network.HTTPClient对象。

var url = "http://localhost/mobile.php?action=add_user&email="+email+"&user="+user+"&pass="+pass;

这就是后台地址，本例是localhost。当然可以是IP地址或网址。

request.open("GET",url);

这一行指定发送类型GET，和url。

request.onload = function()\{...\}

这一行是回调函数。其中：

var arrData = [];arrData = eval('('+this.responseText+')');var result = arrData[0].result;

第1行创建变量数组来存储返回数据。
第2行解析后台的JSON 返回值。用eval 方法加上参数this.responseText。
关键词this 指向的是父级对象，也就是request变量。
最后一行存储arrData[0].result值。

if.else语句根据结果做出不同情况：

if(result == "true"){  var alrt_Success = Titanium.UI.createAlertDialog({    title: 'Success!',    message: 'You have successfuly created a new account. Now you can log in.',    buttonNames: ['OK']  });  alrt_Success.show();}

当返回true时，创建Titanium.UI.AlertDialog对象。
下面是没有收到值的情况：

else if(result == "another_user"){  var alrt_Sorry = Titanium.UI.createAlertDialog({    title: 'Sorry!',    message: 'According to our database, that username is already in use.',    buttonNames: ['OK']  });  alrt_Sorry.show();}else{  var alrt_Fail = Titanium.UI.createAlertDialog({    title: 'Error!',    message: 'It seems we are experiencing problems... please try again later.',    buttonNames: ['OK']  });  alrt_Fail.show();}

registerUser 函数最后一行：

request.send();

现在点按钮，还不能看，因为没写后台。

接收注册数据

到服务器的htdocs 目录或www 目录，建一个mobile.php文件。写上：

<?php echo "Test123"; ?>

这样就能通过页面http://localhost/mobile.php访问了：
浏览器会输出：

Test123

写入数据库

如果不熟PHP，看w3schools website
打开mobile.php修改，

<?php  switch($_GET['action'])  {    case 'add_user':    break;    case 'login':    break;  }?>

下面是接收变量：

$email = $_GET['email'];$user = $_GET['user'];$pass = md5(trim($_GET['pass']));

把下面代码放在变量声明后：

$resultArr = Array();$connection = mysql_connect("localhost","root","");$db = mysql_select_db("mobile",$connection);$q_string = "SELECT * FROM mobile_users WHERE user = '$user'";$query = mysql_query($q_string,$connection);

第1行创建 PHP 数组，用来存储JSON值。
第2行连接MySQL数据库。 我用的是默认的，可以是带密码的 'URL', 'username', 'password'.
第3行打开mobile数据表，
第4行创建查询字符串，检查用户名是否已经注册。
第5行执行查询，返回$query变量。

输出结果

继续前面的代码：

if(mysql_num_rows($query) > 0){  $resultArr[0]['result'] = "another_user";  } else {  $query = mysql_query("INSERT INTO mobile_users (user, email, pass) VALUES ('$user', '$email', '$pass')",$connection);  if($query){      $resultArr[0]['result'] = "true";  } else {      $resultArr[0]['result'] = "false";  }}echo json_encode($resultArr);mysql_close($connection);

登录表单

构建UI

var curWindow = Titanium.UI.currentWindow;var scrollView = Titanium.UI.createScrollView({  contentWidth:'auto',  contentHeight:'auto',  top:0,  showVerticalScrollIndicator:true,  showHorizontalScrollIndicator:true});var view = Titanium.UI.createView({  width:"100%",  height: "auto",  top:10,  paddingBottom: 15}); var lbl_User = Titanium.UI.createLabel({  text:'Username:',  height:30,  width:"98%",  color:'#222',  font: {fontSize:16},  top: 10});var txt_User = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  font:{fontSize:16},  height: 40,  top: 40});var lbl_Pass = Titanium.UI.createLabel({  text:'Password:',  height:30,  width:"98%",  color:'#222',  font:{fontSize:16},  top: 90});var txt_Pass = Titanium.UI.createTextField({  width: "98%",  color: "#222",  paddingLeft: 5,  border: 1,  borderColor: "gray",  borderRadius: 3,  passwordMask: true,  font:{fontSize:16},  height: 40,  top: 120});var btn_Login = Titanium.UI.createButton({  width: "98%",  color: "#555",  font:{fontSize: 22, fontWeight: "bold"},  height: 50,  top: 180,  title: "Log In"});view.add(lbl_User);view.add(txt_User);view.add(lbl_Pass);view.add(txt_Pass);view.add(btn_Login);scrollView.add(view); curWindow.add(scrollView);

加登录代码

function getUserInfo(e){  var user = txt_User.value;  var pass = txt_User.value;  loginUser(user,pass);}btn_Login.addEventListener('click',getUserInfo);

整个代码

function loginUser(user,pass){  var request = Titanium.Network.createHTTPClient();  var url = "http://localhost/mobile.php?action=login&user="+user+"&pass="+pass; request.open("GET",url);  request.onload = function(){  var arrData = [];  arrData = eval('('+this.responseText+')');  var result = arrData[0];  if(result === "true"){    Titanium.App.Properties.setString("user_id",arrData[0].user_id);    var alrt_Success = Titanium.UI.createAlertDialog({      title: 'Success!',      message: 'You are now logged in and can access member-only features.',      buttonNames: ['OK']    });    alrt_Success.show();  } else {    var alrt_Sorry = Titanium.UI.createAlertDialog({      title: 'Unsuccessful...',      message: 'You have provided the incorrect username and/or password.',      buttonNames: ['OK']    });    alrt_Sorry.show();  }};  loader.send();}

逐行讲解：

var request = Titanium.Network.createHTTPClient();

创建Titanium.Network.HTTPClient对象。

var url = "http://localhost/mobile.php?action=login&user="+user+"&pass="+pass;

创建GET字串。

request.open("GET",url);

执行

request.onload = function(){...}

回调事件。

登录后台

$resultArr = Array();$user = $_GET['user'];$pass = md5(trim($_GET['pass']));$connection = mysql_connect("localhost","root","");$db = mysql_select_db("mobile",$connection);$query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user' AND <tt>pass</tt> = '$pass'");if(mysql_num_rows($query) > 0){  $row = mysql_fetch_assoc($query);  $resultArr[0]['result'] = "true";  $resultArr[0]['user_id'] = $row['id'];} else {  $resultArr[0]['result'] = "false";}echo json_encode($resultArr);mysql_close($connection);

完整代码：

<?php  switch($_GET['action'])  {    case 'add_user':      $user = $_GET['user'];      $pass = md5(trim($_GET['pass']));      $email = $_GET['email'];      $resultArr = Array();      $connection = mysql_connect("localhost","root","");      $db = mysql_select_db("mobile",$connection);      $query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user'",$connection);      if(mysql_num_rows($query) > 0){          $resultArr[0]['result'] = "another_user";      } else {        $query = mysql_query("INSERT INTO mobile_users (user, email, pass) VALUES ('$user', '$email', '$pass')",$connection);        if($query){          $resultArr[0]['result'] = "true";        } else {          $resultArr[0]['result'] = "false";        }      }      echo json_encode($resultArr);      mysql_close($connection);      break;      case 'login':        $resultArr = Array();        $user = $_GET['user'];        $pass = md5(trim($_GET['pass']));        $connection = mysql_connect("localhost","root","");        $db = mysql_select_db("mobile",$connection);        $query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user' AND <tt>pass</tt> = '$pass'");        if(mysql_num_rows($query) > 0){          $row = mysql_fetch_assoc($query);          $resultArr[0]['result'] = "true";          $resultArr[0]['user_id'] = $row['id'];        } else {          $resultArr[0]['result'] = "false";        }        echo json_encode($resultArr);        mysql_close($connection);      break;  }?>

输出结果

var user_id = Titanium.App.Properties.getString("user_id");