使用Titanium+php+mysql开发登录注册实例

移动开发
本文将介绍使用Titanium+php+mysql开发登录注册实例。Titanium是一个Web应用程序运行环境,它支持不同的系统平台(Windows、Linux、Mac),并且支持Web应用程序对本地APIs的访问。在基于Titanium平台上,用户可以快速开发和方便的部署应用程序,并且这些应用程序可以使用本地APIs实现许多普通Web应用程序无法完成的功能和特性。

 一、数据库

1、使用mysql创建一个数据库--titanium_users

2、新建一个表--users

3、插入一些字段

你也可以直接执行这个SQL文件

  1. --phpMyAdminSQLDump 
  2.  
  3. --version2.10.3 
  4.  
  5. --http://www.phpmyadmin.net 
  6.  
  7. -- 
  8.  
  9. --主机:localhost 
  10.  
  11. --生成日期:2012年04月15日14:57 
  12.  
  13. --服务器版本:5.0.51 
  14.  
  15. --PHP版本:5.2.6 
  16.  
  17. SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO"
  18.  
  19. -- 
  20.  
  21. --数据库:`titanium_user` 
  22.  
  23. -- 
  24.  
  25. CREATEDATABASE`titanium_user`DEFAULTCHARACTERSETutf8COLLATEutf8_unicode_ci; 
  26.  
  27. USE`titanium_user`; 
  28.  
  29. ---------------------------------------------------------- 
  30.  
  31. -- 
  32.  
  33. --表的结构`users` 
  34.  
  35. -- 
  36.  
  37. CREATETABLE`users`( 
  38.  
  39. `id`int(11)NOTNULLauto_increment, 
  40.  
  41. `username`varchar(255)collateutf8_unicode_ciNOTNULL, 
  42.  
  43. `password`varchar(32)collateutf8_unicode_ciNOTNULL, 
  44.  
  45. `name`varchar(255)collateutf8_unicode_ciNOTNULL, 
  46.  
  47. `email`varchar(255)collateutf8_unicode_ciNOTNULL, 
  48.  
  49. PRIMARYKEY(`id`) 
  50.  
  51. )ENGINE=MyISAMDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciCOMMENT='用户表'AUTO_INCREMENT=8
  52.  
  53. -- 
  54.  
  55. --导出表中的数据`users` 
  56.  
  57. -- 
  58.  
  59. INSERTINTO`users`VALUES(1,'xiaozhang','asdasd','a4','xiaozhanga4@gmail.com'); 
  60.  
  61. INSERTINTO`users`VALUES(2,'a4','asdasd','xiaozhang','xiaozhanga4@gmail.com'); 
  62.  
  63. INSERTINTO`users`VALUES(3,'1','1','1','1@g.com'); 
  64.  
  65. INSERTINTO`users`VALUES(4,'3','3','3','3@g.cn'); 
  66.  
  67. INSERTINTO`users`VALUES(5,'5','5','5','5@g.cn'); 
  68.  
  69. INSERTINTO`users`VALUES(6,'8','8','8','8@g.cn'); 
  70.  
  71. INSERTINTO`users`VALUES(7,'9','9','9','9@g.cn'); 

二、构建UI

创建titanium工程后,我们首先构建UI,我们的界面从顶层开始,

打开app.js

第一是一个tabGroup,下来有两个tab,每个tab分别有一个window,最后在window里添加一些文本输入框,按钮。

