使用Titanium+php+mysql開發(fā)登錄注冊實例
一、數(shù)據(jù)庫
1、使用mysql創(chuàng)建一個數(shù)據(jù)庫--titanium_users
2、新建一個表--users
3、插入一些字段
你也可以直接執(zhí)行這個SQL文件
- --phpMyAdminSQLDump
- --version2.10.3
- --http://www.phpmyadmin.net
- --
- --主機:localhost
- --生成日期:2012年04月15日14:57
- --服務(wù)器版本:5.0.51
- --PHP版本:5.2.6
- SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO";
- --
- --數(shù)據(jù)庫:`titanium_user`
- --
- CREATEDATABASE`titanium_user`DEFAULTCHARACTERSETutf8COLLATEutf8_unicode_ci;
- USE`titanium_user`;
- ----------------------------------------------------------
- --
- --表的結(jié)構(gòu)`users`
- --
- CREATETABLE`users`(
- `id`int(11)NOTNULLauto_increment,
- `username`varchar(255)collateutf8_unicode_ciNOTNULL,
- `password`varchar(32)collateutf8_unicode_ciNOTNULL,
- `name`varchar(255)collateutf8_unicode_ciNOTNULL,
- `email`varchar(255)collateutf8_unicode_ciNOTNULL,
- PRIMARYKEY(`id`)
- )ENGINE=MyISAMDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciCOMMENT='用戶表'AUTO_INCREMENT=8;
- --
- --導(dǎo)出表中的數(shù)據(jù)`users`
- --
- INSERTINTO`users`VALUES(1,'xiaozhang','asdasd','a4','xiaozhanga4@gmail.com');
- INSERTINTO`users`VALUES(2,'a4','asdasd','xiaozhang','xiaozhanga4@gmail.com');
- INSERTINTO`users`VALUES(3,'1','1','1','1@g.com');
- INSERTINTO`users`VALUES(4,'3','3','3','3@g.cn');
- INSERTINTO`users`VALUES(5,'5','5','5','5@g.cn');
- INSERTINTO`users`VALUES(6,'8','8','8','8@g.cn');
- INSERTINTO`users`VALUES(7,'9','9','9','9@g.cn');

二、構(gòu)建UI
創(chuàng)建titanium工程后,我們首先構(gòu)建UI,我們的界面從頂層開始,
打開app.js
第一是一個tabGroup,下來有兩個tab,每個tab分別有一個window,最后在window里添加一些文本輸入框,按鈕。
代碼如下:
- //thissetsthebackgroundcolorofthemasterUIView(whentherearenowindows/tabgroupsonit)
- Titanium.UI.setBackgroundColor('#000');
- //創(chuàng)建tabGroup,因為我們的程序?qū)⑹褂脙蓚€tab
- vartabGroup=Titanium.UI.createTabGroup();
- //創(chuàng)建登錄的window
- varlogin=Titanium.UI.createWindow({
- title:'登錄',
- tabBarHidden:true,
- url:'login.js'
- });
- //創(chuàng)建登錄窗口的tab
- varloginTab=Titanium.UI.createTab({
- title:"登錄",
- window:login
- });
- //創(chuàng)建注冊的window
- varaccount=Titanium.UI.createWindow({
- title:'注冊',
- url:'account.js'
- });
- //創(chuàng)建注冊窗口的tab
- varaccountTab=Titanium.UI.createTab({
- title:'注冊',
- window:account
- });
- //添加登錄的tab到tabGroup
- tabGroup.addTab(loginTab);
- //添加注冊的tab到tabGroup
- tabGroup.addTab(accountTab);
- //打開tabGroup
- tabGroup.open();
創(chuàng)建登錄接口:
創(chuàng)建login.js
代碼如下:
- //創(chuàng)建win對象指向當前窗口即登錄窗口
- varwin=Titanium.UI.currentWindow;
- //創(chuàng)建用戶名文本輸入框
- varusername=Titanium.UI.createTextField({
- color:'#336699',
- top:10,
- left:10,
- width:300,
- height:40,
- hintText:'用戶名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加用戶名文本輸入框到當前window
- win.add(username);
- //創(chuàng)建密碼輸入框
- varpassword=Titanium.UI.createTextField({
- color:'#336699',
- top:60,
- left:10,
- width:300,
- height:40,
- hintText:'密碼',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加密碼輸入框到當前窗口
- win.add(password);
- //創(chuàng)建登錄按鈕
- varloginBtn=Titanium.UI.createButton({
- title:'登錄',
- top:110,
- width:90,
- height:35,
- borderRadius:1,
- font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
- });
- //添加登錄按鈕到當前窗口
- win.add(loginBtn);
創(chuàng)建account.js
代碼如下:
- //創(chuàng)建win對象指向當前窗口即登錄窗口
- varwin=Titanium.UI.currentWindow;
- //創(chuàng)建垂直滾動的視圖
- varscrollView=Titanium.UI.createScrollView({
- contentWidth:'auto',
- contentHeight:'auto',
- top:0,
- showVerticalScrollIndicator:true,
- showHorizontalScrollIndicator:false
- });
- //添加垂直滾動的視圖到當前窗口
- win.add(scrollView);
- //創(chuàng)建用戶名輸入框
- varusername=Titanium.UI.createTextField({
- color:'#336699',
- top:10,
- left:10,
- width:300,
- height:40,
- hintText:'用戶名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加用戶名輸入框到垂直滾動的視圖
- scrollView.add(username);
- //創(chuàng)建密碼輸入框
- varpassword1=Titanium.UI.createTextField({
- color:'#336699',
- top:60,
- left:10,
- width:300,
- height:40,
- hintText:'密碼',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加密碼輸入框到垂直滾動的視圖
- scrollView.add(password1);
- //創(chuàng)建確認密碼輸入框
- varpassword2=Titanium.UI.createTextField({
- color:'#336699',
- top:110,
- left:10,
- width:300,
- height:40,
- hintText:'確認密碼',
- passwordMask:true,
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加確認密碼輸入框到垂直滾動的視圖
- scrollView.add(password2);
- //創(chuàng)建姓名輸入框
- varnames=Titanium.UI.createTextField({
- color:'#336699',
- top:160,
- left:10,
- width:300,
- height:40,
- hintText:'姓名',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加姓名輸入框到垂直滾動的視圖
- scrollView.add(names);
- //創(chuàng)建email輸入框
- varemail=Titanium.UI.createTextField({
- color:'#336699',
- top:210,
- left:10,
- width:300,
- height:40,
- hintText:'email',
- keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
- returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
- borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
- });
- //添加email輸入框到垂直滾動的視圖
- scrollView.add(email);
- //創(chuàng)建注冊按鈕
- varcreateBtn=Titanium.UI.createButton({
- title:'注冊',
- top:260,
- width:130,
- height:35,
- borderRadius:1,
- font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
- });
- //添加注冊按鈕到垂直滾動的視圖
- scrollView.add(createBtn);
最終效果如下:


三、添加事件
UI構(gòu)建完成后,我們將為登錄注冊按鈕分別添加點擊事件,完成登錄注冊功能
打開login.js
在代碼的最后面加上以下代碼:
- //創(chuàng)建HTTPClinet對象
- varloginReq=Titanium.Network.createHTTPClient();
- //登錄按鈕事件--打開遠程的邏輯操作,發(fā)送登錄數(shù)據(jù)給遠程文件進行判斷處理
- loginBtn.addEventListener('click',function(e)
- {
- if(username.value!=''&&password.value!='')
- {
- loginReq.open("POST","http://10.0.2.2:8080/post_auth.php");
- varparams={
- username:username.value,
- password:password.value
- };
- loginReq.send(params);
- }
- else
- {
- alert("Username/Passwordarerequired");
- }
- });
- //接收遠程返回的數(shù)據(jù)并使用彈出框顯示信息
- loginReq.onload=function()
- {
- varjson=this.responseText;
- varresponse=JSON.parse(json);
- if(response.logged==true)
- {
- alert("歡迎"+response.name+".你的Email是:"+response.email);
- }
- else
- {
- alert(response.message);
- }
- };
打開account.js文件
在最后的代碼加上以下代碼:
- //定義一個對象用來存儲提交數(shù)據(jù)結(jié)果
- vartestresults;
- //創(chuàng)建驗證email的函數(shù)
- functioncheckemail(emailAddress)
- {
- varstr=emailAddress;
- varfilter=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
- if(filter.test(str))
- {
- testresults=true;
- }
- else
- {
- testresults=false;
- }
- return(testresults);
- };
- //創(chuàng)建httpclient對象
- varcreateReq=Titanium.Network.createHTTPClient();
- //接收返回的數(shù)據(jù)
- createReq.onload=function()
- {
- if(this.responseText=="插入失敗"||this.responseText=="用戶名或電子郵箱已經(jīng)存在")
- {
- createBtn.enabled=true;
- createBtn.opacity=1;
- alert(this.responseText);
- }
- else
- {
- varalertDialog=Titanium.UI.createAlertDialog({
- title:'提示',
- message:this.responseText,
- buttonNames:['確定']
- });
- alertDialog.show();
- alertDialog.addEventListener('click',function(e)
- {
- win.tabGroup.setActiveTab(0);
- });
- }
- };
- //按鈕事件函數(shù)
- createBtn.addEventListener('click',function(e)
- {
- if(username.value!=''&&password1.value!=''&&password2.value!=''&&names.value!=''&&email.value!='')
- {
- if(password1.value!=password2.value)
- {
- alert("密碼不匹配");
- }
- else
- {
- if(!checkemail(email.value))
- {
- alert("請輸入有效的電子郵箱");
- }
- else
- {
- createBtn.enabled=false;
- createBtn.opacity=0.3;
- createReq.open("POST","http://10.0.2.2:8080/post_register.php");
- varparams={
- username:username.value,
- password:password1.value,
- names:names.value,
- email:email.value
- };
- createReq.send(params);
- }
- }
- }
- else
- {
- alert("所有字段已經(jīng)提交");
- }
- });
四、創(chuàng)建后臺邏輯處理文件
我們使用的是PHP,請看
創(chuàng)建登錄處理文件post_auth.php放在你的服務(wù)器里:
- //定義數(shù)據(jù)庫連接
- $con=mysql_connect('localhost','root','root');
- if(!$con)
- {
- echo"Failedtomakeconnection.";
- exit;
- }
- //Selectthedatabase.Enterthenameofyourdatabase(notthesameasthetablename)
- $db=mysql_select_db('titanium_user');
- if(!$db)
- {
- echo"Failedtoselectdb.";
- exit;
- }
- //$_POST['username']and$_POST['password']aretheparamnameswesentinourclickeventinlogin.js
- $username=$_POST['username'];
- $password=$_POST['password'];
- //Selecteveythingfromtheuserstablewhereusernamefield==theusernamewepostedandpasswordfield==thepasswordweposted
- $sql="SELECT*FROMusersWHEREusername='".$username."'ANDpassword='".$password."'";
- $query=mysql_query($sql);
- //Ifwefindamatch,createanarrayofdata,json_encodeitandechoitout
- if(mysql_num_rows($query)>0)
- {
- $row=mysql_fetch_array($query);
- $response=array(
- 'logged'=>true,
- 'name'=>$row['name'],
- 'email'=>$row['email']
- );
- echojson_encode($response);
- }
- else
- {
- //Elsetheusernameand/orpasswordwasinvalid!Createanarray,json_encodeitandechoitout
- $response=array(
- 'logged'=>false,
- 'message'=>'InvalidUsernameand/orPassword'
- );
- echojson_encode($response);
- }
- ?>
創(chuàng)建注冊處理文件
- post_register.php
- $con=mysql_connect('localhost','root','root');
- if(!$con)
- {
- echo"Failedtomakeconnection.";
- exit;
- }
- $db=mysql_select_db('titanium_user');
- if(!$db)
- {
- echo"Failedtoselectdb.";
- exit;
- }
- $username=$_POST['username'];
- $password=$_POST['password'];
- $names=$_POST['names'];
- $email=$_POST['email'];
- $sql="SELECTusername,emailFROMusersWHEREusername='".$username."'ORemail='".$email."'";
- $query=mysql_query($sql);
- if(mysql_num_rows($query)>0)
- {
- echo"Thatusernameoremailalreadyexists";
- }
- else
- {
- $insert="INSERTINTOusers(username,password,name,email)VALUES('".$username."','".$password."','".$names."','".$email."')";
- $query=mysql_query($insert);
- if($query)
- {
- echo"Thanksforregistering.Youmaynowlogin.";
- }
- else
- {
- echo"Insertfailed";
- }
- }
- ?>
OK!再次運行我們的APP,看最后的效果吧
注冊成功界面

注冊成功界面