如何将简单的会话登录类型更改为facebook风格登录


how to change simple session login type into facebook style login?

我被困在转换这个基于web的应用程序的登录类型..我从网上得到的代码中,应用程序只是要求用户名,当我们进入它,它显示了对话页..但我想把登录类型转换为一个适当的一个像用户名和密码..我以前设计了一个登录系统,我想使用..的代码是绝对工作时单独使用..当组合他们不会工作..有人能告诉我结合这两个后的代码?

app的代码是index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="css/style.css">
  <style>
a:link {
    color: black;
}
a:visited {
    color: black;
}</style>
</head>
 <body>
 <?php
session_start();
 ?>
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="login.php">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>    
    <div id="chatbox"></div>
    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
    </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){   
        var clientmsg = $("#usermsg").val();
        $.post("post.php", {text: clientmsg});              
        $("#usermsg").attr("value", "");
        return false;
    });
    //Load the file containing the chat log
    function loadLog(){     
        $.ajax({
            url: "log.html",
            cache: false,
            success: function(html){        
                $("#chatbox").html(html); //Insert chat log into the #chatbox div               
            },
        });
    }
    //Load the file containing the chat log
    function loadLog(){     
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
        $.ajax({
            url: "log.html",
            cache: false,
            success: function(html){        
                $("#chatbox").html(html); //Insert chat log into the #chatbox div   
                //Auto-scroll           
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
                if(newscrollHeight > oldscrollHeight){
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                }               
            },
        });
    }
    setInterval (loadLog, 2500);    //Reload file every 2500 ms or x ms if you w
});
</script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
    //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Are you sure you want to end the session?");
        if(exit==true){window.location = 'index.php?logout=true';}      
    });
});
</script>
<?php 
if(isset($_GET['logout'])){ 
    //Simple exit message
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
    fclose($fp);
    session_destroy();
    header("Location: index.php"); //Redirect the user
}
?>
</body>
</html>

登录系统的代码是login.php

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <title>Login Form</title>
  <style>
a:link {
    color: black;
}
a:visited {
    color: black;
}</style>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if (!isset($_POST['submit'])){
?>
  <h1 class="register-title">Welcome</h1>
  <form action="<?=$_SERVER['PHP_SELF']?>" method="post" class="register">
    <div class="register-switch">
      <input type="radio" name="type" value="L" id="login" class="register-switch-input" checked>
      <label for="login" class="register-switch-label"><a href="login.php"  style="text-decoration:none;" link="#000000" vlink="#000000" alink="#000000">Login</a></label>
      <input type="radio" name="type" value="R" id="Register" class="register-switch-input">
      <label for="Register" class="register-switch-label"><a href="register.php"  style="text-decoration:none;">Register</a></label>
    </div>
    <input type="text" name="username" class="register-input" placeholder="User Name">
    <input type="password" name="password"class="register-input" placeholder="Password">
    <input type="submit" name="submit" value="Login" class="register-button">
  </form>
  <?php
} else {
    require_once("db_const.php");
    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
    # check connection
    if ($mysqli->connect_errno) {
        echo "<p>MySQL error no {$mysqli->connect_errno} : {$mysqli->connect_error}</p>";
        exit();
    }
    $username = $_POST['username'];
    $password = $_POST['password'];
    $sql = "SELECT * from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1";
    $result = $mysqli->query($sql);
    if (!$result->num_rows == 1) {
        echo "<p>Incorrect Password</p>";
    } else {
        echo "<p>Logged in successfully</p>";
        // do stuffs
        header("Location: index.php");
    }
}
?>      
</body>
</html>

你需要把<?php session_start(); ?>放在两页的最上面,你的<!DOCTYPE或其他任何东西之前。