I have an admin page (admin.php) that I am setting up right now.
When the page is accessed initially, a login box comes up correctly where the user can hit a "Sign In" button.
When they hit the "Sign In" button, the login form gets submitted to a PHP page with this code (I don't have any authenticating going on right now - just starting to get this setup):
<?php
session_start();
$_SESSION['login_success'] = true;
header('Location:http://localhost/mbc/admin');
exit();
?>
Then, I'm expecting that the admin.php page will display the admin form but the page just shows up blank after the redirect. Below is the applicable parts of the admin.php page. Can any of you see what I'm doing wrong here such that the admin form is not displaying after the authentication is done?
<html>
<head>
<title>Welcome Home!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
/* Mask for background, by default is not display */
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
/* You can customize to your needs */
.login-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close { Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover { background:#ddd; }
</style>
</head>
<body id="page1">
<?php
session_start();
if (isset($_SESSION['login_success'])) {
?>
<!-- Some HTML content should show up here but it isn't... -->
<?php } else { ?>
<!-- Login Dialog -->
<div id="login-box" class="login-popup">
<a href="index.html">Cancel</a>
<form method="post" class="signin" action="admin_process_login.php">
<fieldset class="textbox">
<label class="username">
<span>Username</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="login" type="submit">Sign in</button>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
//Getting the variable's value from a link
var loginBox = document.getElementById('login-box');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
// When clicking on the button close or the mask layer the popup closed
$('button.login').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
<?php } ?>
</body>
</html>
EDIT 2012-02-25 16:54EST
For some strange reason, this (and only this as far as I've tested so far) series of events makes the admin form come up correctly...
* Go to admin.php and click on "Sign In" button
* Go to "test" php page in browser (http://localhost/mbc/test)
Code for the test page:
<html>
<head>
<title>Testing</title>
</head>
<body>
<?php
session_start();
if (isset($_SESSION['login_success'])) { ?>
<H1>Login was a success</H1>
<?php } else { ?>
<H1>Login was a failure - next time it should work</H1>
<?php
$_SESSION['login_success'] = true;
}
?>
</body>
</html>
- Go to admin page (http://localhost/mbc/admin) and now the admin form comes up fine.
