Создание приложения на основе базы данных на языке PHP

Урок 8: усовершенствование внешнего облика приложения с использованием технологии CSS

Содержание учебного курса.

Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0

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

Скрытие форм ввода, когда они не используются, с помощью реализации функций JavaScript
Определение стилей и позиционирование элементов страницы с помощью каскадной таблицы стилей (CSS)
Реализация проекта приложения с помощью элементов DIV.

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

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

Для пользователей MySQL: перейдите по этой ссылке для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.

Для пользователей баз данных Oracle: перейдите по этой для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока.

Скрытие форм

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

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

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

Функции JavaScript

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

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

Добавьте атрибут style к форме "logon":
```
<form name="logon" action="index.php" method="POST" 
        style="visibility:<?php if ($logonSuccess) echo "hidden";
        else echo "visible";?>">
```
Атрибут style определяет, является форма скрытой или нет. Блок <?php ? > используется для поддержания отображения формы до тех пор, пока не будет выполнен успешный ввод данных пользователем.
Введите следующий код перед кодом формы ввода "logon":
```
 <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
```
Код реализует кнопку с текстом "My Wishlist >>". Кнопка отображается вместо формы "logon". При нажатии кнопки вызывается функция "showHideLogonForm".

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

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

Вставьте следующий код над формой wishList:

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

Удалите следующий код из формы, так как он уже помещен в кнопку:
```
Show wishlist of: 
```

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

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

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

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

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

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

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

Откройте файл "wishlist.css". Файл уже содержит "корневой" класс, который можно удалить. Для получения копии файла wishlist.css необходимо загрузить полную версию этого учебного курса поэтой ссылке. Код интуитивно понятен и содержит следующее:

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

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

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

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

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

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

 <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>, в начале не нужно указывать точки.

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

<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) см. http://www.htmlpedia.org/wiki/List_of_CSS_Properties

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

Для пользователей MySQL: перейдите по этой ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

Для пользователей баз данных Oracle: перейдите по этой ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS.

PDO: благодарим Горана Мисковича (Goran Miskovic), любезно предоставившего версию PDO полного учебного курса, доступную по этой ссылке. В этом проекте можно переключаться между базами данных Oracle XE и MySQL, просто изменяя параметр DSN. Проект включает все необходимые сценарии SQL и задокументирован в коде. Однако следует учесть, что расширение PDO_OCI является экспериментальным.

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

Что дальше?

<<Предыдущий урок

Следующий урок >>

Назад на главную страницу руководства

Отправить отзыв по этому учебному курсу

Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с PHP IDE NetBeans присоединяйтесь к списку рассылки .

Возврат к учебной карте PHP