Программирование клиентских и серверных сценариев




Скачать 391.43 Kb.
страница 1/4
Дата 28.08.2016
Размер 391.43 Kb.
  1   2   3   4




7.2.2. Ввести текстовую строку «Успеваемость» и применить к ней стиль text1:



Успеваемость

7.2.3. Ввести новую текстовую строку « студентов» с использованием стиля text2:




            студентов

7.2.4 Создать две горизонтальные линии и применить к ним стиль line. Ширина второй линии – 70%, выравнивание – по левому краю:






ЛАБОРАТОРНАЯ РАБОТА 1

ПРОГРАММИРОВАНИЕ КЛИЕНТСКИХ И СЕРВЕРНЫХ СЦЕНАРИЕВ

WEB-ПРИЛОЖЕНИЙ
1. Цель работы

Целью работы является изучение технологий программирования клиентских и серверных сценариев Web-приложений.



2. Задачи

Задачами лабораторной работы являются овладение навыками построения Web-страниц и объединения их в Web-приложения и освоение программных технологий разработки клиентских и серверных сценариев.



3. Теоретическая часть

Web-приложения. Web-приложения представляют собой особый тип программ, построенных по архитектуре «клиент-сервер» (рис. 1). Особенность их заключается в том, что само Web-приложение находится и выполняется на сервере. Клиент при этом получает только результаты работы.


Рисунок 1 ­– Клиент-серверная архитектура Web-приложений
За счет наличия исполняемой части, Web-приложения способны выполнять практически те же операции, что и обычные Windows-приложения, с тем лишь ограничением, что код исполняется на сервере, в качестве интерфейса системы выступает браузер, а в качестве среды, посредством которой происходит обмен данными, – Интернет.

Обращение браузера к серверу называется запросом, а ответ сервера браузеру ­– откликом.



Архитектура Web-приложения. В общем виде функционирование Web-приложений определяется работой трех основных компонентов:

• Web-сервера;

• Web-браузера;

• HTTP-протокола.



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

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



Web-браузер – это независимое от платформы средство отображения Web-страниц, написанных на языке HTML. HTML-код пластичен ­– текст, если необходимо, перераспределяется в окне браузера, подстраиваясь под его размер.

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



Протокол HTTP. Web-браузеры и Web-серверы «общаются» по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста). HTTP, или протокол передачи текстовых данных по сети, применяется для запроса Web-страниц у Web-браузера и возврата откликов браузеру. HTTP-сообщения обычно передаются между Web-сервером и Web-браузером через порт 80, а при использовании защищенного HTTP (HTTPS) – через порт 443.

Работа по протоколу HTTP происходит следующим образом: программа-клиент (браузер) устанавливает TCP-соединение с сервером (стандартный номер порта – 80) и выдает ему HTTP-запрос. Сервер обрабатывает этот запрос и выдает HTTP-ответ клиенту.



Статические и динамические сайты. Web-сайт, состоящий просто из набора HTML файлов, ссылающихся друг на друга, просто создать, он неприхотлив в обслуживании, надежен и не требует от сервера большой вычислительной мощности. Такие Web-сайты называют статическими. Динамический Web-сайт в ответ на запросы Web-браузера пользователя может не просто выдавать заранее подготовленные страницы HTML, а создавать страницы «динамически», на основе записей в базе данных. Такой подход к созданию сайта позволяет также отделить его содержимое от внешнего вида, появляется возможность быстро менять оформление сайта или даже предлагать пользователям несколько вариантов оформления на выбор.

Клиентские и серверные сценарии. Сценарий – это специальная программа, написанная на особом языке программирования (скриптовом языке, языке сценариев), расширяющая функциональные возможности Web-страницы по сравнению с обычным HTML-документом.

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

Клиентские сценарии загружаются в браузер пользователя вместе с текстом Web-страницы и исполняются в самом браузере. Достоинства клиентских технологий ясны – нет необходимости загружать Web-сервер и перекачивать с него лишние объемы информации. Однако дополнительные вычисления нагружают компьютер пользователя, особенно если он не слишком быстр, кроме того, сам браузер должен уметь работать с этими клиентскими технологиями.

Серверные и клиентские технологии создания динамических сайтов не соперничают, а успешно дополняют друг друга при создании действительно современных динамических сайтов.



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

