Modal box login with session

prash91 · 11-03-2012, 02:13 PM

Hi
I am trying to make login form through modal box, if user click login the box will appear including login form in it, if user goes through the login process the session will generate in index page with welcome message but i am confuse how to set session and recall it.
I have following details of my code

Register table, has 3 fields ID username Password
index.php

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" /> 
<style>

#dialog{
	   display:none;
	   draggable: false, 
	   }
	   

</style>
<link href="modal.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	background-color: #333;
}
</style>
</head>
 <body>
 
      <script type="text/javascript" src="autojs/jquery-1.8.2.min.js"></script> 
         <script type="text/javascript" src="autojs/jquery.bgiframe.js"></script>
      <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
         
         

<script type="text/javascript">
$( document).ready(function() {
        
   
		$('#loginbutton').click(function(){
			 $( "#dialog" ).dialog();
		});
		
		 });
		 

 </script> 
<div align="right" id="loginbutton"><a href="#">Login/Register</a></div>
<div id="container">
<table width="1014" border="1" align="center">
  <tr>
    <td width="109" height="54">&nbsp;</td>
    <td width="780"><div align="center" class="carlogos"></div></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td height="74"></td>
    <td><div class="site_logo"></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td> <div id="nav-menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li id="sellcarlist"><a href="#">Sell Cars</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
 </div> </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>
<div id="dialog" title="Please LogIn">
   
  <script type="text/javascript">
	$("#submit").click(function(){
		var username = $("#username").val();
		var password = $("#password").val();
	
		$.ajax({
			
			type:"post",
			url:"login.php",
			data: "username=" + username + "&password=" + password,
			success: function(result){
				if(result=='0')
				{
					
					$("#dialog").dialog("close");
					//$("#loginbutton").html("welcome" + " " + username);	
					$("#loginbutton").html("welcome" + " " + sessName);
					
					 
				}else{
					$("#ack").html("incorrect user");
				}
			}
			});
		return false;

	});
</script>
   
   
   <form action="login.php" method="post" id="myform">
 Username:<input name="username" type="text" id="username"><br>
 Password:<input name="password" type="text" id="password"><br>
 <button id="submit">Login</button>
 </form>

<div id="ack">Click login</div>
</div>  
</body>
</html>

login.php

Code:

<?PHP
include_once('conndb1.php');


	$username = mysql_real_escape_string($_POST["username"]);
	$password = mysql_real_escape_string(md5($_POST["password"]));

	$sql =("SELECT * from register where username='$username' AND password='$password'");
	$res = mysql_query($sql)or die(mysql_error());
	if(mysql_num_rows($res)>0)
	{
		echo "0";
		session_start();
		 $_SESSION['uname']=$username;
	}


?>

at the moment i am displaying the username through jquery in logginbutton div tag but i want to display it through session.

sunfighter · 11-05-2012, 04:29 PM

Sorry, I just can't leave things alone. I did a number of things to your code.
First you have to know this: To use sessions it must be started as the first line of code in your script. So your html needed to be changed to a php file and session_start(); is added to both scripts.
In your main or index.php script I added css changed your anchor to a button, your form to a div. Rewrote the jquery. And changed some id names. So study it closely. In the called php file I changed the if contents.
index.php:

Code:

<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<style>
#signin{
	display:none;
}
body {
	//background-color: #333;
}
#container{
	width: 1014px;
}
#loginbutton{
	float:right;
}
#main{
	clear:both;
}
</style>
<link href="modal.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='javascript/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#loginbutton").click(function(){
		$("#signin").css("display", "block");
		document.getElementById("username").focus();
	});

	$("#away").click(function(){
		var username = $("#username").val();
		var password = $("#password").val();
		$.post("login.php", { name: username, pass: password },
			function(data) {
			alert("<?php echo 'session name is '.$_SESSION['uname']; ?>")
			$("#signin").css("display", "none");
	        });
	});
});
</script>
</head>
 <body>
<div id="container">
<button id="loginbutton">Login/Register</button>
<div id="main">
<table width="1014" border="1" align="center">
  <tr>
    <td width="109" height="54">&nbsp;</td>
    <td width="780"><div align="center" class="carlogos"></div></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td height="74"></td>
    <td><div class="site_logo"></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td> <div id="nav-menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li id="sellcarlist"><a href="#">Sell Cars</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
 </div> </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</div>

<div id="signin">
Username:<input name="username" type="text" id="username"><br>
Password:<input name="password" type="password" id="password"><br>
<button id="away">Login</button>
</div>
</body>
</html>

The login.php:

PHP Code:


			
<?PHP

session_start();

include_once('conndb1.php');



    $username = mysql_real_escape_string($_POST["name"]);

    $password = mysql_real_escape_string(md5($_POST["pass"]));





    $sql =("SELECT * from register where username='$username' AND password='$password'");

    $res = mysql_query($sql)or die(mysql_error());

    if(mysql_num_rows($res)>0)

    {

        $_SESSION['uname']=$username;

        echo "0";

    }

?>

prash91 · 11-07-2012, 06:54 PM

Hi Sunfighter
Thanks for the help.
I have work on the code as per your suggestion, however the time i run the code and click on login to display siginin div, it doesn't display signin div so i change it to $("#signin").show();, even though it doesn't display the signin div

also when i click on login button it does'nt validate through login.php infact it does nothing.

In following code
$username = mysql_real_escape_string($_POST["name"]);
$password = mysql_real_escape_string(md5($_POST["pass"]));
I have change name to username, and pass to password
because my textfield value is username and password

please give me some suggestion

sunfighter · 11-07-2012, 07:04 PM

I bet it's this line:
<script type='text/javascript' src='javascript/jquery.js'></script>

That's how I load my jquery library. Yours is going to be a whole lot different

Replace that line with this one:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

and things should work

prash91 · 11-07-2012, 09:17 PM

Sorry, but it still not working
I got one question, the click event should work with
<script type='text/javascript' src='javascript/jquery.js'></script>
library
and signin div should display when the register button is click ?

sunfighter · 11-08-2012, 03:52 AM

delete this line

Code:

alert("<?php echo 'session name is '.$_SESSION['uname']; ?>")

prash91 · 11-08-2012, 07:43 AM

I have delete the
alert("<?php echo 'session name is '.$_SESSION['uname']; ?>")
code
it display the signin div
but not able to go through login.php page

prash91 · 11-12-2012, 07:26 PM

Yes, sir . I am still working on this code.

sunfighter · 11-13-2012, 05:05 PM

Three files this time. The sessions is not done in the log in page and I do not pay any attention to the menu so if you want that to work you should be able to incorporate it. I would put it on the last page.

Your main code:

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<style>
#signin{
	display:none;
}
body {
	//background-color: #333;
}
#container{
	width: 1014px;
}
#loginbutton{
	//float:right;
}
#main{
	clear:both;
}
#here, #hereagain{
	display:none;
}
</style>
<link href="modal.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='javascript/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#loginbutton").click(function(){
		$("#signin").css("display", "block");
		$("#here").css("display", "none");
		document.getElementById("username").focus();
	});

	$("#away").click(function(){
		var username = $("#username").val();
		var password = $("#password").val();
		$.post("login.php", { name: username, pass: password },
		function(data){
		$("#here").css("display", "block");
		$("#here").html(data);
		});
		$("#signin").css("display", "none");
	});
});
</script>
</head>
 <body>
<div id="container">
<button id="loginbutton">Login/Register</button>Bill Clinton
<div id="main">
<table width="1014" border="1" align="center">
  <tr>
    <td width="109" height="54">&nbsp;</td>
    <td width="780"><div align="center" class="carlogos"></div></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td height="74"></td>
    <td><div class="site_logo"></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td> <div id="nav-menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li id="sellcarlist"><a href="#">Sell Cars</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
 </div> </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</div>

<div id="signin">
Username:<input name="username" type="text" id="username"><br>
Password:<input name="password" type="password" id="password"><br>
<button id="away">Login</button>
</div>
<div id="here">Name or password</div>
<div id="hereagain">Name or password incorrect<br>Try again</div>
</body>
</html>

This calls the login.php script:

PHP Code:


			
<?php

session_start();

if(isset($_SESSION['uname']))

  unset($_SESSION['uname']);



//include_once('conndb1.php');

require ('./inc/DB_connect.php');





    $username = mysql_real_escape_string($_POST["name"]);

    $password = mysql_real_escape_string(md5($_POST["pass"]));





    $sql =("SELECT rsn from clan_members where password='$password'");

    $res = mysql_query($sql)or die(mysql_error());

    $row = mysql_fetch_row($res);

    if($row[0] == $username)

    {

        $_SESSION["uname"] = $username;

        echo 'Logged In <button id="continue" onclick="window.location.href = \'continue.php\';">Continue</button>';

    }

        if($row[0] != $username)

    {

        echo 'Name or password incorrect<br>Try again';

    }

?>

The final page is the continue.php:

PHP Code:


			
<?php

session_start();

echo "I am the continue page<br />";

echo $_SESSION['uname'];

?>

This page shows that the sessions has been set. You need to do some checking on your inputs and make sure they have content and that it's the correct content because leaving things blank will work as a login.

prash91 · 11-14-2012, 07:12 PM

Hi Sunfighter,
thanks for coming back and look into the code,
I have gone through the code,but the problem is, when i click login with correct login details it gives me message
Name or password incorrect
Try again

sunfighter · 11-15-2012, 04:49 PM

When your password is "pass" and you look at it in the database it will say "1a1dc91c907325c69271ddf0c944bc72" and not "pass" because you encoded with md5. You should be able to use the echo statement to see where your failing. Do it!

prash91 · 11-16-2012, 10:25 AM

Yes I have encoded with md5,
if i run my previous code which, I have pasted at the begning of this posting it goes through login validation, when i use the last code (posted by you) the login validation dosent work. it gives me message
Name or password incorrect
and if i click login button with empty textfield it goes through validation and reflect logged in with continue button

sunfighter · 11-16-2012, 11:26 AM

I can not trouble shot your machine from my desk. You have to do it.

Oh I see. Don't you look at what I give you? I spotted the problem right away. My code is connecting to my database and SELECTING from my database using my columns. Your login.php should be:

Code:

 <?php
session_start();
if(isset($_SESSION['uname']))
  unset($_SESSION['uname']);

include_once('conndb1.php');


    $username = mysql_real_escape_string($_POST["name"]);
    $password = mysql_real_escape_string(md5($_POST["pass"]));


    $sql =("SELECT username from clan_members where password='$password' AND username='$username'");
    $res = mysql_query($sql)or die(mysql_error());
    $row = mysql_fetch_row($res);
    if($row[0] == $username)
    {
        $_SESSION["uname"] = $username;
        echo 'Logged In <button id="continue" onclick="window.location.href = \'continue.php\';">Continue</button>';
    }
        if($row[0] != $username)
    {
        echo 'Name or password incorrect<br>Try again';
    }
?>

prash91 · 11-16-2012, 02:10 PM

Thanks Sunfighter

I got it
$username = mysql_real_escape_string($_POST["name"]);
$password = mysql_real_escape_string(md5($_POST["pass"]));
I made changes:

$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string(md5($_POST["password"]));

and it work.

sunfighter · 11-16-2012, 04:06 PM

Glad it's finally working for you. Guess I didn't do somethings here that I should have. But why you never got a warring that No database selected or the the include file on line 6 didn't work is beyond me. Anyway prash91 I hope you do come back with your problems. We're here to try to help.