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

Содержание

5.0 Файлы и директории приложения
8.7. Файл install.php
- Файл install_test.php
  - tpl дирректория и шаблоны
- Файл 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 части и будет иметь:

«Верхний колонтитул (голова)» файл tpl_install_header.php
«Окно» где будут выводиться данные из других файлов.
«Нижний колонтитул (подвал)» файл 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"; ?>
 
<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 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.1777830061.txt.gz · Последнее изменение: 2026/05/03 20:41 — VladPolskiy

Только авторизованные участники могут оставлять комментарии.