software:development:demo:cms:ucms:creating_install_php
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| software:development:demo:cms:ucms:creating_install_php [2026/05/03 09:03] – VladPolskiy | software:development:demo:cms:ucms:creating_install_php [2026/05/03 20:53] (текущий) – внешнее изменение 127.0.0.1 | ||
|---|---|---|---|
| Строка 39: | Строка 39: | ||
| подключаться другие файлы и стили. | подключаться другие файлы и стили. | ||
| - | ===== Файл | + | ===== Файл |
| + | Создадим в директории **/ | ||
| + | Создадим в директории **/ | ||
| + | <code php install_test.php> | ||
| + | <!-- Объявление типа документа: | ||
| + | что используется современный стандарт HTML5 --> | ||
| + | < | ||
| + | <!-- Начало документа, | ||
| + | поисковикам и браузерам, | ||
| + | <html lang=" | ||
| + | < | ||
| + | <!-- Установка кодировки UTF-8 для корректного отображения | ||
| + | кириллицы и спецсимволов --> | ||
| + | <meta charset=" | ||
| + | <!-- Адаптация страницы под ширину экрана мобильных устройств --> | ||
| + | <meta name=" | ||
| + | <!-- Заголовок вкладки браузера --> | ||
| + | < | ||
| + | < | ||
| + | эти стили нужны только в этом файле. После установки приложения эта папка | ||
| + | будет удалена. --> | ||
| + | < | ||
| + | /* Настройки всей видимой части страницы */ | ||
| + | body { | ||
| + | font-family: | ||
| + | background-color: | ||
| + | display: flex; /* Включение гибкой верстки для выравнивания содержимого */ | ||
| + | justify-content: | ||
| + | align-items: | ||
| + | min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */ | ||
| + | margin: 0; /* Удаление стандартных внешних отступов браузера */ | ||
| + | color: #333; /* Основной цвет текста (темно-серый) */ | ||
| + | } | ||
| - | В директорию **test** добавим новый тестовый файл test_5.php и записываем в него следубщий код: | + | /* Внешняя |
| - | <code php test_5.php> | + | .install-container { |
| - | < | + | width: 100%; /* Растягивание на всю доступную ширину */ |
| - | " | + | max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */ |
| - | <html xmlns=" | + | |
| - | < | + | } |
| - | <meta http-equiv=" | + | |
| - | < | + | |
| - | < | + | |
| - | эти | + | |
| - | будет удалена. --> | + | |
| - | <style type=" | + | |
| - | .block_install { | + | |
| - | width: 700px; /* Ширина содержимого | + | |
| - | | + | /* Основная карточка с контентом */ |
| - | left: 0; /* Положение | + | .install-card { |
| - | right: 0; /* Положение от правого края */ | + | border: 2px #808080 solid; /* Серая сплошная рамка толщиной 2px */ |
| - | | + | background: #e3ffec; /* Светло-зеленый фон как на скриншоте */ |
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| - | } | + | /* Стили верхнего заголовка внутри карточки */ |
| - | | + | .install-title |
| - | | + | |
| - | | + | font-style: italic; /* Написание курсивом */ |
| - | border-radius: 5px; /* закругленные края рамки */ | + | font-weight: |
| - | padding: 10px; /* со всех сторон отступ | + | color: #808080; /* Серый |
| - | box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* тень вокруг | + | margin-left: |
| - | | + | padding-bottom: |
| - | | + | } |
| - | font-size: | + | |
| - | font-style: italic; /* Наклонный текст */ | + | /* Оформление таблицы с параметрами системы |
| - | font-weight: 700; /* Жирный текст */ | + | |
| - | color: #808080; /* Цвет текста */ | + | font-family: inherit; /* Наследование шрифтов от body */ |
| - | | + | font-weight: |
| - | | + | font-size: 14px; /* Размер шрифта в таблице */ |
| - | text-align: center; /* Раположение текста | + | width: 100%; /* Таблица занимает всю ширину |
| - | font-size: | + | border-collapse: |
| - | font-style: | + | |
| - | font-weight: | + | } |
| - | color: #808080; /* Цвет | + | |
| - | } | + | /* Стили |
| - | | + | td { |
| - | padding: 0px 0px 0px 300px; /* отступ | + | padding: 5px 0; /* Вертикальные отступы внутри строк |
| - | | + | |
| + | } | ||
| + | |||
| + | /* Специальные стили для правой колонки значений */ | ||
| + | td: | ||
| + | text-align: left; /* Текст внутри ячейки прижат к левому краю */ | ||
| + | padding-left: | ||
| + | } | ||
| + | |||
| + | /* Цвет текста для статуса " | ||
| + | | ||
| + | color: #2e7d32; /* Темно-зеленый цвет */ | ||
| + | font-weight: | ||
| + | | ||
| + | |||
| + | /* Текст подсказки */ | ||
| + | | ||
| + | font-size: | ||
| + | color: #666; /* Средне-серый цвет */ | ||
| + | line-height: 1.5; /* Межстрочный интервал для читаемости */ | ||
| + | } | ||
| + | |||
| + | /* Блок сообщения об ошибке */ | ||
| + | .error-msg { | ||
| + | background: #ffdce0; /* Светло-розовый фон ошибки */ | ||
| + | padding: 2px 20px; /* Минимальные отступы сверху/ | ||
| + | | ||
| + | border-left: | ||
| + | | ||
| + | } | ||
| + | |||
| + | /* Убираем отступы у параграфа внутри блока ошибки для компактности */ | ||
| + | | ||
| + | margin: 0; | ||
| + | | ||
| + | |||
| + | /* Стили подвала (авторские права) */ | ||
| + | .footer { | ||
| + | | ||
| + | font-size: | ||
| + | font-style: italic; /* Курсив */ | ||
| + | font-weight: | ||
| + | color: #888; /* Светло-серый цвет */ | ||
| + | | ||
| + | } | ||
| + | |||
| + | /* Цвет ссылок в подвале | ||
| + | | ||
| </ | </ | ||
| - | | + | |
| - | </ | + | </ |
| - | < | + | < |
| - | < | + | |
| - | <div class=" | + | |
| - | <div class=" | + | <div class=" |
| - | < | + | < |
| - | <div class=" | + | |
| - | Установка UCMS Demo | + | |
| - | | + | <div class=" |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | < | + | < |
| - | <td> | + | <!-- Таблица проверки системных требований --> |
| - | PHP-версия | + | |
| - | </ | + | < |
| - | <td> | + | |
| - | <span class=" | + | < |
| - | </ | + | |
| - | </ | + | <td><strong> |
| - | < | + | </ |
| - | <td> | + | < |
| - | Apache web server | + | |
| - | </ | + | < |
| - | <td> | + | <!-- Значение и статус --> |
| - | <span class=" | + | |
| - | </ | + | </ |
| - | </ | + | </ |
| - | </ | + | |
| - | < | + | |
| - | <p class=" | + | <p class=" |
| - | Более подробную информацию о необходимых модулях | + | Подробности о необходимых модулях на |
| - | <a href=" | + | <a href=" |
| - | </ | + | </ |
| - | <p> | + | |
| - | Невозможно продолжить. Исправьте ошибки и попробуйте еще раз. | + | <!-- Блок предупреждения об ошибке --> |
| - | < | + | <div class=" |
| - | <a href=" | + | |
| - | </ | + | Невозможно продолжить. Исправьте ошибки и попробуйте еще раз. |
| - | </ | + | < |
| - | < | + | <a href=" |
| - | <div class=" | + | </ |
| - | <p> | + | </ |
| - | Author: | + | </ |
| - | <a href=" | + | |
| - | <a href=" | + | < |
| - | – Ver: 1.2.10 | + | < |
| - | </p> | + | <!-- Подвал страницы с копирайтом и версией |
| - | </ | + | <div class=" |
| - | < | + | <p> |
| - | </ | + | Author: <a href=" |
| - | < | + | <a href=" |
| - | </ | + | </ |
| + | </ | ||
| + | </ | ||
| + | |||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
| - | Отобразим файл **test_5.php** в веб - браузере перейдя по ссылке http:// | + | Отобразим файл **install_test.php** в веб - браузере перейдя по ссылке http:// |
| <note shadow> | <note shadow> | ||
| - | {{: | + | {{: |
| </ | </ | ||
| - | В данном примере мы разработали шаблон страницы **установщика**, | + | В данном примере мы получили шаблон страницы **установщика**, |
| HTML и стилей CSS. В нем прописан код, разобранный в придыдущих главах. При жедании ознакомиться с | HTML и стилей CSS. В нем прописан код, разобранный в придыдущих главах. При жедании ознакомиться с | ||
| версткой сайта предгается прочитать краткое руководство по [[software: | версткой сайта предгается прочитать краткое руководство по [[software: | ||
| Наше же приложение будет разделено на 3 части и будет иметь: | Наше же приложение будет разделено на 3 части и будет иметь: | ||
| - | - " | + | - " |
| - " | - " | ||
| - | - " | + | - " |
| ==== tpl дирректория и шаблоны ==== | ==== tpl дирректория и шаблоны ==== | ||
| Строка 159: | Строка 238: | ||
| так-же два файла **tpl_install_header.php** и **tpl_install_footer.php** в новой директории. | так-же два файла **tpl_install_header.php** и **tpl_install_footer.php** в новой директории. | ||
| - | В файл **tpl_install_header.php** вынесем из файла **test_5.php** код от начала страницы до конца | + | В файл **tpl_install_header.php** вынесем из файла **install_test.php** код от начала страницы до конца |
| комментария\\ | комментария\\ | ||
| <code php tpl_install_header.php> | <code php tpl_install_header.php> | ||
| - | < | + | <!-- Объявление типа документа: |
| - | | + | что используется современный стандарт HTML5 --> |
| - | < | + | < |
| - | < | + | <!-- Начало документа, |
| - | <meta http-equiv="Content-Type" content=" | + | поисковикам и браузерам, |
| - | < | + | < |
| - | < | + | < |
| - | эти стили нужны только в этом файле. После установки приложения эта папка | + | <!-- Установка кодировки UTF-8 для корректного отображения |
| - | будет удалена. --> | + | кириллицы и спецсимволов --> |
| - | < | + | <meta charset="UTF-8"> |
| - | .block_install | + | <!-- Адаптация страницы под ширину экрана мобильных устройств --> |
| - | width: 700px; /* Ширина содержимого в рамке | + | <meta name=" |
| - | + | <!-- Заголовок вкладки браузера --> | |
| - | position: absolute; /* Абсолютное позиционирование */ | + | < |
| - | left: 0; /* Положение от левого | + | < |
| - | right: 0; /* Положение от правого края */ | + | эти стили нужны только в этом файле. После установки приложения эта папка |
| - | margin: | + | будет удалена. --> |
| - | + | < | |
| - | } | + | /* Настройки всей видимой части страницы */ |
| - | | + | body { |
| - | | + | |
| - | background: #e3ffec; /* Цвет фона */ | + | background-color: |
| - | border-radius: | + | |
| - | padding: | + | |
| - | box-shadow: | + | |
| - | } | + | min-height: 100vh; /* Минимальная |
| - | .block_install_name | + | margin: |
| - | font-size: 18px; /* Размер текста */ | + | color: #333; /* Основной цвет текста (темно-серый) |
| - | font-style: | + | } |
| - | font-weight: | + | |
| - | color: #808080; /* Цвет текста */ | + | /* Внешняя обертка для карточки установки */ |
| - | | + | |
| - | .footer_install | + | width: 100%; /* Растягивание на всю доступную ширину */ |
| - | text-align: | + | max-width: 700px; /* Ограничение |
| - | font-size: | + | padding: 20px; /* Внутренние отступы от краев экрана */ |
| - | font-style: italic; /* Наклонный текст */ | + | } |
| - | font-weight: 700; /* Жирный текст */ | + | |
| - | color: #808080; /* Цвет текста */ | + | /* Основная карточка с контентом */ |
| - | | + | .install-card { |
| - | .table_block_install{ | + | border: 2px #808080 solid; /* Серая |
| - | padding: 0px 0px 0px 300px; | + | background: #e3ffec; /* Светло-зеленый |
| - | | + | border-radius: |
| + | padding: | ||
| + | box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* Глубокая | ||
| + | } | ||
| + | |||
| + | /* Стили верхнего заголовка внутри карточки | ||
| + | .install-title | ||
| + | font-size: 18px; /* Размер | ||
| + | font-style: italic; /* Написание | ||
| + | font-weight: | ||
| + | color: #808080; /* Серый цвет | ||
| + | margin-left: | ||
| + | padding-bottom: | ||
| + | | ||
| + | |||
| + | /* Оформление таблицы с параметрами системы */ | ||
| + | table { | ||
| + | font-family: | ||
| + | | ||
| + | | ||
| + | width: 100%; /* Таблица занимает всю ширину карточки */ | ||
| + | border-collapse: | ||
| + | margin: 20px 0; /* Отступы сверху и снизу от таблицы | ||
| + | } | ||
| + | |||
| + | /* Стили обычных ячеек */ | ||
| + | td { | ||
| + | padding: 5px 0; /* Вертикальные отступы внутри строк */ | ||
| + | border-bottom: | ||
| + | | ||
| + | |||
| + | /* Специальные стили для правой колонки значений */ | ||
| + | td: | ||
| + | | ||
| + | padding-left: | ||
| + | } | ||
| + | |||
| + | /* Цвет текста | ||
| + | .status-ok { | ||
| + | color: #2e7d32; /* Темно-зеленый | ||
| + | font-weight: | ||
| + | } | ||
| + | |||
| + | /* Текст подсказки */ | ||
| + | .hint { | ||
| + | | ||
| + | color: #666; /* Средне-серый цвет */ | ||
| + | line-height: 1.5; /* Межстрочный интервал для читаемости */ | ||
| + | } | ||
| + | |||
| + | /* Блок сообщения об ошибке */ | ||
| + | .error-msg { | ||
| + | background: #ffdce0; /* Светло-розовый фон ошибки */ | ||
| + | padding: 2px 20px; /* Минимальные отступы сверху/ | ||
| + | | ||
| + | border-left: | ||
| + | | ||
| + | } | ||
| + | |||
| + | /* Убираем | ||
| + | .error-msg p { | ||
| + | margin: 0; | ||
| + | } | ||
| + | |||
| + | /* Стили подвала (авторские | ||
| + | .footer { | ||
| + | text-align: center; /* Центрирование текста | ||
| + | | ||
| + | font-style: italic; /* Курсив */ | ||
| + | font-weight: | ||
| + | color: #888; /* Светло-серый цвет */ | ||
| + | margin-top: 20px; /* Отступ от основной карточки */ | ||
| + | } | ||
| + | |||
| + | /* Цвет ссылок в подвале */ | ||
| + | .footer a { color: #666; } | ||
| </ | </ | ||
| - | | + | |
| - | </ | + | </ |
| - | < | + | < |
| - | < | + | |
| - | <div class=" | + | |
| - | <div class=" | + | <div class=" |
| - | < | + | < |
| - | <div class=" | + | |
| - | Установка UCMS Demo | + | |
| - | | + | <div class=" |
| - | < | + | < |
| - | < | + | < |
| + | | ||
| + | < | ||
| </ | </ | ||
| Строка 225: | Строка 381: | ||
| <code php tpl_install_footer.php> | <code php tpl_install_footer.php> | ||
| - | < | + | |
| + | < | ||
| + | < | ||
| + | </ | ||
| + | <!-- Подвал страницы с копирайтом и версией --> | ||
| + | <div class=" | ||
| + | <p> | ||
| + | Author: <a href=" | ||
| + | <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | </div> | ||
| - | </ | + | </ |
| - | < | + | |
| - | <div class=" | + | |
| - | < | + | |
| - | Author: | + | |
| - | <a href=" | + | |
| - | <a href=" | + | |
| - | – Ver: 1.2.10 | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | </ | + | |
| - | < | + | |
| - | </body> | + | |
| - | </html> | + | |
| </ | </ | ||
| </ | </ | ||
| ===== Файл install.php ===== | ===== Файл install.php ===== | ||
| - | Открываем в **Notepad++** наш ранее созданный файл **install.php** и записываем в него | + | Открываем в редакторе |
| + | и между ними классический текст - заглушку "Lorem Ipsum" | ||
| <code php install.php> | <code php install.php> | ||
| <?php include " | <?php include " | ||
| - | <?php include | + | <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.</ | ||
| + | < | ||
| + | officia deserunt mollit anim id est laborum."</p> | ||
| <?php include " | <?php include " | ||
| Строка 257: | Строка 418: | ||
| Данный код мы рассмартивали ранее и нет необходимости повторяться. Функция **%%include%%** подчключает данные | Данный код мы рассмартивали ранее и нет необходимости повторяться. Функция **%%include%%** подчключает данные | ||
| - | из трех файлов | + | из двух файлов |
| Откроем в браузере Файл **install.php** перейдя по ссылке http:// | Откроем в браузере Файл **install.php** перейдя по ссылке http:// | ||
| <note shadow> | <note shadow> | ||
| - | {{: | + | {{: |
| </ | </ | ||
| - | Мы видем, что файлы **tpl_install_header.php** и **tpl_install_footer.php** создали обертку для нашего **lang_and_time_zone.php** файла. | + | Мы видем, что файлы **tpl_install_header.php** и **tpl_install_footer.php** создали обертку для |
| + | нашего **install.php** файла. | ||
| + | |||
| + | Вторым по очереди идет ранее созданный в главе [[software: | ||
| + | |||
| Из файла **tpl_install_header.php** удалим файлы стилей и подключим внешний файл стилей Файл **install.css** установщика в | Из файла **tpl_install_header.php** удалим файлы стилей и подключим внешний файл стилей Файл **install.css** установщика в | ||
software/development/demo/cms/ucms/creating_install_php.1777788192.txt.gz · Последнее изменение: — VladPolskiy