
Министерство образования и науки Российской Федерации
Саратовский государственный технический университет
Балаковский институт техники, технологии и управления
ИНТЕРАКТИВНОЕ ПРОГРАММИРОВАНИЕ ВЕБ-ПРИЛОЖЕНИЙ
Методические указания к выполнению практических работ по дисциплине
«Интерактивное программирование веб-приложений» для студентов всех форм обучения по направлению 230400.62
Одобрено редакционно-издательским советом Балаковского института техники,
технологии и управления
Балаково 2014
Практическая работа №1. Создание веб-приложения с использованием
Microsoft Visual Studio.
Введение
Цель работы: знакомство с технологией ASP.NET и создание веб-
приложения с использованием MS Visual Studio.
Основные понятия
Microsoft ASP.NET представляет собой набор технологий разработки веб-приложений. Приложения ASP.NET состоят из одной или нескольких веб-форм. В качестве среды для создания и тестирования этих приложений разработчики могут использовать Visual Studio.
Веб-приложение ASP.NET содержит несколько компонентов, в том числе следующие:
веб-формы (.ASPX-страницы), которые обеспечивают интерфейс для веб-приложений.
код, который находится на .ASPX-странице или на странице с выделенным кодом.
конфигурационные файлы - XML файлы, определяющие
настройки для веб-приложений и веб-сервера.
Visual Studio содержит шаблоны, которые поддерживают создание ряда общих типов проектов. Эти шаблоны содержат все необходимые фай-
лы и гарантируют, что IDE имеет оптимальную конфигурацию для вы-
бранного проекта.
При создании проекта в Visual Studio, вы также можете создать большой контейнер, называемый решением, который может содержать не-
сколько проектов. Visual Studio включает в себя несколько шаблонов про-
ектов на различных языках.
2
В Visual Studio, можно создавать веб-приложения с помощью двух различных шаблонов:
шаблон проекта веб-приложения ASP.NET. Представляет собой модель веб-проектов, которая похожа на типовой веб-проект в Visual
Studio.
шаблон проекта веб-сайта ASP.NET. Представляет собой модель веб-проекта с дополнительными возможностями, дополнительной гибко-
стью в управлении веб-приложениями.
Выбор шаблона проекта зависит от ваших требований и предпочте-
ний к процессу разработки.
Технология выполнения работы
Сценарий. Винзавод Coho предлагает ряд гарантий для своих со-
трудников. В практической работе вы создадите веб-сайт, который позво-
лял бы сотрудникам выбирать и настраивать их опции. Перечень выгод,
которые предлагает Винзавод Coho отображается на нескольких страницах на веб-сайте.
В этой практической работе, будет создан веб-узел ASP.NET, создан компонент в проекте библиотеки классов, а затем ссылка на компонент.
Практическая работа выполняется с помощью Visual C#. В этом упражне-
нии вы создадите ASP.NET Веб-сайт проекта под названием Benefits.
Основными задачами этого мероприятия являются:
Создание новой файловой системы веб-сайта ASP.NET.
Добавление начальных файлов веб-сайта и отображение веб-
страницы Default.aspx.
Задача 1: Создание новой файловой системы веб-сайта ASP.NET.
Запустите Microsoft Visual Studio.
В Visual Studio, создайте следующий новый веб-сайт:
Расположение: F:\PROFILES\useraptech-x-xx\Benefits.
Язык: Visual C#.
Visual Studio создает решение Benefits в папке
F:\PROFILES\useraptech-x-xx\Benefits. Это решение содержит веб-сайт
Benefits. Когда вы создаете веб-узел ASP.NET, обозреватель решения со-
держит следующие пункты для веб-сайта.
Файл |
Описание |
Веб-папка App_Data |
Папка, содержащая файлы данных приложения. |
Файл Default.aspx |
Пустая страница. Обозреватель решения также |
|
содержит файл кода веб-страницы, названной |
|
Default.aspx.cs (Visual C #). |
Файл web.config |
Файл веб-конфигурации. |
Задача 2: Добавить начальные файлы на веб-сайт Benefits.
Добавить все файлы из папки E:\Labfiles\Starter\CS или
E:\Labfiles\Starter\VB на веб-сайт Benefits.
Файлы Header.ascx, medical.aspx и test.aspx, вместе с файлом кода добавляются к веб-сайту Benefits в обозревателе решений. Файлы, которые вы добавили к этому проекту в предыдущем шаге станут основой для ва-
шего веб-сайта.
Упражнение 2: Создание класса.
Сценарий. Веб-сайт Benefits требует компонент, который возвращает список опций для сотрудников, которые предлагает Винзавод Coho. В этом упражнении вы создадите класс с именем Benefits для вашего веб-решения.
Затем вы реализуете класс, чтобы возвратить строку имен.
Основными задачами этого мероприятия являются:
1.Добавление нового класса к веб-узлу.
2.Применение класса для возвращения строки имен.
Задача 1: Добавить новый класс на веб-узел.
Добавить для веб-сайта новый класс Benefits.cs.
Задача 2: Реализовать класс, который возвращает строку имен.
4
1. В классе Benefits добавить следующий код, чтобы создать поль-
зовательскую структуру.
Ваш код должен выглядеть следующим примером.
public struct BenefitInfo {
public string benefitName;
public string benefitPage;
}
Код создает структуры под названием BenefitInfo, которая содержит две строки benefitName и benefitPage.
2. В классе Benefits добавить следующий код для создания метода
GetBenefitsList.
3. Ваш код должен выглядеть следующим примером.
public BenefitInfo[] GetBenefitsList() { BenefitInfo[] benefitsArray = new BenefitInfo[3]; benefitsArray[0].benefitName = "Dental"; benefitsArray[0].benefitPage = "dental.aspx"; benefitsArray[1].benefitName = "Medical"; benefitsArray[1].benefitPage = "medical.aspx"; benefitsArray[2].benefitName = "Life Insurance"; benefitsArray[2].benefitPage = "life.aspx"; return benefitsArray;
}
Метод GetBenefitsList создает массив структур BenefitInfo, заполняет структуры информацией, а затем возвращает массив.
4.Постройте веб-сайт.
5.Убедитесь, что веб-сайт компилируется без ошибок.
Результаты: После этого упражнения, вы должны были добавить класс к веб-узлу и реализовать его таким образом, чтобы он осуществлял возврат строки имен.
5
Упражнение 3: Вызов компонента.
Сценарий. В этом упражнении вы будете писать код для проверки класс Benefits на веб-странице. Вы будете также расширять класс Benefits
для отображения дополнительной опции.
Основными задачами этого мероприятия являются:
Открыть файл кода для веб-страницы test.aspx и просмотреть страницу в браузере.
Внести изменения в класс.
Построить и протестировать веб-сайт.
Задача 1: Открыть файл с фоновым кодом для веб-страницы test.aspx
и просматривать страницы в браузере.
1. Открыть файл с фоновым кодом для test.aspx.
Закодируйте экземпляр компонента, а затем вызовите метод
GetBenefitsList, который возвращает список льгот и имена страниц.
2. Открыть test.aspx в браузере.
Откроется окно браузера и отобразит все опции льгот на веб-
странице test.aspx.
3. Закройте браузер.
Задача 2: внести изменение в класс.
1. В классе Benefits изменить первую строку кода, чтобы увеличить размер массива на единицу.
Ваш код должен выглядеть следующим примером.
BenefitInfo[] benefitsArray = new BenefitInfo[4];
2. В классе Benefits добавить следующий код:
В конце класса добавить еще одну опцию в массив.
Ваш код должен выглядеть следующим примером.
benefitsArray[3].benefitName = "Retirement Account";
benefitsArray[3].benefitPage = "retirement.aspx";
6
Задача 3: Построить и протестировать веб-сайт.
1.Постройте веб-сайт.
2.Убедитесь, что веб-сайт компилируется без ошибок.
3.Откройте test.aspx в браузере.
4.Откройте окно обозревателя и веб-страницу test.aspx. Теперь также отображается Новая опция льготы из класса.
5.Закройте браузер.
6.Закройте Visual Studio.
Результаты: После этого упражнения, вы проверили класс Benefits на веб-странице и усовершенствовали класс Benefits для отображения допол-
нительных выгод.
Вопросы для самоконтроля
1.Из каких компонентов состоит . NET Framework 3.5?
2.Какова цель CLR?
3.Вы должны создать программируемый веб-компонент, с помо-
щью которого вы сможете обмениваться с другими веб-приложениями.
Какой компонент вы должны создать?
4. Необходимо разработать приложение, которое должно поддер-
живать несколько версий .Net Framework. Какой инструмент позволит это выполнить?
5.Какие языки программирования поддерживаются Visual Studio?
6.Какие шаблоны проектов предоставляются в Visual Studio?
7.Когда Вы создаете веб-приложение, какие файлы Visual Studio
при этом предоставляются?
8.Каким образом вы можете создавать и просматривать веб-форму?
9.Что такое пространство имен?
10.Когда вы собираете класс, где находится сохраненный DLL-
файл?
7
Время, отведенное на выполнение работы
Работа должна быть выполнена за одно занятие – 2 часа.
Отчет сдается на последнем занятии.
8
Практическая работа №2. Создание Microsoft ASP.NET веб-формы.
Введение
Цель работы: создание пользовательского интерфейса на сайте при помощи ASP.NET веб-формы.
Основные понятия
Веб-формы являются программируемыми веб-страницами, которые служат в качестве пользовательского интерфейса (UI) для веб-приложений
Microsoft ASP.NET. Веб-форма предоставляет пользователю информацию в любой тип браузера, а он реализует логику приложения с помощью сер-
верного код.
Чтобы добавить дополнительные формы веб-приложений, выполни-
те следующие действия:
1.В Solution Explorer щелкните правой кнопкой мыши на имени проекта или веб-сайта, а затем нажмите кнопку Добавить новый элемент.
2.В диалогового окна Добавление нового элемента веб-форм,
введите имя веб-формы, а затем нажмите кнопку Добавить.
Серверные элементы управления ASP.NET – это компоненты, кото-
рые выполняются на сервере и инкапсулируют пользовательский интер-
фейс и другие, связанные с этим функции. Они включают в себя кнопки,
текстовые поля и списки.
Есть много видов серверных элементов управления, которые доступ-
ны в ASP.NET. В целом они разделяются на серверные элементы управле-
ния HTML и элементы управления веб-сервером. HTML элементы веб-
формы не доступны на сервере. Элементы управления веб-сервером вклю-
чают элементов управления, такие как кнопки и текстовые поля, а также специальные элементы управления, такие как календари.
9
Представление состояния записывает состояния элементов управле-
ния веб-формы. Представление состояния не может быть отключено на уровне страницы, и показано для отдельного элемента управления. В ASP.NET 2.0 введено управление состоянием в дополнение к представле-
нию состояния.
Серверные элементы управления HTML могут быть описаны как элементы серверного кода. Такое преобразование позволяет использовать элементы управления для таких событий, которые обрабатываются на сер-
вере. Серверные элементы управления HTML включают атрибут runat="server".
Встроенные элементы управления веб-сервером соответствуют про-
стым элементов HTML. Проверка управления скрыто контролируют поль-
зовательский ввод в отношении предопределенных шаблонов. Широкий круг элементов управления веб-сервером предоставляют широкие функци-
ональные возможности, для того, чтобы ваша веб-форма могла осуществ-
лять сложные функции. Элементы управления типа списка, таблиц могут отображать данные из источника данных.
С помощью главной странице, вы можете обмениваться контентом между несколькими страницами в веб-приложении. Это позволяет вам ор-
ганизовать свое приложение на определенном уровне.
Технология выполнения работы
В этой практической работе, вы создадите пользовательский интерфейс для веб-форм Default.aspx и Life.aspx и страницы на веб-сайте
Benefits. Веб-форма Default.aspx является домашней страницей веб-сайта
Benefits. Веб-форма Default.aspx отображает список преимуществ, которые предлагает компания. Веб-форма Life.aspx позволяет пользователю ввести информацию о страховании такую, как свое имя, дату рождения, а охват суммы. Cтраница Life.aspx использует также главную страницу, которая
10