代码如下:

  1. //thissetsthebackgroundcolorofthemasterUIView(whentherearenowindows/tabgroupsonit) 
  2.  
  3. Titanium.UI.setBackgroundColor('#000'); 
  4.  
  5. //创建tabGroup,因为我们的程序将使用两个tab 
  6.  
  7. vartabGroup=Titanium.UI.createTabGroup(); 
  8.  
  9. //创建登录的window 
  10.  
  11. varlogin=Titanium.UI.createWindow({ 
  12.  
  13. title:'登录', 
  14.  
  15. tabBarHidden:true, 
  16.  
  17. url:'login.js' 
  18.  
  19. }); 
  20.  
  21. //创建登录窗口的tab 
  22.  
  23. varloginTab=Titanium.UI.createTab({ 
  24.  
  25. title:"登录", 
  26.  
  27. window:login 
  28.  
  29. }); 
  30.  
  31. //创建注册的window 
  32.  
  33. varaccount=Titanium.UI.createWindow({ 
  34.  
  35. title:'注册', 
  36.  
  37. url:'account.js' 
  38.  
  39. }); 
  40.  
  41. //创建注册窗口的tab 
  42.  
  43. varaccountTab=Titanium.UI.createTab({ 
  44.  
  45. title:'注册', 
  46.  
  47. window:account 
  48.  
  49. }); 
  50.  
  51. //添加登录的tab到tabGroup 
  52.  
  53. tabGroup.addTab(loginTab); 
  54.  
  55. //添加注册的tab到tabGroup 
  56.  
  57. tabGroup.addTab(accountTab); 
  58.  
  59. //打开tabGroup 
  60.  
  61. tabGroup.open(); 

创建登录接口:

创建login.js

代码如下:

  1. //创建win对象指向当前窗口即登录窗口 
  2.  
  3. varwin=Titanium.UI.currentWindow; 
  4.  
  5. //创建用户名文本输入框 
  6.  
  7. varusername=Titanium.UI.createTextField({ 
  8.  
  9. color:'#336699', 
  10.  
  11. top:10, 
  12.  
  13. left:10, 
  14.  
  15. width:300, 
  16.  
  17. height:40, 
  18.  
  19. hintText:'用户名', 
  20.  
  21. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  22.  
  23. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  24.  
  25. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  26.  
  27. }); 
  28.  
  29. //添加用户名文本输入框到当前window 
  30.  
  31. win.add(username); 
  32.  
  33. //创建密码输入框 
  34.  
  35. varpassword=Titanium.UI.createTextField({ 
  36.  
  37. color:'#336699', 
  38.  
  39. top:60, 
  40.  
  41. left:10, 
  42.  
  43. width:300, 
  44.  
  45. height:40, 
  46.  
  47. hintText:'密码', 
  48.  
  49. passwordMask:true, 
  50.  
  51. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  52.  
  53. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  54.  
  55. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  56.  
  57. }); 
  58.  
  59. //添加密码输入框到当前窗口 
  60.  
  61. win.add(password); 
  62.  
  63. //创建登录按钮 
  64.  
  65. varloginBtn=Titanium.UI.createButton({ 
  66.  
  67. title:'登录', 
  68.  
  69. top:110, 
  70.  
  71. width:90, 
  72.  
  73. height:35, 
  74.  
  75. borderRadius:1, 
  76.  
  77. font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14} 
  78.  
  79. }); 
  80.  
  81. //添加登录按钮到当前窗口 
  82.  
  83. win.add(loginBtn); 

创建account.js

代码如下:

  1. //创建win对象指向当前窗口即登录窗口 
  2.  
  3. varwin=Titanium.UI.currentWindow; 
  4.  
  5. //创建垂直滚动的视图 
  6.  
  7. varscrollView=Titanium.UI.createScrollView({ 
  8.  
  9. contentWidth:'auto', 
  10.  
  11. contentHeight:'auto', 
  12.  
  13. top:0, 
  14.  
  15. showVerticalScrollIndicator:true, 
  16.  
  17. showHorizontalScrollIndicator:false 
  18.  
  19. }); 
  20.  
  21. //添加垂直滚动的视图到当前窗口 
  22.  
  23. win.add(scrollView); 
  24.  
  25. //创建用户名输入框 
  26.  
  27. varusername=Titanium.UI.createTextField({ 
  28.  
  29. color:'#336699', 
  30.  
  31. top:10, 
  32.  
  33. left:10, 
  34.  
  35. width:300, 
  36.  
  37. height:40, 
  38.  
  39. hintText:'用户名', 
  40.  
  41. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  42.  
  43. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  44.  
  45. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  46.  
  47. }); 
  48.  
  49. //添加用户名输入框到垂直滚动的视图 
  50.  
  51. scrollView.add(username); 
  52.  
  53. //创建密码输入框 
  54.  
  55. varpassword1=Titanium.UI.createTextField({ 
  56.  
  57. color:'#336699', 
  58.  
  59. top:60, 
  60.  
  61. left:10, 
  62.  
  63. width:300, 
  64.  
  65. height:40, 
  66.  
  67. hintText:'密码', 
  68.  
  69. passwordMask:true, 
  70.  
  71. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  72.  
  73. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  74.  
  75. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  76.  
  77. }); 
  78.  
  79. //添加密码输入框到垂直滚动的视图 
  80.  
  81. scrollView.add(password1); 
  82.  
  83. //创建确认密码输入框 
  84.  
  85. varpassword2=Titanium.UI.createTextField({ 
  86.  
  87. color:'#336699', 
  88.  
  89. top:110, 
  90.  
  91. left:10, 
  92.  
  93. width:300, 
  94.  
  95. height:40, 
  96.  
  97. hintText:'确认密码', 
  98.  
  99. passwordMask:true, 
  100.  
  101. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  102.  
  103. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  104.  
  105. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  106.  
  107. }); 
  108.  
  109. //添加确认密码输入框到垂直滚动的视图 
  110.  
  111. scrollView.add(password2); 
  112.  
  113. //创建姓名输入框 
  114.  
  115. varnames=Titanium.UI.createTextField({ 
  116.  
  117. color:'#336699', 
  118.  
  119. top:160, 
  120.  
  121. left:10, 
  122.  
  123. width:300, 
  124.  
  125. height:40, 
  126.  
  127. hintText:'姓名', 
  128.  
  129. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  130.  
  131. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  132.  
  133. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  134.  
  135. }); 
  136.  
  137. //添加姓名输入框到垂直滚动的视图 
  138.  
  139. scrollView.add(names); 
  140.  
  141. //创建email输入框 
  142.  
  143. varemail=Titanium.UI.createTextField({ 
  144.  
  145. color:'#336699', 
  146.  
  147. top:210, 
  148.  
  149. left:10, 
  150.  
  151. width:300, 
  152.  
  153. height:40, 
  154.  
  155. hintText:'email', 
  156.  
  157. keyboardType:Titanium.UI.KEYBOARD_DEFAULT, 
  158.  
  159. returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, 
  160.  
  161. borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED 
  162.  
  163. }); 
  164.  
  165. //添加email输入框到垂直滚动的视图 
  166.  
  167. scrollView.add(email); 
  168.  
  169. //创建注册按钮 
  170.  
  171. varcreateBtn=Titanium.UI.createButton({ 
  172.  
  173. title:'注册', 
  174.  
  175. top:260, 
  176.  
  177. width:130, 
  178.  
  179. height:35, 
  180.  
  181. borderRadius:1, 
  182.  
  183. font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14} 
  184.  
  185. }); 
  186.  
  187. //添加注册按钮到垂直滚动的视图 
  188.  
  189. scrollView.add(createBtn); 

最终效果如下:

三、添加事件

UI构建完成后,我们将为登录注册按钮分别添加点击事件,完成登录注册功能

打开login.js

在代码的最后面加上以下代码:

  1. //创建HTTPClinet对象 
  2.  
  3. varloginReq=Titanium.Network.createHTTPClient(); 
  4.  
  5. //登录按钮事件--打开远程的逻辑操作,发送登录数据给远程文件进行判断处理 
  6.  
  7. loginBtn.addEventListener('click',function(e) 
  8.  
  9.  
  10. if(username.value!=''&&password.value!='') 
  11.  
  12.  
  13. loginReq.open("POST","http://10.0.2.2:8080/post_auth.php"); 
  14.  
  15. varparams={ 
  16.  
  17. username:username.value, 
  18.  
  19. password:password.value 
  20.  
  21. }; 
  22.  
  23. loginReq.send(params); 
  24.  
  25.  
  26. else 
  27.  
  28.  
  29. alert("Username/Passwordarerequired"); 
  30.  
  31.  
  32. }); 
  33.  
  34. //接收远程返回的数据并使用弹出框显示信息 
  35.  
  36. loginReq.onload=function() 
  37.  
  38.  
  39. varjson=this.responseText; 
  40.  
  41. varresponse=JSON.parse(json); 
  42.  
  43. if(response.logged==true) 
  44.  
  45.  
  46. alert("欢迎"+response.name+".你的Email是:"+response.email); 
  47.  
  48.  
  49. else 
  50.  
  51.  
  52. alert(response.message); 
  53.  
  54.  
  55. }; 

