Выполнение лабораторной работы

ЛАБОРАТОРНАЯ РАБОТА № 3

Разработка Web приложения по вводу и корректировке базы данных, ориентированного на конечного пользователя

Формальная часть

Цель работы

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

Предмет и содержание работы

Лабораторная работа направлена на приобретение навыков по разработке информационных систем с использованием интернет технологий.

В процессе работы необходимо:

Создать форму, которая содержит данные таблицы по основным идентифицирующим сведениям и таблицы со сведениями о лицензиях. Эти таблицы должны быть соединены между собой с типом связи "один ко многим". Сведения должны отображаться с помощью GridView.

Первая таблица должна отображать следующие показатели:

§ ОГРН

§ ИНН

§ КПП

Вторая таблица должна отображать:

§ Номер лицензии

§ Дата принятия решения

§ Наименование лицензирующего органа

§ Код вида деятельности

§ Наименование вида деятельности

§ Наименование состояния лицензии

§ Дата начала деятельности

§ Дата окончания деятельности

§ Дата приостановления деятельности

§ Дата возобновления деятельности

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

На форме должны быть размещены элементы управления, позволяющие задавать режим отображения лицензий – отображать либо все записи из таблицы, либо только актуальные лицензии (действующие в момент времени, заданный пользователем)

3.1.3 Оборудование и технические средства:

Техническими средствами для выполнения работы являются средства лаборатории «Электронный офис». Программное средство разрабатывается с помощью Microsoft Visual Studio 2010.

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

1. Создать форму для отображения основных идентифицирующих сведений и сведений о лицензиях

2. Добавить на форму два элемента GridView для отображения информации

3. Создать источник данных для первой таблицы GridView, содержащий основные показатели (ОГРН, ИНН и КПП).

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

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

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

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

8. Отладить приложение, добиться правильной работы.

Контрольные вопросы

1. Каким образом из элемента GridView извлечь информацию из ячейки выделенной строки, если столбец, содержащий ячейку, является невидимым (свойство Visible установлено в True)

2. С помощью какого свойства можно извлечь информацию из скрытого поля (HiddenField)

3. Какие свойства надо изменить, чтобы информация в таблице GridView отображалась по страницам

4. Каким образом можно программным путем извлечь информацию из ячеек выделенной строки элемента GridView

5. Каким образом программным путем определить количество строк в элементе GridView

6. Каким образом сделать видимой граничную рамку элемента Panel

7. Можно ли занести с панели элементов на Web форму такие объекты, как SqlCommand и SqlConnection

8. Можно ли при разработке Web приложения программным путем создавать объекты DataSet и DataTable

3.3 Список литературы:

1. Хандхаузен, Р. Знакомство с Microsoft Visual Studio 2005 Team System / Р. Хандхаузен. – СПб. : Питер, 2003. – 678 с.

2. Пауэрс, Л., Снэлл М. Microsoft Visual Studio 2008 / Л. Пауэрс, М. Стэлл. – СПб. : БХВ-Петербург, 2009. – 547 с.

3. Visual Studio 2010 // Библиотека MSDN (по русски) [Электронный ресурс]. – Электрон. док. – Режим доступа : http://msdn.microsoft.com/ru-ru/library/dd831853(VS.100).aspx . - Загл. с экрана.

Ход выполнения работы

Исходные данные

При разработке программы используется база, данных созданная при выполнении лабораторных работ по дисциплине "Инструментальные средства программирования.

Выполнение лабораторной работы

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

Создадим пустой проект с именем WebOkvedEdit.

Добавим к проекту форму WebForm1 и расположим на ней таблицу HTML следующего вида.

Рисунок 3.1 – Вид формы после добавления таблицы

Поместим в первую строку элемент GridView1 для отображения основных идентифицирующих сведений о юридическом лице. У GridView1свойство AutoGenerateSelectButton установим в True.

В самую нижнюю строку поместим панель Panel3, а на панели разместим элемент GridView2 для отображения сведений о лицензиях. У панели зададим ширину и высоту, а также свойство ScrollBars следующим образом.

Рисунок 3.2 – Установка свойств панели

Во вторую строку поместим CheckBox1 с текстом "Учитывать дату", TextBox1 и метку Label2. У этой метки изменим свойство ForeColor таким образом, чтобы она стала более заметной.

Третью строку пока оставим без изменений.

В четвертую строку поместим метку Label1 и кнопку Button13. Свойство Text этой кнопки установим как "Добавить новую строку", а свойство Visible установим в True.

У элементов GridView1 и GridView2 использую пункт меню "Автоформат", который раскрывается после нажатия на смарт-тег, изменим стиль на "Классический".

Рисунок 3.3 – Вид формы после добавления таблиц

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

Рисунок 3.4 – Определение источника данных для первой таблицы

После этого вид формы изменится.

Рисунок 3.5 – Вид таблицы после подключения источника данных

У таблицы GridView1 установим свойство AllowPaging в True, и свойство PageSize сделаем равным 8.

