worldwide open-source software

Инструменты пользователя

Инструменты сайта

Вы посетили: • creating_sample_install_php • arch_linux_installing_core_packages
software:development:demo:cms:ucms:creating_sample_install_php

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
software:development:demo:cms:ucms:creating_sample_install_php [2026/05/04 14:21] – [Введение] VladPolskiysoftware:development:demo:cms:ucms:creating_sample_install_php [2026/05/05 11:15] (текущий) – [Дополнения и Файлы] VladPolskiy
Строка 10: Строка 10:
   * Все стили оформления будут перенесены в отдельный внешний файл **install.css.**   * Все стили оформления будут перенесены в отдельный внешний файл **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> <diagram>
 |AAA||||||AAA{text-align:left;border-color:white}={{fa>folder?}} ./ucms/ |AAA||||||AAA{text-align:left;border-color:white}={{fa>folder?}} ./ucms/
Строка 892: Строка 900:
 {{:software:development:demo:cms:ucms:ucms_install_test_php_14_2.png|}} {{:software:development:demo:cms:ucms:ucms_install_test_php_14_2.png|}}
 </note> </note>
 +и вставим **%%(Ctrl+V)%%** вырезанный код стилей в файл **%%install.css%%**, в результате чего файл получит следующий вид:
 <code css install.css> <code css install.css>
-                        <!--  ****************************************** --> +    /* Настройки всей видимой части страницы */ 
- <!--  ** Конец блока вставки файлов программы ** --> +    body { 
- <!--  ****************************************** --> +      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Приоритет шрифта с засечками, далее системные шрифты */ 
-    </div><!-- Конец блока основная «зеленая» карточка --> +      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">  <div class="footer">
- <p> +   <p> 
- Author: <a href="mailto:PolskiyVN@gmail.com">VladPolskiy</a> &copy; 2024-2025 + 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 + <a href="https://UniversalCMS-ce.ovh/" target="_blank">UniversalCMS CE</a> – Ver: 1.2.10 
- </p>+   </p>
  </div>  </div>
-</div>+ </div>
 </body> </body>
 </html> </html>
 </code> </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]]
 +
 +
 +
software/development/demo/cms/ucms/creating_sample_install_php.1777893713.txt.gz · Последнее изменение: — VladPolskiy
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki