Phonegap App using Jquery mobile - Login and profile page. Im in need of someone who knows phonegap

问题: What im trying to do here is create a login system using jquery mobile and then upon successful login i want to display the users information on a profile page. Im aware of...

问题:

What im trying to do here is create a login system using jquery mobile and then upon successful login i want to display the users information on a profile page. Im aware of some of the functions i need to use for this although as im using phonegap i need to use AJAX to pass thr data across which is the part that is really confusing me. If anyone can help me with this then that would be great, ive been struggling with the for weeks now.

Below is my HTML Code. I want to pass the user to page 2 with their profile information upon sucessful login.

<!-------------- First page for form ----------->
<div data-role="page" id="home">
<!-------------- First page header ----------->
<div data-role="header">
<h1>Login in</h1>
</div>
<!-------------- First page main content ----------->
<div data-role="main" class="ui-content" id="login"/>
<form method="post" action="#profile" data-ajax="false"/>
<label for="email">Email: <span>*</span></label>
<input type="email" id="email" name="email" placeholder="example@domain.com"/>
<label for="password">Password : <span>*</span></label>
<input type="password" name="password" id="password" placeholder="********"/>
<input type="submit" data-inline="true" id="login" value="Submit" data-theme="b"/>
</form>
</div>
<!-------------- First page footer ----------->
<div data-role="footer" id="footer">
<h1>...</h1>
</div>
<!-------------------------------------------------------------
End of First page
-------------------------------------------------------------->
<!-------------- Second page ----------->
<div data-role="page" id="profile">
<!-------------- Second page header ----------->
<div data-role="header">
<h1>Profile</h1>
</div>
<!-------------- Second page main content ----------->

<!-------------- Second page footer ----------->
<div data-role="footer">
<h1>...</h1>
</div>
</div>
<!-------------------------------------------------------------
End of Second page
-------------------------------------------------------------->

Below is my js file. Please not this isnt set up for jquery mobile. Ive been changing my approch to this task a lot so i could use some help with seeting this up to work with JQM.

mysubmit=function(){

        $("#submit").click(function(e){
            e.preventDefault();
            console.log('clicked');
            var email= $.trim($("#email").val());
            var password= $.trim($("#password").val());

            $("#status").text("Logging you in...");
            var loginString ="email="+email+"&password ="+password;
            $.ajax({
                type: "GET",crossDomain: true, cache: false,
                        url:"http://localhost/form/www/auth.php",

                success: function(data){
                    console.log(data);
                    //get HTML 
                    tml
                    var myarray = JSON.parse(data);
                    console.log(myarray);
                    if(data == "success") {
                        $("#status").text("You're logged in!");
                        localStorage.loginstatus = "true";
                        window.location.href = "welcome.html";
                    }
                    else if(data == "error")
                    {
                        $("#status").text("Ops, your login has failed");
                    }
                }
            });
        });

Below is my php code. This is far from finished, although ive hit a brick wall with it and cant seem to find a way to get this working.

    <?php

$host = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "registration";

$conn = new mysqli ($dbhost, $dbuser, $dbpass, $db);

if($conn->connect_error){
    echo "Connection has failed";
}
else{
    echo "Connect was successful";
}

if(isset($_POST["submit"]))
    {
        $username=$_POST["username"];
        $password=$_POST["password"];

        $query = "SELECT *  FROM `users` WHERE `password` = '$password' and email='$email'";
        $result = mysql_query(query);
        $numRows = mysql_num_rows($result);
        if($numRows==1){
            session_start();
            $_SESSION["username"] = $username;
            header("Location: ./index.html");
            else{
                echo "Invalid Login Information";
            }
        }

    }

Would really appreciate any help that people can give me with this.

Thank you in advance.


回答1:

Then you're in luck I'm still keeping my jQuery Mobile blog on life support.

Here's a working example: https://www.gajotres.net/complex-jquery-mobile-authorization-example/

You can build upon it. Also do not forget to accept the answer if it is what you were looking for.

Index.php:

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit", function () {
              $.mobile.hashListeningEnabled = false;
              $.mobile.pushStateEnabled = false;
              $.mobile.changePage.defaults.changeHash = false;
            });
        </script> 
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
        <div data-role="page" id="login" data-theme="b">
            <div data-role="header" data-theme="a">       
                <h3>Login Page</h3>
            </div>

            <div data-role="content">
                <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                    <fieldset>
                        <div data-role="fieldcontain">
                            <label for="username">Enter your username:</label>
                            <input type="text" value="" name="username" id="username"/>
                        </div>                                 
                        <div data-role="fieldcontain">                                     
                            <label for="password">Enter your password:</label>
                            <input type="password" value="" name="password" id="password"/>
                        </div>
                        <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                    </fieldset>
                </form>                             
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>
        <div data-role="page" id="second">
            <div data-theme="a" data-role="header">
                <a href="#login" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" id="back-btn">Back</a>      
                <h3>Welcome Page</h3>
            </div>

            <div data-role="content">

            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>Page footer</h3>
            </div>
        </div>
    </body>
    </html>

auth.php

    <?php
    function authorize()
    {
      //normally this info would be pulled from a database.
      //build JSON array
      $status = array("status" => "success"); 

      return $status;
    }

    $possible_params = array("authorization", "test");

    $value = "An error has occurred";

    if (isset($_POST["action"]) && in_array($_POST["action"], $possible_params))
    {
      switch ($_POST["action"])
        {
          case "authorization":
            $value = authorize();
            break;
        }
    }

    //return JSON array
    exit(json_encode($value));
    ?>

index.js

    var userHandler = {
        username : '',
        status : ''
    }

    $(document).on('pagecontainershow', function (e, ui) {
        var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
        if(activePage.attr('id') === 'login') {
            $(document).on('click', '#submit', function() { // catch the form's submit event
                if($('#username').val().length > 0 && $('#password').val().length > 0){

                    userHandler.username = $('#username').val();

                    // Send data to server through the Ajax call
                    // action is functionality we want to call and outputJSON is our data
                    $.ajax({url: 'auth.php',
                        data: {action : 'authorization', formData : $('#check-user').serialize()},
                        type: 'post',                  
                        async: 'true',
                        dataType: 'json',
                        beforeSend: function() {
                            // This callback function will trigger before data is sent
                            $.mobile.loading('show'); // This will show Ajax spinner
                        },
                        complete: function() {
                            // This callback function will trigger on data sent/received complete   
                            $.mobile.loading('hide'); // This will hide Ajax spinner
                        },
                        success: function (result) {
                            // Check if authorization process was successful
                            if(result.status == 'success') {
                                userHandler.status = result.status;
                                $.mobile.changePage("#second");                        
                            } else {
                                alert('Logon unsuccessful!');
                            }
                        },
                        error: function (request,error) {
                            // This callback function will trigger on unsuccessful action               
                            alert('Network error has occurred please try again!');
                        }
                    });                  
                } else {
                    alert('Please fill all necessary fields');
                }          
                return false; // cancel original event to prevent form submitting
            });  
        } else if(activePage.attr('id') === 'second') {
            activePage.find('.ui-content').text('Wellcome ' + userHandler.username);
        }
    });

    $(document).on('pagecontainerbeforechange', function (e, ui) {
        var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
        if(activePage.attr('id') === 'second') {
            var to = ui.toPage;

            if (typeof to  === 'string') {
                var u = $.mobile.path.parseUrl(to);
                to = u.hash || '#' + u.pathname.substring(1);

                if (to === '#login' && userHandler.status === 'success') {
                    alert('You cant open a login page while youre still logged on!');
                    e.preventDefault();
                    e.stopPropagation();

                    // remove active status on a button if a transition was triggered with a button
                    $('#back-btn').removeClass('ui-btn-active ui-shadow').css({'box-shadow':'0 0 0 #3388CC'});
                } 
            }
        }
    });
  • 发表于 2019-03-02 21:35
  • 阅读 ( 193 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除