Различия

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

--- software:development:demo:cms:ucms:sample_php_page_sample [2026/02/08 15:17] – [Файл sample.html] VladPolskiy
+++ software:development:demo:cms:ucms:sample_php_page_sample [2026/02/08 18:48] (текущий) – [Файл sample.html] VladPolskiy
@@ Строка 4: / Строка 4: @@
 </note>
 ====== 4.3. Файл sample.html ======
   * [[software:development:demo:cms:ucms:sample_html5_and_dinamic_page|Глава 4.0. Шаблон HTML и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_html5_page|4.1 Шаблон HTML5]]
     * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]]
     * [[software:development:demo:cms:ucms:sample_php_page_sample|4.3. Файл sample.html]]
-    * [[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
-      * [[software:development:demo:cms:ucms:sample_php_page_style_css|4.4.1. Файл style.css]]
+      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.3.2 Файл scripts.js]]
-    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.5. Файл footer.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index|4.4. Файл index.php часть 1]]
-      * [[software:development:demo:cms:ucms:sample_php_page_scripts_js|4.5.1 Файл scripts.js]]
+    * [[software:development:demo:cms:ucms:sample_php_page_header|4.5. Файл header.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page_index|4.6. Файл index.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_footer|4.6. Файл footer.php]]
-    * [[software:development:demo:cms:ucms:sample_php_page|4.7. page.php]]
+    * [[software:development:demo:cms:ucms:sample_php_page_index_part_2|4.7. Файл index.php часть 2]]
       * [[software:development:demo:cms:ucms:sample_php_page_home.php|4.7.1 Файл home.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_about.php|4.7.2 Файл about.php]]
       * [[software:development:demo:cms:ucms:sample_php_page_contact.php|4.7.3 Файл contact.php]]
 ===== Введение =====
@@ Строка 27: / Строка 26: @@
 </note>
 ===== Файл sample.html =====
+Ниже приведен код страницы sample.html
-<code php sample.html>
+<code html sample.html [enable_line_numbers="true"]>
 <!doctype html>
 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ Строка 42: / Строка 41: @@
       rel="stylesheet"
       type="text/css" />
-    <link rel="stylesheet" href="style.css" />
     <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
     <!--[if lt IE 9]>
@@ Строка 54: / Строка 52: @@
     padding: 0;
 }
 body {
   width: 90%; /* Задает ширину 90% от вьюпорта */
@@ Строка 60: / Строка 57: @@
   box-sizing: border-box; /* Учитывает padding внутри ширины */
 }
 h, p {
 	margin: 10px;
 	padding: 0px 10px;              /* Убирает внутренние отступы */
 }
 .navbar {
 	display: flex;
@@ Строка 75: / Строка 70: @@
 	border-radius: 5px; /* Скругляет все углы на 5px */
 }
 ul {
 	list-style-type: none;
@@ Строка 84: / Строка 78: @@
 	display: flex;
 }
 ul li {
 	float: left;
 	border-right:1px solid #025f3d;
 }
 ul li:last-child {
 	border-right: none;
 }
 ul li a {
 	display: block;
@@ Строка 102: / Строка 93: @@
 	text-decoration: none;
 }
 ul li a:hover:not(.active) {
 	background-color: #03915d;
 }
 ul li a.active {
 	background-color: #04aa6d;
 }
 .search-form {
 	display: flex;
 }
 .search-form input {
 	background-color: #D3D3D3
@@ Строка 124: / Строка 111: @@
 	border: none;
 }
 .search-form-button {
     /* top, right, bottom, left */
@@ Строка 135: / Строка 121: @@
 	cursor: pointer;          /* Возвращает курсор-ручку */
 }
 ul li .search-form-button:hover:not(.active) {
 	background-color: #03915d;
 }
 ul li .search-form-button.active {
 	background-color: #04aa6d;
 }
 </style>
   </head>
@@ Строка 159: / Строка 142: @@
 			</ul>
 		</ul>
-		      <!-- Форма поиска. -->
+	<!-- Форма поиска. -->
     <form class="search-form">
 	<ul>
         <li><input type="search" placeholder="Search..."></li>
-		<li><button class = "search-form-button" type="submit" value="Go!">Go!</button></li>
+		<li><button class = "search-form-button" type="submit"  id="searchButton" value="Go!">Go!</button></li>
+	</ul>
-		</ul>
     </form>
 </nav>
@@ Строка 205: / Строка 187: @@
     </footer>
     <!-- Optional: Link to a JavaScript file -->
-    <script src="scripts.js"></script>
+    <script>
+	// Находим кнопку по ID
+	const button = document.getElementById('searchButton');
+	// Добавляем обработчик события "click"
+	button.addEventListener('click', function() {
+	// Выводим alert
+    alert('Ничего не найдено...!');
+	});
+	</script>
   </body>
 </html>
 </code>
+Не стоит пугаться, так как данная страница просто пример HTML страницы со стилями и небольшим примером работы языка JavaScript для кнопки поиска "Go!"
+<note shadow>{{:software:development:demo:cms:ucms:sample_html_6.png|переход страниц}}</note>
+Хотя, нет, стоит...\\
+Большенство просто пролистает этот код, так как его очень не удобно читать. В примере все заключенно в тело одной страницы и для создания дополнительных страниц, необходимо полность копировать весь текст в создаваемые страницы, и уже там выискивать и менять текст в нужных блоках.
+\\
+Это может быть приемлемо только для маленьких сайтов-визиток, где контент долгое время не меняется.
+\\
+А если текст меняется постоянно? Если на страницах разные стили оформления? Если у гостей и зарегистрированных пользователей ограничения в отображаемых пунктах меню?
+\\
+Тут на помощь приходят серверные языки программирования (PHP, Python, Ruby, Node.js), базы данных (MySQL, PostgreSQL) и клиентский JavaScript, которые совместно генерируют контент в реальном времени. Они позволяют обрабатывать запросы пользователей, взаимодействовать с сервером и изменять интерфейс без перезагрузки.
+\\
+Но, все по порядку...
+\\
+Для начала вынисем стили и скрипты в отденьные директории и файлы, далее разделим страницу на части и следом с помощью PHP подключим все это в единый динамический шаблон.
+\\
+И начнем мы с файла **style.css**, описанного на следующей странице руководства
@@ Строка 226: / Строка 232: @@
 </wrap>
 <wrap right>
-[[software:development:demo:cms:ucms:sample_php_page_header|4.4. Файл header.php]]
+[[software:development:demo:cms:ucms:sample_php_page_style_css|4.3.1. Файл style.css]]
  {{:icons:16:arrow-transition.png?|}}</wrap>
 </note>