Общепринятым является деление веб-элементов на две группы: клиентские HTML-элементы и серверные элементы. Серверные элементы мощнее, потому что они привязаны не к разметке, а к функциональности, которую нужно обеспечить.

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

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

В конечном итоге, после рендеринга, серверные элементы управления генерируют тот же самый HTML-код, что и клиентские элементы управления HTML. 

Технология Active Server Pages (ASP/ASP.NET). Active Server Pages (ASP) — это серверная технология для разработки и выполнения динамических интерактивных Web-приложений. Средства ASP позволяют объединить возможности HTML-страниц, команд сценариев и компонентов COM в интерактивных Web-страницах и мощных Web-приложениях, делают удобным и легким процесс их создания и изменения.

Выполнение кода ASP поддерживается ISAPI-расширением сервера (ISAPI – Internet Server Application Programming Interface), которое позволяет использовать DLL-библиотеки вместо исполняемых файлов. Код DLL постоянно находится в памяти и для каждого запроса создает не процессы, а нити исполнения, которые используют один и тот же программный код.

«Родная» среда ASP – Web-сервер Internet Information Services (IIS), работающий под управлением Windows. Код ASP встраивается в HTML-код в виде специальных тегов (обычно ) и представляет собой инструкции, написанные на скриптовых языках (чаще всего – на JavaScript и VBScript). Создать ASP-страницы можно как в любом визуальном HTML-редакторе, так и в простом текстовом редакторе, например, в «Блокноте». Расширение таких страниц – asp.

ASP.NET – это не продолжение ASP. Это концептуально новая технология Microsoft, созданная в рамках идеологии .NET Framework. Microsoft .NET Framework – это платформа для создания, развертывания и запуска Web-сервисов и приложений. Она предоставляет высокопроизводительную, основанную на стандартах, многоязыковую среду, которая позволяет интегрировать существующие приложения с приложениями и сервисами следующего поколения, а также решать задачи развертывания и использования Web-приложений. .NET Framework состоит из трех основных частей – общеязыковой среды выполнения (common language runtime), иерархического множества унифицированных библиотек классов и компонентной версии ASP – ASP.NET.

Web-страница ASP.NET имеет расширение .aspx и состоит из трех разделов:

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

– код – код обработки событий, генерируемых страницей или ее элементами управления. Код размещается в теге

– разметка страницы – это HTML-код страницы, включающий HTML-тег body и его содержимое. Там же размещаются клиентские и серверные элементы управления, а также простой текст.

Для разработки приложений ASP.NET чаще всего используется среда Microsoft Visual Studio, однако такие страницы можно создавать и в текстовом редакторе.

Теоретически под ASP.NET можно писать программы на любом языке, для которого имеется соответствующий компилятор. Однако на практике для создания ASP.NET-приложений используются главным образом Visual Basic.NET и C#.

Одной из ключевых особенностей технологии ASP.NET является возможность использования серверных элементов управления. Для их обозначения используются теги с префиксом asp и атрибут runat со значением server.



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

Для работы с базами данных в ASP.NET используется библиотека ADO.NET. Она предоставляет классы для подключения к источникам данных практически любого формата, выполнения запросов к этим источникам и получения результата. ADO.NET предоставляет как поставщики данных для конкретных СУБД (например, Microsoft SQL Server), так и общедоступный OLE DB. Основные классы ADO.NET, предусмотренные этими поставщиками, приведены в таблице 1.

Важной особенностью ADO.NET является возможность его автономной работы с базами данных, без постоянного соединения с сервером. Можно выполнить запрос к базе данных, сохранить в кэше результаты запроса, а потом закрыть соединение с базой данных.
Таблица 1

Классы ADO.NET взаимодействия с базами данных в ASP.NET-приложениях



Название класса

Описание класса

Connection

(SqlConnection,

OleDbConnection и др.)


Соединение с источником данных

Command (SqlCommand,

OleDbCommand и др.)



Запрос к источнику данных

DataReader

(SqlDataReader,

OleDbDataReader и др.)


Хранение возвращаемых запросом записей (только чтение)

DataTable

Таблица для представления результатов запроса в форме строк (DataRow) и столбцов (DataColumn) (чтение и запись)

DataSet


Совокупность объектов DataTable, автономный набор данных из результатов запроса

