worldwide open-source software

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

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

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

Это старая версия документа!

Содержание

Краткое содержание

5.0 Файлы и директории приложения

Расмотрим примерную структуру нашего будущего приложения установки (названия директорий произвольное, но проще использовать понятные или традиционные, чтобы не запутаться, например: user - в переводе «пользователь», install - «установка», readme - «прочти меня», user_login - «пользователь_авторизация» и т.д.). Ниже приведена предварительной схема файлов и директорий приложения install нашей будущей CMS.

./ucms/
includes
config.ini
cons.php
demo
function.php
library
install
css
install.css
js
install.js
tpl
tpl_install_header.php
tpl_install_footer.php
pages
account_settings.php
database_options.php
installation_progress.php
lang_and_time_zone.php
module_help.php
options.php
server_check.php
setting.php
install.php
help.txt
version.txt

8.7. Файл install.php

Файл install.php будет являтся главным файлом установщика нашего приложения. В этот файл уже будут подключаться другие файлы и стили.

Файл install_test.php

Создадим в директории /install временную директорию для хранения тестовых файлов /test. Создадим в директории /install новый тестовый файл install_test.php и записываем в него следубщий код:

install_test.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>
    /* Настройки всей видимой части страницы */
    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; /* Центрирование контейнера по горизонтали */
      align-items: center; /* Центрирование контейнера по вертикали */
      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
      margin: 0; /* Удаление стандартных внешних отступов браузера */
      color: #333; /* Основной цвет текста (темно-серый) */
    }
 
    /* Внешняя обертка для карточки установки */
    .install-container {
      width: 100%; /* Растягивание на всю доступную ширину */
      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
      padding: 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: 30%; /* Создание большого пустого пространства слева для имитации смещения вправо */
    }
 
    /* Цвет текста для статуса "ОК" */
    .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: 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; }
  </style>
  <!--  Конец стилей установщика	-->
</head>
<body>
 
  <!-- Ограничивающий контейнер по центру экрана -->
  <div class="install-container"> 
    <!-- Основная «зеленая» карточка -->
    <div class="install-card"> 
	  <!-- Заголовок блока -->
      <div class="install-title">Установка UCMS Demo</div> 
	   	<!--  Конец блока заголовка -->
	    <!--  ******************************************* -->
		<!--  ** Начало блока вставки файлов программы ** -->
	    <!--  ******************************************* -->
      <!-- Таблица проверки системных требований -->
      <table> 
        <tr>
		  <!-- Название параметра -->
          <td>PHP-версия</td> 
		  <!-- Значение и статус -->
          <td><strong>8.2.21</strong> — <span class="status-ok">ОК</span></td> 
        </tr>
        <tr>
		  <!-- Название параметра -->
          <td>Apache web server</td> 
          <!-- Значение и статус -->
		  <td><strong>Apache/2.4.58 (Unix)</strong> — <span class="status-ok">ОК</span></td>
        </tr>
      </table>
 
      <!-- Информационный текст со ссылкой -->
      <p class="hint"> 
        Подробности о необходимых модулях на 
        <a href="https://github.com/UniversalCMS-CE/" target="_blank">странице требований</a>.
      </p>
 
      <!-- Блок предупреждения об ошибке -->
      <div class="error-msg"> 
        <p>
          Невозможно продолжить. Исправьте ошибки и попробуйте еще раз. 
          <!-- Ссылка-кнопка для перезагрузки текущего скрипта установки -->
          <a href="./install.php">Обновить</a>
        </p>
      </div>
    </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>

Отобразим файл install_test.php в веб - браузере перейдя по ссылке http://localhost/ucms/library/install/install_test.php

В данном примере мы получили шаблон страницы установщика, написанный с помощью языка разметки HTML и стилей CSS. В нем прописан код, разобранный в придыдущих главах. При жедании ознакомиться с версткой сайта предгается прочитать краткое руководство по Адаптивной вёрстке сайта (теория и практика)

Наше же приложение будет разделено на 3 части и будет иметь:

  1. «Верхний колонтитул (голова)» файл tpl_install_header.php
  2. «Окно» где будут выводиться данные из других файлов.
  3. «Нижний колонтитул (подвал)» файл tpl_install_footer.php

tpl дирректория и шаблоны

Создадим в директории ./ucms/library/install/ вложенную директорию /tpl/ для наших шаблонов, а так-же два файла tpl_install_header.php и tpl_install_footer.php в новой директории.

В файл tpl_install_header.php вынесем из файла install_test.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>
    /* Настройки всей видимой части страницы */
    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; /* Центрирование контейнера по горизонтали */
      align-items: center; /* Центрирование контейнера по вертикали */
      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
      margin: 0; /* Удаление стандартных внешних отступов браузера */
      color: #333; /* Основной цвет текста (темно-серый) */
    }
 
    /* Внешняя обертка для карточки установки */
    .install-container {
      width: 100%; /* Растягивание на всю доступную ширину */
      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
      padding: 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: 30%; /* Создание большого пустого пространства слева для имитации смещения вправо */
    }
 
    /* Цвет текста для статуса "ОК" */
    .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: 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; }
  </style>
  <!--  Конец стилей установщика	-->
</head>
<body>
 
  <!-- Ограничивающий контейнер по центру экрана -->
  <div class="install-container"> 
    <!-- Основная «зеленая» карточка -->
    <div class="install-card"> 
	  <!-- Заголовок блока -->
      <div class="install-title">Установка UCMS Demo</div> 
	   	<!--  Конец блока заголовка -->
	    <!--  ******************************************* -->
	    <!--  ** Начало блока вставки файлов программы ** -->
	    <!--  ******************************************* -->

В файл tpl_install_footer.php вынесем из файла test_5.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>

Файл install.php

Открываем в Notepad++ наш ранее созданный файл install.php и записываем в него три строчки кода PHP.

install.php
<?php include "tpl/tpl_install_header.php"; ?>
 
	<?php include "lang_and_time_zone.php"; ?>
 
<?php include "tpl/tpl_install_footer.php"; ?>

Данный код мы рассмартивали ранее и нет необходимости повторяться. Функция include подчключает данные из трех файлов по очереди. Вторым по очереди идет ранее созданный в главе 8.4. Файл lang_and_time_zone.php - файл выбора языка и часовой зоны .

Откроем в браузере Файл install.php перейдя по ссылке http://localhost/ucms/library/install/install.php

Мы видем, что файлы tpl_install_header.php и tpl_install_footer.php создали обертку для нашего lang_and_time_zone.php файла.

Из файла tpl_install_header.php удалим файлы стилей и подключим внешний файл стилей Файл install.css установщика в директории /css/. Наши стиль окна исчезднет, и будет занаво создан в главе 8.8. Файл install.css

tpl_install_header.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Установка UCMS CE</title>
    <!--  Начало стилей установщика, выносим стили в отдельный файл 
          install.css, который находиться в директории css	-->
  <link rel="stylesheet" type="text/css" href="css/install.css"> 
    <!--  Конец стилей установщика	-->
  </head>
  <body> 
    <!--  Начало блока рамки установщика -->
    <div class="block_install">
        <div class="block_window_install">
        <!--  Начало блока названия программы -->
            <div class="block_install_name">
        		Установка UCMS Demo
            </div>
		<!--  Конец блока названия программы -->
		<!--  Начало блока вставки файлов программы -->
← 8.6. Файл module_help.php 8.8. Файл install.css →

Помогите улучшить Страницу

Была ли эта страница полезна для вас?-10+1
Сообщить о проблеме с этим контентом:polskiyvn@gmail.com

software/development/demo/cms/ucms/creating_install_php.1777800608.txt.gz · Последнее изменение: — VladPolskiy
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/creating_install_php.1777800608.txt.gz · Последнее изменение: — VladPolskiy
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki