worldwide open-source software

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

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

Вы посетили: • js_speech_chat_bot_eva_v2_comment • creating_sample_install_php • admin_panel • 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:03] – [Файл install.php] 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/
Строка 883: Строка 891:
 } }
 </code> </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]]
 +
 +
 +
software/development/demo/cms/ucms/creating_sample_install_php.1777892602.txt.gz · Последнее изменение: — VladPolskiy
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki