Как указать путь к модальному окному в php?

Рейтинг: 0Ответов: 1Опубликовано: 11.04.2023

У меня есть два модальных окна, первое окно это регистрация, пройдя которую и нажав на кнопку мне нужно как то открыть модальное окно с авторизацией, но получается у меня только переходить на главную страницу, я только начал изучать php, так что не понимаю как это работает.

<!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Регистрация</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="registration.php" method="post" enctype="multipart/form-data">
                            <div class="row mb-3">
                                <label for="inputLogin" class="col-sm-2 col-form-label">ФИО</label>
                                <div class="col-sm-10">
                                    <input type="text" name="full_name" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputLogin" class="col-sm-2 col-form-label">Логин</label>
                                <div class="col-sm-10">
                                    <input type="text" name="login" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputEmail" class="col-sm-2 col-form-label">Почта</label>
                                <div class="col-sm-10">
                                    <input type="email" name="email" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputEmail" class="col-sm-2 col-form-label">Изображение профиля</label>
                                <div class="col-sm-10">
                                    <input type="file" name="avatar" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputPass" class="col-sm-2 col-form-label">Пароль</label>
                                <div class="col-sm-10">
                                    <input type="password" name="password" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">  
                                <label for="inputPass" class="col-sm-2 col-form-label">Подтвердите пароль</label>
                                <div class="col-sm-10">
                                    <input type="password" name="password_confirm" class="form-control">
                                </div>
                            </div>
                            <p>У вас уже есть аккаунт? - <a href="#">войдите!</a></p>
                            <?php 
                                if ($_SESSION['message']) {
                                    echo '<p class="text-danger">' . $_SESSION['message'] . '</p>';
                                }
                                unset($_SESSION['message']); 
                            ?>
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                            <button type="submit" class="btn btn-success">Зарегестрироваться</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!-- Modal -->

    <!-- Modal -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Авторизация</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="authorization.php" method="post">
                            <div class="row mb-3">
                                <label for="inputLogin" class="col-sm-2 col-form-label">Логин</label>
                                <div class="col-sm-10">
                                    <input type="text" name="login" class="form-control">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="inputPass" class="col-sm-2 col-form-label">Пароль</label>
                                <div class="col-sm-10">
                                    <input type="password" name="password" class="form-control">
                                </div>
                            </div>
                            <p>У вас еще нет аккаунта? - <a href="#">создайте!</a></p>
                            <?php 
                                if ($_SESSION['message']) {
                                    echo '<p class="text-danger">' . $_SESSION['message'] . '</p>';
                                }
                                unset($_SESSION['message']); 
                            ?>
                            <button class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                            <button type="submit" class="btn btn-success">Войти</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <!-- Modal -->

код с регистрацией:

<?php
    session_start();
    require_once 'db_connect.php';

    $full_name = $_POST['full_name'];
    $login = $_POST['login'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    $password_confirm = $_POST['password_confirm'];

    if ($password === $password_confirm) {

        $path = 'uploads/' . time() . $_FILES['avatar']['name'];
        if (!move_uploaded_file($_FILES['avatar']['tmp_name'], './' . $path)) {
            $_SESSION['message'] = 'Ошибка при загрузке сообщения';
            header('Location: ./index.php');
        }

        $password = md5($password);

        mysqli_query($connect, "INSERT INTO `users` (`id`, `full_name`, `login`, `email`, `password`, `avatar`) VALUES (NULL, '$full_name', '$login', '$email', '$password', '$path')");

        $_SESSION['message'] = 'Регистрация прошла успешно!';
        header('Location: ./index.php');

    } else {
        $_SESSION['message'] = 'Пароли не совпадают';
        header('Location: ./index.php');
    }

?>

в этом кусочке кода я перенаправляю на главную страницу, но хотелось бы, чтобы открывалось модальное окно с авторизацией:

$_SESSION['message'] = 'Регистрация прошла успешно!';
        header('Location: ./index.php');

Ответы

▲ 0

Здесь необходимо знание Bootstrap и javascript. По этой ссылке есть пример, как открывать модальное окно в бутстрапе https://getbootstrap.com/docs/5.3/components/modal/#live-demo Если коротко, то кнопка должна выглядеть так:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">
    Launch demo modal
</button>

При этом значение атрибута data-bs-target должно совпадать с атрибутом id модального окна

Программно открыть окно можно методом show

const modal = new bootstrap.Modal('#exampleModal2');
modal.show();

Описание методов есть там же по ссылке https://getbootstrap.com/docs/5.3/components/modal/#passing-options

Все примеры для Bootstrap версии 5.3, уточните свою версию бутстрап

Есть 2 способа, как можно это реализовать:

  1. Простой, на главной странице, куда идет перенаправление после регистрации добавить javascript (как показано выше), который сразу после загрузки страницы, будет открывать окно авторизации.
  2. Более сложный, реализовать например REST API для регистрации и отправлять форму регистрации аякс-запросом на это API, в этом случае удастся обойтись без перезагрузки страницы и после получения ответа на запрос показывать форму авторизации или сообщение об ошибке, если форма была заполнена неверно.