In a mobile web app that I’m building I keep getting the same problem over and over again.
In my index.php I redirect to the login.php if no value in my session is set. After the user logs in I redirect back to index.php. I’ve tried this with a header redirection via PHP as well as via a $.mobile.changePage() method from JQuery.
What happens with both ways Is that at first the page division of #home loads. When I use my Navbar to change to a new page division in the same multi-page it loads the login.php again.
index.php
session_start();
require "init.inc";
$email = $_SESSION['email'];
if(!isset($email)){header("Location: login.html");}
else{
echo
'<!DOCTYPE hmtl>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile=web-a-status-bar-style" content="black">
<!-- link naar icons-->
<link rel="apple-touch-icon" sizes="114x114" hrf="apple-touch-icon.png"/>
<title>Loyalty Barcode</title>
<!-- link naar stylesheet -->
<link rel="stylesheet" href="css/mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<link rel="stylesheet" href="css/themes/loyalty.css" />
<!-- link naar de jquery en javascript -->
<script src="/js/functions.js"></script>
<script src="/js/Jquery.loadphp.js"></script>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
<!--/////////////////////////////////// #home (barcode) \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div data-role="page" id="home">
<!-- header -->
<header data-role="header" data-theme="a">
<h1>Loyalty Home</h1>
<a href="#instellingen" data-role="button" data-mini="true" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right"></a>
</header>
<!-- einde header -->
<article id="barcode">
<!-- Content -->
<div class="content">
<p>Hier vind u, uw Loyalty barcode. Met deze barcode kunt u de passen die u van winkels heeft gekregen aanmelden.</p>
<br/>
<img src="images/barcode.png" height="150px" width="200px"/>
</div>
<!-- Einde Content -->
<article id="leeg">
</article>
<!-- Footer -->
<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#kortingen-algemeen" data-icon="star" data-theme="b" >Kortingen</a></li>
<li><a href="#barcode" class="ui-btn-active ui-btn-persistent" data-icon="home" data-theme="b">Barcode</a></li>
<li><a href="#boodschappen-lijstje" data-icon="grid" data-theme="b">Boodschappen</a></li>
</ul>
</nav>
</footer>
<!-- Einde footer -->
</article>
</div>
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Einde van #home /////////////////////////////////////-->
<!--/////////////////////////////////// #kortingen-algemeen \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div data-role="page" id="kortingen-algemeen">
<!-- header -->
<header data-role="header" data-theme="a">
<a data-rel="back" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="arrow-l" class="ui-btn-left"></a>
<h1>Loyalty Kortingen</h1>
<a href="#instellingen" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right"></a>
</header>
<!-- einde header -->
<article id="kortingen">
<!-- Content -->
<div class="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="true">
<ul data-role="listview" data-split-icon="plus" data-split-theme="c" data-inline="true">
<li>
<img src="images/ah-logo.png" />
<h3>Albert Heijn</h3>
</li>
</ul>
<ul data-role="listview" data-split-icon="plus" data-split-theme="c" data-inline="true">
<li>
<img src="images/ah-komkommers.jpg" />
<h3>Komkommers, 0,39 cent</h3>
</li>
</ul>
</div>
</div>
<!-- Einde content -->
<article id="leeg">
</article>
<!-- Footer -->
<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#kortingen-algemeen" class="ui-btn-active ui-btn-persistent" data-icon="grid" data-theme="a">Algemeen</a></li>
<li><a href="#kortingen-persoonlijk" data-icon="check" data-theme="a">Persoonlijk</a></li>
</ul>
</nav>
</footer>
</article>
<!-- Einde footer -->
</div>
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Einde van #kortingen-algemeen /////////////////////////////////////-->
<!-- *********************************** #kortingen-persoonlijk ************************************* -->
<div data-role="page" id="kortingen-persoonlijk">
<!-- header -->
<header data-role="header" data-theme="b">
<a data-rel="back" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="arrow-l" class="ui-btn-left">Terug</a>
<h1>Loyalty Kortingen</h1>
<a href="#instellingen" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right">Instellingen</a>
</header>
<!-- einde header -->
<article id="kortingen">
<!-- Content -->
<div class="content">
Hier komen de verschillende persoonlijke kortingen te staan.
</div>
<!-- Einde content -->
<article id="leeg">
</article>
<!-- Footer -->
<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="#kortingen-algemeen" data-icon="grid" data-theme="a">Algemeen</a></li>
<li><a href="#kortingen-persoonlijk" class="ui-btn-active ui-btn-persistent" data-icon="check" data-theme="a">Persoonlijk</a></li>
</ul>
</nav>
</footer>
</article>
<!-- Einde footer -->
</div>
<!--*********************************** Einde #kortingen-persoonlijk *********************************** -->
</body>
</html>
?>
login.php
session_start();
require "init.inc";
$email=$_POST['email'];
$wachtwoord=$_POST['wachtwoord'];
if (($email&&$wachtwoord) && (isset($_POST['wachtwoord'])))
{
$query = mysql_query("SELECT * FROM user WHERE email='$email'");
$numrows = mysql_num_rows($query);
if ($numrows!=0)//als het aantal rijen niet 0 is
{
while($row = mysql_fetch_assoc($query))//zolang er rijen zijn
{
$dbid = $row['userId'];
$dbemail = $row['email']; /
$dbwachtwoord = $row['wachtwoord'];
}
if ($email==$dbemail&&$wachtwoord==$dbwachtwoord)
{
$_SESSION['email']=$dbemail;
echo'
<header><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/></header>
<body><script>$.mobile.changePage( "index.php");</script></body>
';
exit;
}
else
{
echo"Verkeerd wachtwoord ingevuld. Probeer het opnieuw a.u.b.";
}
}
}
There are multiple problems with the code you’ve posted here. So excuse me if I’m stating the obvious here.
First of all, you are redirecting to login.html whereas you mention login.php.
Change
To
Secondly, don’t forget to remove the “/” typo in login.php:
By the way, it’s best practice not to echo all of your HTML layout code, I see you’re using that in index.php.
Finally: You can use
To navigate between your login and index page without any problems.
I’ve modified your code, it’s currently live at the following URL: click here for a demo
For your reference, find my (working) modified login.php code below:
Login.php
NOTE: I’ve added a form to demonstrate the functionality