モーダルでのログインエラーメッセージ

Question

ユーザー名とパスワードでログインモーダルフォームを作成しました。ログインに成功すると、管理者のダッシュボードにリダイレクトされます。ログインモーダルフォームの下に不正な資格情報をログインしようとすると、「ユーザー名とパスワードが間違っています」というエラーメッセージを表示する方法はありますか？

私のモーダルフォーム：

<li class="active"> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li> 
        <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
      <div class="modal-dialog"> 
       <div class="loginmodal-container"> 
        <h1>Login</h1><br> 
        <form action="" method="post" name="login"> 
        <input type="text" name="username" placeholder="Username" required> 
        <input type="password" name="password" placeholder="Password" required> 
        <input type="submit" name="submit" class="login loginmodal-submit" value="Login"> 
        </form> 
       </div> 
      </div> 
      </div> 

スクリプト：

<?php 
    require('db1.php'); 
    session_start(); 
    if (isset($_POST['username'])){ 

     $username = stripslashes($_REQUEST['username']); 
     $username = mysqli_real_escape_string($con,$username); 
     $password = stripslashes($_REQUEST['password']); 
     $password = mysqli_real_escape_string($con,$password); 

     $query = "SELECT * FROM `users` WHERE username='$username' and password='".md5($password)."'"; 
     $result = mysqli_query($con,$query) or die(mysqli_error()); 
     $rows = mysqli_num_rows($result); 
     if($rows==1){ 
      $_SESSION['username'] = $username; 
      header("Location: view.php"); 
      }else{ 
       echo "<div class='login-modal'>Username or password is incorrect.<br/>Click here to <a href='index.php'>Login</a></div>"; 
       } 
    }else{ 
?> 

Answer 1

ただ、下記のようなエラーメッセージを追加して、ユーザー名・パスワードが間違っている場合、それは他の部分に移動します。したがって、$('#login-modal').modal('show');を使用してモーダルを開くことができます。形態において

：

<h1>Login</h1><br> 
    <?php if(isset($error_msg)){ echo $error_msg; } ?> 
<form action="" method="post" name="login"> 
... 
</form> 
<?php if(isset($script)){ echo $script; } ?> 

PHP：

if($rows==1){ 
     $_SESSION['username'] = $username; 
     header("Location: view.php"); 
     }else{ 
      $error_msg = "<div class='login-modal'>Username or password is incorrect</div>"; 
      $script = "<script> $(document).ready(function(){ $('#login-modal').modal('show'); }); </script>"; 

      } 

注1：次に、HTMLコードまずPHPコード。これにより、$error_msgをhtml形式で設定することができます。

更新1：使用されたPreparedステートメントと変数にスクリプトを格納し、HTMLとjQueryの後にエコーをこのように含める。

` 
    <?php 
     require('db1.php'); 
     session_start(); 

     if (isset($_POST['username'])){ 

      $username = stripslashes($_REQUEST['username']); 
      $username = mysqli_real_escape_string($con,$username); 
      $password = stripslashes($_REQUEST['password']); 
      $password = mysqli_real_escape_string($con,$password); 
      $password = md5($password); 

      $query = "SELECT * FROM `users` WHERE username=? and password=?"; 
      $stmt = $con->prepare($query); 
        $stmt->bind_param('ss',$username,$password); 
        $stmt->execute(); 
      $result=$stmt->get_result(); 
      $rows = $result->num_rows; 
      $stmt->close(); 
      //$rows=0; 
      if($rows>0){ 
       $_SESSION['username'] = $username; 
       header("Location: view.php"); 
       }else{ 
        $error_msg = "<div class='login-modal'>Username or password is incorrect</div>"; 
        $script = "<script> $(document).ready(function(){ $('#login-modal').modal('show'); }); </script>"; 
        } 

     } 
    ?> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <li class="active"> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li> 
         <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
       <div class="modal-dialog"> 
        <div class="loginmodal-container"> 
         <h1>Login</h1><br> 
         <?php if(isset($error_msg)){ echo $error_msg; } ?> 
         <form action="" method="post" name="login"> 
         <input type="text" name="username" placeholder="Username" required> 
         <input type="password" name="password" placeholder="Password" required> 
         <input type="submit" name="submit" class="login loginmodal-submit" value="Login"> 
         </form> 
        </div> 
       </div> 
       </div> 

    <?php if(isset($script)){ echo $script; } ?>` 

あなたのコードは、それがSQLインジェクションの可能性を持っているように見えるので、SQLインジェクションを防ぐために準備された文やPDOを使用するようにしてください。

Answer 2

jQueryとAJAXを使用して、あなたの人生を容易：

<form id="login"> 
    <input type="text" name="username" placeholder="Username" required> 
    <input type="password" name="password" placeholder="Password" required> 
    <input type="submit" name="submit" class="login loginmodal-submit" value="Login"> 
    <div id="results"></div> 
</form> 

別のファイルにPHPコードを移動

：

1. があなたのform検索結果のメッセージのIDとのdivコンテナを与えますprocessLogin.php

2. load jQuery：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
   

3. そうのようなAJAXを使用するようにJSを作成します。

   $('form#login').submit(function(){ 
       $.ajax({ 
        url: 'processLogin.php', 
        type: 'POST', 
        data: $(this).serialize(), 
        success: function(msg){ 
         // you would need to modify your PHP's echo results 
         if(msg){ 
          $("#results").html(response); 
         }else{ 
          window.location.href = "view.php"; 
         } 
        } 
       }); 
       return false; 
   });