netbeans.apache.org/src/content/kb/docs/php/wish-list-lesson8_ru.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = Создание приложения на основе базы данных на языке PHP
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Создание приложения на основе базы данных на языке PHP - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, Создание приложения на основе базы данных на языке PHP

 = Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS


 В этом уроке вы научитесь выполнению следующих действий:


 Текущий документ является частью краткого учебного курса "Создание приложения CRUD в IDE NetBeans для PHP".


 == Исходный код приложения из предыдущего урока

 Для пользователей MySQL: перейдите по link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+этой ссылке+] для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.

 Для пользователей баз данных Oracle: перейдите по link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+этой+] для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.


 == Скрытие форм

 Теперь на главной странице  `index.php`  приложения отображаются полные формы "logon" и "showWishList". Для усовершенствования внешнего вида приложения можно скрыть формы и заменить их кнопками. При нажатии на кнопку соответствующая скрытая форма раскрывается.

 Для реализации этого выполните следующие действия:

 1. Добавьте блок <script></script> к файлу  `index.php`  сразу перед закрывающим тегом </body>.
 2. <<_hiding_forms,Создайте две функции JavaScript внутри тегов <script></script>>>.
 3. <<_implementing_the_design_using_html_divs,Внесите некоторые незначительные изменения в файл "index.php".>>


 === Функции JavaScript

 Функции JavaScript не требуют входных параметров и не возвращают результат. Следующий код проверяет состояние видимости соответствующей формы и изменяет его на противоположное. При этом также изменяется текст на кнопке. Для выполнения этих изменений введите следующий код внутри тегов <script></script>:


 [source,xml]
 ----

 <script>
 function showHideLogonForm() {
     if (document.all.logon.style.visibility == "visible"){
         document.all.logon.style.visibility = "hidden";
         document.all.myWishList.value = "My Wishlist >>";
     }
     else {
         document.all.logon.style.visibility = "visible";
         document.all.myWishList.value = "<< My Wishlist";
     }
 }
 function showHideShowWishListForm() {
     if (document.all.wishList.style.visibility == "visible") {
         document.all.wishList.style.visibility = "hidden";
         document.all.showWishList.value = "Show Wish List of >>";
     }
     else {
         document.all.wishList.style.visibility = "visible";
         document.all.showWishList.value = "<< Show Wish List of";
     }
 }
 </script>
 ----


 === Обновление  `index.php`

 1. Добавьте атрибут  `style`  к форме "logon":

 [source,php]
 ----

 <form name="logon" action="index.php" method="POST"
         style="visibility:<?php if ($logonSuccess) echo "hidden";
         else echo "visible";?>">
 ----
 Атрибут  `style`  определяет, является форма скрытой или нет. Блок <?php ? > используется для поддержания отображения формы до тех пор, пока не будет выполнен успешный ввод данных пользователем.

 [start=2]
 . Введите следующий код перед кодом формы ввода "logon":

 [source,php]
 ----

 <input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
 ----
 Код реализует кнопку с текстом "My Wishlist >>". Кнопка отображается вместо формы "logon". При нажатии кнопки вызывается функция "showHideLogonForm".

 [start=3]
 . Добавьте атрибут  `style`  к форме "logon":

 [source,xml]
 ----

 <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
 Show wish list of: <input type="text" name="user"/>
             <input type="submit" value="Go" />
 </form>
 ----

 [start=4]
 . Вставьте следующий код над формой wishList:

 [source,xml]
 ----

 <input type="submit" name="showWishList" value="Show Wish List of" onclick="javascript:showHideShowWishListForm()"/>
 ----

 [start=5]
 . Удалите следующий код из формы, так как он уже помещен в кнопку:

 [source,php]
 ----

 Show wishlist of:
 ----


 == Определение стилей с помощью каскадной таблицы стилей (CSS)

 В настоящее время элементы управления в приложении "слипаются" и размещены в верхнем левом углу экрана. Для усовершенствования внешнего вида страниц укажите размер, положение, цвет, шрифт и другие параметры элементов управления путем определения стилей и назначения этих стилей определенным элементам управления. Стили определяются в отдельном файле каскадной таблицы стилей (CSS).

 Все рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Приведенные ниже определения стиля являются только примером усовершенствования внешнего вида приложения. Параметры настройки применимы для разрешения экрана 1024x768 пикселей и выше.


 === Создание файла CSS

 1. Щелкните правой кнопкой мыши узел "Source Files" и выберите в контекстном меню "New > Cascading Style Sheet".
 2. На панели каскадной таблицы стилей в поле "File Name" введите "wishlist". Нажмите кнопку "Завершить".

 image::images/newCascadingStyleSheetFile.png[]

 В дереве проекта отображается новый файл  `wishlist.css` .


 === Определение стилей CSS

 Откройте файл "wishlist.css". Файл уже содержит "корневой" класс, который можно удалить. Для получения копии файла  `wishlist.css`  необходимо загрузить полную версию этого учебного курса поlink:https://netbeans.org/files/documents/4/1934/lesson8.zip[+этой+] ссылке. Код интуитивно понятен и содержит следующее:

 * Два стиля: "body" и "input", которые автоматически применяются внутри любых тегов  `<body></body>`  или  `<input/>` .
 * Классы CSS, которые применяются при их явном указании. Имена классов содержат точки в начале, например,  `.createWishList` . Некоторые классы используются многократно, например, класс ".error" применяется ко всем сообщениям об ошибках в приложении. Другие классы используются только однажды, например, ".showWishList", ".logon".


 == Реализация дизайна с помощью отделений HTML

 Все рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Равно как и определения стиля выше, они являются только примером усовершенствования внешнего вида приложения.

 На примере ниже показано, как можно улучшить внешний вид страницы  `index.php` .

 1. Для разрешения использования классов CSS, которые были определены, введите следующий код в блок  `<head></head>` :

 [source,html]
 ----

 <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
 ----
 Стили "body" и "input" автоматически применяются внутри соответствующих тегов, поэтому их необходимо указать явно.

 [start=2]
 . Для применения любого другого стиля (класса) к области заключите код, который реализует область, в теги  `<div class=""></div>` :

 [source,html]
 ----

 <div class="showWishList">
     <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>

     <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
        <input type="text" name="user"/>
        <input type="submit" value="Go" />
     </form>
 </div>
 ----

 *Примечание.* Если класс указывается в теге <div>, в начале не нужно указывать точки.


 [start=3]
 . Можно использовать вложенные теги <div>:

 [source,html]
 ----

 <div class="logon">
     <input type="submit" name="myWishList" value="My Wishlist" onclick="javascript:showHideLogonForm()"/>
     <form name="logon" action="index.php" method="POST"
               style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
         Username: <input type="text" name="user"/>
         Password:  <input type="password" name="userpassword"/><br/>
         <div class="error">
           <?php
              if (!$logonSuccess) echo "Invalid name and/or password";
            ?>
         </div>
         <input type="submit" value="Edit My Wish List"/>
     </form>
 </div>
 ----
 Класс "logon" применяется ко всей форме, а класс "error" применяется к сообщению об ошибке внутри формы.

 Для получения дополнительных сведений по использованию каскадных таблиц стилей (CSS) см. link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]


 == Исходный код приложения на момент завершения текущего урока

 Для пользователей MySQL: перейдите по link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+этой+] ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

 Для пользователей баз данных Oracle: перейдите по link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+этой+] ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

 PDO: благодарим Горана Мисковича (Goran Miskovic), любезно предоставившего версию PDO полного учебного курса, доступную по link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+этой+] ссылке. В этом проекте можно переключаться между базами данных Oracle XE и MySQL, просто изменяя параметр DSN. Проект включает все необходимые сценарии SQL и задокументирован в коде. Однако следует учесть, что расширение PDO_OCI является экспериментальным.

 Команда IDE NetBeans выражает благодарность Озану Хазеру (Ozan Hazer) за его вклад, а именно за CSS и усовершенствование кода в готовом образце.


 == Что дальше?

 link:wish-list-lesson7.html[+<<Предыдущий урок+]

 link:wish-list-lesson9.html[+Следующий урок >>+]

 link:wish-list-tutorial-main-page.html[+Назад на главную страницу руководства+]


 link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+Отправить отзыв по этому учебному курсу+]


 Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с PHP IDE NetBeans link:../../../community/lists/top.html[+присоединяйтесь к списку рассылки users@php.netbeans.org+].

 link:../../trails/php.html[+Возврат к учебной карте PHP+]
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= Создание приложения на основе базы данных на языке PHP
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Создание приложения на основе базы данных на языке PHP - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, Создание приложения на основе базы данных на языке PHP

	= Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS


	В этом уроке вы научитесь выполнению следующих действий:


	Текущий документ является частью краткого учебного курса "Создание приложения CRUD в IDE NetBeans для PHP".


	== Исходный код приложения из предыдущего урока

	Для пользователей MySQL: перейдите по link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+этой ссылке+] для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.

	Для пользователей баз данных Oracle: перейдите по link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+этой+] для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.


	== Скрытие форм

	Теперь на главной странице `index.php` приложения отображаются полные формы "logon" и "showWishList". Для усовершенствования внешнего вида приложения можно скрыть формы и заменить их кнопками. При нажатии на кнопку соответствующая скрытая форма раскрывается.

	Для реализации этого выполните следующие действия:

	1. Добавьте блок <script></script> к файлу `index.php` сразу перед закрывающим тегом </body>.
	2. <<_hiding_forms,Создайте две функции JavaScript внутри тегов <script></script>>>.
	3. <<_implementing_the_design_using_html_divs,Внесите некоторые незначительные изменения в файл "index.php".>>


	=== Функции JavaScript

	Функции JavaScript не требуют входных параметров и не возвращают результат. Следующий код проверяет состояние видимости соответствующей формы и изменяет его на противоположное. При этом также изменяется текст на кнопке. Для выполнения этих изменений введите следующий код внутри тегов <script></script>:


	[source,xml]
	----

	<script>
	function showHideLogonForm() {
	if (document.all.logon.style.visibility == "visible"){
	document.all.logon.style.visibility = "hidden";
	document.all.myWishList.value = "My Wishlist >>";
	}
	else {
	document.all.logon.style.visibility = "visible";
	document.all.myWishList.value = "<< My Wishlist";
	}
	}
	function showHideShowWishListForm() {
	if (document.all.wishList.style.visibility == "visible") {
	document.all.wishList.style.visibility = "hidden";
	document.all.showWishList.value = "Show Wish List of >>";
	}
	else {
	document.all.wishList.style.visibility = "visible";
	document.all.showWishList.value = "<< Show Wish List of";
	}
	}
	</script>
	----


	=== Обновление `index.php`

	1. Добавьте атрибут `style` к форме "logon":

	[source,php]
	----

	<form name="logon" action="index.php" method="POST"
	style="visibility:<?php if ($logonSuccess) echo "hidden";
	else echo "visible";?>">
	----
	Атрибут `style` определяет, является форма скрытой или нет. Блок <?php ? > используется для поддержания отображения формы до тех пор, пока не будет выполнен успешный ввод данных пользователем.

	[start=2]
	. Введите следующий код перед кодом формы ввода "logon":

	[source,php]
	----

	<input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
	----
	Код реализует кнопку с текстом "My Wishlist >>". Кнопка отображается вместо формы "logon". При нажатии кнопки вызывается функция "showHideLogonForm".

	[start=3]
	. Добавьте атрибут `style` к форме "logon":

	[source,xml]
	----

	<form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
	Show wish list of: <input type="text" name="user"/>
	<input type="submit" value="Go" />
	</form>
	----

	[start=4]
	. Вставьте следующий код над формой wishList:

	[source,xml]
	----

	<input type="submit" name="showWishList" value="Show Wish List of" onclick="javascript:showHideShowWishListForm()"/>
	----

	[start=5]
	. Удалите следующий код из формы, так как он уже помещен в кнопку:

	[source,php]
	----

	Show wishlist of:
	----


	== Определение стилей с помощью каскадной таблицы стилей (CSS)

	В настоящее время элементы управления в приложении "слипаются" и размещены в верхнем левом углу экрана. Для усовершенствования внешнего вида страниц укажите размер, положение, цвет, шрифт и другие параметры элементов управления путем определения стилей и назначения этих стилей определенным элементам управления. Стили определяются в отдельном файле каскадной таблицы стилей (CSS).

	Все рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Приведенные ниже определения стиля являются только примером усовершенствования внешнего вида приложения. Параметры настройки применимы для разрешения экрана 1024x768 пикселей и выше.


	=== Создание файла CSS

	1. Щелкните правой кнопкой мыши узел "Source Files" и выберите в контекстном меню "New > Cascading Style Sheet".
	2. На панели каскадной таблицы стилей в поле "File Name" введите "wishlist". Нажмите кнопку "Завершить".

	image::images/newCascadingStyleSheetFile.png[]

	В дереве проекта отображается новый файл `wishlist.css` .


	=== Определение стилей CSS

	Откройте файл "wishlist.css". Файл уже содержит "корневой" класс, который можно удалить. Для получения копии файла `wishlist.css` необходимо загрузить полную версию этого учебного курса поlink:https://netbeans.org/files/documents/4/1934/lesson8.zip[+этой+] ссылке. Код интуитивно понятен и содержит следующее:

	* Два стиля: "body" и "input", которые автоматически применяются внутри любых тегов `<body></body>` или `<input/>` .
	* Классы CSS, которые применяются при их явном указании. Имена классов содержат точки в начале, например, `.createWishList` . Некоторые классы используются многократно, например, класс ".error" применяется ко всем сообщениям об ошибках в приложении. Другие классы используются только однажды, например, ".showWishList", ".logon".


	== Реализация дизайна с помощью отделений HTML

	Все рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Равно как и определения стиля выше, они являются только примером усовершенствования внешнего вида приложения.

	На примере ниже показано, как можно улучшить внешний вид страницы `index.php` .

	1. Для разрешения использования классов CSS, которые были определены, введите следующий код в блок `<head></head>` :

	[source,html]
	----

	<link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
	----
	Стили "body" и "input" автоматически применяются внутри соответствующих тегов, поэтому их необходимо указать явно.

	[start=2]
	. Для применения любого другого стиля (класса) к области заключите код, который реализует область, в теги `<div class=""></div>` :

	[source,html]
	----

	<div class="showWishList">
	<input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>

	<form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
	<input type="text" name="user"/>
	<input type="submit" value="Go" />
	</form>
	</div>
	----

	Примечание. Если класс указывается в теге <div>, в начале не нужно указывать точки.


	[start=3]
	. Можно использовать вложенные теги <div>:

	[source,html]
	----

	<div class="logon">
	<input type="submit" name="myWishList" value="My Wishlist" onclick="javascript:showHideLogonForm()"/>
	<form name="logon" action="index.php" method="POST"
	style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
	Username: <input type="text" name="user"/>
	Password: <input type="password" name="userpassword"/><br/>
	<div class="error">
	<?php
	if (!$logonSuccess) echo "Invalid name and/or password";
	?>
	</div>
	<input type="submit" value="Edit My Wish List"/>
	</form>
	</div>
	----
	Класс "logon" применяется ко всей форме, а класс "error" применяется к сообщению об ошибке внутри формы.

	Для получения дополнительных сведений по использованию каскадных таблиц стилей (CSS) см. link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]


	== Исходный код приложения на момент завершения текущего урока

	Для пользователей MySQL: перейдите по link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+этой+] ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

	Для пользователей баз данных Oracle: перейдите по link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+этой+] ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

	PDO: благодарим Горана Мисковича (Goran Miskovic), любезно предоставившего версию PDO полного учебного курса, доступную по link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+этой+] ссылке. В этом проекте можно переключаться между базами данных Oracle XE и MySQL, просто изменяя параметр DSN. Проект включает все необходимые сценарии SQL и задокументирован в коде. Однако следует учесть, что расширение PDO_OCI является экспериментальным.

	Команда IDE NetBeans выражает благодарность Озану Хазеру (Ozan Hazer) за его вклад, а именно за CSS и усовершенствование кода в готовом образце.


	== Что дальше?

	link:wish-list-lesson7.html[+<<Предыдущий урок+]

	link:wish-list-lesson9.html[+Следующий урок >>+]

	link:wish-list-tutorial-main-page.html[+Назад на главную страницу руководства+]


	link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+Отправить отзыв по этому учебному курсу+]


	Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с PHP IDE NetBeans link:../../../community/lists/top.html[+присоединяйтесь к списку рассылки users@php.netbeans.org+].

	link:../../trails/php.html[+Возврат к учебной карте PHP+]