Thursday 21 August 2014

JQM PhoneGap DB session login home page Template

login.html:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>KP Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<link rel="stylesheet" href="css/validate.css" />
<link rel="stylesheet" href="kphome.css" />
<script type="text/javascript" src="cordova-2.6.0.js"></script>

<script type="text/javascript">    

            $(document).bind("mobileinit", function()   //page flickering
        {    
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
          
        });
            
</script> 
            
<script type="text/javascript">    
            

//var url="http://192.168.1.36:9090/hrms/";
var url="http://localhost:9090/hrms/";


document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
Dplatform=device.platform;
OSveriosn=device.version;
UUID= device.uuid;
alert('UUID'+UUID+'name'+OSveriosn+'OS'+Dplatform);
deviceinfo='OS: '+Dplatform+'Versionname: '+OSveriosn+'UUID: '+UUID;
alert(deviceinfo);
getDeviceLocation();
//alert("GEO:"+geo);


document.addEventListener("backbutton", Backbutton,false);
//msgloadingimage();
UUID=device.uuid;
//alert(UUID);
   sessionStorage.setItem('uuid',UUID);   
ApplicationVersionName="1.0";

/* if(navigator.network.connection.type==Connection.NONE || navigator.network.connection.type=="unknown" || navigator.network.connection.type==Connection.UNKNOWN)

{
        alert("Check Internet Connectivity");
       
        }
else{ */        
   
 $.ajax({
 url: url+"ANDROID_versionname.php",
 type:"POST",
 data:{"version":ApplicationVersionName}, 
 timeout: 5000,
 success: function(data) {
 if(data==10)
 {
 
 }
 else if(data==20)
 {
 alert("Please update the Current version 1.1");
 navigator.app.exitApp();  
 }
 
   },error:function(x, t, m)
       {   
           if(t==="timeout") {  navigator.notification.alert("Your Data connection is too slow", alertCallback,  "Alert");  
           
           else {  navigator.notification.alert("Check Internet Connectivity", alertCallback,  "Alert");           }
       }

}); 
       // }
 





function alertCallback()
{}

 function Backbutton(){
 if($.mobile.activePage.is("#index")){
  
navigator.notification.confirm('Do you want to exit', onConfirm,'Alert');               
     } 
     
     function onConfirm(button) 
     {
      if(button==1)
      {
       //  e.preventDefault();                  
            navigator.app.exitApp();
      }
      else
      {
      }
     }
 }


function  getDeviceLocation() {
//alert('a');
        navigator.geolocation.getCurrentPosition(showPosition, showError, { enableHighAccuracy: true } );
   }

function showPosition(position) {
alert('b');
         alert("Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude);    
 geo="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude;
        // geo1=geo.val();
         alert(geo);
        
 }

//5.Create a function to handle the error.

 function showError(error) {

       alert("Errorcode: "    + error.code    + 
                "Errormessage: "+ error.message );
   }
function AlertHandler()
{
       // Codes 
navigator.notification.alert('This is an alert message', AlertHandler, 'Message', 'Exit');
   }
function loginvalidate()
 {
//alert("s");
        
var x=document.forms["loginn"]["username"].value;       
      
      if(x==null || x=="")
      {
navigator.notification.alert("Username cannot be left blank", alertCallback,  "Alert");      
          return false;  
       }

var x=document.forms["loginn"]["password"].value;         
      
      if(x==null || x=="")
      {
navigator.notification.alert("Password cannot be left blank", alertCallback,  "Alert");                                 
          return false;  
       }
    
      else
      {
          
          return true;
      }
 
 }   
 
function help()
{
navigator.notification.alert("Credentials identifies your organization at Kp tech. Your organization may not be on our mobile application support.Please write/check with your Mobile HRMS for your Organization enrolment and the company Details", alertCallback,  "Alert"); 
}

function passingcode()
    {
//var url="http://http://192.168.1.36:9090//hrms/";
alert("passcode")
// $.mobile.loading( 'show' );

        var validate=loginvalidate();
        if(validate==true){
            
    var username= $("#username").val().toString(); //document.getElementById('compcode').value;
    var password= $("#password").val().toString(); 
    datavalue="username="+username+"&password="+password;
    alert(datavalue)
    $.ajax({
    url: url+"kp_login.php",
    type:"POST",
    data:datavalue,
    timeout: 5000,
    success: function(data) {   
   //  alert('c');
     
  data=jQuery.parseJSON(data);
  alert(data);
 
  if(data.status==1){
 
 
 
  sessionStorage.clear();  // storage session info clear
  sessionStorage.setItem('dbname',data.dbname);
sessionStorage.setItem('dbserver',data.dbserver);
//sessionStorage.setItem('logo',data.logo);
sessionStorage.setItem('dbuserid',data.dbuserid);        
sessionStorage.setItem('dbpass',data.dbpass);

//sessionStorage.setItem('uid',username);//empcode
sessionStorage.setItem('url',url);
//sessionStorage.setItem('name',data.name);
//sessionStorage.setItem('companyid',compcode);
sessionStorage.setItem('empid',data.empid);
$.mobile.showPageLoadingMsg();
               window.location='kphome.html';
               //sessionStorage.clear(); do not pass data 
               
  navigator.notification.alert("Login success", alertCallback,  "Alert");
  sessionStorage.setItem('url',url);
  // alert("Login success");
  $.mobile.showPageLoadingMsg();
  window.location="kphome.html";
  //$.mobile.pageLoading;
   }
   else if(data==2)
   {
  navigator.notification.alert("Invalid Username", alertCallback,  "Alert");     
  //alert("Invalid username");
  $('#username').val('');
  $('#password').val('');
  }
 
      },error: function(){
  alert('Network activity error');
  }
  });
        }else{
       
        $.mobile.hidePageLoadingMsg();
          //  $.mobile.loading( 'hide' );
        }
   }

</script>

</head> 
<body> 

<div data-role="page" id="index"><!-- index page -->

<div data-role="header"  data-theme="b" style="background: url(images/bg5.png) repeat-x;">
     <div align="center"><img src="images/icon.png" a style="vertical-align:bottom;height:40px;text-align:center;">
  <span>MOBILE HRMS</span></div>
    </div><!-- /header -->

<div data-role="content" class="pagecontent" >
 
            <div class="inset" >
            <div align="center">  <h3 style="color:#08298A;"> MEMBER LOGIN </h3></div>
            <br>
            <hr size="1px" align="left">
            <!-- <form name="kp_login" method="get"  onSubmit="return loginvalidate();" or add to login function function call action="javascipt:kp_login();"> -->
            <form id="Login" method="post" name="loginn" action="javascript:passingcode()">
            
            <p> USER NAME :<img src="images/Help.png" align="right" style="vertical-align:right;" onclick="help()" /> </p>
            <input type="text" name="username" id="username" value="" autocomplete="off" placeholder="User Name" data-clear-btn="true" min="3" maxlength="10"/>
            <p> PASS WORD : </p>
            <input type="password" data-clear-btn="true" name="password" id="password" autocomplete="off" value=""placeholder="Pass Word" min="3" maxlength="8"/>
          
            <div data-role="fieldcontain">
             <input type="submit" name="login" value="Sign In"  /> 
            </div>
        </form>
            <br />
            <hr size="1px">
            <div data-role="fieldcontain" align="justify">
            <a  href="kp_newreg.html" rel="external" data-role="button"  data-inline="true" data-theme="a">New Registration</a>
      <a  href="kp_forgotpass.html" rel="external" data-role="button"  data-inline="true" data-theme="a">Forgot Password?</a>
     
            </div>
            </div>
        </div>
</div><!-- /content -->
    
    <div data-role="footer" data-position="fixed"  style="background: url(images/bg5.png) repeat-x;overflow:hidden;">
    <h4>KP Tech</h4>
    
</div><!-- /footer -->
</div><!-- /index page -->



</body>
</html>


kp_loign.php :

<?php 
//session_start();
$username =$_POST["username"]; //Storing username in $username variable.
$password =$_POST["password"]; //Storing password in $password variable.
include("kp_dbconn.php"); //including config.php in our file
$row=array();
$qry = mysql_query("select firstname from persons where firstname = '$username' and lastname = '$password'") or die (mysql_error());


 if(mysql_affected_rows()>0){


$empdetail =mysql_query("select * from corpratedetails where empid = '$username'") or die(mysql_error());// select here image of emp and amp logo
if($empdetail==true)


//$row = mysql_fetch_array($empdetail);

  //echo $row[];
 $row['status']=1;$row['empid']=$username; $row['dbname']='test'; $row['dbserver']='localhost'; $row['dbuserid']='root';
  $row['dbpass']=' ';

echo json_encode($row);
}
else{

echo 2;
echo "username and password wrong";
}
}
   

?>

kphome.html :

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>KP Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>

<script type="text/javascript" src="cordova-2.6.0.js"></script>
<link rel="stylesheet" href="kphome.css" />
<script type="text/javascript">    
            $(document).bind("mobileinit", function()
        {    
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
          
        });
</script>  
<script>
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() { 
url=sessionStorage.getItem('url');

document.addEventListener("backbutton", Backbutton , false);
}


function Backbutton() 
{
//alert('a')
$.mobile.showPageLoadingMsg();
window.location="index.html";
$.mobile.hidePageLoadingMsg();
}
function back_button()
{
navigator.notification.alert("Use logout", alertCallback,  "Alert"); 
/* $.mobile.showPageLoadingMsg();
window.location="index.html";
$.mobile.hidePageLoadingMsg(); */
}
function alertCallback()
{}
function logout()
{
navigator.notification.confirm('Do you want to logout', onConfirm,'Alert');

}


function onConfirm(button) 
{
if(button==1)
{
$.mobile.showPageLoadingMsg();
window.location="index.html";
sessionStorage.clear();
}
else
{

}
}

</script>
</head> 
<body> 

<div data-role="page" id="kphomepage">
<div data-role="header"  data-theme="b" style="background: url(images/bg5.png) repeat-x;">
    <h1 style="color:#FFF">Mobile HRMS</h1>
    
    <!--<a href="#" data-icon="gear" class="ui-btn-right">Options</a>-->
   <!-- <div data-role="navbar" >
        <ul>
            <li><a  href="#page3" style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdbdbd), to(#000));;border-color:#fff;border-left-color:#fff;border-right-color:#fff;" class="ui-btn-active">Attendence System</a></li>
            <li><a href="#page4"style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdbdbd), to(#000));;border-color:#fff;border-left-color:#fff;border-right-color:#fff;">Corporate Directory</a></li>
            <li><a href="#page5"style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bdbdbd), to(#000));;border-color:#fff;border-left-color:#fff;border-right-color:#fff;">List of Holidays</a></li>
        </ul>
    </div>--><!-- /navbar -->
</div><!-- /header -->

<div data-role="content" class="pagecontent" >
    <div class="backlogobutton" >
    
    
    <!-- <a href="javascript:back_button()" rel="external"  data-theme="b" data-inline="true" style="float:left; margin-top:0px;" >
<img id="home_icon" alt="home"  style="width:20px;  height:20px; " src="images/2.png"> </a> -->

    <img src="images/kp.gif" id='helplogo' >   
 
  <a href="javascript:logout()"  title="Logout" rel="external"  data-theme="b" data-inline="true" style="float:right;margin-top:0px; " >
<img id="logout_icon" alt="logout"  style="width:35px;  height:35px;vertical-align: center " src="images/logout.png"  > </a>
<br>

   
    
    </div>
     <div class="inset" >
<ul data-role="listview" data-inset="true">
        <li><a href="kpattendence.html" rel="external">Attendance Management</a></li>
<li><a href="kp_corp_add.html" rel="external" >Corporate Directory</a></li>
            <li><a href="kp_listofholidays.html" rel="external" >List of Holidays</a></li>
            <li><a href="kp_timsheet.html" rel="external">Time sheet</a></li>
<li><a href="kp_payslip.html" rel="external">Pay slip</a></li>
            <li><a href="kp_helpdesk.html" rel="external">Help Desk</a></li>
            <!--<li><a href="#page8">Help Desk</a></li>
            
<li><a href="#page10">Page ten</a></li>-->
</ul>
</div>
    </div>
<!--<div data-role="footer" data-position="fixed" style="background: url(images/bg5.png) repeat-x;";>
<h4>Kp Tech</h4>
</div>-->
    
    <div data-role="footer" data-position="fixed"  style="background: url(images/bg5.png) repeat-x;overflow:hidden;">
    <h3 align="center">@KpTech</h3>
    <!--<div data-role="navbar">
        <ul>
            <li><a  href="#page3" style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#bdbdbd));border-color:#fff;border-left-color:#fff;border-right-color:#fff;" class="ui-btn-active">Time Sheet</a></li>
            <li><a  href="#page3" style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#bdbdbd));border-color:#fff;border-left-color:#fff;border-right-color:#fff;" class="ui-btn-active">Pay Slip</a></li>
            <li><a  href="#page3" style="color:#fff;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#bdbdbd));border-color:#fff;border-left-color:#fff;border-right-color:#fff;" class="ui-btn-active">Help Desk</a></li>
        </ul>-->
    </div><!-- /navbar -->
</div><!-- /footer -->
</div>




</body>

</html>


No comments:

Post a Comment