За последние 24 часа нас посетили 22744 программиста и 1160 роботов. Сейчас ищут 706 программистов ...

форма авторизации и вывод ошибок.

Тема в разделе "PHP для новичков", создана пользователем exxon, 27 мар 2024.

  1. exxon

    exxon Гость

    С нами с:
    27 мар 2024
    Сообщения:
    1
    Симпатии:
    0
    Всем доброго времени суток. Для собственных нужд решил создать локальный сайт. Оговорюсь сразу знаний в этой теме 0, обучаюсь по ходу написания страничек.
    Столкнулся с проблемой при создании формы авторизации. Проблема вот в чем:
    у меня есть страница main.html и файл login.php.
    При нажатии кнопки "войти" появляется всплывающее окно. При вводе неверных логина и пароля меня перекидывает на login.php где уже появляется ошибка "неверные данные".При нажатии ок возвращает на главную. Но я пытаюсь сделать вывод ошибки во всплывающем окне.
    На обозрение представлю код html:
    HTML:
    1. <div id="overlay"></div>
    2. <div id="loginForm" style="display: none;">
    3.     <div class="form-forma">
    4.         <div class="form-title">Авторизация</div>
    5.         <form id="login-form" action="../addresses/login.php" method="post">
    6.             <div class="form-group">
    7.                 <label for="login">Имя пользователя:</label>
    8.                 <input type="text" id="login" name="login" required>
    9.             </div>
    10.             <div class="form-group">
    11.                 <label for="password">Пароль:</label>
    12.                 <input type="password" id="password" name="password" required>
    13.             </div>
    14.             <div class="form-group">
    15.                 <button type="submit">Войти</button>
    16.             </div>
    17.         </form>
    18.         <div class="form-footer">
    19.                       <div id="error-message" class="error"><?php echo $error_message ?></div>
    20.                        <a href="#" class="forgot-password">Забыли пароль?</a>
    21.         </div>
    22.     </div>
    23. </div>
    и соответственно php:
    PHP:
    1. if ($result->num_rows > 0) {
    2.   header("Location: http://my.web/main");
    3.     exit();
    4.     $error_message = ""; //
    5. } else {
    6.         //$error_message = "Введены неверные данные";
    7.     echo "<script> alert('Введенные данные неверны');  window.location.href = '/';</script>";
    8.     exit();
    9. }
    в коде php есть такая особенность: в данном виде меня перекидывает на login.php где сверху вылезает ошибка, я нажимаю ОК и попадаю на главную.
    Но если я сделаю так:
    PHP:
    1. if ($result->num_rows > 0) {
    2.   header("Location: http://my.web/main");
    3.     exit();
    4.     $error_message = ""; //
    5. } else {
    6.         $error_message = "Введены неверные данные";
    7.     //echo "<script> alert('Введенные данные неверны');  window.location.href = '/';</script>";
    8.     exit();
    9. }
    то тогда попадаю на пустую страницу Login.
    Повторюсь,я пока настраиваю сценарий для неверно введеных данных.
    Прошу не накидываться и не критиковать, а помочь с проблемой, заранее всем СПАСИБО
     
  2. yanuzay

    yanuzay Активный пользователь

    С нами с:
    28 мар 2018
    Сообщения:
    498
    Симпатии:
    57
    чтобы ошибки авторизации выводились без перезагрузки страницы, нужно еще на javascript код написать.
    Написать так чтобы запускался при нажатии на кнопку отправки формы.
     
  3. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    250
    Симпатии:
    46
    Адрес:
    Бавария, Германия
    Про всплывающее окна не понял, а что бы работало без перезагрузки, как Вам правильно подсказал коллега,
    без JS (XMLHttpRequest) не обойтись.
    login.php
    PHP:
    1. <?
    2. if(isset($_POST["login"]))
    3. {
    4.     $result = null; // временно
    5.     // PHP validation
    6.     // MySql query > $result
    7.     if($result)
    8.     {
    9.         if ($result->num_rows > 0)
    10.         {
    11.             $_SESSION["login"] = 1;
    12.             header("Location: http://my.web/main");
    13.         }
    14.     }
    15.     else
    16.     {
    17.         $_SESSION["login"] = 0;
    18.         $out["error"] = true;
    19.         $out["error_message"] = "Введены неверные данные";
    20.         //send JSON Response
    21.         header('Content-Type: application/json; charset=utf-8');
    22.         echo json_encode($out);
    23.         exit;
    24.     }
    25. }
    26. ?>
    27. <html>
    28. <header>
    29. <script type="text/javascript" src="login.js"></script>
    30. </header>
    31. <body>
    32. <div id="overlay"></div>
    33. <div id="loginForm">
    34.     <div class="form-forma">
    35.         <div class="form-title">Авторизация</div>
    36.         <form id="login-form" action="" method="post">
    37.             <div class="form-group">
    38.                 <label for="login">Имя пользователя:</label>
    39.                 <input type="text" id="login" name="login" required>
    40.             </div>
    41.             <div class="form-group">
    42.                 <label for="password">Пароль:</label>
    43.                 <input type="password" id="password" name="password" required>
    44.             </div>
    45.             <div class="form-group">
    46.                 <button type="submit">Войти</button>
    47.             </div>
    48.         </form>
    49.         <div class="form-footer">
    50.         <div id="error-message" class="error"></div>
    51.         <a href="#" class="forgot-password">Забыли пароль?</a>
    52.         </div>
    53.     </div>
    54. </div>
    55. </body>
    56. </html>
    login.php
    Код (Javascript):
    1. window.addEventListener("load", (event) => {
    2.     var lForm = document.getElementById("login-form");
    3.     var msgEl = document.getElementById("error-message");
    4.     var submitEl = document.querySelectorAll("button[type='submit']")[0];
    5.     var inputEl = document.querySelectorAll("input");
    6.     //----------------------------------------------
    7.     LoginValidation = function(evt){
    8.         for(i = 0; i < inputEl.length; i++)
    9.             if(inputEl[i].value == "") return;
    10.         var xhr = new XMLHttpRequest();
    11.         var url = "login.php";
    12.         xhr.onreadystatechange = function()
    13.         {
    14.             if(this.readyState == 4 && this.status == 200)
    15.             {
    16.                 try
    17.                 {
    18.                     var rsp = JSON.parse(this.responseText);
    19.                     if(rsp["error"])
    20.                     {
    21.                         msgEl.innerHTML = rsp["error_message"];
    22.                         for(i = 0; i < inputEl.length; i++)
    23.                             inputEl[i].value = "";
    24.                     }
    25.                 }
    26.                 catch(error)
    27.                 {
    28.                     return false;
    29.                 }
    30.             }
    31.         };
    32.         xhr.open("POST", url, true);
    33.         var data = new FormData(lForm);
    34.         xhr.send(data);
    35.         evt.preventDefault();
    36.     }
    37.     submitEl.addEventListener("click", LoginValidation);
    38. });
    Удачи!
     
  4. mkramer

    mkramer Суперстар
    Команда форума Модератор

    С нами с:
    20 июн 2012
    Сообщения:
    8.554
    Симпатии:
    1.754
    Зачем такое древнее и неудобное, если есть fetch?
     
  5. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    250
    Симпатии:
    46
    Адрес:
    Бавария, Германия
    XMLHttpRequest не древний и не устаревший API.
    Living Standard — Last Updated 19 February 2024
    Вы правы есть fetch, а ещё есть jQuery.
    Я показал код, одного рабочего решения.
    Если у Вас такая возможность, покажите Ваш код.
    Думая будет полезно показать различные решения этой задачи.
     
  6. don.bidon

    don.bidon Активный пользователь

    С нами с:
    28 мар 2021
    Сообщения:
    861
    Симпатии:
    132
    Кстати, если мне не изменяет память, fetch кой-чего не умеет, что умеет XMLHttpRequest. Есть хостинг бесплатный с какой-то кривой защитой, fetch её не пробивал в отличии от.