// 
//     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


1. link:wish-list-tutorial-main-page.html[+Создание приложения на основе базы данных с помощью языка PHP – главная страница+]
2. 
Создание базы данных

1. link:wish-list-lesson1.html[+Создание базы данных MySQL+]
2. link:wish-list-oracle-lesson1.html[+Создание таблиц базы данных Oracle+]
3. 
link:wish-list-lesson2.html[+Проектирование приложения. Чтение из базы данных+]

4. link:wish-list-lesson3.html[+Создание нового пользователя приложения+]
5. link:wish-list-lesson4.html[+Усовершенствование кода+]
6. link:wish-list-lesson5.html[+Добавление функций безопасности. Реализация входа пользователя в приложение+]
7. link:wish-list-lesson6.html[+Добавление нового пожелания в базу данных+]
8. link:wish-list-lesson7.html[+Обновление и удаление записей в базе данных+]
9. 
*=>Усовершенствование внешнего вида приложения с использованием технологии CSS*

10. link:wish-list-lesson9.html[+Развертывание приложения на удаленном веб-сервере+]

image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"]

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


Текущий документ является частью краткого учебного курса "Создание приложения 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. <<javaScriptFunctions,Создайте две функции JavaScript внутри тегов <script></script>>>.
3. <<showHideLogonInIndex,Внесите некоторые незначительные изменения в файл "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 ? > используется для поддержания отображения формы до тех пор, пока не будет выполнен успешный ввод данных пользователем.
2. Введите следующий код перед кодом формы ввода "logon":

[source,java]
----

 <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
----
Код реализует кнопку с текстом "My Wishlist >>". Кнопка отображается вместо формы "logon". При нажатии кнопки вызывается функция "showHideLogonForm".
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>
----
4. Вставьте следующий код над формой wishList:

[source,java]
----

<input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
----
5. Удалите следующий код из формы, так как он уже помещен в кнопку:

[source,java]
----

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,java]
----

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

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

[source,php]
----

<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"><?phpif (!$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+]