Login issue using php, lightbox and javascript

**chris.php** · 12-09-2012 08:05 AM

Hello everyone,

I have this idea for a website that I can't seem to solve. I created an intro page where there's a username and a password to type and two buttons, a login button and a register button.
What I wanted to do is when the login button is pressed it compares the username and the password with database entries, if they're available, it would redirect the client to homepage. If not, the lightbox would appear for registration.
When both buttons are click, nothing happens :/..

The code to my intro page is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> RYNC - Rent Your Car Now</title>
<style type="text/css">
@import "Dialog/DescriptionDialog.css";
@import "Dialog/styles.css";
</style>
<style>
body {
background: url(../Images/Bgcolor.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
}
</style>
</script>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="Dialog/jquery.lightbox_me.js"></script>

<?php
function ShowLogin(){
$f_usr = $_POST["username"];
$f_pswd = $_POST["password"];
$con=mysql_connect("localhost","root","");

if(! $con){
die('Connection Failed'.mysql_error());
}

mysql_select_db("projet",$con);
$result = mysql_query("SELECT * FROM client WHERE username= '" .$f_usr. "' AND password= '" .$f_pswd. "' ");
$numrows=mysql_num_rows($result);

if ($numrows != 0){
header("Location: Homepage.php");}
else{
ShowRegistration();}
}

?>

<script type="text/javascript">
function ShowRegistration(){
.get("Registration.php",
function(data){
$("#descDialog").empty();
$("#descDialog").append(data);

$("#descDialog").lightbox_me({
centered:true
});
})
}

</script>
</head>

<body>
<form name="frm" action="Registration.php" method="post">
<center>
<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macr...ersion=6,0,0,0"
WIDTH="640" HEIGHT="480" id="RYNC" ALIGN="">
<PARAM NAME=movie VALUE="RYNC.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../Flash/RYNC.swf" quality=high bgcolor=#FFFFFF WIDTH="640" HEIGHT="480" NAME="RYNC" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedi...layer"></EMBED>
</OBJECT>

<br>
Username
<input type="text" value="" name="username">
<br>
Password
<input type="password" value="" name="password">
<br>
</form>
<input type="button" value="Log In" name="Login" onclick="<? ShowLogin(); ?>">
<input type="button" value="Register now" name="Register" onclick="ShowRegistration();">
<div id="descDialog"></div>
</body>
</html>

Thanks in advance

Regards,
Chris

**dalecosp** · 12-09-2012 05:55 PM

Hello Chris, and welcome to PHPBuilder!

Please help us out by using [code][/code] or [php][/php] around your code excerpts ... it simplifies page navigation and (in the case of PHP) can assist with debugging due to syntax highlighting.

Your code contains some problems. Your design may, also, contain some problems. For example, you say that this is the code for your login page. Yet, I see the authentication code as well, and a PHP header() call after what appears to be the <head> section of an HTML page. It could be that your design for the system has a flaw in its logical flow.

You say "clicking doesn't produce any effect" ... Do you have any further information that could tell us what IS working and/or happening? Perhaps you could examine your server's error logs, or Firebug/Chrome debugger's error console, and see if there are any specific errors we could help with?

**chris.php** · 12-09-2012 06:51 PM

First of all thanks a lot for replying, I really apperciate that you took the time to help me out and sorry for any inconvenience.

Ok let me explan a little bit more.
In the beginning, I wasn't using the function in the same page.
In the initial page I had in Intro.php :

Code:

<head>
		<style type="text/css">
			@import "Dialog/DescriptionDialog.css";
			@import "Dialog/styles.css";
		</style>
		<style>
		<script type="text/javascript" src="JQuery.js"></script>
		<script type="text/javascript" src="Dialog/jquery.lightbox_me.js"></script>
		<script type="text/javascript" src="intro.js"></script>
    </head>

<input type="button" value="Log In" name="Submit" onclick="ShowLogin();">
<div id="descDialog"></div>

then in intro.js:

Code:

function ShowLogin(){
				$.get("Registration.php",
				function(data){
				$("#descDialog").empty();
					$("#descDialog").append(data);
					
					$("#descDialog").lightbox_me({
						centered:true
					});
				})
			}

So the light box was working just fine. But I needed to do the authentification for the username and password and didn't know what to do so I wrote the code above..

Really apperciate the help!

**dalecosp** · 12-09-2012 10:27 PM

Well, authentication is kind of like gaining entry to a high-brow party. You give your name (credentials), the maitre'd checks the guest list and tells you if you can enter or not.

To do this on the web, you have to submit a form, get a response from the server, and then go to the appropriate location.

The "standard" way to handle this, prior to a few years ago, was to present an HTML login form, have that form submitted to a handler script, and have the handler tell the browser where to go (in this case, to the homepage, or to a registration page).

If you've never written an authentication system before, I'd recommend you try the standard way first.

The plan that you seem to have in mind appears to me to be a more advanced concept; that is, a form appears on the page, pushing the button contacts the server without re-loading the page and, depending on the result of the authentication attempt you will either send the browser to a new location or present another form. If you want to do this, you are going to be very careful in planning your application, and you really need to know what each technology (HTML, PHP, Javascript, and for the purposes of this example, "AJAX") can do to help you meet your goal.

For one thing, you'll not be able to use PHP's header() function to redirect the browser after an authentication attempt unless the page gets re-loaded ... a system like I think you are attempting to create would have to use Javascript to accomplish this redirection.

**chris.php** · 12-10-2012 06:54 PM

I'm doing the authentication with the code below:

PHP Code:


<?php

 

        $f_usr = $_POST["username"];

        $f_pswd = $_POST["password"];

        $con=mysql_connect("localhost","root","");

        

        if(! $con){

            die('Connection Failed'.mysql_error());

        }

 

        mysql_select_db("projet",$con);

        $result = mysql_query("SELECT * FROM client WHERE username= '" .$f_usr. "' AND password= '" .$f_pswd. "' ");

        $numrows=mysql_num_rows($result);

        

        if ($numrows == 0){

            header("Location: Registration.php");}

    

    ?>

and it works fine alone. Does it mean that i can combine the lightbox and this code together?

**dalecosp** · 12-10-2012 07:26 PM

If your login form is a separate page, you could have it point to this and put the registration part last, after the header() call; just make sure that any HTML output comes after the code above. This would include whitespace, any echo() or print() statements in PHP, HTML tags, and, of course, the JS needed for the lightbox effect.

**chris.php** · 12-13-2012 12:06 PM

Sorry for the late reply but I've been busy with other projects.
Anws, I think I understand what you mean but I don't know how to do it in my code

I put the code of the lightbox in an other page and saved it as a javascript file "intro.js"

Code:

function ShowRegistration(){
				$.get("Registration.php",
				function(data){
				$("#descDialog").empty();
					$("#descDialog").append(data);
					
					$("#descDialog").lightbox_me({
						centered:true
					});
				})
			}

but can I put the authentication in another function there too or will it not work properly? cause I already tried it and it sort of ruined the hole code (the lightbox wont appear any more upon clicking the register button)

Thanks again for your help I really appreciate it

**cretaceous** · 12-13-2012 12:22 PM

It seems as if you are mixing javascript with PHP - but they are two totally different beasts.
PHP happens on the webserver.
Javascript happens in the user's web browser.

As Dalecosp said.. as you are sticking with the 'simple' process, keep PHP and js separate

It's perfectly fine to put your log in form in the chunk of html that appears via the lightbox and when it gets submitted a bit of PHP will run on the webserver and perform the log in checks...

Thread: Login issue using php, lightbox and javascript

Thread Tools

Search Thread

Display

Login issue using php, lightbox and javascript

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions