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

Содержание

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

<!DOCTYPE html> <!-- Объявление типа документа: сообщает браузеру, что используется современный стандарт HTML5 -->
<html lang="ru"> <!-- Начало документа, атрибут lang="ru" указывает поисковикам и браузерам, что основной язык страницы — русский -->
<head>
  <meta charset="UTF-8"> <!-- Установка кодировки 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 вынесем из файла test_5.php код от начала страницы до конца комментария


tpl_install_header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Установка UCMS Demo</title>
    <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
          эти стили нужны только в этом файле. После установки приложения эта папка 
    будет удалена.	-->
  <style type="text/css">
   .block_install {
	width: 700px; /* Ширина содержимого в рамке */
 
    position: absolute;  /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края */
    right: 0; /* Положение от правого края */
    margin: auto;  /* Отступы вокруг элемента */
 
   }
   .block_window_install{
    border: 2px #808080 solid; /* Параметры рамки: ширина, цвет, сплошная граница */
    background: #e3ffec; /* Цвет фона */
	border-radius: 5px; /* закругленные края рамки */
	padding: 10px; /*  со всех сторон отступ 10px */
	box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5);  /* тень вокруг элемента */ 	
   }
   .block_install_name {
	font-size: 18px; /* Размер текста */ 
	font-style: italic; /* Наклонный текст */ 
    font-weight: 700; /* Жирный текст */ 
    color: #808080; /* Цвет текста */ 
   }
   .footer_install {	 
    text-align: center; /* Раположение текста по центру */
	font-size: 14px; /* Размер текста */ 
	font-style: italic; /* Наклонный текст */ 
    font-weight: 700; /* Жирный текст */ 
    color: #808080; /* Цвет текста */
   }
   .table_block_install{
	padding: 0px 0px 0px 300px;	 /* отступ блока вправо*/
   }
  </style>
    <!--  Конец стилей установщика	-->
  </head>
  <body> 
    <!--  Начало блока рамки установщика -->
    <div class="block_install">
        <div class="block_window_install">
        <!--  Начало блока названия программы -->
            <div class="block_install_name">
        		Установка UCMS Demo
            </div>
		<!--  Конец блока названия программы -->
		<!--  Начало блока вставки файлов программы -->

В файл tpl_install_footer.php вынесем из файла test_5.php код от комментария
 до конца страницы

tpl_install_footer.php

		<!--  Конец блока вставки файлов программы -->
 
		</div>
		<!--  Начало нижнего колонтитула -->
		<div class="footer_install">
    			<p>
				Author:
				<a href="mailto:PolskiyVN@gmail.com"> VladPolskiy</a>  © 2024-2025  
				<a href="https://UniversalCMS-ce.ovh/" target="_blank"> UniversalCMS CE </a>
				– Ver: 1.2.10
				</p> 
		</div>
		<!--  Конец нижнего колонтитула -->
		 </div>
		<!--  Конец блока рамки установщика -->		
 </body>
</html>
</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.1777796801.txt.gz · Последнее изменение: 2026/05/03 11:26 — 127.0.0.1

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