Создание простого веб-приложения с использованием базы данных MySQL

В этом документе описана процедура создания простого веб-приложения, которое подключается к серверу базы данных MySQL. Здесь также рассмотрены основные идеи и технологии веб-разработки, такие какJavaServer Pages (JSP), библиотека стандартных тегов JavaServer Pages (JSTL), интерфейс API связи с базами данных Java (JDBC) и двухуровневая архитектура между клиентом и сервером. Этот учебный курс разработан для начинающих разработчиков, обладающих базовыми знаниями в области веб-разработок и желающих применить свои знания к базе данных MySQL.

MySQL является популярной системой управления базами данных с открытым кодом, которая обычно используется в веб-приложениях благодаря своей скорости, гибкости и надежности. MySQL использует SQL (язык структурированных запросов) для доступа к данным в базе данных и их обработки.

Этот учебный курс является продолжением учебного курса Подключение к базе данных MySQL и в нем предполагается, что уже создана база данных MySQL с именем MyNewDatabase, для которой зарегистрировано подключение в IDE NetBeans. Табличные данные, используемые в этом учебном курсе, содержатся в ifpwafcad.sql и также необходимы для работы с этим учебным курсом. Этот файл SQL создает две таблицы Subject и Counselor и затем заполняет их данными для примера. При необходимости сохраните этот файл на компьютер, затем откройте его в IDE NetBeans и запустите его в базе данных MySQL с именем MyNewDatabase.

Содержание

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

Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.

Программное обеспечение или материал Требуемая версия
IDE NetBeans 7.1, 7.2, 7.3, 7.4, комплект Java EE
Комплект для разработчика на языке Java (JDK) версия 6 или 7
Сервер базы данных MySQL 5.x
Драйвер JDBC MySQL Connector/J версия 5.x
GlassFish Server Open Source Edition 3.1.2.2 3.x или 4.x

Примечания:

  • Комплект загрузки Java среды IDE NetBeans позволяет пользователям установить сервер GlassFish. Для работы с данным учебным курсом требуется сервер GlassFish.
  • MySQL Connector/J JDBC Driver, необходимый для взаимодействия между платформами и протоколом баз данных MySQL, включен в IDE NetBeans.
  • Если необходимо сравнить проект с работающим решением, можно загрузить демонстрационное приложение.

Планирование структуры

С помощью двухуровневой архитектуры, в которой клиент взаимодействует с сервером напрямую, можно создать простое веб-приложение. В рамках данного учебного курса веб-приложение Java взаимодействует напрямую с базой данных MySQL с использованием API связи с базами данных Java. В сущности, именно драйвер MySQL Connector/J JDBC обеспечивает обмен данными между кодом Java, распознанным сервером приложения (GlassFish), и любым содержимым на SQL, языке, понятном для сервера базы данных (MySQL).

Приложение, создаваемое в этом учебном курсе, предполагает создание двух страниц JSP. На каждой такой странице с помощью HTML и CSS реализован простой интерфейс, и применяется технология JSTL для выполнения логики, напрямую запрашивающей базу данных с вставкой извлеченных данных на двух страницах. В базе данных MySQL MyNewDatabase содержатся две таблицы базы данных Subject и Counselor, которые были созданы при работе с учебным курсом Подключение базы данных MySQL. Рассмотрим следующий двухуровневый сценарий.

Диаграмма, изображающая структуру двухуровневого веб-приложения

Страница приветствия index.jsp представляется пользователю с помощью простой формы HTML. При запросе браузеромindex.jsp код JSTL на странице инициирует запрос в MyNewDatabase. Выполняется извлечение данных из таблицы Subject со вставкой их на страницу перед ее передачей в браузер. При передаче данных о выборе пользователя в форме HTML на странице приветствия инициируется запрос страницы ответов (response.jsp). И снова код JSTL на странице инициирует запрос в MyNewDatabase. На этот раз данные извлекаются из обеих таблиц - Subject и Counselor. После чего выполняется их вставка на страницу, что позволяет пользователю просматривать данные в зависимости от вариантов выбора при возврате страницы в браузер.

Для реализации описанного выше сценария необходимо разработать простое приложение для организации IFPWAFCAD Международной ассоциации по консультированию и развитию для бывших профессиональных борцов.

index.jsp

Файл index.jsp отображается в браузере

response.jsp

Файл response.jsp отображается в браузере

Создание нового проекта

