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

eminia

于 2011-07-26 10:08:55 发布

阅读量2.4k

点赞数

分类专栏： Titanium 文章标签： mysql user query email mobile function

Titanium 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原文：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 color
Titanium.UI.setBackgroundColor('#FFF');
 
//create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
 
//create our registration window
var registerWindow = Titanium.UI.createWindow({
  title: 'Register',
  backgroundColor: '#FFF',
  url: "RegisterWindow.js"
});
 
 
//create our login window
var loginWindow = Titanium.UI.createWindow({
  title: 'Login',
  backgroundColor: '#FFF',
  url: "LoginWindow.js"
});
 
 
//create the tab to hold the registration window
var registerTab = Titanium.UI.createTab({
 
  icon: 'register.png',
  title: 'Register',
  window: registerWindow
});
 
 
//create the tab to hold the login window
var loginTab = Titanium.UI.createTab({
  icon: 'login.png',
  title: 'Login',
  window: loginWindow
});
 
 
//add our tabs to the tabgroup
tabGroup.addTab(registerTab);
tabGroup.addTab(loginTab);
 
 
//display the tabgroup
tabGroup.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");

eminia

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Titanium教程day4-php+MySQL后台做注册登录模块

原文：http://wiki.appcelerator.org/display/guides/HTTPClient+with+PHP+and+MySQL本课教你用Titanium.Network.HTTPClient对象结合php+MySQL 后台做注册登录模块。下载源文件。要点
复制链接

扫一扫