打开account.js文件

在最后的代码加上以下代码:

  1. //定义一个对象用来存储提交数据结果 
  2.  
  3. vartestresults; 
  4.  
  5. //创建验证email的函数 
  6.  
  7. functioncheckemail(emailAddress) 
  8.  
  9.  
  10. varstr=emailAddress
  11.  
  12. varfilter=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
  13.  
  14. if(filter.test(str)) 
  15.  
  16.  
  17. testresults=true
  18.  
  19.  
  20. else 
  21.  
  22.  
  23. testresults=false
  24.  
  25.  
  26. return(testresults); 
  27.  
  28. }; 
  29.  
  30. //创建httpclient对象 
  31.  
  32. varcreateReq=Titanium.Network.createHTTPClient(); 
  33.  
  34. //接收返回的数据 
  35.  
  36. createReq.onload=function() 
  37.  
  38.  
  39. if(this.responseText=="插入失败"||this.responseText=="用户名或电子邮箱已经存在") 
  40.  
  41.  
  42. createBtn.enabled=true
  43.  
  44. createBtn.opacity=1
  45.  
  46. alert(this.responseText); 
  47.  
  48.  
  49. else 
  50.  
  51.  
  52. varalertDialog=Titanium.UI.createAlertDialog({ 
  53.  
  54. title:'提示', 
  55.  
  56. message:this.responseText, 
  57.  
  58. buttonNames:['确定'] 
  59.  
  60. }); 
  61.  
  62. alertDialog.show(); 
  63.  
  64. alertDialog.addEventListener('click',function(e) 
  65.  
  66.  
  67. win.tabGroup.setActiveTab(0); 
  68.  
  69. }); 
  70.  
  71.  
  72. }; 
  73.  
  74. //按钮事件函数 
  75.  
  76. createBtn.addEventListener('click',function(e) 
  77.  
  78.  
  79. if(username.value!=''&&password1.value!=''&&password2.value!=''&&names.value!=''&&email.value!='') 
  80.  
  81.  
  82. if(password1.value!=password2.value) 
  83.  
  84.  
  85. alert("密码不匹配"); 
  86.  
  87.  
  88. else 
  89.  
  90.  
  91. if(!checkemail(email.value)) 
  92.  
  93.  
  94. alert("请输入有效的电子邮箱"); 
  95.  
  96.  
  97. else 
  98.  
  99.  
  100. createBtn.enabled=false
  101.  
  102. createBtn.opacity=0.3; 
  103.  
  104. createReq.open("POST","http://10.0.2.2:8080/post_register.php"); 
  105.  
  106. varparams={ 
  107.  
  108. username:username.value, 
  109.  
  110. password:password1.value, 
  111.  
  112. names:names.value, 
  113.  
  114. email:email.value 
  115.  
  116. }; 
  117.  
  118. createReq.send(params); 
  119.  
  120.  
  121.  
  122.  
  123. else 
  124.  
  125.  
  126. alert("所有字段已经提交"); 
  127.  
  128.  
  129. }); 

四、创建后台逻辑处理文件

我们使用的是PHP,请看

