2014-11-03 51 views
0

我正在嘗試重新設計一個登錄頁面,以便在一個頁面中包含登錄/註冊表單,而不是具有2個單獨的頁面。以前我有我的登錄和註冊頁面都通過php正確訪問我的數據庫。
我試圖簡單地複製我以前爲每個人工作但需要下面的教程頁面所需的元素,但是我的數據庫連接/ php似乎沒有做任何事情。爲登錄/註冊模式實現正確的php數據庫訪問

我在下面http://codyhouse.co/gem/loginsignup-modal-window/

新的index.php

<?php 

session_start(); 

?> 

<?php 


//Log out and delete cookie 
/* if(isset($_GET['logout'])){ 
      session_destroy(); 

    }*/ 

//After validation, then check the entered data 
    if(isset($_POST['log_username']) && isset($_POST['log_password'])) { 


    $log_username = $_POST['log_username']; 
    $log_password = $_POST['log_password']; 

    $con =mysql_connect("localhost", "user4321", "4321"); 
    mysql_select_db('supernatural',$con); 

    $sql = "SELECT * FROM user WHERE user_username='$log_username' AND user_password2='$log_password'"; 
    $sql_E = "SELECT * FROM user WHERE user_username='$log_username'"; 

    $loginShow = mysql_query($sql); 
    $loginShow_E = mysql_query($sql_E); 

    $lookOver=mysql_num_rows($loginShow); 
    $lookOver_E=mysql_num_rows($loginShow_E); 

    $row = mysql_fetch_array($loginShow); 
    $row_E = mysql_fetch_array($loginShow_E); 

    $myuser = $row['user_fn']; 
    //$cookie_name = "cook_name"; 
    if($lookOver == 1){ 
      //Set Cookie for 1 day 
      //setcookie($cookie_name,"$myuser", time() + 86400,"/"); 
      $_SESSION['loggedin'] = true; 
      $_SESSION['user'] = $myuser; 
      $_SESSION['userid'] = $row['user_id']; 
      $_SESSION['userlevel'] = $row['level']; 

      header("location: map.php"); 



      /* 
if(!isset($_COOKIE[$cookie_name])) { 
       echo "Cookie name does not exist!"; 
       } else { 
        echo "Cookie is named: <br>" . $_COOKIE[$cookie_name]."<a href='?logout'>Log Out</a>"; 

        } 
*/ 


     } else { 
      //If only password is wrong, then it will send an email with password. 
      if($lookOver_E == 1){ 

       echo "Don't remember your password? </br> <a class='refound_P' href='register.php'>Register a new account with a new email</a>"; 
       /*href='found.php '>Send me a email with my password.</a>"; */  
      //If there is not one data relevant to, then it requires users reset. 
      }else{ 
       echo "</br>Don't remember your Username? </br> <a class='refound_E' href='register.php'>Register a new account with a new email</a>"; 

      } 

      } 


    mysql_close($con); 

    } 

    //echo json_encode($_SESSION['loggedin'] ? 'true' : 'false'); 


?> 
<!--doctype html--> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> 

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="css/styleA.css"> <!-- Gem style --> 
    <script src="js/modernizr.js"></script> <!-- Modernizr --> 

    <title>Log In &amp; Sign Up Form</title> 
