Создать html страницу онлайн: HTML редактор онлайн — Создать страницу HTML онлайн, редактор сайта онлайн

Автор: Трой Джуниперо (Troy Giunipero)

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

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

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

Содержание

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

Примечания:

• Комплект загрузки 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

Страница приветствия index.jsp представляется пользователю с помощью простой формы HTML. При запросе браузером

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

index.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. Измените текст между тегами <h2> на Добро пожаловать в IFPWAFCAD, Международную ассоциацию по консультированию и развитию для бывших профессиональных борцов!
3. Откройте палитру среды IDE, выбрав в главном меню «Окно» > «Палитра» (CTRL+SHIFT+8; &#8984+SHIFT+8 в ОС Mac). Наведите курсор на значок «Таблица» в категории «HTML» и обратите внимание на то, что отображается фрагмент кода для элемента по умолчанию.
   
   Палитру можно настроить в соответствии с существующими требованиями — щелкните правой кнопкой мыши палитру и выберите ‘Показать крупные значки’ и ‘Скрыть имена элементов’, чтобы палитра выглядела как на рисунке выше.
4. Установите курсор сразу же после тегов <h2>. (Именно в этом месте будет внедрена новая таблица 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 ( ) на палитре. В диалоговом окне «Вставка формы» введите 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>
        <h3>Welcome to <strong>IFPWAFCAD</strong>, the International Former
            Professional Wrestlers' Association for Counseling and Development!
        </h3>
    
        <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 будет автоматически скомпилирована и развернута на сервере. Открывается браузер по умолчанию, и в нем выводится страница из местоположения, где она развернута.

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

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

1. Щелкните правой кнопкой мыши узел проекта «IFPWAFCAD» в окне «Проекты» и выберите «Создать > JSP». Откроется диалоговое окно «Новый файл JSP».
2. В поле «Имя файла JSP» введите response. Обратите внимание на то, что в настоящий момент для поля «Расположение» выбран каталог «Веб-страницы», это означает, что файл будет создан в каталоге проекта web. Это то же местоположение, что и для страницы приветствия index.jsp.
3. Примите остальные значения по умолчанию и нажмите кнопку «Готово». В редакторе выполняется создание и открытие шаблона новой страницы response.jsp. Новый узел JSP также отображается в каталоге «Веб-страницы» в окне «Проекты».
   
4. В редакторе измените заголовок на IFPWAFCAD - {местозаполнитель}
5. Удалите строку <h2>Hello World!</h2> строка между тегами <body>. Скопируйте и вставьте в тело страницы следующую таблицу HTML:

   <table border="0">
       <thead>
           <tr>
               <th colspan="2">{placeholder}</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td><strong>Description: </strong></td>
               <td><span>{placeholder}</span></td>
           </tr>
           <tr>
               <td><strong>Counselor: </strong></td>
               <td>{placeholder}
                   <br>
                   <span>
                   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 с последующим открытием в браузере по умолчанию.

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

Создайте простую таблицу стилей для расширения просмотра в веб-интерфейсе. При работе с данным учебным курсом предполагается, что пользователь обладает знаниями о правилах стилей и их влиянии на соответствующие элементы 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;
   }
   
   h2 {
       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).

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

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

В качестве пароля в этом учебном курсе используется nbuser. Для установки пароля nbuser в командной строке откройте в системе MySQL каталог bin и введите следующие данные:

shell> mysql -u root
mysql> UPDATE mysql.user SET Password = PASSWORD('nbuser')
    ->     WHERE User = 'root';
mysql> FLUSH PRIVILEGES;

Дополнительные сведения приведены в официальном справочном руководстве по работе с MySQL: Защита исходных учетных записей MySQL.

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 использует JNDI. В интерфейсе API JNDI предоставляется единый для всех приложений способ поиска источников данных и получения доступа к ним. Дополнительные сведения приведены в Учебном курсе по JND.
3. Дополнительно можно добавить описание источника данных. Например, укажите Обеспечивает доступ к базам данных, поставляющим данные для приложения IFPWAFCAD.
4. Нажмите кнопку «Далее». После этого еще раз нажмите кнопку «Далее» и пропустите шаг 3, «Дополнительные свойства».
5. В шаге 4 укажите имя пула подключений JDBC IfpwafcadPool. Убедитесь, что выбран параметр «Извлечь из существующего соединения» и выберите jdbc:mysql://localhost:3306/MyNewDatabase из раскрывающегося списка. Нажмите кнопку «Далее».
   

   Примечание. Мастер обнаруживает все соединения с базой данных, настроенные в IDE. Поэтому на этот момент должно существовать созданное подключение к базе данных MyNewDatabase. Можно проверить, какие подключения были созданы, открыв окно ‘Службы’ (Ctrl-5; ⌘-5 в Mac) и выполнив поиск узлов подключения ( ) в категории ‘Базы данных’.

6. На этапе 5 выберите файл javax.sql.ConnectionPoolDataSource в списке «Тип ресурса».

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

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».
   
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.
   
   При возврате в подпапку 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, страница индексов компилируется в сервлет, а страница приветствия открывается в браузере по умолчанию. Код, созданный на основе элемента «Отчет БД», определяет следующую таблицу на странице приветствия.

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

   В следующих шагах рассматривается интеграция созданного кода в раскрывающийся список 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>${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>
                       <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>

More