Различия

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

--- software:development:demo:cms:ucms:creating_sample_install_php [2026/05/04 13:52] – [tpl_install_footer.php] VladPolskiy
+++ software:development:demo:cms:ucms:creating_sample_install_php [2026/05/05 11:15] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 10: / Строка 10: @@
   * Все стили оформления будут перенесены в отдельный внешний файл **install.css.**
 Для удобства редактирования каждая значимая строка кода снабжена подробными комментариями.
+<note shadow>
+<html>
+<iframe height="350" width="550" scrolling="yes" title="Untitled" src="./demo_ucms/install_php_module_template/install.php" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+</note>
 ===== Директории =====
+Директории это структурные элементы файловой системы, предназначенные для логической группировки связанных файлов проекта (шаблонов, стилей и скриптов). Правильное распределение ресурсов по папкам обеспечивает чистоту кода и упрощает поддержку модуля.\\
+Ниже приведена схема файлов и директорий шаблона модуля install.php:
 <diagram>
 |AAA||||||AAA{text-align:left;border-color:white}={{fa>folder?}} ./ucms/
@@ Строка 827: / Строка 835: @@
 </html>
 </code>
+==== Файл install.php ====
+Откроем файл **%%install.php%%** и запишем конце  строчку кода (подключение файла "подвала"):
+<code php install.php>
+<?php require_once 'tpl/tpl_install_footer.php'; // Закрываем HTML ?>
+</code>
+Сохраняем изменения, в результате которых **%%install.php%%** будет иметь следующий вид:
+<code php install.php>
+<?php require_once 'tpl/tpl_install_header.php'; // Открывает HTML ?>
+<h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
+<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+officia deserunt mollit anim id est laborum."</p>
+<?php require_once 'tpl/tpl_install_footer.php'; // Закрываем HTML ?>
+</code>
+Откроем файл **%%install.php%%** в бразере, перейдя по ссылке http://localhost/ucms/library/install/install.php
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_13.png|}}
+</note>
+Браузер полностью отображает страницу, включая «подвал» с данными об авторстве и правах.
 ====== Файл install.css ======
 ===== Введение =====
@@ Строка 861: / Строка 891: @@
 }
 </code>
+==== install.css ====
+В директории **%%./ucms/library/install/css%%** откроем в редакторе файл **%%install.css%%**. Из файла "шапки" **%%tpl_install_header.php%%** вырежем **%%(Ctrl+X)%%** весь код стилей от начала комментария (после тега **%%<style>%%**):
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_14_1.png|}}
+</note>
+до конца кода стилей (до закрывающего тега **%%</style>%%**):
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_14_2.png|}}
+</note>
+и вставим **%%(Ctrl+V)%%** вырезанный код стилей в файл **%%install.css%%**, в результате чего файл получит следующий вид:
+<code css install.css>
+    /* Настройки всей видимой части страницы */
+    body {
+      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Приоритет шрифта с засечками, далее системные шрифты */
+      background: linear-gradient(to bottom, #ffffff 0%, #E0E0E0 100%); /* переход от белого до светлый серый */
+      display: flex; /* Включение гибкой верстки для выравнивания содержимого */
+      justify-content: center; /* Центрирование контейнера по горизонтали */
+      /*align-items: center; /* Центрирование контейнера по вертикали */
+      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
+      margin: 0; /* Удаление стандартных внешних отступов браузера */
+      color: #333; /* Основной цвет текста (темно-серый) */
+    }
+    /* Внешняя обертка для карточки установки */
+    .install-container {
+      width: 100%; /* Растягивание на всю доступную ширину */
+      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
+      padding: 20px; /* Внутренние отступы от краев экрана */
+	  margin: 20px auto 0; /* Отступ 20px сверху, авто-отступы по бокам */
+    }
+    /* Основная карточка с контентом */
+    .install-card {
+      border: 2px #808080 solid; /* Серая сплошная рамка толщиной 2px */
+      background: #e3ffec; /* Светло-зеленый фон как на скриншоте */
+      border-radius: 5px; /* Скругление углов рамки на 5px */
+      padding: 15px; /* Внутренний отступ от рамки до текста */
+      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* Глубокая тень: смещение вниз, размытие и полупрозрачный черный цвет */
+    }
+    /* Стили верхнего заголовка внутри карточки */
+    .install-title {
+      font-size: 18px; /* Размер шрифта заголовка */
+      font-style: italic; /* Написание курсивом */
+      font-weight: 700; /* Жирное начертание */
+      color: #808080; /* Серый цвет текста */
+      margin-left: 25px; /* Сдвиг заголовка вправо */
+      padding-bottom: 5px; /* Небольшой отступ снизу */
+    }
+    /* Оформление таблицы с параметрами системы */
+    table {
+      font-family: inherit; /* Наследование шрифтов от body */
+      font-weight: 700; /* Жирный текст для всех ячеек */
+      font-size: 14px; /* Размер шрифта в таблице */
+      width: 100%; /* Таблица занимает всю ширину карточки */
+      border-collapse: collapse; /* Убирает двойные рамки между ячейками */
+      margin: 20px 0; /* Отступы сверху и снизу от таблицы */
+    }
+    /* Стили обычных ячеек */
+    td {
+      padding: 5px 0; /* Вертикальные отступы внутри строк */
+      border-bottom: 1px dashed #bddbc5; /* Пунктирная разделительная линия снизу ячейки */
+    }
+    /* Специальные стили для правой колонки значений */
+    td:last-child {
+      text-align: left; /* Текст внутри ячейки прижат к левому краю */
+      padding-left: 25%; /* Создание большого пустого пространства слева для имитации смещения вправо */
+    }
+    /* Цвет текста для статуса "ОК" */
+    .status-ok {
+      color: #2e7d32; /* Темно-зеленый цвет */
+      font-weight: bold; /* Дополнительное выделение жирным */
+    }
+    /* Текст подсказки */
+    .hint {
+      font-size: 0.9em; /* Размер чуть меньше основного (90%) */
+      color: #666; /* Средне-серый цвет */
+      line-height: 1.5; /* Межстрочный интервал для читаемости */
+    }
+    /* Блок сообщения об ошибке */
+    .error-msg {
+      background: #ffdce0; /* Светло-розовый фон ошибки */
+      padding: 2px 20px; /* Минимальные отступы сверху/снизу и широкие сбоку */
+      border-radius: 3px; /* Скругление углов фона */
+      border-left: 3px solid #d32f2f; /* Жирная красная черта слева для акцента */
+      margin-top: 5px; /* Отступ сверху от предыдущего текста */
+    }
+    /* Убираем отступы у параграфа внутри блока ошибки для компактности */
+    .error-msg p {
+      margin: 0;
+    }
+    /* Стили подвала (авторские права) */
+    .footer {
+      text-align: center; /* Центрирование текста */
+      font-size: 13px; /* Уменьшенный размер шрифта */
+      font-style: italic; /* Курсив */
+      font-weight: 700; /* Жирный текст */
+      color: #888; /* Светло-серый цвет */
+      margin-top: 20px; /* Отступ от основной карточки */
+    }
+    /* Цвет ссылок в подвале */
+    .footer a { color: #666; }
+	/* Стили для форм и таблиц */
+	.form-table {
+		border-collapse: collapse; /* Убирает двойные рамки между ячейками */
+		margin-top: 1em;           /* Отступ всей таблицы сверху */
+		width: 100%;               /* Таблица растягивается на всю ширину контейнера */
+	}
+	/* Общие стили для заголовков (th) и обычных ячеек (td) */
+	.form-table th,
+	.form-table td {
+		padding: 10px 20px 10px 0; /* Внутренние отступы: верх 10px, право 20px, низ 10px, лево 0 */
+		font-size: 14px;           /* Размер шрифта текста в ячейках */
+		vertical-align: top;       /* Выравнивание содержимого по верхнему краю ячейки */
+		text-align: left;          /* Выравнивание текста по левому краю */
+	}
+	.form-table th {
+		width: 150px;              /* Фиксированная ширина колонки с заголовками */
+		font-weight: 600;          /* Делает текст заголовков полужирным */
+	}
+	.form-table p {
+		margin: 4px 0 0;           /* Отступ только сверху (4px), чтобы текст под инпутом не прилипал */
+		font-size: 12px;           /* Уменьшенный шрифт для пояснительного текста */
+		color: #666;               /* Серый цвет текста для второстепенной информации */
+	}
+	.form-table input {
+		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
+		font-size: 12px;           /* Размер шрифта внутри поля ввода */
+		padding: 5px;              /* Внутренний отступ текста от краев инпута */
+		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
+	}
+	.form-table select {
+		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
+		font-size: 12px;           /* Размер шрифта внутри поля ввода */
+		padding: 5px;              /* Внутренний отступ текста от краев инпута */
+		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
+	}
+</code>
+==== Файл tpl_install_header.php ====
+В файле **%%tpl_install_header.php%%** в месте вырезанного кода стилей запишем следующую строчку кода (подключение файла стилей):
+<code php tpl_install_header.php>
+  <?php include __DIR__ . '/../css/install.css';?>
+</code>
+В результате вставки кода, место выреза, имеет следующий вид:
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_16.png|}}
+</note>
+которая подключит наш файл стилей **%%install.css%%**, в результате чего **%%tpl_install_header.php%%** будет иметь следующий вид:
+<code php tpl_install_header.php>
+<!-- Объявление типа документа: сообщает браузеру,
+что используется современный стандарт HTML5 -->
+<!DOCTYPE html>
+<!-- Начало документа, атрибут lang="ru" указывает
+поисковикам и браузерам, что основной язык страницы — русский -->
+<html lang="ru">
+<head>
+  <!-- Установка кодировки UTF-8 для корректного отображения
+  кириллицы и спецсимволов -->
+  <meta charset="UTF-8">
+  <!-- Адаптация страницы под ширину экрана мобильных устройств -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Заголовок вкладки браузера -->
+  <title>Установка UCMS Demo</title>
+  <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
+  эти стили нужны только в этом файле. После установки приложения эта папка
+  будет удалена.	-->
+  <style>
+	<?php include __DIR__ . '/../css/install.css';?>
+  </style>
+  <!--  Конец стилей установщика	-->
+</head>
+<body>
+  <!-- Ограничивающий контейнер по центру экрана -->
+  <div class="install-container">
+    <!-- Основная «зеленая» карточка -->
+    <div class="install-card">
+	  <!-- Заголовок блока -->
+      <div class="install-title">Установка UCMS Demo</div>
+	   	<!--  Конец блока заголовка -->
+	    <!--  ******************************************* -->
+	    <!--  ** Начало блока вставки файлов программы ** -->
+	    <!--  ******************************************* -->
+</code>
+Откроем файл **%%install.php%%** в бразере, перейдя по ссылке http://localhost/ucms/library/install/install.php
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_17.png|}}
+</note>
+Браузер отображает страницу **%%install.php%%** в законченном виде, включая "шапку" (**%%tpl_install_header.php%%**) с подкьченным файлом стилей (**%%install.css%%**) и "подвал"(**%%tpl_install_footer.php%%**).
+Этот код предназначен для встраивания (инлайнинга) содержимого CSS-файла напрямую в HTML-структуру страницы с помощью PHP.\\
+Комментарий к коду:
+  - **%%<style> ... </style>%%**: Это стандартные HTML-теги, которые говорят браузеру, что внутри находится CSS-код, применимый к текущей странице.
+  - **%%<?php ... ?>%%**: Вставка PHP-кода, который исполняется на стороне сервера перед тем, как страница будет отправлена пользователю.
+  - **%%include%%**: Команда PHP, которая берет всё содержимое указанного файла и вставляет его в это место «как есть».
+  - **%%__DIR__:%%** Константа, которая возвращает абсолютный путь к папке, где лежит текущий PHP-файл.
+  - **%%'/../css/install.css'%%**: Путь к файлу стилей. Символы .. означают выход на один уровень вверх из текущей папки, а затем переход в папку css.
+Плюсы:
+  * Ускорение загрузки (Critical Path): Браузеру не нужно делать дополнительный HTTP-запрос за отдельным CSS-файлом. Стили применяются мгновенно, что исключает «скачок» нестилизованного контента (FOUC).
+  * Автономность: Это часто используется в скриптах установки (судя по названию install.css), чтобы страница корректно выглядела, даже если пути к внешним ресурсам еще не настроены.
+Минусы:
+  * Отсутствие кэширования: Браузер не сможет закэшировать этот CSS отдельно. Он будет скачиваться заново при каждой загрузке страницы вместе с HTML.
+  * Объем страницы: Если CSS-файл очень большой, это увеличит размер HTML-документа, что может замедлить первую отрисовку.
+====== Заключение ======
+===== Введение =====
+В этой главе руководства мы получили входной шаблон **%%install.php%%** с прикрепленными файлами. Проведем небольшую корректировку полученных файлов, а именно, удалим лишние коментарии, чтобы облегчить размер страницы и увеличить скорость загрузки, а так же проверки наличия подключаемых файлов.
+<note green>
+:&12: **Примечание**\\
+Удаляя лишние из готового шаблона, мы оставляем файл **%%sample_install.php%%** в первоночальном виде, со всеми комментариями. На его основе будут сверстаны в дальнейшем другие шаблоны. Так-же
+файл **%%sample_install.php%%** будет являться тестовым файлом для наглядности примеров.
+</note>
+==== Файл tpl_install_header.php ====
+Блок вставки стилей
+<code php tpl_install_header.php>
+  <style>
+	<?php include __DIR__ . '/../css/install.css';?>
+  </style>
+</code>
+**1.** Чтобы сделать этот вызов безопасным и более правильным с точки зрения разработки, стоит добавить проверку наличия файла и использовать функцию для чтения содержимого.
+<code php tpl_install_footer.php>
+<style>
+    <?php
+    $cssPath = __DIR__ . '/../css/install.css';
+    if (file_exists($cssPath)) {
+        echo file_get_contents($cssPath);
+    }
+    ?>
+</style>
+</code>
+**2.** Для чистого кода  большинство стандартных тегов (вроде **%%DOCTYPE%%** или **%%charset%%**) комментировать не принято, так как их назначение очевидно любому разработчику. Стоит оставить только те комментарии, которые объясняют логику приложения.\\
+**Оптимальный вариант**:
+<code php tpl_install_header.php>
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Установка UCMS Demo</title>
+		<style>
+			/* Вставка стилей инлайном, так как папка установки будет удалена после завершения */
+			<?php
+			$cssPath = __DIR__ . '/../css/install.css';
+			if (file_exists($cssPath)) {
+				echo file_get_contents($cssPath);
+			}
+			?>
+		</style>
+</head>
+<body>
+	<div class="install-container">
+		<div class="install-card">
+			<div class="install-title">Установка UCMS Demo</div>
+			<!-- Блок вставки файлов программы -->
+</code>
+==== Файл tpl_install_footer.php ====
+**1.**Для чистого кода в этом блоке достаточно одного краткого комментария. Все закрывающие теги и так понятны из структуры HTML.\\
+**Оптимальный вариант**:
+<code php tpl_install_footer.php>
+			<!-- Конец блока вставки файлов программы -->
+		</div>
+		<!-- Подвал страницы с копирайтом и версией -->
+		<div class="footer">
+		  <p>
+			Author: <a href="mailto:PolskiyVN@gmail.com">VladPolskiy</a> &copy; 2024-2025
+			<a href="https://UniversalCMS-ce.ovh/" target="_blank">UniversalCMS CE</a> – Ver: 1.2.10
+		  </p>
+		</div>
+	</div>
+</body>
+</html>
+</code>
+==== Файл install.css ====
+В CSS-коде обычно оставляют комментарии только для сложных логических решений или для визуального разделения крупных секций. Описание стандартных свойств (вроде **%%color%%** или **%%margin%%**) считается избыточным.
+Пример оформленного CSS кода:
+<code css install.css>
+    /* Базовые настройки страницы */
+    body {
+      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background-color: #f4f7f6;
+      display: flex;
+      justify-content: center;
+      min-height: 100vh;
+      margin: 0;
+      color: #333;
+    }
+    .install-container {
+      width: 100%;
+      max-width: 700px;
+      padding: 20px;
+      margin: 20px auto 0;
+    }
+    /* Карточка установщика */
+    .install-card {
+      border: 2px #808080 solid;
+      background: #e3ffec;
+      border-radius: 5px;
+      padding: 15px;
+      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5);
+    }
+    .install-title {
+      font-size: 18px;
+      font-style: italic;
+      font-weight: 700;
+      color: #808080;
+      margin-left: 25px;
+      padding-bottom: 5px;
+    }
+    /* Стили таблицы параметров */
+    table {
+      font-family: inherit;
+      font-weight: 700;
+      font-size: 14px;
+      width: 100%;
+      border-collapse: collapse;
+      margin: 20px 0;
+    }
+    td {
+      padding: 5px 0;
+      border-bottom: 1px dashed #bddbc5;
+    }
+    td:last-child {
+      text-align: left;
+      padding-left: 25%; /* Смещение значений вправо */
+    }
+    .status-ok {
+      color: #2e7d32;
+      font-weight: bold;
+    }
+    /* Служебные блоки: подсказки и ошибки */
+    .hint {
+      font-size: 0.9em;
+      color: #666;
+      line-height: 1.5;
+    }
+    .error-msg {
+      background: #ffdce0;
+      padding: 2px 20px;
+      border-radius: 5px;
+      border-left: 5px solid #d32f2f;
+      margin-top: 5px;
+    }
+    .error-msg p {
+      margin: 0;
+    }
+    .footer {
+      text-align: center;
+      font-size: 13px;
+      font-style: italic;
+      font-weight: 700;
+      color: #888;
+      margin-top: 20px;
+    }
+    .footer a { color: #666; }
+    /* Стили для табличных форм ввода */
+    .form-table {
+        border-collapse: collapse;
+        margin-top: 1em;
+        width: 100%;
+    }
+    .form-table th,
+    .form-table td {
+        padding: 10px 20px 10px 0;
+        font-size: 14px;
+        vertical-align: top;
+        text-align: left;
+    }
+    .form-table th {
+        width: 150px;
+        font-weight: 600;
+    }
+    /* Пояснительный текст под полями ввода */
+    .form-table p {
+        margin: 4px 0 0;
+        font-size: 12px;
+        color: #666;
+    }
+    .form-table input,
+    .form-table select {
+        width: 100%;
+        font-size: 12px;
+        padding: 5px;
+        box-sizing: border-box; /* Гарантирует, что поля не выходят за границы ячеек */
+    }
+</code>
+==== Файл install.php ====
+Оптимизация кода **%%install.php%%** заключается в добавлении семантики, улучшении структуры текста для удобства чтения и добавлении поясняющих комментариев для поддержки кода.
+<code php index.php>
+<?php
+/**
+ * Шаблон мастера установки (Index)
+ * Подключает заголовок, выводит контент.
+ */
+require_once 'tpl/tpl_install_header.php';
+?>
+<main class="install-content">
+	<p>
+		На этом этапе система проверяет совместимость вашего сервера с минимальными требованиями.
+		Будут проверены версия PHP, наличие необходимых расширений (PDO, GD, cURL) и права доступа
+		к ключевым директориям проекта.
+	</p>
+	<p>
+		Если все параметры соответствуют норме, вы сможете перейти к настройке базы данных
+		и созданию учетной записи администратора в следующем шаге.
+	</p>
+</main>
+<?php
+/* Закрывающий шаблон: выводит подвал страницы и закрывает HTML-теги. */
+require_once 'tpl/tpl_install_footer.php';
+?>
+</code>
+Перейдите в браузере по ссылке http://localhost/ucms/library/install/install.php, чтобы проверить окончательный результат на наличие ошибок.
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_18.png|}}
+</note>
+В этом же окне проверим **%%Ctrl+Shift+I%%** в инструментах разработчика (Developer Tools) поведение страницы при эмуляция мобильных устройств.
+<note shadow>
+{{:software:development:demo:cms:ucms:ucms_install_test_php_19.png|}}
+</note>
+===== Дополнения и Файлы =====
+  * {{ :software:development:demo:cms:ucms:sample_install.rar |Файлы главы Шаблон модуля install.php}}
+  * [[ software:development:demo:cms:ucms:creating_sample_install_php_setting |Файл редактора стилей модуля install.php]]
+  * [[ software:development:demo:cms:ucms:creating_sample_install_php__edit_colors |Файл редактора цветовой схемы модуля install.php]]