</head> 
<body> 
    <header role="banner"> 
     <div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div> 

     <nav class="main-nav"> 
      <ul> 
       <!-- inser more links here --> 
       <li><a class="cd-signin" href="#0">Sign in</a></li> 
       <li><a class="cd-signup" href="#0">Sign up</a></li> 
      </ul> 
     </nav> 
    </header> 

    <div class="cd-user-modal"> <!-- this is the entire modal form, including the background --> 
     <div class="cd-user-modal-container"> <!-- this is the container wrapper --> 
      <ul class="cd-switcher"> 
       <li><a href="#0">Sign in</a></li> 
       <li><a href="#0">New account</a></li> 
      </ul> 

      <div id="cd-login"> <!-- log in form --> 
       <form class="cd-form" action="index.php" method="post"> 
        <p class="fieldset"> 
         <label class="image-replace cd-username" for="log_username">Login</label> 
         <input class="full-width has-padding has-border" id="log_username" type="text" placeholder="Username"> 
         <span class="cd-error-message">Please enter a username!</span> 
        </p> 

        <p class="fieldset"> 
         <label class="image-replace cd-password" for="log_password">Password</label> 
         <input class="full-width has-padding has-border" id="log_password" type="password" placeholder="Password"> 
         <span class="cd-error-message">Please enter a password!</span> 
        </p> 

        <p class="fieldset"> 
         <input type="checkbox" id="remember-me" checked> 
         <label for="remember-me">Remember me</label> 
        </p> 

        <!--p class="fieldset"--> 
         <input class="full-width" id="submitBtn" type="submit" value="Login"> 
        <!--/p--> 
       </form> 

       <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p> 
       <!-- <a href="#0" class="cd-close-form">Close</a> --> 
      </div> <!-- cd-login --> 






      <div id="cd-signup"> <!-- sign up form --> 
       <form class="cd-form"> 
        <p class="fieldset"> 
         <label class="image-replace cd-username" for="signup-username">Username</label> 
         <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username"> 
         <span class="cd-error-message">Error message here!</span> 
        </p> 

        <p class="fieldset"> 
         <label class="image-replace cd-email" for="signup-email">E-mail</label> 
         <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail"> 
         <span class="cd-error-message">Error message here!</span> 
        </p> 

        <p class="fieldset"> 
         <label class="image-replace cd-password" for="signup-password">Password</label> 
         <input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Password"> 
         <a href="#0" class="hide-password">Hide</a> 
         <span class="cd-error-message">Error message here!</span> 
        </p> 

        <p class="fieldset"> 
         <input type="checkbox" id="accept-terms"> 
         <label for="accept-terms">I agree to the <a href="#0">Terms</a></label> 
        </p> 

        <p class="fieldset"> 
         <input class="full-width has-padding" type="submit" value="Create account"> 
        </p> 
       </form> 

       <!-- <a href="#0" class="cd-close-form">Close</a> --> 
      </div> <!-- cd-signup --> 

      <div id="cd-reset-password"> <!-- reset password form --> 
       <p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p> 

       <form class="cd-form"> 
        <p class="fieldset"> 
         <label class="image-replace cd-email" for="reset-email">E-mail</label> 
         <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail"> 
         <span class="cd-error-message">Error message here!</span> 
        </p> 

        <p class="fieldset"> 
         <input class="full-width has-padding" type="submit" value="Reset password"> 
        </p> 
       </form> 

       <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p> 
      </div> <!-- cd-reset-password --> 
      <a href="#0" class="cd-close-form">Close</a> 
     </div> <!-- cd-user-modal-container --> 
    </div> <!-- cd-user-modal --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/main.js"></script> <!-- Gem jQuery --> 
</body> 
</html> 

新main.js