Сначала необходимо создать новый веб-проект в среде IDE:

  1. Выберите "Файл > Новый проект" (CTRL+SHIFT+N; &#8984+SHIFT+N в Mac ОС) в главном меню. Выберите категорию "Java Web", а затем выберите "Веб-приложение". Нажмите кнопку "Далее".
    Мастер создания проектов

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

  2. В поле "Имя проекта" введите "IFPWAFCAD". Также укажите местоположение проекта на компьютере. По умолчанию проекты в среде IDE помещаются в папку NetBeansProjects в домашнем каталоге. Нажмите кнопку "Далее".
  3. В панели "Сервер и параметры" укажите сервер GlassFish в качестве сервера, на котором будет запускаться приложение.

    Примечание.Сервер GlassFish отображается в раскрывающемся списке 'Сервер', если установлена версия Java IDE NetBeans. Поскольку сервер GlassFish включен в загрузку, он регистрируется в среде IDE автоматически. Для использования в проекте другого сервера нажмите кнопку "Добавить" рядом с полем с раскрывающимся списком "Сервер" и зарегистрируйте другой сервер в среде IDE. Работа с другими серверами, помимо GlassFish в рамках данного учебного курса не рассматривается.

  4. В поле "Версия Java EE" выберите Java EE 5.
    Мастер создания веб-приложений - сервер и настройки

    Для веб-проектов Java EE 6 и Java EE 7 использование дескриптора развертывания web.xml не требуется. Шаблон проекта NetBeans не содержит файл web.xml в проектах Java EE 6 и Java EE 7. Однако в данном учебном курсе рассматривается процесс объявления источника данных в дескрипторе развертывания. Функции, характерные только для Java EE 6 или Java EE 7, не требуются, поэтому в качестве версии проекта можно указать Java EE 5.

    Примечание. Точно так же можно указать в качестве версии проекта Java EE 6 или Java EE 7, а затем создать дескриптор развертывания web.xml. В мастере создания файла выберите категорию "Web", а затем выберите "Стандартный дескриптор развертывания".

  5. Нажмите кнопку "Завершить". Создается шаблон проекта для всего приложения и в редакторе открывается пустая страница JSP (index.jsp). Файл index.jspслужит в приложении страницей приветствия.

Подготовка веб-интерфейса

Начните с подготовки страницы приветствия (index.jsp) и страницы ответов (response.jsp). На странице приветствия реализована форма HTML для сбора пользовательских данных. На обеих страницах для просмотра структурированных данных используется таблица HTML. В этом разделе также рассматривается процесс создания таблицы стилей, которая расширяет внешний вид обеих страниц.

Настройка страницы приветствия

Убедитесь, что страница index.jsp открыта в редакторе. Если файл еще не открыт, дважды щелкните index.jsp под узлом "Веб-страницы" проекта IFPWAFCAD в окне "Проекты".

  1. В редакторе измените текст между тегами <title> на Домашняя страница IFPWAFCAD.
  2. Измените текст между тегами <h1> на Добро пожаловать в IFPWAFCAD, Международную ассоциацию по консультированию и развитию для бывших профессиональных борцов!
  3. Откройте палитру среды IDE, выбрав в главном меню "Окно" > "Палитра" (CTRL+SHIFT+8; &#8984+SHIFT+8 в ОС Mac). Наведите курсор на значок "Таблица" в категории "HTML" и обратите внимание на то, что отображается фрагмент кода для элемента по умолчанию.
    На палитре отображается фрагмент кода при подведении курсора к элементу
    Палитру можно настроить в соответствии с существующими требованиями - щелкните правой кнопкой мыши палитру и выберите 'Показать крупные значки' и 'Скрыть имена элементов', чтобы палитра выглядела как на рисунке выше.
  4. Установите курсор сразу же после тегов <h1>. (Именно в этом месте будет внедрена новая таблица HTML). Далее в окне "Палитра" дважды щелкните значок "Таблица".
  5. В появившемся диалоговом окне "Вставка таблицы" укажите следующие значения и затем нажмите кнопку "ОК":

    • Рядов: 2
    • Столбцов: 1
    • Размер границы: 0
    Код таблицы HTML создан и добавлен на страницу.
  6. Добавьте следующее содержимое в заголовок таблицы и ячейку первой строки таблицы (новое содержимое выделено полужирным шрифтом):
    <table border="0">
        <thead>
            <tr>
                <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>To view the contact details of an IFPWAFCAD certified former
                    professional wrestler in your area, select a subject below:</td>
            </tr>
  7. Для нижней строки таблицы вставьте форму HTML. Для этого поместите курсор между второй парой тегов <td> и дважды щелкните значок формы HTML ( Значок формы HTML ) на палитре. В диалоговом окне "Вставка формы" введите response.jsp в текстовом поле "Действие" и нажмите кнопку "ОК".
    Диалоговое окно 'Вставить форму'
  8. Между тегами <form> введите следующее содержимое (новое содержимое выделено полужирным шрифтом):
    <tr>
        <td>
            <form action="response.jsp">
                <strong>Select a subject:</strong>
            </form>
        </td>
    </tr>
  9. Нажмите клавишу Enter, чтобы добавить пустую строку после добавленного содержимого, затем дважды щелкните "Список" в палитре, чтобы открыть диалоговое окно "Вставить список".
  10. В диалоговом окне "Вставить список" ведите subject_id для текстового поля "Имя" и нажмите "OK". Обратите внимание на то, что к форме добавляется фрагмент кода для раскрывающегося списка.

    Количество параметров для раскрывающегося списка не имеет значения. Позже в этом учебном курсе будет показано добавление тегов JSTL для динамического создания на основе данных, полученных из таблицы базы данных "Subject".

  11. Добавьте элемент кнопки 'Отправить' ( Значок кнопки 'Отправить' ) в точку, расположенную непосредственно после только что добавленного раскрывающегося списка. Для этого можно использовать окно "Палитра" или вызвать дополнение кода в редакторе, как показано в предыдущем шаге. В диалоговом окне "Вставка кнопки" в текстовых полях "Подпись" и "Имя" введите Отправить и нажмите кнопку ОК.
  12. Для форматирования кода щелкните правой кнопкой мыши в редакторе и выберите 'Формат' (Alt-Shift-F; Ctrl-Shift-F в Mac). Код автоматически форматируется и должен теперь выглядеть следующим образом:
    <body>
        <h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former
            Professional Wrestlers' Association for Counseling and Development!
        </h2>
    
        <table border="0">
            <thead>
                <tr>
                    <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>To view the contact details of an IFPWAFCAD certified former
                        professional wrestler in your area, select a subject below:</td>
                </tr>
                <tr>
                    <td>
                        <form action="response.jsp">
                            <strong>Select a subject:</strong>
                            <select name="subject_id">
                                <option></option>
                            </select>
                            <input type="submit" value="submit" name="submit" />
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

    Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите 'Запустить файл' (Shift-F6; Fn-Shift-F6 в Mac). После этого страница JSP будет автоматически скомпилирована и развернута на сервере. Открывается браузер по умолчанию, и в нем выводится страница из местоположения, где она развернута.

    Файл index.jsp отображается в браузере

Создание страницы ответов

Для подготовки интерфейса для страницы response.jsp сначала необходимо создать файл в проекте. Обратите внимание на то, что большая часть содержимого, отображаемого на странице, создана динамически с помощью технологии JSP. Поэтому в следующих шагах будет необходимо добавить метки-заполнители, которые позже будут заменены кодом JSP.

  1. Щелкните правой кнопкой мыши узел проекта "IFPWAFCAD" в окне "Проекты" и выберите "Создать > JSP". Откроется диалоговое окно "Новый файл JSP".
  2. В поле "Имя файла JSP" введите response. Обратите внимание на то, что в настоящий момент для поля "Расположение" выбран каталог "Веб-страницы", это означает, что файл будет создан в каталоге проекта web. Это то же местоположение, что и для страницы приветствия index.jsp.
  3. Примите остальные значения по умолчанию и нажмите кнопку "Готово". В редакторе выполняется создание и открытие шаблона новой страницы response.jsp. Новый узел JSP также отображается в каталоге "Веб-страницы" в окне "Проекты".
    Узел response.jsp отображается в окне 'Проекты'
  4. В редакторе измените заголовок на IFPWAFCAD - {местозаполнитель}
  5. Удалите строку <h1>Hello World!</h1> строка между тегами <body>. Скопируйте и вставьте в тело страницы следующую таблицу HTML:
    <table border="0">
        <thead>
            <tr>
                <th colspan="2">{placeholder}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Description: </strong></td>
                <td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td>
            </tr>
            <tr>
                <td><strong>Counselor: </strong></td>
                <td>{placeholder}
                    <br>
                    <span style="font-size:smaller; font-style:italic;">
                    member since: {placeholder}</span>
                </td>
            </tr>
            <tr>
                <td><strong>Contact Details: </strong></td>
                <td><strong>email: </strong>
                    <a href="mailto:{placeholder}">{placeholder}</a>
                    <br><strong>phone: </strong>{placeholder}
                </td>
            </tr>
        </tbody>
    </table>

    Для просмотра этой страницы в браузере щелкните правой кнопкой мыши в редакторе и выберите 'Запустить файл' (Shift-F6; Fn-Shift-F6 в Mac). Выполняется компиляция и развертывание страницы на сервере GlassFish с последующим открытием в браузере по умолчанию.

    Файл response.jsp отображается в браузере

Создание таблицы стилей

Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы HTML на страницах index.jsp и response.jsp.

  1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( Кнопка 'Создать файл' ) на главной панели инструментов IDE. Выберите категорию "Web", а затем выберите "Каскадная таблица стилей" и нажмите кнопку "Далее".
  2. Введите style в поле "Имя файла CSS" и нажмите кнопку "Готово". Среда IDE создает пустой файл CSS и располагает его в том же местоположении проекта, что и index.jsp и response.jsp. Обратите внимание на то, что узел для style.css отображается теперь внутри проекта в окне "Проекты", а файл открывается в редакторе.
  3. В редакторе добавьте следующее содержимое к файлу style.css:
    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: smaller;
        padding: 50px;
        color: #555;
    }
    
    h1 {
        text-align: left;
        letter-spacing: 6px;
        font-size: 1.4em;
        color: #be7429;
        font-weight: normal;
        width: 450px;
    }
    
    table {
        width: 580px;
        padding: 10px;
        background-color: #c5e7e0;
    }
    
    th {
        text-align: left;
        border-bottom: 1px solid;
    }
    
    td {
        padding: 10px;
    }
    
    a:link {
       color: #be7429;
       font-weight: normal;
       text-decoration: none;
    }
    
    a:link:hover {
       color: #be7429;
       font-weight: normal;
       text-decoration: underline;
    }
  4. Подключите таблицу стилей к index.jsp и response.jsp. На обеих страницах добавьте следующую строку между тегами <head>:
    <link rel="stylesheet" type="text/css" href="style.css">
    Для быстрого перехода между открытыми в редакторе файлами нажмите CTRL+TAB, а затем выберите требуемый файл.

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

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

После подготовки источника данных и пула подключений для сервера необходимо определить в приложении необходимость использования источника данных. Как правило, для этого создается запись в дескрипторе развертывания приложения web.xml. Наконец, необходимо проверить доступность для сервера драйвера базы данных (JDBC MySQL Connector/J).


  1. Настройка источника данных JDBC и пула подключений
  2. Обращение к источнику данных из приложения
  3. Добавление файла JAR драйвера базы данных к серверу

Настройка источника данных JDBC и пула подключений

Сервер GlassFish Server Open Source Edition содержит библиотеку формирования пула подключений к базе данных (DBCP) с функцией формирования пула подключений в прозрачном для разработчика режиме. Для этого необходимо настроить для сервера источник данных JDBC (связь с базами данных Java) для использования в приложении при формировании пула подключений.

Дополнительные сведения о технологии JDBC приведены в документе Учебные курсы Java: основы JDBC.

Источник данных можно настроить непосредственно в консоли администратора сервера GlassFish или объявить необходимые для приложения ресурсы в файле glassfish-resources.xml, как описано ниже. При развертывании приложения сервер считывает объявления ресурсов и создает требуемые ресурсы.

Далее рассматривается процесс объявления пула подключений и источника данных, использующего этот пул. Оба действия можно выполнить с помощью мастера ресурсов JDBC NetBeans.

  1. Откройте мастер создания файлов, нажав кнопку 'Создать файл' ( Кнопка 'Создать файл' ) на главной панели инструментов IDE. Выберите категорию сервера GlassFish, затем выберите "Ресурс JDBC" и нажмите кнопку "Далее".
  2. В шаге 2, в области "Общие атрибуты" выберите параметр "Создать новый пул соединений JDBC", а затем в текстовом поле "Имя JNDI" введите jdbc/IFPWAFCAD.
    Мастер ресурсов JDBC. Шаг 2. Общие атрибуты
    Источник данных JDBC использует JNDI. В интерфейсе API JNDI предоставляется единый для всех приложений способ поиска источников данных и получения доступа к ним. Дополнительные сведения приведены в Учебном курсе по JND.
  3. Дополнительно можно добавить описание источника данных. Например, укажите Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD.
  4. Нажмите кнопку "Далее". После этого еще раз нажмите кнопку "Далее" и пропустите шаг 3, "Дополнительные свойства".
  5. В шаге 4 укажите имя пула подключений JDBC IfpwafcadPool. Убедитесь, что выбран параметр "Извлечь из существующего соединения" и выберите jdbc:mysql://localhost:3306/MyNewDatabase из раскрывающегося списка. Нажмите кнопку "Далее".
    Мастер ресурсов JDBC. Шаг 4. Выбор подключения к базе данных

    Примечание. Мастер обнаруживает все соединения с базой данных, настроенные в IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных MyNewDatabase. Можно проверить, какие подключения были созданы, открыв окно 'Службы' (Ctrl-5; ⌘-5 в Mac) и выполнив поиск узлов подключения ( Значок узла подключения к базе данных ) в категории 'Базы данных'.
  6. На этапе 5 выберите файл javax.sql.ConnectionPoolDataSource в списке "Тип ресурса".

    Обратите внимание на то, что среда IDE извлекает информацию из подключенной базы данных, указанной на предыдущем этапе, и задает свойства "имя-значение" для нового пула подключений.

    Мастер ресурсов JDBC. Шаг 5. Добавление свойств пула подключений
  7. Нажмите кнопку "Завершить". Мастер ресурсов создает файл glassfish-resources.xml, который содержит записи для источника данных и указанный пул подключения.

В окне "Проекты" можно открыть glassfish-resources.xml, созданный в дереве узла "Серверные ресурсы". Обратите внимание, что в тегах <resources> источник данных и пул соединений объявлены как содержащие ранее указанные значения.

Для подтверждения регистрации нового источника данных и пула подключения на сервере GlassFish, можно развернуть проект на сервере, затем расположить ресурсы в окне "Службы" среды IDE.

  1. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта IFPWAFCAD и выберите 'Развернуть'. Запустится сервер, если это не было выполнено ранее, и проект будет скомпилирован и развернут на этом сервере.
  2. Откройте окно "Службы" (CTRL+5; &#8984+5 в системе Mac OS) и разверните узлы "Серверы" > "GlassFish" > "Ресурсы" > "JDBC" > "Ресурсы и пулы подключения JDBC". Проверьте, что теперь отображаются новый источник данных и пул подключений:
    Новый источник данных и пул подключений отображаются в окне 'Службы'

Обращение к источнику данных из приложения

Необходимо создать ссылку на только что созданный в веб-приложении ресурс JDBC. Для этого можно создать запись в дескрипторе развертывания приложения web.xml.

Дескрипторы развертывания являются текстовыми файлами на основе XML, содержащими информацию о развертывании приложения в определенной среде. Например, они обычно используются для указания параметров контекста приложения и поведенческих шаблонов, настроек безопасности, а также отображений для сервлетов, фильтров и прослушивающих процессов.

Примечание. Если в качестве версии Java при создании проекта указана Java EE 6 или Java EE 7, необходимо создать файл дескриптора развертывания. Для этого выберите "Веб > Стандартный дескриптор развертывания" в мастере создания файлов.

Произведите следующие действия, чтобы поместить ссылку на источник данных в дескрипторе развертывания приложения.

  1. В окне "Проекты" разверните структуру папки "Файлы конфигурации" и дважды щелкните web.xml, чтобы открыть файл в редакторе.
  2. Откройте вкладку "Ссылки" в верхней области экрана редактора.
  3. Разверните заголовок "Ссылки на ресурсы" и нажмите кнопку "Добавить", чтобы открыть диалог "Добавление ссылки на ресурс".
  4. В поле "Имя ресурса" введите имя ресурса, указанное выше при настройке источника данных для сервера (jdbc/IFPWAFCAD).
  5. Укажите javax.sql.ConnectionPoolDataSource в поле "Тип ресурса". Нажмите кнопку "ОК".

    Поле "Описание" является необязательным, но можно добавить удобочитаемое описание ресурса, например, База данных для приложения "IFPWAFCAD".

    Диалоговое окно 'Добавление ссылок на ресурсы'

    Новый ресурс теперь перечислен в списке под заголовком 'Ссылки на ресурсы'.

  6. Чтобы убедиться, что ресурс добавлен в файл web.xml, перейдите на вкладку "Исходный код" в верхней части экрана редактора. Заметим, что теперь в код включены следующие теги <resource-ref>.
    <resource-ref>
        <description>Database for IFPWAFCAD application</description>
        <res-ref-name>jdbc/IFPWAFCAD</res-ref-name>
        <res-type>javax.sql.ConnectionPoolDataSource</res-type>
        <res-auth>Container</res-auth>
        <res-sharing-scope>Shareable</res-sharing-scope>
    </resource-ref>

Добавление файла JAR драйвера базы данных к серверу

Добавление файла JAR драйвера базы данных является следующим шагом, необходимым для обеспечения взаимодействия сервера с базой данных. Необходимо поместить каталог установки драйвера базы данных и скопировать файл mysql-connector-java-5.1.6.x-bin.jar из корневого каталога драйвера в папку библиотеки на используемом сервере. Управление сервером в среде IDE при развертывании может обнаружить, добавлен ли файл JAR, и если нет, выполняет это автоматически.

Чтобы продемонстрировать это, откройте Диспетчер серверов (выберите "Сервис > Серверы"). В среде IDE предоставляется параметр "Развертывание драйвера JDBC". Если параметр включен, он запускает проверку для определения, требуются ли драйверы для развернутых на сервере приложений. В случае MySQL, если драйвер требуется, но он отсутствует, включенный драйвер среды IDE развертывается в соответствующем месте на сервере.

  1. Выберите "Сервис > Серверы", чтобы открыть Диспетчер серверов. На левой панели выберите "GlassFish".
  2. В главном окне выберите параметр "Включить развертывание драйвера JDBC".
    Окно 'Серверы' - сервер GlassFish 3.0.1
  3. Прежде чем закрыть Диспетчер серверов, запишите путь, указанный в текстовом поле "Папка доменов". При подключении к серверу GlassFish в среде IDE фактически подключение выполняется к экземпляру сервера приложений. Каждый экземпляр запускает приложения в уникальном домене, а в поле "Имя домена" указано имя используемого сервером домена. Как видно на рисунке выше, файл JAR драйвера должен находиться в domain1. Это домен по умолчанию, созданный при установке сервера GlassFish.
  4. Нажмите кнопку "Закрыть", чтобы выйти из Диспетчера серверов.
  5. На компьютере перейдите к каталогу установки GlassFish и войдите в подпапку domains > domain1 > lib. Поскольку проект IFPWAFCAD уже должен быть развернут на сервере, должен отображаться файл mysql-connector-java-5.1.6-bin.jar. Если файл JAR драйвера не отображается, выполните следующий шаг.
  6. Разверните проект на сервере. В окне 'Проекты' среды IDE выберите 'Развернуть' в контекстном меню узла проекта. Ход выполнения можно видеть в окне "Вывод" среды IDE (CTRL+4; &#8984+4 для Mac). В окне "Вывод" указывается, что драйвер MySQL развернут в местоположении на сервере GlassFish.
    Окно вывода, в котором указывается, что драйвер MySQL был развернут
    При возврате в подпапку domain1/lib на компьютере видно, что файл mysql-connector-java-5.1.6.x-bin.jar добавлен автоматически.

Добавление динамической логики

Вернемся к местозаполнителям index.jsp и response.jsp, созданным выше при работе с учебным курсом. Теперь можно реализовать код JSTL для динамического (т. е. на основе пользовательского ввода) создания содержимого на страницах. Для этого выполните следующие три задания.

  1. Добавление библиотеки JSTL к пути к классам проекта
  2. Реализация кода JSTL

Добавление библиотеки JSTL к пути к классам проекта

Для доступа к данным из базы данных и их просмотра используйте Библиотеку стандартных тегов JavaServer Pages (JSTL). Сервер GlassFish по умолчанию содержит библиотеку JSTL. Для проверки разверните узел сервера GlassFish под узлом "Библиотеки" в окне "Проекты" и найдите библиотеку javax.servlet.jsp.jstl.jar. (В более ранних версиях сервера GlassFish используется библиотека jstl-impl.jar.) Поскольку библиотеки сервера GlassFish по умолчанию добавляются в путь классов проекта, на данном этапе никаких действий не требуется.

JSTL имеет четыре основных раздела функциональности.

  • core: базовые, структурные задачи, такие как итерации и условные выражения для контроля потока операций
  • fmt: форматирование сообщений интернационализации и локализации
  • sql: простой доступ к базе данных
  • xml: обработка содержимого XML

Основное внимание в данном учебном курсе уделяется библиотекам тегов core и sql.

Реализация кода JSTL

Теперь можно реализовать код для динамического извлечения и просмотра данных на каждой странице. Для обеих страниц требуется реализация запроса SQL с использованием источника данных, созданного выше в рамках данного учебного курса.

В среде IDE предоставляется несколько специфичных для базы данных фрагментов JSTL, доступных для выбора в окне "Палитра" (CTRL+SHIFT+8; &#8984+SHIFT+8 для Mac).

Фрагменты баз данных. доступные из палитры

index.jsp

Для динамического отображения содержимого формы на странице index.jsp необходимо получить доступ ко всем именам из таблицы базы данных "Subject":

  1. Наведите курсор мыши на элемент "Отчет БД" в окне "Палитра".
    Фрагменты баз данных. доступные из палитры

    Для элемента "Отчет БД" при создании запроса SQL используется тег <sql:query>, после чего с помощью тега <c:forEach> обрабатывается resultset запроса, а затем выполняется вывод извлеченных данных.

  2. Установите курсор над объявлением <%@page ... %> (строка 7) и дважды щелкните элемент "Отчет БД" в окне "Палитра". В открывшемся диалоговом окне введите следующие подробные сведения:
    • Имя переменной: subjects
    • Контекст: страница
    • Источник данных: jdbc/IFPWAFCAD
    • Оператор запроса: SELECT subject_id, name FROM Subject
    Диалоговое окно 'Вставить отчет базы данных'
  3. Нажмите кнопку "ОК". В файле index.jsp создается следующее содержимое. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : index
        Author     : nbuser
    --%>
    
    <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
        SELECT subject_id, name FROM Subject
    </sql:query>
    
    <table border="1">
        <!-- column headers -->
        <tr>
        <c:forEach var="columnName" items="${subjects.columnNames}">
            <th><c:out value="${columnName}"/></th>
        </c:forEach>
    </tr>
    <!-- column data -->
    <c:forEach var="row" items="${subjects.rowsByIndex}">
        <tr>
        <c:forEach var="column" items="${row}">
            <td><c:out value="${column}"/></td>
        </c:forEach>
        </tr>
    </c:forEach>
    </table>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    Обратите внимание на то, что в среде IDE автоматически добавлены директивы taglib, необходимые для тегов JSTL, используемых в созданном содержимом, (<sql:query> и <c:forEach>). Директива taglib объявляет, что на странице JSP используются пользовательские теги (JSTL), указывает библиотеку тегов, которая их определяет, а также префикс тега.
  4. Запустите проект, чтобы проверить его отображение в браузере. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Выполнить".

    При выборе "Выполнить", IDE развертывает проект на сервере GlassFish, страница индексов компилируется в сервлет, а страница приветствия открывается в браузере по умолчанию. Код, созданный на основе элемента "Отчет БД", определяет следующую таблицу на странице приветствия.

    В браузере отображается таблица, содержащая данные из таблицы баз данных 'Subject'

    Как видно, с помощью элемента "Отчет БД" можно быстро протестировать подключение к базе данных и просмотреть табличные данные из базы данных в браузере. Это особенно рекомендуется при создании прототипов.

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

  5. Проверьте данные столбцов в созданном коде. Используется два тега <c:forEach>, причем один из них вставляется в другой. В результате контейнер JSP (сервер GlassFish) выполняет цикл по всем строкам таблицы с циклическим прохождением всех столбцов. Аналогично отображаются данные для всей таблицы.
  6. Интегрируйте теги <c:forEach> в форму HTML следующим образом. Значение каждого элемента изменяется на subject_id, а текст вывода - на name, как записано в базе данных. (Изменения выделяются полужирным шрифтом).
    <form action="response.jsp">
        <strong>Select a subject:</strong>
        <select name="subject_id">
            <c:forEach var="row" items="${subjects.rowsByIndex}">
                <c:forEach var="column" items="${row}">
                    <option value="<c:out value="${column}"/>"><c:out value="${column}"/></option>
                </c:forEach>
            </c:forEach>
        </select>
        <input type="submit" value="submit" name="submit" />
    </form>
    Ниже показан более простой способ интеграции тегов <c:forEach> в форму HTML.
    <form action="response.jsp">
        <strong>Select a subject:</strong>
        <select name="subject_id">
            <c:forEach var="row" items="${subjects.rows}">
                <option value="${row.subject_id}">${row.name}</option>
            </c:forEach>
        </select>
        <input type="submit" value="submit" name="submit" />
    </form>

    Во всех случаях теги <c:forEach> циклически обрабатывает значения subject_id и name из запроса SQL со вставкой каждой пары в теги HTML <option>. Таким образом раскрывающийся список формы заполняется данными.

  7. Удалите таблицу, созданную из элемента "Отчет БД". (Удаление показано ниже перечеркнутым текстом.)
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : index
        Created on : Dec 22, 2009, 7:39:49 PM
        Author     : nbuser
    --%>
    
    <sql:query var="subjects" dataSource="jdbc/IFPWAFCAD">
        SELECT subject_id, name FROM Subject
    </sql:query>
    
    <table border="1">
        <!-- column headers -->
        <tr>
        <c:forEach var="columnName" items="${subjects.columnNames}">
            <th><c:out value="${columnName}"/></th>
        </c:forEach>
    </tr>
    <!-- column data -->
    <c:forEach var="row" items="${subjects.rowsByIndex}">
        <tr>
        <c:forEach var="column" items="${row}">
            <td><c:out value="${column}"/></td>
        </c:forEach>
        </tr>
    </c:forEach>
    </table>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
  8. Сохраните изменения (CTRK+S; &#8984+S в Mac OS).
  9. Обновите страницу приветствия проекта в браузере.

    Заметим, что раскрывающийся список в браузере теперь содержит названия тем, полученные из базы данных.

    Повторно развертывать проект не нужно, так как функция "Компилировать при сохранении" (compile-on-save) включена для вашего проекта по умолчанию. Это означает, что при изменении и сохранении файла он автоматически компилируется и развёртывается, и нет необходимости перекомпилировать весь проект. Функцию компиляции при сохранении можно отключать в категории "Компиляция" в окне проекта "Свойства".

response.jsp

На странице ответов предоставляются подробные сведения о консультанте по теме, выбранной на странице приветствия. Созданный запрос должен содержать запись консультанта, идентификатор которого counselor_id соответствует значению counselor_idfk из выбранной записи темы.

  1. Наведите указатель мыши на объявление <%@page ... %> (строка 7) и дважды щелкните "Запрос к БД" в палитре, чтобы открыть диалоговое окно "Вставить запрос к БД".
  2. В диалоговом окне "Вставить запрос к БД" введите следующие данные.
    • Имя переменной: counselorQuery
    • Контекст: страница
    • Источник данных: jdbc/IFPWAFCAD
    • Оператор запроса: SELECT * FROM Subject, Counselor WHERE Counselor.counselor_id = Subject.counselor_idfk AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    Диалоговое окно 'Вставить запрос базы данных'
  3. Нажмите кнопку "ОК". В файле response.jsp создается следующее содержимое. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
    <%--
        Document   : response
        Created on : Dec 22, 2009, 8:52:57 PM
        Author     : nbuser
    --%>
    
    <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
        SELECT * FROM Subject, Counselor
        WHERE Counselor.counselor_id = Subject.counselor_idfk
        AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    </sql:query>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    Обратите внимание на то, что в среде IDE автоматически добавлена директива taglib для тега <sql:query>. Также отметьте, что непосредственно в запросе использовался тег <sql:param>. Поскольку для этого запроса используется значение subject_id, отправленное с index.jsp, извлечь это значение можно с помощью оператора EL (язык выражений) в форме ${param.subject_id}, а затем передать его для тега <sql:param>. В этом случае его можно использовать вместо вопросительного знака SQL (?) во время выполнения.
  4. Используйте тег <c:set> для установки переменной, соответствующей первой записи (строке) resultset, возвращенного из запроса. Новое содержимое выделено полужирным шрифтом.
    <sql:query var="counselorQuery" dataSource="jdbc/IFPWAFCAD">
        SELECT * FROM Subject, Counselor
        WHERE Counselor.counselor_id = Subject.counselor_idfk
        AND Subject.subject_id = ? <sql:param value="${param.subject_id}"/>
    </sql:query>
    
    <c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/>
    Несмотря на то, что возвращенный из запроса resultset должен содержать только одну запись, этот шаг является обязательным, поскольку для страницы необходимо обеспечить доступ к значениям в записи с помощью операторов EL (язык выражений). Вспомните, что на странице index.jsp можно было получить доступ к значениям из resultset просто посредством тега <c:forEach>. Однако тег <c:forEach> функционирует путем настройки переменной для строк из запроса, что позволяет извлекать значения путем включения переменной строки в операторы EL.
  5. Добавьте директиву taglib для базовой библиотеки JSTL файла. Это обеспечит распознавание тега <c:set>. Новое содержимое выделено полужирным шрифтом.
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
  6. В разметке HTML замените все местозаполнители кодом операторов EL с отображением данных из переменной counselorDetails. (Изменения выделены ниже полужирным шрифтом):
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" type="text/css" href="style.css">
            <title>${counselorDetails.name}</title>
        </head>
    
        <body>
            <table>
                <tr>
                    <th colspan="2">${counselorDetails.name}</th>
                </tr>
                <tr>
                    <td><strong>Description: </strong></td>
                    <td><span style="font-size:smaller; font-style:italic;">${counselorDetails.description}</span></td>
                </tr>
                <tr>
                    <td><strong>Counselor: </strong></td>
                    <td><strong>${counselorDetails.first_name} ${counselorDetails.nick_name} ${counselorDetails.last_name}</strong>
                        <br><span style="font-size:smaller; font-style:italic;">
                        <em>member since: ${counselorDetails.member_since}</em></span></td>
                </tr>
                <tr>
                    <td><strong>Contact Details: </strong></td>
                    <td><strong>email: </strong>
                        <a href="mailto:${counselorDetails.email}">${counselorDetails.email}</a>
                        <br><strong>phone: </strong>${counselorDetails.telephone}</td>
                </tr>
            </table>
        </body>
    </html>

Запуск готового приложения

Процесс создания приложения завершен. Попробуйте снова запустить его для просмотра результата в браузере. Обратите внимание на то, что благодаря функции NetBeans "Компиляция при сохранении" специально выполнять компиляцию или повторное развертывание приложения не требуется. При выполнении проекта развертывание гарантированно содержит самые последние изменения.

Нажмите кнопку 'Запустить проект' (Кнопка 'Выполнить проект') на главной панели инструментов. В браузере по умолчанию среды IDE открывается страница index.jsp..

Когда в браузере отображена страница index.jsp, выберите тему из раскрывающегося списка и нажмите кнопку submit. Выполняется переадресация на страницу response.jsp, отображающую подробные сведения в соответствии с выбором.

response.jsp отображается в браузере, в котором отображаются данные, извлеченные из базы данных

Это заключительный раздел учебного курса "Создание простого веб-приложения, использующего базу данных MySQL" В этом документе описана процедура создания простого веб-приложения с подключением к базе данных MySQL. Здесь также рассматривается процесс создания приложения с помощью базовой двухуровневой архитектуры при использовании технологий JSTL и JSP для доступа к данным с динамическим просмотром.


Устранение проблем

Большинство проблем в приложении из учебного курса возникают по причине сложностей процесса обмена данными между сервером GlassFish Server Open Source Edition и сервером базы данных MySQL. В случае некорректного отображения приложения или генерации ошибки сервера рекомендуется выполнить следующие проверки.

Существуют ли ресурсы базы данных?

В среде IDE в окне "Службы" (CTRL+5; &#8984+5 для Mac) проверьте функционирование сервера MySQL, а также доступность MyNewDatabase и наличие в ней соответствующих табличных данных.

  • Для подключения к серверу баз данных MySQL щелкните правой кнопкой мыши узел сервера MySQL и выберите 'Подключение'.
  • Если узел подключения ( Узел подключения к базе данных ) для MyNewDatabase не отображается в окне 'Службы' можно создать подключение, щелкнув правой кнопкой мыши узел драйвера MySQL ( Узел драйвера базы данных ) и выбрав 'Подключение с помощью'. В появившемся диалоговом окне укажите требуемые подробные сведения.
    Диалоговое окно 'Подключение к базе данных'
    Поля в диалоговом окне "Новое подключение к базе данных" зеркально отражают строку URL в параметре "Показать URL JDBC". Таким образом, если известен URL (например, jdbc:mysql://localhost:3306/MyNewDatabase), можно вставить его в поле "Показать URL JDBC". При этом остальные поля заполняются автоматически.
  • Чтобы убедиться, что таблицы Subject и Counselor существуют и содержат образцы данных, разверните узел подключения MyNewDatabase( Узел подключения к базе данных ) и найдите узел каталога MyNewDatabase ( Узел каталога баз данных ). Для просмотра существующих таблиц разверните узел каталога. Табличные данные можно просмотреть, щелкнув правой кнопкой мыши узел таблицы и выбрав 'Просмотреть данные'.
    Окно 'Службы' - щелкните правой кнопкой мыши меню узла таблицы баз данных

Существуют ли на сервере пул подключений и источник данных?

После развертывания приложения на сервере GlassFish файл проекта glassfish-resources.xml должен содержать инструкции для сервера по созданию ресурсов и пула подключения JDBC. Их наличие можно проверить в узле "Серверы" в окне "Службы".

  • Разверните узел "Серверы" > "Сервер GlassFish" > "Ресурсы". Разверните узел "JDBC Resources" (Ресурсы JDBC), чтобы увидеть источник данных jdbc/IFPWAFCAD, созданный из файла glassfish-resources.xml. Разверните узел "Пул подключения", чтобы увидеть пул подключения IfpwafcadPool, созданный из файла glassfish-resources.xml. Подробное описание приведено выше.

Доступен ли MySQL Connector/драйвер J для сервера GlassFish?

Проверьте, что на сервере GlassFish выполнено развертывание драйвера MySQL Connector/J. Соответствующее описание приведено в разделе Добавление файла JAR драйвера базы данных на сервер.

  • Найдите на компьютере папку установки сервера GlassFish и откройте подпапку GlassFish domains/domain1/lib. В ней должен находиться файл mysql-connector-java-5.1.6-bin.jar.

Защищена ли база данных паролем?

Необходимо защитить базу данных паролем, чтобы при выполнении упражнений данного учебного курса источник данных сервера GlassFish работал корректно. При использовании учетной записи MySQL root по умолчанию с пустым паролем с помощью командной строки можно установить другой пароль.

  • Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:
    shell> mysql -u root
    mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
        ->     WHERE User = 'root';
    mysql> FLUSH PRIVILEGES;
    Дополнительные сведения приведены в официальном справочном руководстве по работе с MySQL: Защита исходных учетных записей MySQL.

Корректно ли установлены значения свойств пула подключений?

Проверьте правильность работы пула подключений для сервера.

  1. Откройте окно "Службы" (CTRL+5; &#8984+5 для Mac) и разверните узел "Серверы.
  2. В контекстном меню узла "Сервер GlassFish" выберите "Просмотр консоли администратора".
  3. При отображении соответствующего запроса введите имя пользователя и пароль. Имя пользователя и пароль можно посмотреть в Диспетчере серверов.
  4. В дереве в левой части консоли разверните узел "Ресурсы > JDBC > Пулы подключений > IfpwafcadPool". В главном окне отображаются подробные сведения о пуле подключений IfpwafcadPool.
  5. Нажмите кнопку "Ping". Если пул подключений настроен правильно, отображается сообщение Ping Succeeded.
    консоль администрирования сервера GlassFish - отображение пула подключений
  6. Если выполнение ping-тестирования завершается неуспешно, откройте вкладку "Дополнительные свойства" для проверки правильности настройки указанных значений свойств.


Дополнительные сведения

Дополнительные сведения о развертывании веб-приложений Java приведены в следующих материалах.

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo