Различия

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

--- software:development:demo:adaptive_registration_form_sample [2026/01/26 22:32] – создано 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)
@@ Строка 64: / Строка 71: @@
 ===== header.php =====
 В директории ''pages'' создадим пустой файл ''header.php'' и откроем его в блокноте. Удилим из нашего файла шаблона ''sample.php'' код от начала %%%<!DOCTYPE html>%% и до окончания блока %%</header>%% и вставим этот код в файл ''header.php''.
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_6.1.png?|}}
+\\
+Так как файл ''header.php'' будет распологаться в директории ''pages'', то в строке подключения файла внешнего стиля ''style.css'' добавим две точки ''..'' изменив тем самым путь к файлу.
+<code html html>
+    <!-- Подключение CSS -->
+    <link rel="stylesheet" href="../css/style.css">
+</code>
 \\
 {{:software:development:demo:adaptiv_form-activ_sample_php_css_6.png? |}}
@@ Строка 97: / Строка 112: @@
 \\
 ===== style.css =====
-В директории css создадим пустой файл style.css и откроем его в блокноте.
+В директории css создадим пустой файл style.css и откроем его в блокноте, задав стили для нашего контейнера. Свойства стиля указаны в комментариях кода:
+<code css style.css>
+/*Стиль контейнера*/
+.container {
+    background: white; /*цвет контейнера*/
+    padding: 20px; /* Отступы по 20px со всех сторон */
+    border-radius: 5px; /*толщина рамки*/
+    border: 2px solid #6665ee; /*цвет и углы рамки*/
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*добавляет тень к элементу*/
+    width: 300px; /*ширина контейнера*/
+}
+</code>
+Обновим страницу браузера и увидим наш контейнет.
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_11.png? |}}
+\\
+перейдем к фону страницы и стилю элемента ''body''. В данном примере мы используем изображение для фона нашей формы. Его размер может быть любым (в нашем случае это 1918х1224px).
+\\
+{{:software:development:demo:fone_forms.jpg?|}}
+\\
+Сохраним это изображение в директории ''css'' нашего проекта и перейдем к стилю элемента ''body'', прописав нижеприведенный код в начале файла ''style.css''
+<code css style.css>
+/*Стиль контейнера*/
+body {
+    font-family: Arial, sans-serif;
+    /*Управление поведением фоновых изображений*/
+    background-image: url("fone_forms.jpg");
+    background-size: cover; /* Растягивает и обрезает */
+    background-position: center; /* Центрирует */
+    background-repeat: no-repeat; /* Мы не повторяемся */
+    display: flex; /* Коробка становится гибкой */
+    align-items: center; /* Вертикальное выравнивание */
+    justify-content: center; /* Горизонтальное выравнивание */
+    max-width: 100%;/* Растянуть по ширине контейнера */
+    height: 100vh; /* Высота всего экрана */
+    object-fit: cover; /* Обрезка с заполнением */
+    object-position: center; /* Центрирование */
+}
+</code>
+и снова обновил страницу браузера
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_12.png?|}}
+\\
+Чтобы все у нас было в едином внешнем виде, добавим правила для стилей ссылок, параграфов и заголовков
+<code css style.css>
+/*Стиль ссылок*/
+a {
+    text-decoration: none;/*Ссылки без подчеркивания*/
+    color: #6665ee;	 /* цвет текста для всей страницы */
+}
+/*Стиль заголовка*/
+H2 {
+    color: #6665ee;	 /* цвет текста заголовка */
+}
+/*Стиль параграфа*/
+p {
+    font-family: Arial, sans-serif;	/* цвет текста заголовка */
+    font-size: small;	/*задает размер шрифта*/
+}
+</code>
+\\
+==== Заголовки, ссылки, параграфы и формы ====
+Вставим в наш ''container'' код формы с элементами заголовка, ввода, параграфа и кнопки
+<code html html>
+<form method="post" action="#">
+	<h2>Форма входа</h2>
+	<input type="email" id="email" required placeholder="Введите свой адрес электронной почты">
+	<input type="password" id="password" required placeholder="Введите свой пароль">
+	<p>Забыли пароль? <a href="index.php?page=reset">Восстановить?</a></p>
+	<button type="submit">Авторизоваться</button>
+	<p>Нет аккаунта? <a href="index.php?page=register">Зарегистрируйтесь.</a></p>
+</form>
+</code>
+  * %%method="post"%% - отправка данных формы на сервер.
+  * %%action="#"%% - значение параметра означает, что данные формы отправляются на ту же страницу
+Приведенный выше код - это просто заглушка, которая показывает нам пример приведения стиля заголовка, параграфа и ссылки (отсутствие подчеркивания). Позже мы поменяем адреса этой заглушки
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_13.png? |}}
+\\
+==== Формы и кнопки ====
+Создадим правила для стилей кнопки и форм ввода. для этого пропишем в файле стилей ''style.css'' следующий код
+<code css style.css>
+/*Стиль поля ввода*/
+input {
+    width: 93%;
+    padding: 10px;
+    margin: 5px 0 0 0; /*Отступ только сверху*/
+    border: 1px solid #6665ee;
+    border-radius: 5px;
+}
+/*Стиль кнопки*/
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #6665ee;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #5757d1;/*Изменение цвета кнопки при наведении курсора*/
+}
+</code>
+Снова обновим страницу браузера
+\\
+{{:software:development:demo:adaptiv_form-activ_sample_php_css_14.png?|}}
+\\
+И последнее, что мы пропишем в файле ''style.css'', это медиа-запрос, используемый для адаптивного веб-дизайна.
+<code css style.css>
+@media screen and (max-width: 480px) {
+  /* Стили для планшетов и телефонов */
+  .container { width: 90%; padding: 5px; }
+}
+</code>
+Так как форма у нас имеет ширину всего 300px, то нет смысла писать медиа запрос для планшетов, остановимся только на размере экрана телефона.
+\\
+{{:software:development:demo:photo_2026-01-27_00-16-519.jpg? |}}
+\\
+===== Динамическое подключение страниц =====
+Итак, пришло время создание динамически подключаемых страниц.
+  * 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 |Скачать архив с примерами}}