$(window).load(function(){ 
    var $form_modal = $('.cd-user-modal'), 
     $form_login = $form_modal.find('#cd-login'), 
     $form_signup = $form_modal.find('#cd-signup'), 
     $form_forgot_password = $form_modal.find('#cd-reset-password'), 
     $form_modal_tab = $('.cd-switcher'), 
     $tab_login = $form_modal_tab.children('li').eq(0).children('a'), 
     $tab_signup = $form_modal_tab.children('li').eq(1).children('a'), 
     $forgot_password_link = $form_login.find('.cd-form-bottom-message a'), 
     $back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'), 
     $main_nav = $('.main-nav'); 

    //open modal 
    $main_nav.on('click', function(event){ 

     if($(event.target).is($main_nav)) { 
      // on mobile open the submenu 
      $(this).children('ul').toggleClass('is-visible'); 
     } else { 
      // on mobile close submenu 
      $main_nav.children('ul').removeClass('is-visible'); 
      //show modal layer 
      $form_modal.addClass('is-visible'); 
      //show the selected form 
      ($(event.target).is('.cd-signup')) ? signup_selected() : login_selected(); 
     } 

    }); 

    //close modal 
    $('.cd-user-modal').on('click', function(event){ 
     if($(event.target).is($form_modal) || $(event.target).is('.cd-close-form')) { 
      $form_modal.removeClass('is-visible'); 
     } 
    }); 
    //close modal when clicking the esc keyboard button 
    $(document).keyup(function(event){ 
     if(event.which=='27'){ 
      $form_modal.removeClass('is-visible'); 
     } 
    }); 

    //switch from a tab to another 
    $form_modal_tab.on('click', function(event) { 
     event.preventDefault(); 
     ($(event.target).is($tab_login)) ? login_selected() : signup_selected(); 
    }); 


    //show forgot-password form 
    $forgot_password_link.on('click', function(event){ 
     event.preventDefault(); 
     forgot_password_selected(); 
    }); 

    //back to login from the forgot-password form 
    $back_to_login_link.on('click', function(event){ 
     event.preventDefault(); 
     login_selected(); 
    }); 

    function login_selected(){ 
     $form_login.addClass('is-selected'); 
     $form_signup.removeClass('is-selected'); 
     $form_forgot_password.removeClass('is-selected'); 
     $tab_login.addClass('selected'); 
     $tab_signup.removeClass('selected'); 
    } 

    function signup_selected(){ 
     $form_login.removeClass('is-selected'); 
     $form_signup.addClass('is-selected'); 
     $form_forgot_password.removeClass('is-selected'); 
     $tab_login.removeClass('selected'); 
     $tab_signup.addClass('selected'); 
    } 

    function forgot_password_selected(){ 
     $form_login.removeClass('is-selected'); 
     $form_signup.removeClass('is-selected'); 
     $form_forgot_password.addClass('is-selected'); 
    } 

    //$form_login.find('input[id="submitBtn"]').on('click', function(event){ 
     //validate(); 
//console.log("YO"); 
     //event.preventDefault(); 

$('#submitBtn').click(function(){ 
     var loginUsername = $('#log_username'); 
     var loginPass = $('#log_password'); 
     var logintext = false; 
     var passwordtext = false; 
     if (loginUsername.val() != 0){ 
     loginUsername.removeClass('has-error').next('span').removeClass('is-visible'); 
     logintext = true; 
     } else { 
      loginUsername.addClass('has-error').next('span').addClass('is-visible'); 
       logintext = false; 
        //console.log("NO"); 
     } 

     if (loginPass.val() != 0){ 
     loginPass.removeClass('has-error').next('span').removeClass('is-visible'); 
     passwordtext = true; 
     } else { 
      loginPass.addClass('has-error').next('span').addClass('is-visible'); 
      passwordtext = false; 
        //console.log("NO"); 
     } 



     if (logintext == true && passwordtext == true){ 
      console.log("Both"); 
      return true; 
     } else { 
      console.log("Missing"); 
      return false; 
     } 



    }); 

舊的login.php的概括這種方法參考

<?php 

session_start(); 

?> 

<?php 


//Log out and delete cookie 
    if(isset($_GET['logout'])){ 
      session_destroy(); 

    } 

//After validation, then check the entered data 
    if(isset($_POST['log_username']) && isset($_POST['log_password'])) { 


    $log_username = $_POST['log_username']; 
    $log_password = $_POST['log_password']; 

    $con =mysql_connect("localhost", "user4321", "4321"); 
    mysql_select_db('supernatural',$con); 

    $sql = "SELECT * FROM user WHERE user_username='$log_username' AND user_password2='$log_password'"; 
    $sql_E = "SELECT * FROM user WHERE user_username='$log_username'"; 

    $loginShow = mysql_query($sql); 
    $loginShow_E = mysql_query($sql_E); 

    $lookOver=mysql_num_rows($loginShow); 
    $lookOver_E=mysql_num_rows($loginShow_E); 

    $row = mysql_fetch_array($loginShow); 
    $row_E = mysql_fetch_array($loginShow_E); 

    $myuser = $row['user_fn']; 
    //$cookie_name = "cook_name"; 
    if($lookOver == 1){ 
      //Set Cookie for 1 day 
      //setcookie($cookie_name,"$myuser", time() + 86400,"/"); 
      $_SESSION['loggedin'] = true; 
      $_SESSION['user'] = $myuser; 
      $_SESSION['userid'] = $row['user_id']; 
      $_SESSION['userlevel'] = $row['level']; 

      header("location: map.php"); 



      /* 
if(!isset($_COOKIE[$cookie_name])) { 
       echo "Cookie name does not exist!"; 
       } else { 
        echo "Cookie is named: <br>" . $_COOKIE[$cookie_name]."<a href='?logout'>Log Out</a>"; 

        } 
*/ 


     } else { 
      //If only password is wrong, then it will send an email with password. 
      if($lookOver_E == 1){ 

       echo "Don't remember your password? </br> <a class='refound_P' href='register.php'>Register a new account with a new email</a>"; 
       /*href='found.php '>Send me a email with my password.</a>"; */  
      //If there is not one data relevant to, then it requires users reset. 
      }else{ 
       echo "</br>Don't remember your Username? </br> <a class='refound_E' href='register.php'>Register a new account with a new email</a>"; 

      } 

      } 


    mysql_close($con); 

    } 

    //echo json_encode($_SESSION['loggedin'] ? 'true' : 'false'); 


?> 


<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <link rel="shortcut icon" href="http://www.finvisionconsultants.com/images/login_key.png"> 
    <link href='css/style.css' rel='stylesheet' type='text/css' /> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
    <script type="text/javascript" src="validation2.js"></script> 
    <title>Login</title> 
    <style type='text/css'> 
    body{background-color: #575757;} 
    input {padding: 5px 10px;font-size: 15px;} 
    button {padding: 5px 10px;border-radius: 0px;} 
    .erroB {border: 1px solid #ec9acd;} 
    .msg {font-family: fantasy;color: #ec9acd;} 
    #msgBox{} 
    h1{color: green;} 
    .refound_P,.refund_E{color: #8480d4;} 
    form{margin-left: 35%;margin-top: 10%;} 
    .main{font-size: xx-large;color: white;} 
    </style> 

</head> 
<body> 
    <div class="col-lg-6" id="logo-area"> 
     <img src="images/mainTitle.png" alt="Supernatural Guide Map"> 
    </div> 
    <form action="login.php" method="post"> 

     <table> 
      <tr id="msgBox"> 
       <td colspan="2"><p class="msg"></p></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td> 
        <label>Username</label> 
       </td> 
       <td> 
        <input type="text" id="log_username" name="log_username" /> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <label>Password</label> 
       </td> 
       <td> 
        <input type="password" id="log_password" name="log_password" /> 
       </td> 
      </tr> 

     </table> 

     <button type="submit" id="submitBtn">Log In</button> 



    </form> 
    <button style="margin-left:35%; margin-top:7px;" onClick="location.href='index.php'">Cancel</button> 

<div id="status"> 

</div> 



</body> 

</html> 

老validation2.js(相當於什麼main.js上面一樣)參考

$(window).load(function() { 

     $('#submitBtn').click(function() { 
       return validate(); 
     }); 

     //Assign two functions for acting displaying message and removing it 
     function displayMsg(msg) { 
      $('.msg').html(msg); 
     } 

     function clearMsg() { 
      $('.msg').html(""); 
     } 

     function validate() { 

      var loginUsername = $('#log_username'); 
      var loginPass = $('#log_password'); 
      //the rule of validating letters and email format 
      // var emailRegex = /^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
      //Login validation:Email 
      //if (emailRegex.test(loginEmail.val())) { 
      if (loginUsername.val() != 0){ 
       loginUsername.removeClass("erroB"); 
      } else { 
       loginUsername.addClass("erroB"); 
       displayMsg("Please check your username"); 
       return false; 
      } 


      //Login validation:Password 
      if (loginPass.val() != 0) { 
       loginPass.removeClass("erroB"); 
      } else { 
       loginPass.addClass("erroB"); 
       displayMsg("Password is required"); 
       return false; 
       } 

      clearMsg(); 
      return true; 

     } 
     //make the validation be immidiatelly. 
     $('input').keyup(function() { 
      validate(); 
     }); 

}); 

我只用越來越合作,啓動登錄部(未登記)嘗試,但即使這沒有做任何事情。

我已經基本上覆制了我從以前的登錄,但無法解決它爲什麼不工作!所有的數據庫憑證都是正確的。
我在這裏錯過了一些非常簡單的東西嗎?

+0

請,或不使用'mysql_ *'功能(http://stackoverflow.com/questions/12859942/why-shouldnt-i -use-mysql-functions-in-php),它們不再被維護,並且[已正式棄用](https://wiki.php.net/rfc/mysql_deprecation)。學習[準備的語句](http://en.wikipedia.org/wiki/Prepared_statement),並使用[PDO](http://us1.php.net/pdo)或[MySQLi](http:// us1.php.net/mysqli)。 [本文](http://php.net/manual/en/mysqlinfo.api.choosing.php)將幫助你決定。 – 2014-11-03 21:53:25

+0

你收到了哪些錯誤信息? – 2014-11-03 21:58:15

+0

@isim無,這就是問題所在。我不知道發生了什麼事! – hdsuh 2014-11-03 22:21:11

回答

0

問題是查詢沒有被處理。您在登錄表單中沒有名稱屬性。在表格中添加name="log_username"name="log_username",然後$log_username = $_POST['log_username']$log_password = $_POST['log_password']將具有值。

同樣在表單動作中,將它留空,表單將提交給自己。爲登錄表單和註冊表單中的所有輸入字段添加名稱屬性。

下面是登錄表單修復:

  div id="cd-login"> <!-- log in form --> 
      <form class="cd-form" action="" method="post"> 
       <p class="fieldset"> 
        <label class="image-replace cd-username" for="log_username">Login</label> 
        <input class="full-width has-padding has-border" id="log_username" name="log_username" type="text" placeholder="Username"> 
        <span class="cd-error-message">Please enter a username!</span> 
       </p> 

       <p class="fieldset"> 
        <label class="image-replace cd-password" for="log_password">Password</label> 
        <input class="full-width has-padding has-border" id="log_password" name="log_password" type="password" placeholder="Password"> 
        <span class="cd-error-message">Please enter a password!</span> 
       </p> 

       <p class="fieldset"> 
        <input type="checkbox" id="remember-me" checked> 
        <label for="remember-me">Remember me</label> 
       </p> 

       <!--p class="fieldset"--> 
        <input class="full-width" id="submitBtn" type="submit" value="Login"> 
       <!--/p--> 
      </form> 

      <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p> 
      <!-- <a href="#0" class="cd-close-form">Close</a> -->