Технология оформления Web-приложений

Размещено на http://www.allbest.ru/

Министерство Здравоохранения республики Казахстан

Южно-Казахстанская государственная фармацевтическая академия.

Форма выполнения: реферат

Дисциплина: информатика

На тему: «Технология оформления Web-приложений»

Подготовила: Абдувалиева.М.А

Группа:103(ТФП)

Принял: Халметов.З.С



Веб-приложение -- клиент-серверное приложение, в котором клиентом выступает браузер, а сервером -- веб-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети.

Технические особенности

Существенное преимущество построения Web-приложений для поддержки стандартных функций браузера заключается в том, что функции должны выполняться независимо от операционной системы данного клиента. Вместо того чтобы писать различные версии для Microsoft Windows, Mac OS X, GNU/Linux и других операционных систем, приложение создается один раз для произвольно выбранной платформы и на ней разворачивается. Однако различная реализация HTML, CSS, DOM и других спецификаций в браузерах может вызвать проблемы при разработке веб-приложений и последующей поддержке. Кроме того, возможность пользователя настраивать многие параметры браузера (например, размер шрифта, цвета, отключение поддержки сценариев) может препятствовать корректной работе приложения.

Другой (менее универсальный) подход заключается в использовании Adobe Flash, Silverlight или Java-апплетов для полной или частичной реализации пользовательского интерфейса. Поскольку большинство браузеров поддерживает эти технологии (как правило, с помощью плагинов), Flash- или Java-приложения могут выполняться с легкостью. Так как они предоставляют программисту больший контроль над интерфейсом, они способны обходить многие несовместимости в конфигурациях браузеров, хотя несовместимость между Java или Flash реализациями на стороне клиента может приводить к различным осложнениям.

В связи с архитектурным сходством с традиционными клиент-серверными приложениями, в некотором роде «толстыми» клиентами, существуют споры относительно корректности отнесения подобных систем к веб-приложениям; альтернативный термин «Богатое Интернет приложение»

Устройство веб-приложений

Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер».

Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него.

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

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

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

Название	Лицензия	Веб-сервер
ASP	проприетарная	специализированный
ASP.NET	проприетарная	специализированный
C/C++	свободная	практически любой
Java	свободная	множество, в том числе свободных
Perl	свободная	практически любой
PHP	свободная	практически любой
Python	свободная	практически любой
Ruby	свободная	практически любой
Nodejs	MIT License	собственный

web приложение браузер файл

На стороне клиента используется:

· Для реализации GUI

· HTML, XHTML

· CSS

· Для формирования и обработки запросов, создания интерактивного и независимого от браузера интерфейса:

· ActiveX

· Adobe Flash, Adobe Flex

· Java

· JavaScript

· Silverlight

Настройка проекта веб-приложения

1. Выберите в главном меню "Файл" > "Новый проект" (CTRL+SHIFT+N). В области "Категории" выберите "Java Web". В области "Projects" (Проекты) выберите "Web Application" (Веб-приложение) и нажмите кнопку "Next" (Далее).

2. В экране 2 введите HelloWeb в текстовом поле "Project Name" (Имя проекта).

3. В поле "Project Location" укажите любой каталог на компьютере. В данном учебном курсе этот каталог будет называться $PROJECTHOME.

4. Установите флажок "Использовать отдельную папку для хранения библиотек" и укажите местоположение папки библиотек (необязательно). Для получения дополнительных сведений об этой возможности ознакомьтесь с разделом Совместное использование библиотек проекта.

5. Нажмите кнопку "Далее". Откроется панель сервера и параметров настройки. Выберите версию Java EE, которую требуется использовать для приложения.

6. Выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE. Обратите внимание, что для поля "Context Path" (например, на сервере) устанавливается значение /HelloWeb в основе которого находится имя проекта, указанное при выполнении предыдущего действия.

7. Нажмите кнопку "Далее". На экране "Frameworks" нажмите кнопку "Finish" для создания проекта.

В среде IDE будет создана папка проекта $PROJECTHOME/HelloWeb. Папка проекта содержит все исходные файлы и метаданные проекта, например сценарий сборки Ant. После этого проект "HelloWeb" откроется в среде IDE. В главном окне редактора исходного кода будет представлена страница приветствия index.jsp. Структуру файлов проекта можно просмотреть в окне "Files" (Ctrl+2), а его логическую структуру - в окне "Projects" (Ctrl+1).



