Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:adaptive_registration_form_sample [2026/01/27 00:34] – [Формы и кнопки] VladPolskiy
+++ software:development:demo:adaptive_registration_form_sample [2026/02/01 19:39] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 2: / Строка 2: @@
 Данная форма написана на PHP и CSS. Адаптивность ей придает медиа-запрос ''@media screen and (max-width: 480px)'' Это правило адаптивного дизайна, которое применяет определенные стили, когда ширина окна браузера составляет 480 пикселей или меньше , а устройство — экран (например, настольный компьютер, смартфон или планшет).
 \\
-{{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png? |}}
+  *  <fc #22b14c>Windows 10 Pro</fc>
+  *  [[https://www.apachefriends.org/download.html|XAMPP]] <fc #22b14c>- полностью бесплатный и простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]].
+  *  <fc #22b14c>Google Chrome — браузер, разрабатываемый на основе свободного браузера Chromium и движка Blink.</fc>
+  *  [[https://notepad-plus-plus.org/|Notepad++]] <fc #22b14c>- бесплатный текстовой редактор исходного кода. Работая в среде MS Windows, его использование регулируется</fc> [[https://ru.wikipedia.org/wiki/GNU_General_Public_License|GNU General Public License]].
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_1.png?|}}
 \\
+  * Главная страница (auth)
   * Форма авторизации (Login Form)
   * Форма регистрации (Registration Form)
@@ Строка 229: / Строка 236: @@
 \\
 ===== Динамическое подключение страниц =====
+Итак, пришло время создание динамически подключаемых страниц.
+  * auth.php - Главная страница (auth)
+  * login.php - Форма авторизации (Login Form)
+  * register.php - Форма регистрации (Registration Form)
+  * confirm.php - Форма подтверждения электронной почты (Email Confirmation Form)
+  * reset.php - Форма сброса пароля (Password Reset Form)
+  * 2fa.php - Форма 2х уровневой авторизации (2-Level Authorization Form)
+  * logout.php - Выход из системы (logout)
+==== login.php ====
+Переименуем, находящийся в корне директории наш шаблон ''sample.php'' в ''auth.php'', а так же создадим файл ''login.php'' в директории ''pages''.\\
+Из файла ''auth.php'' удалим весь код из %%<div class="container">%% и запишем это в файл ''login.php'', при этом изменив адреса ссылок на ''auth.php''
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_16.png?|}}
+\\
+Мы вынесли форму авторизации во внешний файл, подключим его. Для этого в файле ''auth.php'' пропишем код
+<code php auth.php>
+// Определяем список разрешенных страниц
+$allowed_pages = array('login', 'register', 'confirm', 'reset', '2fa');
+$page = $_GET['page'] ?? 'login'; // По умолчанию 'login'
+</code>
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_17.png?|}}
+\\
+В наш блок контейнера вставляем следующий код
+<code php auth.php>
+<?php
+// Получаем значение из URL: auth.php?page=login
+// Проверьте, находится ли запрошенная страница в списке разрешенных.
+if (in_array($page, $allowed_pages)) {
+    // Безопасно подключить внешний файл
+    include('pages/' . $page . '.php');
+} else {
+    // Обработать некорректный запрос страницы (страница не найдена).
+    echo 'Page not found.';
+}
+?>
+</code>
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_18.png?|}}
+\\
+==== reset.php ====
+Cоздадим файл ''reset.php'' в директории ''pages'' и запишем в него следующий код
+<code php reset.php>
+<form method="post" action="#">
+    <h2>Форма сброса пароля</h2>
+    <input type="email" id="email" required placeholder="Введите свой адрес электронной почты">
+    <p>Отменить? <a href="auth.php?page=login">Войдите здесь.</a></p>
+    <button type="submit">Сбросить пароль</button>
+</form>
+</code>
+Обновим страница браузера и нажмем на ссылку "Восстановить?"
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_19.png?|}}
+\\
+Ссылка "Отменить? Войдите здесь." вернет на форму "login"
+==== register.php ====
+Cоздадим файл формы регистрации ''register.php'' в директории ''pages'' и запишем в него следующий код
+<code php register.php>
+<form method="post" action="#">
+    <h2>Форма регистрации</h2>
+    <input type="text" id="user_login" name="user_login" required placeholder="Введите ваше полное имя">
+    <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты">
+    <input type="password" id="user_pass" name="user_pass" required placeholder="Придумайте сложный пароль">
+    <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="Повторите введенный пароль">
+    <p title="Пароль должен содержать не менее 8 символов и содержать не менее: одной строчной буквы, одной заглавной буквы, одной цифры и одного символа.">*Примечание</p>
+    <button type="submit">Зарегистрироваться</button>
+    <p>Есть аккаунт? <a href="auth.php?page=login" >Войдите здесь.</a></p>
+</form>
+</code>
+Обновим страница браузера и нажмем на ссылку "Зарегистрируйтесь."
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_20.png?|}}
+\\
+Ссылка "Есть аккаунт? Войдите здесь." вернет на форму "login"
+==== confirm.php ====
+Cоздадим файл формы верификации ''confirm.php'' в директории ''pages'' и запишем в него следующий код
+<code php confirm.php>
+<form method="post" action="#">
+    <h2>Форма верификации</h2>
+    <input type="email" id="user_email" name="user_email" required placeholder="Введите свой адрес электронной почты">
+    <input type="password" id="user_activation_email_key" name="user_activation_email_key" required placeholder="Введите код, отправленный на ваш email">
+    <p>*Необходимо подтвердить ваш email.</p>
+    <button type="submit">Отправить полученный код</button>
+</form>
+</code>
+На эту форму не кнопки (ссылки) перехода, она откроется после формы регистрации. Так же эта форма будет открываться, если пользователь выбирет 2х факторную защиту аккаунта по электронной почте.
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_21.png?|}}
+\\
+==== 2fa.php ====
+Cоздадим файл формы 2х факторной аутентификации через мобильное приложение ''2fa.php'' в директории ''pages'' и запишем в него следующий код
+<code php index.php>
+<form method="post" action="#">
+    <h2>Форма аутентификация 2FA</h2>
+    <input type="number" id="user_activation_2fa" name="user_activation_2fa" pattern="\d{6}" required placeholder="Введите OTP код">
+    <p>*OTP код из мобильного приложения </p>
+    <button type="submit">Подтвердить одноразовый код</button>
+</form>
+</code>
+На эту форму нет кнопки (ссылки) перехода, она откроется после формы аутентификации, если пользователь выбирет 2х факторную защиту аккаунта в мобильном приложении.
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_22.png?|}}
+\\
+==== OTP.php ====
+Cоздадим файл формы получения кода 2х факторной аутентификации через мобильное приложение ''OTP.php'' в директории ''pages'' и запишем в него следующий код-заглушку
+<code php OTP.php>
+<form method="post" action="#">
+        <h2>Форма 2FA</h2>
+        <p>*Отсканируйте в приложении QR code: </p>
+	<!-- echo $tfa->getQRCodeImageAsDataUri('Demo', $secret);-->
+	<img src="css/qr_code.png" />
+	<p>*Введите код вручную: </p>
+	<h5>I4BQ P7MB TBG6 LW5I ID5O JY2E SQSV EWX4</h5>
+	<p>*Подтвердите код на мобильном устройстве </p>
+</form>
+</code>
+Эта форма единожды будет доступна при включении пользователем двухфакторной авторизации после регистрации.
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_24.png?|}}
+\\
+==== logout.php ====
+Последний файл ''logout.php'' не доступен для просмотра и будет служить для кода выхода из системы.
+===== Дополнения и Файлы =====
+  * См.так же
+  * [[software:development:demo:adaptive_registration_form_block|Блочная адаптивная форма регистрации и авторизации]]
+  * [[software:development:demo:adaptive_registration_form_complex_block|Блочная полная адаптивная форма регистрации и авторизации]]
+  * {{ :software:development:demo:htdocs.zip |Скачать архив с примерами}}