创建登录处理文件post_auth.php放在你的服务器里:

  1. //定义数据库连接 
  2.  
  3. $con=mysql_connect('localhost','root','root'); 
  4.  
  5. if(!$con) 
  6.  
  7.  
  8. echo"Failedtomakeconnection."; 
  9.  
  10. exit; 
  11.  
  12.  
  13. //Selectthedatabase.Enterthenameofyourdatabase(notthesameasthetablename) 
  14.  
  15. $db=mysql_select_db('titanium_user'); 
  16.  
  17. if(!$db) 
  18.  
  19.  
  20. echo"Failedtoselectdb."; 
  21.  
  22. exit; 
  23.  
  24.  
  25. //$_POST['username']and$_POST['password']aretheparamnameswesentinourclickeventinlogin.js 
  26.  
  27. $username=$_POST['username']; 
  28.  
  29. $password=$_POST['password']; 
  30.  
  31. //Selecteveythingfromtheuserstablewhereusernamefield==theusernamewepostedandpasswordfield==thepasswordweposted 
  32.  
  33. $sql="SELECT*FROMusersWHEREusername='".$username."'ANDpassword='".$password."'"; 
  34.  
  35. $query=mysql_query($sql); 
  36.  
  37. //Ifwefindamatch,createanarrayofdata,json_encodeitandechoitout 
  38.  
  39. if(mysql_num_rows($query)>0) 
  40.  
  41.  
  42. $row=mysql_fetch_array($query); 
  43.  
  44. $response=array
  45.  
  46. 'logged'=>true, 
  47.  
  48. 'name'=>$row['name'], 
  49.  
  50. 'email'=>$row['email'] 
  51.  
  52. ); 
  53.  
  54. echojson_encode($response); 
  55.  
  56.  
  57. else 
  58.  
  59.  
  60. //Elsetheusernameand/orpasswordwasinvalid!Createanarray,json_encodeitandechoitout 
  61.  
  62. $response=array
  63.  
  64. 'logged'=>false, 
  65.  
  66. 'message'=>'InvalidUsernameand/orPassword' 
  67.  
  68. ); 
  69.  
  70. echojson_encode($response); 
  71.  
  72.  
  73. ?> 

创建注册处理文件

  1. post_register.php 
  2.  
  3. $con=mysql_connect('localhost','root','root'); 
  4.  
  5. if(!$con) 
  6.  
  7.  
  8. echo"Failedtomakeconnection."; 
  9.  
  10. exit; 
  11.  
  12.  
  13. $db=mysql_select_db('titanium_user'); 
  14.  
  15. if(!$db) 
  16.  
  17.  
  18. echo"Failedtoselectdb."; 
  19.  
  20. exit; 
  21.  
  22.  
  23. $username=$_POST['username']; 
  24.  
  25. $password=$_POST['password']; 
  26.  
  27. $names=$_POST['names']; 
  28.  
  29. $email=$_POST['email']; 
  30.  
  31. $sql="SELECTusername,emailFROMusersWHEREusername='".$username."'ORemail='".$email."'"; 
  32.  
  33. $query=mysql_query($sql); 
  34.  
  35. if(mysql_num_rows($query)>0) 
  36.  
  37.  
  38. echo"Thatusernameoremailalreadyexists"; 
  39.  
  40.  
  41. else 
  42.  
  43.  
  44. $insert="INSERTINTOusers(username,password,name,email)VALUES('".$username."','".$password."','".$names."','".$email."')"; 
  45.  
  46. $query=mysql_query($insert); 
  47.  
  48. if($query) 
  49.  
  50.  
  51. echo"Thanksforregistering.Youmaynowlogin."; 
  52.  
  53.  
  54. else 
  55.  
  56.  
  57. echo"Insertfailed"; 
  58.  
  59.  
  60.  
  61. ?> 

OK!再次运行我们的APP,看最后的效果吧

注册成功界面

注册成功界面

责任编辑:佚名 来源: 移动Web开发社区
相关推荐

2012-04-20 11:07:12

Titanium

2012-04-19 12:58:26

TitaniumJSS

2012-04-19 17:16:32

Titanium实例代码分析

2012-04-19 16:55:48

Titanium视频jQuery Mobi

2012-04-19 16:17:24

TitaniumAndroidtabbar

2012-05-17 09:09:05

Titanium单元测试

2012-04-19 13:55:19

TitaniumTiMVC

2012-04-19 16:22:12

TitaniumTabGroup

2012-06-13 10:36:44

PHP

2012-05-18 10:08:56

TitaniumAndroid

2012-05-18 11:29:55

Titaniumpros

2012-05-18 11:34:03

Titaniumcons

2012-05-18 11:16:42

@Kroll注解详解TitaniumAndroid模块

2012-05-25 13:12:57

TitaniumMobile WebHTML5

2012-02-13 14:41:50

Titanium架构分析

2009-06-10 16:19:33

Eclipse开发PH

2010-06-01 16:50:29

MySQL存储过程

2012-04-19 17:42:46

Titanium布局

2012-05-18 10:52:20

TitaniumAndroid模块自定义View模块

2012-02-09 16:45:41

点赞
收藏

51CTO技术栈公众号