Как сделать вход без обновления и создать сеанс с использованием AJAX и PHP?

Question

Я новичок в PHP и пытаюсь войти в систему, используя AJAX и PHP. Но проблема в том, что я не могу просматривать и передавать свои данные для входа в систему в ajax и далее в действие php, которое аутентифицирует пользователя.

У меня есть 3 файла:

1) register.php - в котором есть опция входа и регистрации (своппинг) 2) loginsubmit.php - которая получает данные формы входа, но, к сожалению, не получает данные формы. 3) connection.php - для подключения к базе данных.

1) register.php

<div class="form-wrap">
   <div class="tabs">
      <h3 class="signup-tab"><a class="active" href="#signup-tab-content">Sign Up</a></h3>
      <h3 class="login-tab"><a href="#login-tab-content">Login</a></h3>
   </div>
   <!--.tabs-->
   <div class="tabs-content">
      <div id="signup-tab-content" class="active">
         <form class="signup-form" action="" method="post">
            <input type="email" class="input" name="user_email" autocomplete="off" placeholder="Email">
            <input type="text" class="input" name="user_name" autocomplete="off" placeholder="Username">
            <input type="password" class="input" name="user_pass" autocomplete="off" placeholder="Password">
            <input type="submit" class="button" name="registersubmit" id="registersubmit" value="Sign Up">
         </form>
         <!--.login-form-->
         <div class="message_box" style="margin:10px 0px;"></div>
         <div class="help-text">
            <p>By signing up, you agree to our</p>
            <p><a href="#">Terms of service</a></p>
         </div>
         <!--.help-text-->
      </div>
      <!--.signup-tab-content-->
      <div id="login-tab-content">
         <form class="login-form" action="" method="post">
            <input type="text" class="input" name="user_email" autocomplete="off" placeholder="Email">
            <input type="password" class="input" name="user_pass" autocomplete="off" placeholder="Password">
            <input type="checkbox" class="checkbox" id="remember_me">
            <label for="remember_me">Remember me</label>
            <input type="submit" class="button" id="loginsubmit" name="loginsubmit" value="Login">
         </form>
         <!--.login-form-->
         <div class="message_box" style="margin:10px 0px;"></div>
         <div class="help-text">
            <p><a href="#">Forget your password?</a></p>
         </div>
         <!--.help-text-->
      </div>
      <!--.login-tab-content-->
   </div>
   <!--.tabs-content-->
</div>
<!--.form-wrap-->
<script>
   jQuery(document).ready(function($) {
    tab = $('.tabs h3 a');

    tab.on('click', function(event) {
        event.preventDefault();
        tab.removeClass('active');
        $(this).addClass('active');

        tab_content = $(this).attr('href');
        $('div[id$="tab-content"]').removeClass('active');
        $(tab_content).addClass('active');
    });
   });


</script>
<script>
   $(document).ready(function() {

      var delay = 2000;

      $('#registersubmit').click(function(e){

          e.preventDefault();

          var user_name = $('[name="user_name"]').val();

          console.log(user_name);

          if(user_name == ''){
              $('.message_box').html(
              '<span style="color:red;">Enter Your Name!</span>'
              );
              $('[name="user_name"]').focus();
              return false;
          }

          var user_email = $('[name="user_email"]').val();

          console.log(user_email);

          if(user_email == ''){
              $('.message_box').html(
              '<span style="color:red;">Enter Email Address!</span>'
              );
              $('[name="user_email"]').focus();
              return false;
          }

          if( $('[name="user_email"]').val()!='' ){
              if( !isValidEmailAddress( $('[name="user_email"]').val() ) ){
                  $('.message_box').html(
                  '<span style="color:red;">Provided email address is incorrect!</span>'
                  );
                  $('[name="user_email"]').focus();
                  return false;
              }
          }

          var user_pass = $('[name="user_pass"]').val();

          if(user_pass == ''){
              $('.message_box').html(
              '<span style="color:red;">Password cannot be empty!</span>'
              );
              $('[name="user_pass"]').focus();
                 return false;
          } 

          console.log(user_pass);

          $.ajax
                  ({
                  type: "POST",
                  url: "registersubmit.php",
                  data: "name="+user_name+"&email="+user_email+"&password="+user_pass,
                  beforeSend: function() {
                  $('.message_box').html(
                  '<img src="tenor.gif" width="25" height="25"/>'
                  );
                  }, 
                  success: function(data)
                  {
                  setTimeout(function() {
                  $('.message_box').html(data);
                  }, delay);
                  }
                  });



   });

   $('#loginsubmit').click(function(e){

               e.preventDefault();


              var user_email = $('[name="user_email"]').val();

              console.log(user_email);

              if(user_email == ''){
                  $('.message_box').html(
                  '<span style="color:red;">Enter Email Address!</span>'
                  );
                  $('[name="user_email"]').focus();
                  return false;
              }

              if( $('[name="user_email"]').val()!='' ){
                  if( !isValidEmailAddress( $('[name="user_email"]').val() ) ){
                      $('.message_box').html(
                      '<span style="color:red;">Provided email address is incorrect!</span>'
                      );
                      $('[name="user_email"]').focus();
                      return false;
                  }
              }

              var user_pass = $('[name="user_pass"]').val();

              if(user_pass == ''){
                  $('.message_box').html(
                  '<span style="color:red;">Password cannot be empty!</span>'
                  );
                  $('[name="user_pass"]').focus();
                     return false;
              } 

              console.log(user_pass);

               $.ajax({
                          type: "POST",
                          url: "loginsubmit.php",
                          data: "email="+user_email+"&password="+user_pass,
                          beforeSend: function() {
                          $('.message_box').html(
                          '<img src="tenor.gif" width="25" height="25"/>'
                          );
                          }, 
                          success: function(data)
                          {
                          setTimeout(function() {
                          $('.message_box').html(data);
                          }, delay);
                          }
                          });


           });

   });


</script>
<script>
   //Email Validation Function 
   function isValidEmailAddress(emailAddress) {
       var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
       return pattern.test(emailAddress);
   };
</script>

2) loginsubmit.php

<?php
    if (($_POST['name'] != "") && ($_POST['email'] != "")) {
        $name     = $_POST['name'];
        $email    = $_POST['email'];
        $password = $_POST['password'];

        include('connection.php');

        // echo $name.$email.$password;

        //Password Match

        $passwordhash = md5($password);
        $query        = "SELECT * FROM `tbl_register` WHERE username = '$name' AND  password = '$passwordhash'";

        //How to create session and login check here code?

        //PHP code to redirect to dashboard if login successfull else redirect login page 
    }
?>

У меня есть tbl_register, где у зарегистрированного пользователя есть такая информация, как id, username, email, password. Я не могу пройти через страницу перенаправления и проверить логин, пожалуйста, сообщите мне о дальнейшем функционировании, с которого я начинаю.

Спасибо