Зададим также у GridView1 свойство DataKeyNames равным idUl (обычно это выполняется автоматически). Это необходимо для того чтобы этот ключ мог использоваться в качестве параметра в источнике данных для второй таблицы. За счет этого будет обеспечиваться связь между таблицами.

Зайдем в редактор колонок и у колонки idUl зададим свойство Visible равным False. Заголовки колонок изменим на русские названия.

Рисунок 3.6 – Вид таблицы после редактирования колонок

Перед заданием источника данных для второй таблицы занесем на форму с панели инструментов скрытое поле HiddenField, у которого свойство Name изменим на DateField.

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

Рисунок 3.7 – Определение источника данных для второй таблицы

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

Рисунок 3.8 – Определение параметра Id

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

Теперь определим второй параметр.

Рисунок 3.9 – Определение параметра IsDate

Как видим источником данных для второго параметра является CheckBox1.

В качестве источника для третьего параметра будем использовать скрытое поле DataField, которое мы создали ранее.

Рисунок 3.10 – Определение параметра Date

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

Рисунок 3.11 – Вид таблицы после определения источника данных

Войдем в редактор столбцов для второй таблицы и заменим названия на русские. Поле IdUlOkved сделаем невидимым и переместим его на последнее место в списке столбцов. У столбцов, отображающих дату, зададим DataFormatString в виде {0:d}. У поля Main раскроем свойство ItemStyle и зададим HorizontalAlign как Center.

Зададим для GridView2 свойство DataKeYNames как IdUlOkved. Это нам потребуется для того, чтобы в процессе обработки данных получать значение поля IdUlOkved несмотря на то, что оно является невидимым.

Форма после этого будет выглядеть следующим образом.

Рисунок 3.12 – Вид таблицы после корректировки столбцов

Для того чтобы запустить форму на отладку, необходимо определить значение для скрытого поля DataField. Если оно будет иметь значение null, с помощью источника данных мы не получим ни одной строки, ошибки при этом выдаваться не будут. Для определения этого поля напишем метод DateChecking().

Как видим, в этом методе мы не только определяем скрытое поле DataField, но и проверяем правильность даты, заданной пользователем. Если дата задана неправильно, сообщение об этом заносится в текст метки Label2.

Создадим также метод LinesCount(), который будет инициировать соединение таблицы GridView2 с источником данных, а также будет подсчитывать количество строк, отображаемых в таблице. Кроме этого, данный метод будет делать видимым кнопку, на которой содержится текст "Добавить новую строку". Это необходимо для того, что при отсутствии данных по некоторому юридическому лицу, таблица GridView2 с кнопками для добавления и корректировки данных будет невидимой.

Создадим обработчик события SelectedIndexChanged для GridView1.

Запустим форму на отладку и убедимся, что связь между таблицами работает. При выборе юридического лица должно изменяться содержимое второй таблицы. Кроме этого, в зависимости от режима учета даты информация будет выдаваться либо в полном объеме, либо только актуальная на заданную дату.

Рисунок 3.13 – Отображение информации без учета даты

Рисунок 3.14 – Отображение информации с учетом даты

Теперь занесем на форму в среднюю строку таблицы HTML элементы управления для корректировки и добавления новых строк.

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

Рисунок 3.15 – Панель для ввода и корректировки данных

При этом у панели мы задали размеры и параметры рамки следующим образом.

Рисунок 3.16 – Свойства панели для ввода и корректировки данных

У ячейки таблицы, которая содержит метку Label4, мы изменили свойство Align на center, а у самой метки изменили свойства Font и ForeColor следующим образом.

Рисунок 3.17 – Свойства метки Label4

У ячейки таблицы HTML, которая содержит Literal1, изменили цвет путем определения свойства Style следующим образом.

Рисунок 3.18 – Изменение свойств ячейки таблицы

Во вторую ячейку средней строки основной таблицы HTML поместим панель Panel4 и занесем на панель таблицу GridView3, с помощью которой будем отображать виды экономической деятельности, содержащиеся в таблице Okved. Кроме этого расположим здесь элемент TextBox для ввода фрагмента наименования и кнопку с текстом "Отбор данных" для поиска данных, содержащих фрагмент наименования, заданный в элементе TextBox.

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

У панелей Panel4 и Panel1 свойство HorizontalAlign установим как Center. Свойство Visible у Panel1, Panel2 и Panel4 установим в False. Ширину (свойство Width) у панели Panel4 сделаем равным 400.

Рисунок 3.19 – Вид элементов для ввода и корректировки данных

Создадим скрытое поле NameOkvedField, которое будем использовать в качестве параметра при отборе данных из таблицы Okved.

Сформируем для таблицы GridView3 источник данных SqlDataSource3 следующим образом.

Рисунок 3.20 – Определение команды Select источник данных

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

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

Рисунок 3.21 – Вид таблицы GridView3 после определения источника данных

Зайдем в редактор столбцов, переименуем столбы GridView3 и добавим новый столбец типа ButtonField с текстом "Выбор". Свойства ButtonType и CommandName зададим следующим образом.

Рисунок 3.22 – Корректировка столбцов таблицы GridView3

Свойство AllowPaging установим в True и PageSize сделаем равным 3.

После этого GridView3 будет выглядеть следующим образом.

Рисунок 3.23 – Вид таблицы GridView3 после корректировки столбцов

Создадим обработчик события для кнопки "Отбор данных".

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

Для того чтобы при нажатии на кнопку "Выбор" выбиралась необходимая информация, надо создать обработчик события RowCommand для таблицы GridView3.

Далее сформируем обработчики событий для кнопки "Выбор" и для кнопки "Отмена", которые используются для выбора даты (они расположены на панели Panel1).

То есть, при нажатии на кнопку "Выбор" информация о дате заносится в один из элементов TexBox и панель становится видимой. При нажатии на кнопку "Отмена" панель становится невидимой.

Кроме этого добавим следующие операторы в метод Page_Load.

Первый из них необходим для того, чтобы правильная дата сформировалась, даже если пользователь не выбрал никакой даты. Второй оператор необходим, чтобы значение скрытого поля NameOkvedField никогда не имело значение null.

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

Создадим скрытые поля, которые будут использоваться при добавлении и корректировке строк (из показанных на следующем рисунке поле DateField было создано ранее).

Рисунок 3.24 – Поля, используемые для добавления и корректировки данных

Добавим к проекту папку Icons, в которую включим иконки для кнопок "Добавить", "Удалить" и "Изменить". Эти иконки можно найти в архивном файле "Материалы для лабораторных работ.rar". Для добавления папки использовать пункты контекстного меню: Добавить Создать папку. Для добавления файла иконки использовать пункты меню: Добавить Существующий элемент.

Обозреватель решений после этого будет выглядеть следующим образом.

Рисунок 3.25 – Добавление иконок в проект

Зайдем в редактор столбцов GridView2 и создадим три новых столбца "Добавить", "Удалить" и "Изменить" с типом ButtonField. Свойство ButtonType заменим на Image и зададим ImageUrl следующим образом.

Рисунок 3.26 – Выбор иконки для кнопки "Добавить"

Свойства кнопки "Добавить" будут выглядеть следующим так.

Рисунок 3.27 – Свойство кнопки "Добавить"

Необходимо обратить внимание, что в качестве CommandName не надо использовать названия Select, Delete, Insert и Update. Так как в этом случае действия по удалению, вставке и корректировке будут выполняться некоторым стандартным образом. Мы же задали свойство CommandName русскими словами, поэтому выполнение операций будет выполняться в соответствии с кодом, который мы зададим в обработчике события RowCommand.

Аналогичным образом добавим кнопки "Удалить" и "Изменить". Элемент GridView2 после этого будет выглядеть следующим образом.

Рисунок 3.28 – Вид таблицы после добавления кнопок

Создадим обработчик события RowCommand для таблицы GridView2. Занесем в него программный код для выполнения действий в зависимости от нажатой кнопки.

Теперь вернемся к панели Panel2 и создадим обработчик событий для кнопки "Готово". В этот обработчик мы пока не будем включать операторы контроля данных, введенных пользователем.

Создадим также обработчик события для кнопки "Отмена".

Ранее мы определили для источника данных SqlDataSource2 команду Select, теперь зададим команды для добавления, удаления и изменения.

Команда для добавления (Insert) будет выглядеть следующим образом.

Рисунок 3.29 – Определение команды Select для источника данных

Как видим, параметр IdUl мы выбираем из первой таблицы GridView1, все остальные параметры выбираем из скрытых полей, которые мы определили ранее.

Команда для удаления (Delete) будет выглядеть так.

Рисунок 3.30 – Определение команды Delete для источника данных

Значение IdUlOkved здесь выбирается из самой GridView2. Для этого мы ранее определили в ней свойство DataKeyNames.

Команду для корректировки (InsertCommand) определим следующим образом.

Рисунок 3.31 – Определение команды Update для источника данных

Запустим проект на отладку и убедимся, что он работает.

Рисунок 3.32 – Вид данных после выделения юридического лица

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

Рисунок 3.33 – Вид данных после нажатия на кнопку "Добавить"

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

Рисунок 3.34 – Вид данных при обращении к справочнику

Здесь мы можем воспользоваться фильтром, где можно ввести фрагмент наименования и нажать на кнопку отбор данных. После нажатия на кнопку "Выбор" информация заносится на панель ввода данных.

Рисунок 3.35 – Вид данных после обращения к справочнику

Аналогичным образом выбираются даты, хотя даты можно задать вручную в элементе TextBox. Если дата введена неправильно, должна выдаваться ошибка.

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

Для этого сначала создадим два метода, которые будем использовать при контроле данных.

Вставим в обработчик события кнопки "Готово" операторы для первичного контроля дат.

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

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

Для того чтобы можно было работать с объектами типа DataTable и SqlCommand, добавим два дополнительных оператора using.

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

Теперь необходимо проверить действие программы во всех возможных режимах работы.

При наличии ошибок информация будет выдаваться в следующем виде.

Рисунок 3.36 – Вид данных при обнаружении ошибок