Создание и изменение исходных файлов веб-приложения

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

Создание пакета Java и исходного файла Java

1. В окне 'Проекты' разверните узел 'Исходные пакеты'. Обратите внимание, что узел "Source Packages" содержит только пустой узел пакета по умолчанию.

2. Щелкните узел "Source Packages" правой кнопкой мыши и выберите "New" > "Java Class". Введите NameHandler в текстовом поле "Class Name" иorg.mypackage.hello в поле списка "Package". Нажмите кнопку "Завершить". Новый файл NameHandler.java будет открыт в редакторе исходного кода.

3. Объявите в редакторе исходного кода переменную String, введя непосредственно под объявлением класса следующую строку:

String name;

4. Добавьте следующий конструктор к классу:

public NameHandler() { }

5. Добавьте следующую строку в конструктор NameHandler():

name = null;

Создание методов получения и установки

1. Щелкните правой кнопкой мыши поле name в редакторе исходного кода и выберите "Refactor" > "Encapsulate Fields". Откроется диалоговое окно "Encapsulate Fields", в котором имеется поле name. Обратите внимание, что для параметра "Visibility" (Видимость) полей по умолчанию установлено значение "private" (закрытый), а для средств доступа - значение "public" (общедоступный); в результате модификатор доступа для объявления переменной класса будет определен как "private", в то время как методы получения и установки будут созданы с модификаторами public и private, соответственно.

2. Нажмите кнопку "Refactor" (Реорганизация). Для поля name создаются методы получения и установки. Модификатор для переменной класса определяется как private, в то время как методы получения и установки создаются с модификаторами "public". Класс Java должен теперь выглядеть следующим образом.

package org.mypackage.hello;

/**

*

* @author nbuser

*/

public class NameHandler {

private String name;

/** Creates a new instance of NameHandler */

public NameHandler() {

name = null;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}

Изменение файла JavaServer Pages по умолчанию

1. Активируйте файл index.jsp, перейдя на вкладку, отображаемую в верхней части редактора исходного кода.

2. В палитре (Ctrl+Shift+8), расположенной справа от редактора исходного кода, разверните узел "HTML Forms" и перетащите элемент "Form" в позицию, находящуюся в редакторе исходного кода непосредственно после тегов <h1>.

Появится диалоговое окно "Insert Form".

3. Установите следующие значения:

· Action: response.jsp;

· Method: GET;

· Name: Name Input Form.

Нажмите кнопку "ОК". К файлу index.jsp добавляется форма HTML.

4. Перетащите элемент "Text Input" в позицию непосредственно перед тегом </form>, затем установите следующие значения:

· Name: name;

· Type: text.

Нажмите кнопку "ОК". Между тегами <form> будет добавлен тег HTML <input>. Удалите атрибут value из данного тега.

5. Перетащите элемент "Button" в позицию непосредственно перед тегом </form>. Установите следующие значения:

· Label: OK;

· Type: submit.

Нажмите кнопку "ОК". Между тегами <form> будет добавлена кнопка HTML.

6. Введите Enter your name: непосредственно перед первым тегом <input>, затем измените текст по умолчанию Hello World!, расположенный между тегами <h1>, на Entry Form.

7. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Файл index.jspдолжен теперь выглядеть следующим образом:

8. <html>

9. <head>

10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

11. <title>JSP Page</title>

12. </head>

13. <body>

14. <h1>Entry Form</h1>

15.

16. <form name="Name Input Form" action="response.jsp">

17. Enter your name:

18. <input type="text" name="name" />

19. <input type="submit" value="OK" />

20. </form>

21. </body>

</html>

Создание файлов JavaServer Pages

1. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Создать' > JSP. Откроется мастер "New JSP File". Назовите файлresponse и нажмите кнопку "Finish". Обратите внимание на то, что узел файла response.jsp отображается в окне "Projects" под файлом index.jsp, а новый файл открывается в редакторе исходного кода.

2. На палитре справа от редактора исходного кода разверните узел "JSP" и поместите элемент "Use Bean" непосредственно под тегом <body> в редакторе исходного кода. Откроется диалоговое окно "Insert Use Bean". Укажите значения, как показано на следующем рисунке.

· ID: mybean;

· Class: org.mypackage.hello.NameHandler;

· Scope: session.

Нажмите кнопку "ОК". Обратите внимание на то, что под тегом <body> добавляется тег <jsp:useBean>.

3. Перетащите элемент "Set Bean Property" из палитры и поместите его непосредственно перед тегом <h1>. Нажмите кнопку "OК". В появившемся теге<jsp:setProperty> удалите пустой атрибут value и измените его следующим образом: Eсли средой IDE был создан атрибут value = "", удалите его. В противном случае значение name, введенное в форме index.jsp, будет перезаписано.

<jsp:setProperty name="mybean" property="name" />

Как указано в документации <jsp:setProperty>, значение свойства можно установить различными способами. В этом случае вводимые пользователем данные из index.jsp становятся парой имя/значение, передаваемой в объект request. При установке свойства с помощью тега<jsp:setProperty> можно указать значение в соответствии с именем свойства, содержащегося в объекте request. Поэтому при определенииproperty в качестве name можно получить значение, указанное пользователем при вводе.

4. Измените текст между тегами <h1> следующим образом:

<h1>Hello, !</h1>

5. Перетащите элемент "Get Bean Property" из палитры в позицию непосредственно после запятой между тегами <h1>. Укажите следующие значения в диалоговом окне "Insert Get Bean Property":

· Bean Name: mybean;

· Property Name: name.

Нажмите кнопку "ОК". Обратите внимание на то, что между тегами <h1> теперь добавлен тег <jsp:getProperty>.

Обратите внимание: имена Property нужно вводить с учетом регистра. Свойство "name" должно быть в одном регистре как в response.jsp, так и в форме ввода index.jsp.

6. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "Format" (Alt+Shift+F) для переформатирования кода. Теперь теги <body>файла response.jsp должны выглядеть следующим образом:

7. <body>

8. <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />

9. <jsp:setProperty name="mybean" property="name" />

10. <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>

</body>



Выполнение проекта веб-приложения

Для сборки и выполнения веб-приложений в среде IDE используется сценарий сборки Ant. IDE создаст сценарий сборки на основе параметров, указанных в мастере создания новых проектов, а также проектов в диалоговом окне 'Свойства проектов' (в окне 'Проекты' выберите 'Свойства' в меню правой кнопки мыши узла проекта).

1. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Выполнить' (F6). При выполнении веб-приложения среда IDE выполнит следующие действия:

· Сборка и компиляция кода приложения (см. примечание ниже). Это действие можно выполнить отдельно от прочих, выбрав Build ("Сборка") или Clean and Build ("Очистка и сборка") из контекстного меню узла проекта.

· Запуск сервера.

· Развертывание приложения на сервере. Это действие можно выполнить отдельно от прочих, выбрав Deploy ("Развертывание") из контекстного меню узла проекта.

· Отображение приложения в окне браузера.

Примечание. По умолчанию, проект создается с включенной функцией 'Компилировать при сохранении', так что не нужно сначала компилировать код. Дополнительные сведения о функции "Компиляция при сохранении" приведены в соответствующем разделе руководства Создание, импорт и настройка проектов Java.

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



3. Среда IDE открывает окно вывода, показывая состояние сервера. Взгляните на вкладку в окне вывода с именем сервера.

Обратите внимание. Если сервер GlassFish не запускается, запустите его вручную и после этого выполните проект снова. Сервер можно запустить вручную из окна 'Службы', щелкнув правой кнопкой мыши узел сервера и выбрав 'Пуск'.

Окно вывода сервера предоставляет массу информации о проблемах при выполнении веб-приложений. Также могут быть полезны журналы сервера. Они расположены в каталоге соответствующего домена сервера. Также можно сделать видимым журнал среды IDЕ, выбрав View ("Представление") > IDE log ("Журнал IDE") и просмотреть его.

4. Страница index.jsp откроется в браузере по умолчанию. Обратите внимание, что окно браузера может открыться до отображения выходных данных сервера средой IDE.

5. Введите имя в текстовом поле и нажмите кнопку "OК". На экране появится страница response.jsp с простым приветствием.

Размещено на Allbest.ru