Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:creating_install [2025/04/26 18:53] – vladpolskiy
+++ software:development:demo:cms:ucms:creating_install [2025/05/04 17:20] (текущий) – внешнее изменение 127.0.0.1
@@ Строка 1: / Строка 1: @@
-====== 8.2. Файл install.php ======
+====== 8.7. Файл install.php ======
-Файл install.php будет являтся главным файлом установщика нашего приложения. В этот файл уже будут подключаться другие файлы и стили.
+Файл install.php будет являтся главным файлом установщика нашего приложения. В этот файл уже будут
-<code php install.php>
+подключаться другие файлы и стили.
+===== Файл test_5.php =====
+В директорию **test** добавим новый тестовый файл test_5.php и записываем в него следубщий код:
+<code php test_5.php>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
@@ Строка 7: / Строка 12: @@
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title>Закругленные уголки</title>
+  <title>Установка UCMS Demo</title>
+    <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
+          эти стили нужны только в этом файле. После установки приложения эта папка
+    будет удалена.	-->
   <style type="text/css">
-   .color_block {
+   .block_install {
-    border: 2px #808080 solid; /* Параметры рамки */
+	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);  /* тень вокруг элемента */
    }
-   em.bt, em.bt b, em.bb, em.bb b {
+   .block_install_name {
-    display: block; /* Блочный элемент */
+	font-size: 18px; /* Размер текста */
-    height: 10px; /* Высота уголка */
+	font-style: italic; /* Наклонный текст */
-    font-size: 0; /* Размер шрифта */
+    font-weight: 700; /* Жирный текст */
-    background: url(images/corners.png) no-repeat; /* Путь к файлу с уголками */
+    color: #808080; /* Цвет текста */
-    position: relative; /* Относительное позиционирование */
    }
-   em.bt {
+   .footer_install {
-    top: -2px; /* Сдвигаем левый верхний уголок вверх */
+    text-align: center; /* Раположение текста по центру */
-    left: -2px; /* Сдвигаем влево */
+	font-size: 14px; /* Размер текста */
+	font-style: italic; /* Наклонный текст */
+    font-weight: 700; /* Жирный текст */
+    color: #808080; /* Цвет текста */
    }
-   em.bt b {
+   .table_block_install{
-    background-position:  100% -10px; /* Рисунок сдвигается к следующему уголку */
+	padding: 0px 0px 0px 300px;	 /* отступ блока вправо*/
-    left: 4px; /* Сдвигаем вправо */
    }
-   em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
+  </style>
-   em.bb b { background-position: 100% -30px; left: 4px; }
+    <!--  Конец стилей установщика	-->
-   .color_block .block_content {
+  </head>
-    padding: 0 7px; /* Поля вокруг текста */
+  <body>
+    <!--  Начало блока рамки установщика -->
+    <div class="block_install">
+        <div class="block_window_install">
+        <!--  Начало блока названия программы -->
+            <div class="block_install_name">
+        		Установка UCMS Demo
+            </div>
+		<!--  Конец блока названия программы -->
+		<!--  Начало блока вставки файлов программы -->
+    	<table>
+            <tr>
+				<td>
+				PHP-версия
+				</td>
+				<td>
+				<span class="table_block_install"><b>8.2.21</b>- ОК</span>
+				</td>
+			</tr>
+			<tr>
+				<td>
+				Apache web server
+				</td>
+				<td>
+				<span class="table_block_install"><b>Apache/2.4.58 (Unix)</b>- ОК</span>
+				</td>
+			</tr>
+		</table>
+		<!--  Конец блока вставки файлов программы -->
+		<p class="hint">
+		Более подробную информацию о необходимых модулях можно найти на
+		<a href="https://github.com/UniversalCMS-CE/" target="_blank">странице требований.</a>
+		</p>
+		<p>
+		Невозможно продолжить. Исправьте ошибки и попробуйте еще раз.
+		<!--  Кнопка обновления страницы, переход на саму себя -->
+		<a href="./install.php">Обновить</a>
+		</p>
+		</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>
+</code>
+Отобразим файл test_5.php в веб - браузере
+{{:software:development:demo:cms:ucms:ucms_creat_37.png?|}}
+В данном примере мы разработали шаблон страницы **установщика**, написанный с помощью языка разметки
+HTML и стилей CSS. В нем прописан код, разобранный в придыдущих главах. При жедании ознакомиться с
+версткой сайта предгается прочитать краткое руководство по [[software:development:demo:responsive_site_layout|Адаптивной вёрстке сайта (теория и практика)]]
+Наше же приложение будет разделено на 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** код от начала страницы до конца
+комментария\\   **%%<!--  Начало блока вставки файлов программы -->%%**
+<code 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="color_block">
+    <!--  Начало блока рамки установщика -->
-    <em class="bt"><b>&nbsp;</b></em>
+    <div class="block_install">
-    <div class="block_content">
+        <div class="block_window_install">
-     Чтобы изготовить пугало для горного поля, делают фигуру человека,
+        <!--  Начало блока названия программы -->
-     который держит в руках лук и стрелы. Птицы и звери видят его
+            <div class="block_install_name">
-     и убегают. И хотя у пугала нет никаких намерений, олень не
+        		Установка UCMS Demo
-     подойдет к нему близко. Так пугало выполняет свое назначение,
+            </div>
-     и поэтому говорят, что оно стоит в горном поле не напрасно.
+		<!--  Конец блока названия программы -->
-    </div>
+		<!--  Начало блока вставки файлов программы -->
-    <em class="bb"><b>&nbsp;</b></em>
+</code>
-   </div>
+В файл **tpl_install_footer.php** вынесем из файла **test_5.php** код от
+комментария\\   **%%<!--  Начало нижнего колонтитула -->%%** до конца страницы
+<code 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>
 </code>
-Главный компонент нашего файла - это окно.
+===== Файл install.php =====
+Открываем наш ранее созданный файл **install.php** и записываем в него три строчки кода PHP.
+<code php install.php>
+<?php include "tpl/tpl_install_header.php"; ?>
+	<?php include "lang_and_time_zone.php"; ?>
+<?php include "tpl/tpl_install_footer.php"; ?>
+</code>
+Данный код мы рассмартивали ранее и нет необходимости повторяться. Функция **%%include%%** подчключает данные
+из трех файлов по очереди. Вторым по очереди идет ранее созданный в главе [[software:development:demo:cms:ucms:creating_file_lang_and_time_zone|8.4. Файл lang_and_time_zone.php]] - файл выбора языка и часовой зоны .
+Откроем в браузере Файл **install.php**
+{{:software:development:demo:cms:ucms:ucms_creat_38.png?|}}
+Мы видем, что файлы **tpl_install_header.php** и **tpl_install_footer.php** создали обертку для нашего **lang_and_time_zone.php** файла.
+Из файла **tpl_install_header.php** удалим файлы стилей и подключим внешний файл стилей Файл **install.css** установщика в
+директории **/css/**. Наши стиль окна исчезднет, и будет занаво создан в главе [[software:development:demo:cms:ucms:creating_file_install_css|8.8. Файл install.css]]
+<code php 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>
+		<!--  Конец блока названия программы -->
+		<!--  Начало блока вставки файлов программы -->
+</code>
+{{:software:development:demo:cms:ucms:ucms_creat_39.png?|}}
 <note blue>
-<wrap left>← [[software:development:demo:cms:ucms:creating_installer_directories|8.1. Создание директорий установщика]]</wrap>
+<wrap left>← [[software:development:demo:cms:ucms:creating_file_module_help|8.6. Файл module_help.php]]</wrap>
-<wrap right>[[software:development:demo:cms:ucms:checking_web_server|8.3. Проверка веб-сервера]] →</wrap>
+<wrap right>[[software:development:demo:cms:ucms:creating_file_install_css|8.8. Файл install.css]] →</wrap>
 </note>