DataAdapter

(SqlDataAdapter,

OleDbDataAdapter и др.)


Связующее звено между объектом DataSet и базой данных, обеспечивает синхронизацию данных


Технология PHP. Язык РНР (PHP: Hypertext Preprocessor) представляет собой язык сценариев, которые внедряются в страницы HTML для исполнения на стороне сервера. Как правило, для отделения PHP-кода от кода HTML используются символы , реже – код ?> и , а также инструкции «в стиле ASP» – .

Web-страница PHP имеет расширение .php и состоит из трех разделов:

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

– код – программный код, реализующий выполняемые на сервере операции.

– разметка страницы – это HTML-код страницы, включающий тег body и его содержимое.

Поддержка PHP обеспечивается многими серверами, но традиционно такие Web-приложения функционируют на Web-сервере Apache.

Для разработки PHP-страниц можно использовать как текстовые редакторы (например, «Блокнот»), так и более «продвинутые» визуальные HTML-редакторы.

Функции работы с базами данных. Приложения PHP, использующие для хранения информации базу данных, как правило, работают с системой управления базами данных MySQL. Для работы с базами данных PHP располагает достаточно широким набором функций (табл. 2) – от установки соединения с базой данных до извлечения отдельных значений, полученных в результате выполнения запроса.
Таблица 2

Функции взаимодействия с базами данных в PHP-приложениях (СУБД MySQL)



Название класса

Описание класса

mysql_connect

Соединение с источником данных

mysql_select_db

Выбор базы данных для дальнейшей работы

mysql_query

Отправка SQL-запросов серверу

mysql_fetch_array

Представление результата запроса в виде ассоциативного массива

mysql_result

Доступ к отдельному полю записи результата запроса

Технология Java Server Pages (JSP). Технология Java Server Pages (JSP) позволяет разработчикам и дизайнерам Web-приложений быстро разрабатывать и легко сопровождать динамические Web-страницы.

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

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

Код JSP встраивается в HTML-страницу и отделяется от ее кода символами . Файл страницы JSP имеет расширение .jsp. В общем виде структура JSP-страницы представлена тремя компонентами:

– директивы. Отделяются от HTML-кода тегами и используются для подключения внешних классов и библиотек. Директивы «говорят» серверу делать что-либо, когда они преобразуются из JSP в сервлет;

– сценарии. Собственно, JSP-код, размещенный между тегами . Это и есть код скриплета;

– разметка, определяющая иерархию HTML-элементов страницы.

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

Для разработки приложений JSP чаще всего используется среда Eclipse (Eclipse Europe), однако такие страницы можно создавать и в текстовом редакторе.

Функции работы с базами данных. Технология JSP предоставляет широкий набор с разными типами баз данных – от Microsoft Access и MySQL до Microsoft SQL Server и Oracle. В таблице 3 приведены основные функции, которые позволяют JSP-приложению «общаться» с базой данных. Эти функции представляют собой методы класса драйверов соответствующих СУБД. Для этого на JSP-страницы выполняется загрузка класса заданного драйвера и генерируется его экземпляр.
Таблица 3

Функции взаимодействия с базами данных в PHP-приложениях (СУБД MySQL)



Название класса

Описание класса

Connection

Установка соединения с базой данных

Statement

Выполнение запроса к базе данных

ResultSet

Хранение результатов запроса к базе данных



4. Порядок выполнения работы

Предварительные замечания

В рамках лабораторной работы должно быть разработано Web-приложение «Успеваемость студентов», состоящее из двух Web-страниц. На первой странице «Default» пользователь должен выбирать факультет, специальность и студенческую группу из соответствующих раскрывающихся списков (рис. 2, а). Передача выбранных пользователем параметров на сервер выполняется нажатием на ссылку «Просмотр». В результате выполняется переход на страницу «Browse», где отображается информация об успеваемости выбранной студенческой группы (рис. 2, б).




а



б

Рисунок 2 – Web-приложение «Успеваемость студентов»


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

При разработке Web-приложения используется реляционная база данных University. В зависимости от варианта база данных реализуется с помощью системы управления базами данных Microsoft SQL Server (для технологии ASP.NET) или MySQL (для технологий PHP и JSP). Программный код Transact-SQL создания базы данных и внесения в нее тестовой информации приведен в приложении к работе и должен быть запущен на выполнение из соответствующей визуальной среды.



Вариант А. Технология ASP.NET и СУБД Microsoft SQL Server

1. Создать новый Web-сайт:

Пуск | Программы | Microsoft Visual Studio 2005 | Microsoft Visual Studio 2005

ф. Microsoft Visual Studio | File → New → Web Site… → ф. New Web Site → Visual Studio Installed Templates → выбр. ASP.NET Web Site →

Location → выбр. HTTP → http://имя_сервера(например, localhost)/Lab1_ASP

Language → выбр. Visual C#

2. Перейти на страницу ввода программного кода:

ф. Lab1_ASP → Default.aspx → Source | удалить весь код, расположенный между открывающим и закрывающим тегами элемента BODY

3. Задать заголовок страницы Default.aspx. Для этого между открывающим и закрывающим тегами элемента HEAD ввести следующий код:

4. Создание CSS-таблицы стилей

4.1. Создать новый файл в текстовом редакторе «Блокнот»

4.2. Определить стиль представления на HTML-странице горизонтальной линии:

.line {

HEIGHT: 2px; BORDER: #cbd1e0 2px solid



}

4.3. Создать стиль представления на HTML-страницы основной таблицы:

.pageborder {

BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid; COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid

}

4.4. Построить стиль представления на HTML-странице текста «Успеваемость» в заголовке страницы:



.text1 {

FONT-SIZE: 16pt; COLOR: #0066cc; FONT-VARIANT: small-caps; FONT-FAMILY: 'Century Schoolbook'

}

4.5. Задать стиль представления на HTML-странице текста «студентов» в заголовке страницы:



.text2 {

FONT-SIZE: 24pt; TEXT-TRANSFORM: uppercase; COLOR: #0000cc; FONT-FAMILY: 'Century Schoolbook'

}

4.6. Задать стиль представления текста .text3 на основе стиля .text1 с размером шрифта 13pt.



4.7. Задать стиль представления таблицы .headborder на основе стиля .pageborder с шириной правой и нижней границ, равной 2 px.

.headborder {

BORDER-RIGHT: #cbd1e0 2px solid; BORDER-TOP: #cbd1e0 1px solid;

BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: #cbd1e0 1px solid;

COLOR: #000000; BORDER-BOTTOM: #cbd1e0 2px solid

}

4.8. Аналогичным образом задать стиль представления таблицы .textborder на основе стиля .headborder без верхней границы.



4.8. Задать стиль представления текста .headtext на основе стиля .text1 без малых прописных букв и с размером шрифта 13pt.

4.10. Задать стиль представления текста .tabletext с размером шрифта 10pt.

4.11. Сохранить файл под названием style.css и поместить его в папку images, размещенную в каталоге с Вашим веб-приложением.

5. Задать ссылку на таблицу стилей в файле Default.aspx. Для этого между открывающим и закрывающим тегами элемента HEAD ввести следующий код:



6. Создать форму для отправки данных серверу.

6.1. Создать серверный элемент FORM. Для этого между открывающим и закрывающим тегами элемента BODY ввести следующий код:



6.2. Задать идентификатор формы. Для этого в качестве атрибута элемента FORM указать:

id="form"

6.3. Указать, что форма является серверным элементом управления. Для этого в качестве атрибута элемента FORM указать:

runat="server"

6.4. Указать метод (POST) формы и страницу, на которую будут направлены данные формы. Для этого в элемент FORM ввести следующие атрибуты:

action="Browse.aspx" method="post"

7. Сформировать структуру Web-страницы Default.aspx в форме одноколоночной таблицы из двух строк

7.1. Создать «каркас» таблицы шириной 600 px, к которой применен стиль pageborder:



7.2. Создать «заголовочную» строку «Успеваемость студентов».

7.2.1. Создать новую строку таблицы. Внутри строки задать единственный столбец, ширина которого совпадает с шириной самой таблицы (ширина столбца – 100%) Для этого между открывающим и закрывающим тегами элемента TABLE (см. п. 7.1) ввести следующий код:



  1   2   3   4


База данных защищена авторским правом ©infoeto.ru 2022
обратиться к администрации
Как написать курсовую работу | Как написать хороший реферат
    Главная страница