How to redirect to another page not on the server when login successful

Question

I have a HTML5 app on my phone. When I input the correct username and password, it should go to an external server, log on to that database, check credentials and redirect me to another page(Home Page) on my phone when the credentials are correct.

I am able to reach the server and check credentials, but how do I redirect back to the Home Page which is in the app?

Did some reading and found ajax to be a viable option. But even then, am not entirely sure how to do the redirect. I have written the ajax section too and attached below. Please advice how I can adjust it to work.

First page on the app where you enter log in details:

    <html>
        <head>
            <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.11.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="scripts.js"></script>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
        </head>
            <body>
                <div data-role="page" id="loginForm">
                    <form id="form1" name="form1" method="POST" action="http://www.examplewebsite.com/login.php">
                        <input type="text" name="user" id="user" placeholder="Username"/>

                        <input type="password" name="pass" id="pass" placeholder="Password" />

                        <input type="submit" name="submit" value="Login" />
                    </form>
                </div>
                <div data-role="page" id="home">
                    <h1>Logged In</h1>
                </div>
            </body>
        </html>

Script to check Log in. This php file rests on the server side.

    //DB Log in credentials
    $hostName = 'localhost';
    $dbUser = 'fakeuser';
    $dbPass = 'fakepass';
    $dbName = 'fakedb';
    $userTable = "faketable";

    //Connect to DB
    $conn = mysql_connect($hostName, $dbUser, $dbPass) or die("not connecting");
    $dbSelect = mysql_select_db($dbName) or die("no db found");

    //Obtain input username and password from the client
    $username = $_POST["user"];
    $password = $_POST["pass"];

    //Check for MySql Injections
    if(ctype_alnum($username) && ctype_alnum($password)){
        $query1 = mysql_query("SELECT * FROM $userTable WHERE username='$username'");
        //query will return 1 if the username exists in the database
        $numrows = mysql_num_rows($query1);

        if($numrows == 1){
            //checking if the password matches the username now
            $query2 = "SELECT password FROM $userTable WHERE username='$username'";
            $result2 = mysql_query($query2);        
            $row = mysql_fetch_array($result2, MYSQL_ASSOC);
            $pass = $row['password'];

            if($password == $pass){
                //If successful, redirect to the #home page
                //anything I can do here to redirect back to #home on my app?
            }
            else
                echo "Password incorrect";
        }
        else
            echo "username incorrect" . $numrows;
    }
    else{
        echo "Not alpha Numeric Input!!";
    }

Attempted Ajax portion

var isLogged = false;
/**
 * Method used to log into the application
 */
$(document).on("pageinit", "#loginForm", function () {
    $("#form1").on("submit", function (event) {
        event.preventDefault();
        $.ajax({
            type: "GET",
            url: "http://www.examplewebsite.com/login.php",
            data: $("#form1").serialize(),
            success: function (data) {
                console.log(data);
                if (data.loggedIn) {
                    isLogged = true;
                    $.mobile.changePage("#home");
                } else {
                    alert("You entered the wrong username or password. Please try again.");
                }
            }
        });
    });
});

If you are attempting to redirect after login why even use ajax? do you not want the login page to show a refresh if it is unsuccessful? — Wobbles, Oct 18 '15 at 15:29
@Wobbles As mentioned Ajax attempt is from what I read around. If I can achieve the redirect with just the php file sitting on the server side and the html file on my app, please show me how. — douliv, Oct 18 '15 at 15:34
`if($password == $pass){header( 'Location: http://www.yoursite.com/success.html' );}` — Wobbles, Oct 18 '15 at 15:36
What is happening when you login now using the `$.mobile.changePage("#home");`? — Iago, Oct 18 '15 at 15:38
Also, off topic, but please hash or encrypt your passwords, you are currently checking them "in the plain" which is a security risk. — Wobbles, Oct 18 '15 at 15:38
@Fred -ii- Not a duplicate. Please read through. That question involves asking about redirecting within same directory. Flagging seems to be the fashion statement of this site. — douliv, Oct 18 '15 at 15:49
@douliv same exact concept and code though, redirect header can redirect to any file that has a valid URI or URL regardless of location — Wobbles, Oct 18 '15 at 15:53

score 0 · Answer 1 · answered Oct 18 '15 at 15:32

0

header("Location: thefile.php");

Replace thefile.php with your file to be redirected.!

answered Oct 18 '15 at 15:32

hemnath mouli

2,617
2
17
35

How is that possible. I am redirecting back to my index.html file which is on my phone (Not on the server) to the page with id='home'. That header tag is going to sit on my php file back at the server. How would it identify where to go by a file name which is not on the server? – douliv Oct 18 '15 at 15:40

score -2 · Answer 2 · answered Oct 18 '15 at 15:30

-2

You can use the "Location:" header or you can use the "META REFRESH" tag with an expiration of 0.

answered Oct 18 '15 at 15:30

Laserbeak

78
5

The php file is on the server side. The #home page I am trying to redirect to is on the app on my phone. How do I user location header in this case? Its not a url for me to place as header('Location: http://www.example.com/home'); nor is header('Location: #home); going to work. Please elaborate or show an example. – douliv Oct 18 '15 at 15:33
Yuck, please don't use meta's for redirects anymore. Location header is a perfectly valid solution. – Wobbles Oct 18 '15 at 15:34
@Wobbles How is it valid? Whats my location in this case? header('Location: #home)? As I asked how would that even work. php script is on the server. The page with id=home is on the app. – douliv Oct 18 '15 at 15:44
The php header will force the users client to redirect to the location provided. If it has a valid URL or URI, regardless of the pages location it will be redirected there. – Wobbles Oct 18 '15 at 15:50
I seem to be not explaining right. If the index.html and login.php are both sitting together on the server, this header method going to work fine. But now, the html file is resting on a mobile phone as a HTML5 app, which reaches out to the server (which is possible - I have the server url). Checks for credentials and redirects. How is it going to redirect back to my app on the phone? There is no url. – douliv Oct 18 '15 at 16:02

How to redirect to another page not on the server when login successful

2 Answers2