Webcam js integration on Codeigniter - php

I tried to research and read a lot of articles regarding this problem
I have red some but the discussion seems to end without the solution yet
So the problem is I cannot get to show the camera on my CI app, but when I just copy the exact codes and paste it in my localhost without using any frame work it works.
Here is my CI code
<script type="text/javascript" src="<?=base_url('assets/js/cam/webcam.js')?>"></script>
<script language="JavaScript">
document.write( webcam.get_html(440, 240) );
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
<script type="text/javascript">
webcam.set_api_url( "<?=base_url('assets/js/cam/handleimage.php')?>");
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true, "<?=base_url('assets/js/cam/shutter.mp3')?>" ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('img').innerHTML ='<h3>Upload Successfuly done</h3>'+msg;
document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";
// reset camera for another shot
webcam.reset();
}
else {alert("Error occured we are trying to fix now: " + msg); }
}
</script>
I used this demo package and its working well if I just extract it to localhost. https://app.box.com/s/nkhgrj73fvutaj6dfspf
But when I tried to integrate it to CI the camera windows show blank . And when I tried to use webcam js function such as webcam.configure() .. It says the Movie is not loaded yet
Jhunnie

By simply copy paste you cannot implement it on codeigniter. Reason behind the error It says the Movie is not loaded yet is webcam.swf is not loaded. actually that flash file is the important thing behind the webcam functionality.
create new controller application\controllers\camera.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Camera extends CI_Controller {
public function index(){
$this->load->helper('url');
$this->load->view("camera");
}
public function saveImage(){
/*write your own code to save to your database*/
$newname = "some_name.png";
file_put_contents( $newname, file_get_contents('php://input') );
}
}
?>
create new view application\views\camera.php
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.img {
background: #ffffff;
padding: 12px;
border: 1px solid #999999;
}
.shiva {
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;
}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
<script language="JavaScript">
document.write(webcam.get_html(440, 240));
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;
document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
webcam.reset();
} else {
alert("Error occured we are trying to fix now: " + msg);
}
}
</script>
<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
Now copy webcam.js,shutter.mp3,webcam.swf to assets/js/cam. make 2 small changes in webcam.js
line number 27 : swf_url: 'webcam.swf'
line number 28 : shutter_url: 'shutter.mp3'
change to
line number 27 : swf_url: 'assets/js/cam/webcam.swf'
line number 28 : shutter_url: 'assets/js/cam/shutter.mp3'

From Mr Tintu Answer Added some revisions
By simply copy paste you cannot implement it on codeigniter. Reason behind the error It says the Movie is not loaded yet is webcam.swf is not loaded. actually that flash file is the important thing behind the webcam functionality.
create new controller application\controllers\camera.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Camera extends CI_Controller {
public function index(){
$this->load->helper('url');
$this->load->view("camera");
}
public function saveImage(){
/*write your own code to save to your database*/
$newname = "some_name.png";
file_put_contents( $newname, file_get_contents('php://input') );
}
}
?>
create new view application\views\camera.php
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.img {
background: #ffffff;
padding: 12px;
border: 1px solid #999999;
}
.shiva {
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;
}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
<script language="JavaScript">
document.write(webcam.get_html(440, 240));
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;
document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
webcam.reset();
} else {
alert("Error occured we are trying to fix now: " + msg);
}
}
</script>
<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
Now copy webcam.js,shutter.mp3,webcam.swf to assets/js/cam. make 2 small changes in webcam.js
line number 27 : swf_url: 'webcam.swf'
line number 28 : shutter_url: 'shutter.mp3'
change to
line number 27 : swf_url: '../assets/js/cam/webcam.swf'
line number 28 : shutter_url: '../assets/js/cam/shutter.mp3'
note: that this Url is important and will differ.. Its better checking the .swf url exstince via google chrome than firefox from my experience.. added '../' to go up one folder for you to be in the root app folder to access assets folder
Cheers
Credits to Mr. Tintu Raju

Related

How to capture webcam image in codeigniter

When I run this code flash is open but when I click on snap button it only shows uploading message instead of showing capture image.
My view:
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.img {
background: #ffffff;
padding: 12px;
border: 1px solid #999999;
}
.shiva {
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;
}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
<script language="JavaScript">
document.write(webcam.get_html(440, 240));
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;
document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
webcam.reset();
} else {
alert("Error occured we are trying to fix now: " + msg);
}
}
</script>
<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
My controller:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Camera extends CI_Controller {
public function index(){
$this->load->helper('url');
$this->load->view("camera");
}
public function saveImage(){
/*write your own code to save to your database*/
$newname = "some_name.png";
$filepath = "assets/images/";
file_put_contents( $newname . $filepath, file_get_contents('php://input') );
}
}
?>

Delete image into directory and database (Small admin area)

I have a small script base where you can take shots from the computer's webcam, which are saved in a directory images / and in the database.
Everything works, but now I would like to create an admin area (of course I care for the moment only the functionality), with a hypothetical page admin.php and delete.php (containing the function). I therefore want to appear on the page admin.php list of all the images and the ability to delete them from a simple "delete" button.
Unfortunately I tried several times, but I'm not an expert.
What do you need to help me?
You paste a few pages:
INDEX.PHP
<style type="text/css">
body{
margin:0;
padding:0;
}
.img
{ background:#ffffff;
padding:12px;
border:1px solid #999999; }
.shiva{
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
document.write( webcam.get_html(440, 240) );
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url( 'handleimage.php' );
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('img').innerHTML ='<h3>Upload Successfuly done</h3>'+msg;
document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";
// reset camera for another shot
webcam.reset();
}
else {alert("Error occured we are trying to fix now: " + msg); }
}
</script>
<div id="img" style=" height:500px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
HANDLEIMAGE.php
<?php
session_start();
$_SESSION['id']="1";
$id=$_SESSION['id'];
include 'config.php'; //assume you have connected to database already.
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
print "Error occured here";
exit();
}
else
{
$sql="INSERT INTO image VALUES ('','$name','$newname')";
$result=mysqli_query($con,$sql);
$value=mysqli_insert_id($con);
$_SESSION["myvalue"]=$value;
}
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
print "$url\n";
?>
These are the main pages, then there is no config.php file and webcam.js and webcam.swf
You have to write the mysql delete query for the remove the image path from database and the use unlink('file path') funcation to remove the image from the folder.
You want any other help replay on this.

HTML/CSS Font size

i have a problem
i'm trying to edit a website
it has a scroller (behavior is like a inverted waterfall)
the website shows events (data) already recorded in the database...
i want to change the font size of the scroller, i tried to change all the labels there and nothing.
this is the CSS block
<style type="text/css">
body {
font-family: "Engravers MT", "Engravers MT",sans-serif;
line-height: 1em;
color: #f0edd9;
font-weight:bold;
font-size: 40px;
background-color:#8A0829;
}
pscroller1{
width: 500px;
height: 560px;
font-family: "old republic", "old republic";
font-size:50px;
border: 1px solid black;
padding: 5px;
background: red;
}
</style>
this is the scroller, i didn't do that, it was made by someone else.
<script type="text/javascript">
var pausecontent=new Array()
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
here is how it set the message in the scroller
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
this is the body:
<body>
<!--<div align="center">
<img src="picture1.fw.png" align="absmiddle"/>
</div>
!-->
<div align="LEFT" style="width:1000px ">
<div style="height:570px; width:50%; float:right; background-color:#8A0829">
<?php
require_once('functions.php');
$phparray=events();
for($i=0; $i <count($phparray); $i++ )
{
echo '<script language="JavaScript"> pausecontent['.$i.'] = "'.$phparray[$i].'";</script>';
}
?>
<script type="text/javascript" >
document.writeln("EVENTS")
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("<br />")
function refresh(time) {setTimeout("location.reload(true);",time);}
refresh(43200000); </script>
</div>
</div>
<div align="right"> EVENTS</div>
<div align="center" style="height:570px; width:300px; float:LEFT; background- color:#8A0829">
<embed src="video.vob" autostart="true" loop ="true" width="500" height="570" >
</div>
</div>
<div align="center">
<img src="background.jpg" align="absmiddle"/>
</div>
</body>
like you can see in the
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("")
the pscroller1 should change the font color and size of the pausecontent but it does only change the style of the font of the data, although the return data of document.write (UNDEFINED) is working fine, it's size, style and color can be changed
pscroller1 is not an html entity. You cannot style it like that.
You can add an ID or a class to the 'pscroller' and style that
a{ <- html entity
.someClass{ <- styling a class
#someID{ <- styling an ID

File upload to PHP server using ajax is not working

I am using the below code to upload file to the online test server(http://posttestserver.com/post.php) and it is getting successfully uploaded and the code is also working fine as required but the issue is I have to upload the file to an internal PHP server i.e., https://xxxx.xxxx.xxxxx.com/sites/default/files/FileUpload/upload_file.php which is not working for below code while if I remove the ajax,progress bar and script part and run the code only with form tag it can upload the file.
Please help me I cant able to track the issue and I dont have knowledge in PHP.
Also find below the Error log in comment.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" action="http://posttestserver.com/post.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="file">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
Saikat, using ajax to upload file is a pain in the a..
check this out for your referrence
http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

Can't figure out what's wrong with my PHP code

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">
Cancel
<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.
The problem was actually in the jQuery button click code, specifically the "return false" portion:
// 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;
});
When I removed that code, the "$_SESSION['login_success'] = true;" occurred fine and the admin form portion came back successfully.
Turns out "return false" has some nasty side effects and should be used carefully. See
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ for more information on using "return false" correctly.
I don't have access to test it right now, but I think your problem is that it should be:
header('Location: http://localhost/mbc/admin');
Reference: http://php.net/manual/en/function.header.php
Both of the references show that a space after the ":" is needed before the URI.
There is nothing wrong with your code. You are simply expecting start_session() not to work and $_SESSION['login_success'] to be unset. I suggest you either use a php-framework or read a guide about sessions.
here, change like this and the form pops up:
<?php
//session_start(); // if you uncomment print_r will give you 1
if (isset($_SESSION['login_success'])) {
echo '<pre>';
print_r($_SESSION['login_success']);
?>
<!-- Some HTML content should show up here but it isn't... -->
empty statement</pre>

Categories