SlideShare a Scribd company logo
1 of 36
Крос-платформне програмування
Лабораторна робота №1. Створення шаблону сторінки MasterPage. Робота з БД
Мета роботи: Розробити шаблон сторінки MasterPage і використати його для
створення створення сторінок веб-сайта, що взаємодіє з БД.
Порядок виконання:
1. Створення веб-вузла (або веб-застосування)
2. Створення сторінки MasterPage.
3. Створення макету сторінки MasterPage
4. Додавання на сторінку MasterPage статичного вмісту
5. Додавання прототипу вмісту
6. Створення вмісту сторінки MasterPage
7. Додавання вмісту до сторінки вмісту
8. Передача параметрів між сторінками
9. Редагування записів
10. Додавання та видалення елементів з таблиць БД
11. Тестування сторінок
12. Індивідуальне завдання
1. Створення веб-вузла (або веб-застосування)
Якщо веб-сайт вже створений в Visual Web Developer (наприклад, в результаті
виконання кроків у розділі Покрокове керівництво. Створення базової веб-сторінки в Visual
Web Developer), можна використовувати цей веб-вузол і перейти до наступного розділу
Створення сторінки MasterPage. В іншому випадку створіть новий веб-сайт і сторінку,
виконавши наступні кроки.
1.1. Відкрийте Visual Studio (або Visual Web Developer).
1.2. У меню File виберіть New | Web Site. Відкриється діалогове вікно New Web Site.
1.3. У групі Installed Templates виберіть мову Visual C# та шаблон
ASP.NET Web Site.
1.4. У полі Web location введіть ім'я папки, де будуть зберігатися сторінки веб-вузла.
Наприклад, введіть назву папки D:workWebSite.
1.5. Натисніть кнопку ОК. Visual Studio створить папку і нову сторінку з ім'ям
Default.aspx.
Сторінка MasterPage є шаблоном зовнішнього вигляду сторінок. У наступному розділі
спочатку створюється сторінка MasterPage. Потім використовується таблиця для розміщення
на сторінці MasterPage меню, емблеми, верхнього та нижнього колонтитулів, які будуть
відображатися на кожній сторінці веб-вузла. Також використовується прототип вмісту, який
є областю на сторінці MasterPage, яку можна замінити відомостями з вмісту сторінки.
2. Створення сторінки MasterPage
2.1. У вікні Solution Explorer клацніть правою кнопкою миші на імені веб-сайту (або
веб-застосування) та виберіть команду Add New Item.
2.2. У групі Installed Templates виберіть мову Visual C# та шаблон Master Page.
2.3. У полі Name введіть MasterPage.master.
2.4. Встановіть прапорець Place code in separate file.
2.5. Натисніть кнопку Add.
Нова сторінка MasterPage відкриється в поданні Source. У верхній частині цієї
сторінки знаходиться директива @Master замість директиви @Page, яка зазвичай
розташованої у верхній частині сторінок ASP.NET. Основна область сторінки містить
елемент керування ContentPlaceHolder, який є областю сторінки MasterPage, вміст якої буде
об'єднано з вмістом сторінок під час виконання. Більш докладно робота з прототипом вмісту
буде розглянута нижче.
Сторінка MasterPage визначає зовнішній вигляд сторінок веб-вузла. Вона може
містити будь-яке поєднання статичного тексту та елементів керування. Головна сторінка
також містить один або кілька прототипів вмісту, які визначають, де буде відображатися
динамічний вміст при відкритті сторінки.
3. Створення макету сторінки MasterPage
3.1. Перейдіть у подання Design.
3.2. У списку, що розкривається у верхній частині вікна Property, виберіть
DOCUMENT, а потім для властивості BgColor задайте колір, наприклад блакитний.
3.3. Клацніть область сторінки, де потрібно розмістити макетну таблицю.
Примітка. Не розміщуйте макетну таблицю усередині елемента керування
ContentPlaceHolder.
3.4. У меню Table виберіть команду Insert Table.
3.5. У діалоговому вікні Insert Table створіть таблицю з трьома рядками і одним
стовпцем і натисніть кнопку ОК.
3.6. Помістіть курсор всередині другого рядка таблиці. У меню Table в підменю
Modify виберіть Split Cells.
3.7. У діалоговому вікні Split Cells виберіть Split into columns, вкажіть кількість 3 і
натисніть кнопку OK.
3.8. Перетягніть кордони лівої крайньої та правої крайньої комірок у другому рядку
таблиці так, щоб зменшити їх ширину (або виберіть ці комірки і встановіть значення їх
ширини у вікні Property).
3.9. Вибрати всі комірки у таблиці і задайте для параметра BgColor колір, відмінний
від кольору фону.
Після розмітки таблиці можна додати на сторінку MasterPage вміст, який буде
відображатися на всіх сторінках. В якості нижнього колонтитула можна додати
повідомлення про авторські права, а у верхній колонтитул – меню. Можна також додати
зображення емблеми сайту.
4. Додавання на сторінку MasterPage статичного вмісту
4.1. Клацніть нижню клітинку і потім введіть текст нижнього колонтитула, наприклад,
© 2012 НУХТ.
4.2. З групи Navigation панелі елементів Toolbox перетягніть у верхню комірку
таблиці елемент керування Menu.
4.3. Встановіть значення Horizontal у властивості Orientation елемента керування
Menu.
4.4. Клацніть смарт-тег в елементі керування Menu і виберіть Edit Menu Items у
діалоговому вікні Menu Tasks.
4.5. У групі Items двічі клацніть значок , щоб додати два елементи меню.
4.6. Клацніть елемент меню і встановіть для параметра Text значення
Форма GridView, а для параметра NavigateUrl – значення GridViewForm.aspx. Клацніть
другий елемент меню і встановіть для параметра Text значення Форма DetailsView, а для
параметра NavigateUrl – значення DetailsViewForm.aspx. Натисніть кнопку ОК.
Примітка. Якщо форми GridViewForm.aspx та DetailsViewForm.aspx ще не існують,
заповніть поля NavigateUrl елементів меню пізніше, перед виконанням етапу 8, на якому
відбувається тестування вже готових сторінок.
4.7. Клацніть елемент меню і у вікні Property у властивості ForeColor задайте чорний
колір. Після цих змін сторінка MasterPage матиме наступний вигляд:
4.8. Для розташування на сторінці MasterPage зображення емблеми сайту у вікні
Solution Explorer клацніть правою кнопкою миші на імені веб-сайту та виберіть команду
Add Existing Item. Перейдіть до файлу зображення, виберіть його та натисніть кнопку Add.
З групи Standard панелі елементів Toolbox перетягніть елемент керування Image у крайню
ліву комірку середнього рядка таблиці. У вікні Property задайте для властивості ImageUrl
елемента керування Image ім'я файлу зображення.
Тепер можна помістити прототип вмісту, щоб вказати місце, в якому на сторінці
MasterPage буде відображатися вміст під час виконання.
5. Додавання прототипу вмісту
5.1. З групи Standard панелі елементів Toolbox перетягніть елемент керування
ContentPlaceHolder у середньу комірку другого рядка таблиці. Властивість ID цього
елемента керування має значення ContentPlaceHolder1. Можна залишити це ім'я або змінити
його. Воно знадобиться пізніше. Після цих змін сторінка MasterPage матиме наступний
вигляд:
5.2. Збережіть сторінку MasterPage.
Сторінка MasterPage надає шаблон для вмісту. Вміст для сторінки MasterPage
визначається шляхом створення сторінки ASP.NET, яка пов'язана зі сторінкою MasterPage.
Сторінка вмісту є спеціалізованою формою ASP.NET, яка містить тільки вміст, об'єднаний зі
сторінкою MasterPage. Додайте на сторінку вмісту текст і елементи керування, які потрібно
відобразити, коли користувачі запитують цю сторінку.
6. Створення вмісту сторінки MasterPage
6.1. У вікні Solution Explorer клацніть правою кнопкою миші на імені веб-сайту та
виберіть команду Add New Item.
6.2. У групі Installed Templates виберіть мову Visual C# та шаблон Web Form.
6.3. У полі Name введіть GridViewForm.aspx.
6.4. Встановіть прапорець Select master page та натисніть кнопку Add.
6.5. Відкриється діалогове вікно Select a Master Page.
6.6. Клацніть MasterPage.master і натисніть кнопку ОК.
Буде створений файл ASPX. Сторінка містить директиву @Page, яка підключає
поточну сторінку до обраної сторінки MasterPage за допомогою атрибуту MasterPageFile, як
показано у наступному прикладі коду.
Сторінка також містить елемент керування вмістом Content, з яким далі буде
працювати користувач.
Сторінка вмісту не має звичайних елементів, що формують сторінку ASP.NET, таких
як html, body або form. Замість них на сторінці вмісту розташовується один (або декілька)
елемент керування Content, який буде відображатися на сторінці MasterPage у створених
областях прототипу вмісту.
7. Додавання вмісту до сторінки вмісту
7.1. Перейдіть у подання Design.
Елементи керування ContentPlaceHolder з сторінки MasterPage на новій сторінці
вмісту відображаються як елементи керування Content. Вміст сторінки MasterPage
відображається таким чином, щоб можна було бачити розмітку, але не можна було її змінити
під час редагування сторінки вмісту.
7.2. З групи Data панелі елементів Toolbox перетягніть та розташуйте у елементі
керування ContentPlaceHolder1, який міститься у середній комірці другого рядка таблиці,
елементи керування GridView та SqlDataSource.
7.3. Налаштуйте елемент керування SqlDataSource1 на певну таблицю з вже існуючої
бази даних. Для цього виберіть пункт Configure Data Source… у інтелектуальному
дескрипторі елемента SqlData1. На екрані з’явиться наступне вікно
Choose Your Data Connection майстра налаштувань.
7.3.1. Натисніть кнопку New Connection…, щоб встановити з’єднання з базою даних.
У вікні Add Connection натисніть кнопку Change…, щоб змінити джерело даних.
У вікні Change Data Source з переліку джерел даних виберіть
Microsoft Access Database File та натисніть кнопку OK.
7.3.2. На екрані з‘явиться вікно Add Connection, в якому у полі Database file name
слід вказати імя обраної бази даних (у прикладі D:NastyaExampledb1.mdb) та натиснути
кнопку OK.
7.3.3. Ви знову опинитесь у вікні Choose Your Data Connection майстра налаштувань.
Натисніть кнопку Next та перейдіть до наступного вікна, в якому теж натисніть кнопку Next.
У вікні Configure the Select Statement майстра налаштувань виберіть перемикач
Specify columns from a table or view та необхідну таблицю зі списку Name таблиць БД (у
прикладі це таблиця Goal). Зверніть увагу на те, що в області Columns вибору полів таблиці
вибрано прапорець біля значення *. Це вказує на те, що у SQL-запиті будуть отримані усі
поля таблиці. Після вибору таблиці натисніть кнопку OK для переходу до наступного вікна
майстра налаштувань.
7.3.4. У наступному вікні Test Query майстра налаштувань натисніть кнопку , щоб
перевірити, чи виконується відповідний запид до БД. Зауважте, що таку перевірку слід
робити лише у тому випадку, якщо запит є запитом на вибірку даних (тобто запитом
SELECT). Інакше відразу натискайте кнопку кнопку Finish, щоб завершити роботу у майстрі
налаштувань
7.4. Прив'яжіть елемент керування GridView до джерела данних. Для цього в
інтелектуальному дескрипторі елемента GridView виберіть зі списка Choose Data Source
елемент керування SqlDataSource1.
7.5. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат.
7.6. Виконайте кроки 6.1–6.6 та 7.1–7.5 для створення сторінки вмісту
DetailsViewForm.aspx з наступними відмінностями:
7.6.1. На кроці 7.2 розташуйте на сторінці елементи керування DetailsView та
SqlDataSource.
7.6.1. Зробіть запит на вибірку даних з таблиці параметризованим. Для цього на кроці
7.3.3 перед тим, як натиснути кнопку OK, натисніть кнопку WHERE, щоб вказати формат
параметризованого запиту. Налаштуйте відповідні поля у вікні Add WHERE Statement так,
як показано на рисунку. Тут у полі Column виберіть із списка ключове поле відповідної
таблиці (у прикладі GoalNo), у полі Source – значення QueryString (значення параметру
передаватиметься через рядок запиту). Праворуч з’являться нові параметри: у полі
QueryString field знову вкажіть ключове поле відповідної таблиці, а у полі Default value –
значення параметру за промовчанням (це може бути номер першого існуючого у таблиці
елемента). Натисніть кнопку Add, щоб додати новий вираз до списку виразів. Потім
натисніть кнопку OK, щоб повернутись у вікно Configure the Select Statement майстра
налаштувань.
Після виконання цих дій у вікні Test Query майстра налаштувань можна буде
отримати наступний результат:
8. Передача параметрів між сторінками
8.1. Поверніться у форму GridViewForm.aspx. У інтелектуальному дискрипторі
елемента керування GridView виберіть пункт Edit Columns…. У вікні Fields зі списку
Availiable Field виберіть тип HyperLinkField та натисніть кнопку Add.
8.2. Нове поле потрапить у список Selected Field, а праворуч з’явиться перелік
властивостей, які слід налаштувати так, як показано на наступному рисунку. У властивостях
HeaderText та Text задаються заголовок та вміст нового стовпця (у прикладі Info). У
властивості NavigateUrl вибирається веб-сторнінка, якій передається керування (у прикладі
DetailsViewForm.aspx), у DataNavigateUrlFields – вказується перелік параметрів (у прикладі
GoalNo), а у DataNavigateUrlFormatString – задається формат рядка запиту (у прикладі
DetailsViewForm.aspx?GoalNo={0}). Декілька разів натисніть кнопку , щоб нове поле
Info опинилося першим у списку Selected Field.
8.3. Натисніть кнопку OK. В елементі керування з’явиться новий стовбець Info з
відповідним вмістом.
8.4. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат.
Тепер при натисканні на посилання Info у певному рядку таблиці (у прикладі “Выбор
СЭД”) відбувається перехід на форму DetailsViewForm.aspx, що містить відповідний
елемент:
9. Редагування записів
9.1. У формі GridViewForm.aspx у інтелектуальному дискрипторі елемента
керування GridView виберіть пункт Edit Columns…. У вікні Fields зі списку Availiable Field
виберіть тип Edit, Update, Cancel з групи CommandField. Натисніть кнопку Add, щоб
додати нове поле, а потім – кнопку OK.
Додавання нового поля до елемента керування GridView можна виконати іншим
чином, якщо в інтелектуальному дескрипторі елемента вибрати Add New Column. Тоді на
екрані з’явиться інше вікно – Add Field. Зі списка Choose a Field Type виберіть тип поля
CommandField, виберіть прапорці Edit/Update та Show Cancel Button, переконайтеся, що
всі інші прапорці не помічені як вибрані. Клацніть на кнопці ОК, щоб додати стовпець з
редагованими елементами керування.
9.2. Додайте до елемента керування SqlDataSource1 новий SQL-запит. Для цього
виберіть пункт Configure Data Source… у інтелектуальному дескрипторі елемента
SqlDataSource1 та натискайте кнопку Next, поки не опинитесь у вікні
Configure the Select Statement майстра налаштувань. Тут виберіть перемикач
Specify a custom SQL statement or stored procedure та натисніть кнопку Next.
9.3. У наступному вікні майстра налаштувань виберіть вкладку UPDATE та натисніть
кнопку Query Builder….
9.4. На екрані з’явиться вікно будівника запитів Query Builder та вікно Add Table.
Спершу у вікні Add Table віберіть необхідну таблицю (у прикладі Goal) та натисніть кнопку
Add.
У вікні Query Builder введіть наступний SQL-запит на редагування та натисніть
кнопку OK.
9.5. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат.
Вигляд форми до редагування:
Вигляд форми під час редагування:
Вигляд форми після редагування (скорочена назва задачі з номером 7 змінилася з
ПМЖ на Страна):
10. Додавання та видалення елементів з таблиць БД
10.1. Перейдіть на сторінку DetailsViewForm.aspx та додайте до елемента керування
можливість додавання та видалення елементів. Для цього виконайте кроки інструкції 9.1–9.4
з наступними відмінностями.
10.1.1. На кроці 9.1 у вікні Add Field зі списка Choose a Field Type виберіть
CommandField, для операції додавання елемента виберіть прапорці New/Insert та Show
Cancel Button, а для операції видалення – прапорці Delete та Show Cancel Button.
Переконайтеся, що всі інші прапорці не помічені як вибрані.
10.1.2. На кроці 9.3 у вікні майстра налаштувань для операції додавання елемента
виберіть вкладку INSERT, а для операції видалення – вкладку DELETE.
10.1.3. На кроці 9.4 у вікні Query Builder SQL-запит для операції додавання елемента
матиме наступний вигляд:
а SQL-запит для операції видалення – такий:
Примітка. Додати до форми GridViewForm.aspx та DetailsViewForm.aspx поле для
редагування існуючого або створення нового елемента таблиці можна, вибравши у
інтелектуальному дискрипторі елемента керування GridView або DetailsView пункт
Edit Columns…. Щоб додати відповідне поле у вікні Fields зі списку Availiable Field
потрібно вибрати тип CommandField => Edit, Update, Cancel та натисніть кнопку Add (див.
рис. нижче).
10.2. Збережіть сторінку. В результаті вона матиме наступний вигляд у поданні Design
11. Тестування сторінок
11.1. Перейдіть на сторінку GridViewForm.aspx і натисніть клавіші CTRL+F5.
ASP.NET об'єднає вміст цієї сторінки з макетом сторінки MasterPage.master в одну сторінку
і відобразить підсумкову сторінку у браузері.
11.2. Клацніть на пункті меню Форма DetailsView, відкриється сторінка
DetailsViewForm.aspx. Вона також об'єднана зі сторінкою MasterPage.master.
11.3. Знову перейдіть на сторінку GridViewForm.aspx і спробуйте відредагувати один
із рядків елемента GridView. Потім перейдіть за допомогою поля на сторінку
DetailsViewForm.aspx
11.4. На сторінці DetailsViewForm.aspx спробуйте додати новий елемент у таблицю
БД. Переконайтесь, що він з’явився у на сторінці GridViewForm.aspx, а потім спробуйте
його видалити.
12. Індивідуальне завдання
Лабораторна робота №3
1. Розробити макет сторінки MasterPage за наведеним у таблиці індивідуальним
варіантом завдання для відповідної предметної області з Лабораторної роботи №4 (див.
нижче). Макет сторінки MasterPage має містити колонтитули, меню, зображення, які
відповідають предметній області індивідуального завдання. Вибір кольорової палітри,
шрифтів, зображень, тощо залишається на власний розсуд веб-розробника.
2. Пункти меню на макеті сторінки MasterPage повинні містити назви таблиць БД
індивідуального завдання та дозволяти переходити на відповідні сторінки з елементами
керування GridView, що відображають ці таблиці (див. нижче завдання до Лабораторної
роботи №4).
3. Створити декілька сторінок вмісту для ілюстрації макету сторінки MasterPage.
Зміст звіту:
1. Постановка завдання для індивідуального варіанту.
2. Текст програми.
3. Протокол роботи програми (скрін-шоти сторінок вмісту, створених за макетом
сторінки MasterPage).
4. Висновки.
№ ва-
ріанту
Формат сторінки Опис
1 1 – колонтитул з розташованим ліворуч логотипом у вигляді
зображення, яке відповідає темі роботи, назва предметної
області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – зображення за темою предметної області
ПІБ, курс та группа студента, який виконав це завдання,
розташовані у заголовку веб-сторінки
2 1 – розташований ліворуч логотип у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – зображення за темою предметної області
3 1 – колонтитул з розташованим ліворуч логотипом у вигляді
зображення, яке відповідає темі роботи, назва предметної
області
2 – вертикальне меню з назвами таблиць БД
3 – баннер з зображенням за темою предметної області
4 – змінний контент сторінки
5 – ПІБ, курс та группа студента, який виконав це завдання
4 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – зображення за темою предметної області
5 – пусте біле поле
6 – ПІБ, курс та группа студента, який виконав це завдання
5 1 – назва предметної області, горизонтальне меню з назвами
таблиць БД
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – пусте біле поле
6 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – пусте біле поле
7 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – вертикальне меню з назвами таблиць БД
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
8 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
5 – пусте біле поле
9 1 – колонтитул з розташованим ліворуч логотипом у вигляді
зображення, яке відповідає темі роботи, назва предметної
області
2 – зображення за темою предметної області
3 – вертикальне меню з назвами таблиць БД
4 – змінний контент сторінки
5 – пусте біле поле, розмір якого значно менший, ніж розмір
блоку 4
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
10 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – пусте поле з кольором фону як у блока 2
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
7 – зображення за темою предметної області
11 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, горизонтальне меню з назвами таблиць
БД
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – зображення за темою предметної області
ПІБ, курс та группа студента, який виконав це завдання,
розташовані у заголовку веб-сторінки
12 1 – горизонтальне меню з назвами таблиць БД, розташований
праворуч логотип у вигляді зображення, яке відповідає темі
роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
13 1 – назва предметної області, розташований праворуч логотип у
вигляді зображення, яке відповідає темі роботи,
2 – зображення за темою предметної області
3 – горизонтальне меню з назвами таблиць БД
4 – змінний контент сторінки
5 – ПІБ, курс та группа студента, який виконав це завдання
14 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – вертикальне меню з назвами таблиць БД
5 – пусте біле поле
6 – ПІБ, курс та группа студента, який виконав це завдання
15 1 – назва предметної області, розташований праворуч логотип у
вигляді зображення, яке відповідає темі роботи
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – пусте біле поле
16 1 – горизонтальне меню з назвами таблиць БД, розташований
праворуч логотип у вигляді зображення, яке відповідає темі
роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – пусте біле поле
17 1 – колонтитул з назвою предметної області та розташованим
праворуч логотипом у вигляді зображення, яке відповідає темі
роботи
2 – вертикальне меню з назвами таблиць БД
3 – змінний контент сторінки
4 – зображення за темою предметної області
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
18 1 – колонтитул з горизонтальним меню з назвами таблиць БД та
розташованим праворуч логотипом у вигляді зображення, яке
відповідає темі роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
5 – пусте біле поле
19 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – горизонтальне меню з назвами таблиць БД
3 – зображенням за темою предметної області
4 – пусте біле поле, розмір якого значно менший, ніж розмір
блоку 5
5 – змінний контент сторінки
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
20 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, назва предметної області
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – зображення за темою предметної області
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
7 – горизонтальне меню з назвами таблиць БД
21 1 – колонтитул з назвою предметної області та розташованим
праворуч логотипом у вигляді зображення, яке відповідає темі
роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – вертикальне меню з назвами таблиць БД
ПІБ, курс та группа студента, який виконав це завдання,
розташовані у заголовку веб-сторінки
22 1 – назва предметної області, розташований праворуч логотип у
вигляді зображення, яке відповідає темі роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – горизонтальне меню з назвами таблиць БД
23 1 – розташований ліворуч логотип у вигляді зображення, яке
відповідає темі роботи, горизонтальне меню з назвами таблиць
БД
2 – поле контрастного кольору для розміщення реклами
3 – зображення за темою предметної області
4 – змінний контент сторінки
5 – ПІБ, курс та группа студента, який виконав це завдання
24 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, горизонтальне меню з назвами таблиць
БД
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – зображення за темою предметної області
5 – пусте біле поле
6 – ПІБ, курс та группа студента, який виконав це завдання
25 1 – назва предметної області, розташований праворуч логотип у
вигляді зображення, яке відповідає темі роботи
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – ПІБ, курс та группа студента, який виконав це завдання
5 – горизонтальне меню з назвами таблиць БД
6 – пусте біле поле
26 1 – колонтитул з розташованим ліворуч логотипом у вигляді
зображення, яке відповідає темі роботи, та горизонтальне меню
з назвами таблиць БД
2 – зображення за темою предметної області
3 – змінний контент сторінки
4 – зображення за темою предметної області
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
27 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи, горизонтальне меню з назвами таблиць
БД
2 – назва предметної області
3 – поле контрастного кольору
4 – зображенням за темою предметної області, розмір якого
значно менший, ніж розмір блоку 5
5 – змінний контент сторінки
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
28 1 – колонтитул з логотипом у вигляді зображення, яке
відповідає темі роботи та відображає її назву, горизонтальне
меню з назвами таблиць БД
2 – поле контрастного кольору
3 – змінний контент сторінки
4 – поле контрастного кольору
5 – пусте біле поле
6 – колонтитул, що містить ПІБ, курс та группа студента, який
виконав це завдання
7 – зображення за темою предметної області
Лабораторна робота №4
1. У MS Access або MS SQL Server створити базу даних, що містить таблиці,
зображені на рисунку індивідуального завдання (номер завдання збігається з порядковим
номером студента в журналі відвідування занять). Кожна таблиця повинна містити ключове
поле КодІм’яТаблиці типу лічильник. Імена таблиць та їх полів НЕ ПОВИННІ містити
символів пробілу!
2. Для всіх зазначених на діаграмі БД таблиць, застосувуючи розроблений у
Лабораторній роботі №3 макет сторінки MasterPage, створити по 2 форми – одну з елементом
керування GridView та одну з елементом керування DetailView. Реалізувати переходи з
передачею параметрів між цими двома видами форм. Кожна форма з елементом керування
GridView повинна підтримувати можливість редагування елементів відповідної таблиці, а
кожна форма з елементом керування DetailView – можливість додавання та видалення
елементів.
Зміст звіту:
5. Постановка завдання для індивідуального варіанту.
6. Схема розробленої БД
7. Текст програми.
8. Протокол роботи програми (скрін-шоти усіх розроблених форм, що ілюструють їх
функціональність, тобто можливості додавання, редагування та видалення елементів).
9. Висновки.
Варіанти індивідуальних завдань
Индивидуальное задание № 1
Предметная область: Аэропорт
Индивидуальное задание № 2
Предметная область: Рынок ПЭВМ
Индивидуальное задание № 3
Предметная область: Деканат
Индивидуальное задание № 4
Предметная область: Зоопарк
Индивидуальное задание № 5
Предметная область: Шахматы
Индивидуальное задание № 6
Предметная область: Судоходство
Индивидуальное задание № 7
Предметная область: Автотранспортное предприятие
Индивидуальное задание № 8
Предметная область: Научные конференции
Индивидуальное задание № 9
Предметная область: Программные продукты
Индивидуальное задание № 10
Предметная область: Операционная система
Индивидуальное задание № 11
Предметная область: Добыча полезных ископаемых
Индивидуальное задание № 12
Предметная область: Театр
Индивидуальное задание № 13
Предметная область: Справочная аптек
Индивидуальное задание № 14
Предметная область: Кулинария
Индивидуальное задание № 15
Предметная область: Отдел кадров
Индивидуальное задание № 16
Предметная область: Библиотека
Индивидуальное задание № 17
Предметная область: Университет
Индивидуальное задание № 18
Предметная область: Оптовая база
Индивидуальное задание № 19
Предметная область: Производство
Индивидуальное задание № 20
Предметная область: Предпринимательство
Индивидуальное задание № 21
Предметная область: Автомастерская
Индивидуальное задание № 22
Предметная область: Сессия
Индивидуальное задание № 23
Предметная область: Управление проектом
Индивидуальное задание № 24
Предметная область: Поликлиника
Индивидуальное задание № 25
Предметная область: Телефонизация
Индивидуальное задание № 26
Предметная область: Спорт
Индивидуальное задание № 27
Предметная область: Сельскохозяйственные поставки
Индивидуальное задание № 28
Предметная область: Городской транспорт
Индивидуальное задание № 29
Предметная область: География
Индивидуальное задание № 30
Предметная область: Домоуправление
Crossplatform lab 3 master page

More Related Content

Similar to Crossplatform lab 3 master page

Презентація до уроку № 2
Презентація до уроку № 2Презентація до уроку № 2
Презентація до уроку № 2
Ірина І
 
презентація по створенню веб сайту
презентація по створенню веб сайтупрезентація по створенню веб сайту
презентація по створенню веб сайту
kovalchukira
 
презентація по створенню веб сайту
презентація по створенню веб сайтупрезентація по створенню веб сайту
презентація по створенню веб сайту
kovalchukira
 
засоби автоматизації процесу створення документа
засоби автоматизації процесу створення документазасоби автоматизації процесу створення документа
засоби автоматизації процесу створення документа
Elena Kostesnko
 
практичні роботи №1 8. ms powerpoint 2003
практичні роботи №1 8. ms powerpoint 2003практичні роботи №1 8. ms powerpoint 2003
практичні роботи №1 8. ms powerpoint 2003
zaykoannaivanivna
 

Similar to Crossplatform lab 3 master page (20)

Презентація до уроку № 2
Презентація до уроку № 2Презентація до уроку № 2
Презентація до уроку № 2
 
лп р1-2 мр
лп р1-2 мрлп р1-2 мр
лп р1-2 мр
 
все про Powerpoint
все про Powerpointвсе про Powerpoint
все про Powerpoint
 
Plan uroku1 rozrobka
Plan uroku1 rozrobkaPlan uroku1 rozrobka
Plan uroku1 rozrobka
 
Урок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документахУрок 13. Розділи, колонтитули, стилі, структура в текстових документах
Урок 13. Розділи, колонтитули, стилі, структура в текстових документах
 
дипломна
дипломнадипломна
дипломна
 
Less34
Less34Less34
Less34
 
10 клас 10 урок. Створення комп'ютерних презентацій, опрацювання об'єктів пре...
10 клас 10 урок. Створення комп'ютерних презентацій, опрацювання об'єктів пре...10 клас 10 урок. Створення комп'ютерних презентацій, опрацювання об'єктів пре...
10 клас 10 урок. Створення комп'ютерних презентацій, опрацювання об'єктів пре...
 
л пр№1
л пр№1л пр№1
л пр№1
 
лп р7-8мр
лп р7-8мрлп р7-8мр
лп р7-8мр
 
презентація по створенню веб сайту
презентація по створенню веб сайтупрезентація по створенню веб сайту
презентація по створенню веб сайту
 
презентація по створенню веб сайту
презентація по створенню веб сайтупрезентація по створенню веб сайту
презентація по створенню веб сайту
 
Visual basic
Visual basicVisual basic
Visual basic
 
лп р7-8мр
лп р7-8мрлп р7-8мр
лп р7-8мр
 
Urok 50 9kl
Urok 50 9klUrok 50 9kl
Urok 50 9kl
 
Inf 5 tema_4_urok_30
Inf 5 tema_4_urok_30Inf 5 tema_4_urok_30
Inf 5 tema_4_urok_30
 
засоби автоматизації процесу створення документа
засоби автоматизації процесу створення документазасоби автоматизації процесу створення документа
засоби автоматизації процесу створення документа
 
Lesson # 25. hypertext markup language concept
Lesson # 25. hypertext markup language conceptLesson # 25. hypertext markup language concept
Lesson # 25. hypertext markup language concept
 
6 клас Урок 6.pptx
6 клас Урок 6.pptx6 клас Урок 6.pptx
6 клас Урок 6.pptx
 
практичні роботи №1 8. ms powerpoint 2003
практичні роботи №1 8. ms powerpoint 2003практичні роботи №1 8. ms powerpoint 2003
практичні роботи №1 8. ms powerpoint 2003
 

More from cit-cit (20)

лекція 5
лекція 5лекція 5
лекція 5
 
лаборатор. 10
лаборатор. 10лаборатор. 10
лаборатор. 10
 
лекція 19
лекція 19лекція 19
лекція 19
 
лекція 18
лекція 18лекція 18
лекція 18
 
лекція 17
лекція 17лекція 17
лекція 17
 
лекція 16
лекція 16лекція 16
лекція 16
 
лекція 12
лекція 12лекція 12
лекція 12
 
лекція 11
лекція 11лекція 11
лекція 11
 
лекція 10
лекція 10лекція 10
лекція 10
 
лаборатор. 15
лаборатор. 15лаборатор. 15
лаборатор. 15
 
лаборатор. 14
лаборатор. 14лаборатор. 14
лаборатор. 14
 
лаборатор. 13
лаборатор. 13лаборатор. 13
лаборатор. 13
 
лаборатор. 12
лаборатор. 12лаборатор. 12
лаборатор. 12
 
лаборатор. 11
лаборатор. 11лаборатор. 11
лаборатор. 11
 
лаборатор. 9
лаборатор. 9лаборатор. 9
лаборатор. 9
 
лаборатор. 8
лаборатор. 8лаборатор. 8
лаборатор. 8
 
лаборатор. 7
лаборатор. 7лаборатор. 7
лаборатор. 7
 
лекція 15 (pdf.io)
лекція 15 (pdf.io)лекція 15 (pdf.io)
лекція 15 (pdf.io)
 
лекція 14 (pdf.io)
лекція 14 (pdf.io)лекція 14 (pdf.io)
лекція 14 (pdf.io)
 
лекція 13 (pdf.io)
лекція 13 (pdf.io)лекція 13 (pdf.io)
лекція 13 (pdf.io)
 

Crossplatform lab 3 master page

  • 1. Крос-платформне програмування Лабораторна робота №1. Створення шаблону сторінки MasterPage. Робота з БД Мета роботи: Розробити шаблон сторінки MasterPage і використати його для створення створення сторінок веб-сайта, що взаємодіє з БД. Порядок виконання: 1. Створення веб-вузла (або веб-застосування) 2. Створення сторінки MasterPage. 3. Створення макету сторінки MasterPage 4. Додавання на сторінку MasterPage статичного вмісту 5. Додавання прототипу вмісту 6. Створення вмісту сторінки MasterPage 7. Додавання вмісту до сторінки вмісту 8. Передача параметрів між сторінками 9. Редагування записів 10. Додавання та видалення елементів з таблиць БД 11. Тестування сторінок 12. Індивідуальне завдання 1. Створення веб-вузла (або веб-застосування) Якщо веб-сайт вже створений в Visual Web Developer (наприклад, в результаті виконання кроків у розділі Покрокове керівництво. Створення базової веб-сторінки в Visual Web Developer), можна використовувати цей веб-вузол і перейти до наступного розділу Створення сторінки MasterPage. В іншому випадку створіть новий веб-сайт і сторінку, виконавши наступні кроки. 1.1. Відкрийте Visual Studio (або Visual Web Developer). 1.2. У меню File виберіть New | Web Site. Відкриється діалогове вікно New Web Site. 1.3. У групі Installed Templates виберіть мову Visual C# та шаблон ASP.NET Web Site. 1.4. У полі Web location введіть ім'я папки, де будуть зберігатися сторінки веб-вузла. Наприклад, введіть назву папки D:workWebSite. 1.5. Натисніть кнопку ОК. Visual Studio створить папку і нову сторінку з ім'ям Default.aspx. Сторінка MasterPage є шаблоном зовнішнього вигляду сторінок. У наступному розділі спочатку створюється сторінка MasterPage. Потім використовується таблиця для розміщення на сторінці MasterPage меню, емблеми, верхнього та нижнього колонтитулів, які будуть
  • 2. відображатися на кожній сторінці веб-вузла. Також використовується прототип вмісту, який є областю на сторінці MasterPage, яку можна замінити відомостями з вмісту сторінки. 2. Створення сторінки MasterPage 2.1. У вікні Solution Explorer клацніть правою кнопкою миші на імені веб-сайту (або веб-застосування) та виберіть команду Add New Item. 2.2. У групі Installed Templates виберіть мову Visual C# та шаблон Master Page. 2.3. У полі Name введіть MasterPage.master. 2.4. Встановіть прапорець Place code in separate file. 2.5. Натисніть кнопку Add. Нова сторінка MasterPage відкриється в поданні Source. У верхній частині цієї сторінки знаходиться директива @Master замість директиви @Page, яка зазвичай розташованої у верхній частині сторінок ASP.NET. Основна область сторінки містить елемент керування ContentPlaceHolder, який є областю сторінки MasterPage, вміст якої буде об'єднано з вмістом сторінок під час виконання. Більш докладно робота з прототипом вмісту буде розглянута нижче. Сторінка MasterPage визначає зовнішній вигляд сторінок веб-вузла. Вона може містити будь-яке поєднання статичного тексту та елементів керування. Головна сторінка
  • 3. також містить один або кілька прототипів вмісту, які визначають, де буде відображатися динамічний вміст при відкритті сторінки. 3. Створення макету сторінки MasterPage 3.1. Перейдіть у подання Design. 3.2. У списку, що розкривається у верхній частині вікна Property, виберіть DOCUMENT, а потім для властивості BgColor задайте колір, наприклад блакитний. 3.3. Клацніть область сторінки, де потрібно розмістити макетну таблицю. Примітка. Не розміщуйте макетну таблицю усередині елемента керування ContentPlaceHolder. 3.4. У меню Table виберіть команду Insert Table. 3.5. У діалоговому вікні Insert Table створіть таблицю з трьома рядками і одним стовпцем і натисніть кнопку ОК. 3.6. Помістіть курсор всередині другого рядка таблиці. У меню Table в підменю Modify виберіть Split Cells.
  • 4. 3.7. У діалоговому вікні Split Cells виберіть Split into columns, вкажіть кількість 3 і натисніть кнопку OK. 3.8. Перетягніть кордони лівої крайньої та правої крайньої комірок у другому рядку таблиці так, щоб зменшити їх ширину (або виберіть ці комірки і встановіть значення їх ширини у вікні Property). 3.9. Вибрати всі комірки у таблиці і задайте для параметра BgColor колір, відмінний від кольору фону. Після розмітки таблиці можна додати на сторінку MasterPage вміст, який буде відображатися на всіх сторінках. В якості нижнього колонтитула можна додати повідомлення про авторські права, а у верхній колонтитул – меню. Можна також додати зображення емблеми сайту. 4. Додавання на сторінку MasterPage статичного вмісту 4.1. Клацніть нижню клітинку і потім введіть текст нижнього колонтитула, наприклад, © 2012 НУХТ. 4.2. З групи Navigation панелі елементів Toolbox перетягніть у верхню комірку таблиці елемент керування Menu. 4.3. Встановіть значення Horizontal у властивості Orientation елемента керування Menu. 4.4. Клацніть смарт-тег в елементі керування Menu і виберіть Edit Menu Items у діалоговому вікні Menu Tasks. 4.5. У групі Items двічі клацніть значок , щоб додати два елементи меню. 4.6. Клацніть елемент меню і встановіть для параметра Text значення Форма GridView, а для параметра NavigateUrl – значення GridViewForm.aspx. Клацніть
  • 5. другий елемент меню і встановіть для параметра Text значення Форма DetailsView, а для параметра NavigateUrl – значення DetailsViewForm.aspx. Натисніть кнопку ОК. Примітка. Якщо форми GridViewForm.aspx та DetailsViewForm.aspx ще не існують, заповніть поля NavigateUrl елементів меню пізніше, перед виконанням етапу 8, на якому відбувається тестування вже готових сторінок. 4.7. Клацніть елемент меню і у вікні Property у властивості ForeColor задайте чорний колір. Після цих змін сторінка MasterPage матиме наступний вигляд: 4.8. Для розташування на сторінці MasterPage зображення емблеми сайту у вікні Solution Explorer клацніть правою кнопкою миші на імені веб-сайту та виберіть команду Add Existing Item. Перейдіть до файлу зображення, виберіть його та натисніть кнопку Add. З групи Standard панелі елементів Toolbox перетягніть елемент керування Image у крайню ліву комірку середнього рядка таблиці. У вікні Property задайте для властивості ImageUrl елемента керування Image ім'я файлу зображення. Тепер можна помістити прототип вмісту, щоб вказати місце, в якому на сторінці MasterPage буде відображатися вміст під час виконання. 5. Додавання прототипу вмісту
  • 6. 5.1. З групи Standard панелі елементів Toolbox перетягніть елемент керування ContentPlaceHolder у середньу комірку другого рядка таблиці. Властивість ID цього елемента керування має значення ContentPlaceHolder1. Можна залишити це ім'я або змінити його. Воно знадобиться пізніше. Після цих змін сторінка MasterPage матиме наступний вигляд: 5.2. Збережіть сторінку MasterPage. Сторінка MasterPage надає шаблон для вмісту. Вміст для сторінки MasterPage визначається шляхом створення сторінки ASP.NET, яка пов'язана зі сторінкою MasterPage. Сторінка вмісту є спеціалізованою формою ASP.NET, яка містить тільки вміст, об'єднаний зі сторінкою MasterPage. Додайте на сторінку вмісту текст і елементи керування, які потрібно відобразити, коли користувачі запитують цю сторінку. 6. Створення вмісту сторінки MasterPage 6.1. У вікні Solution Explorer клацніть правою кнопкою миші на імені веб-сайту та виберіть команду Add New Item. 6.2. У групі Installed Templates виберіть мову Visual C# та шаблон Web Form. 6.3. У полі Name введіть GridViewForm.aspx. 6.4. Встановіть прапорець Select master page та натисніть кнопку Add. 6.5. Відкриється діалогове вікно Select a Master Page. 6.6. Клацніть MasterPage.master і натисніть кнопку ОК.
  • 7. Буде створений файл ASPX. Сторінка містить директиву @Page, яка підключає поточну сторінку до обраної сторінки MasterPage за допомогою атрибуту MasterPageFile, як показано у наступному прикладі коду. Сторінка також містить елемент керування вмістом Content, з яким далі буде працювати користувач. Сторінка вмісту не має звичайних елементів, що формують сторінку ASP.NET, таких як html, body або form. Замість них на сторінці вмісту розташовується один (або декілька) елемент керування Content, який буде відображатися на сторінці MasterPage у створених областях прототипу вмісту. 7. Додавання вмісту до сторінки вмісту 7.1. Перейдіть у подання Design. Елементи керування ContentPlaceHolder з сторінки MasterPage на новій сторінці вмісту відображаються як елементи керування Content. Вміст сторінки MasterPage відображається таким чином, щоб можна було бачити розмітку, але не можна було її змінити під час редагування сторінки вмісту. 7.2. З групи Data панелі елементів Toolbox перетягніть та розташуйте у елементі керування ContentPlaceHolder1, який міститься у середній комірці другого рядка таблиці, елементи керування GridView та SqlDataSource.
  • 8. 7.3. Налаштуйте елемент керування SqlDataSource1 на певну таблицю з вже існуючої бази даних. Для цього виберіть пункт Configure Data Source… у інтелектуальному дескрипторі елемента SqlData1. На екрані з’явиться наступне вікно Choose Your Data Connection майстра налаштувань. 7.3.1. Натисніть кнопку New Connection…, щоб встановити з’єднання з базою даних. У вікні Add Connection натисніть кнопку Change…, щоб змінити джерело даних.
  • 9. У вікні Change Data Source з переліку джерел даних виберіть Microsoft Access Database File та натисніть кнопку OK. 7.3.2. На екрані з‘явиться вікно Add Connection, в якому у полі Database file name слід вказати імя обраної бази даних (у прикладі D:NastyaExampledb1.mdb) та натиснути кнопку OK. 7.3.3. Ви знову опинитесь у вікні Choose Your Data Connection майстра налаштувань. Натисніть кнопку Next та перейдіть до наступного вікна, в якому теж натисніть кнопку Next.
  • 10. У вікні Configure the Select Statement майстра налаштувань виберіть перемикач Specify columns from a table or view та необхідну таблицю зі списку Name таблиць БД (у прикладі це таблиця Goal). Зверніть увагу на те, що в області Columns вибору полів таблиці вибрано прапорець біля значення *. Це вказує на те, що у SQL-запиті будуть отримані усі поля таблиці. Після вибору таблиці натисніть кнопку OK для переходу до наступного вікна майстра налаштувань. 7.3.4. У наступному вікні Test Query майстра налаштувань натисніть кнопку , щоб перевірити, чи виконується відповідний запид до БД. Зауважте, що таку перевірку слід робити лише у тому випадку, якщо запит є запитом на вибірку даних (тобто запитом SELECT). Інакше відразу натискайте кнопку кнопку Finish, щоб завершити роботу у майстрі налаштувань
  • 11. 7.4. Прив'яжіть елемент керування GridView до джерела данних. Для цього в інтелектуальному дескрипторі елемента GridView виберіть зі списка Choose Data Source елемент керування SqlDataSource1. 7.5. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат. 7.6. Виконайте кроки 6.1–6.6 та 7.1–7.5 для створення сторінки вмісту DetailsViewForm.aspx з наступними відмінностями: 7.6.1. На кроці 7.2 розташуйте на сторінці елементи керування DetailsView та SqlDataSource. 7.6.1. Зробіть запит на вибірку даних з таблиці параметризованим. Для цього на кроці 7.3.3 перед тим, як натиснути кнопку OK, натисніть кнопку WHERE, щоб вказати формат параметризованого запиту. Налаштуйте відповідні поля у вікні Add WHERE Statement так, як показано на рисунку. Тут у полі Column виберіть із списка ключове поле відповідної таблиці (у прикладі GoalNo), у полі Source – значення QueryString (значення параметру передаватиметься через рядок запиту). Праворуч з’являться нові параметри: у полі QueryString field знову вкажіть ключове поле відповідної таблиці, а у полі Default value – значення параметру за промовчанням (це може бути номер першого існуючого у таблиці елемента). Натисніть кнопку Add, щоб додати новий вираз до списку виразів. Потім натисніть кнопку OK, щоб повернутись у вікно Configure the Select Statement майстра налаштувань.
  • 12. Після виконання цих дій у вікні Test Query майстра налаштувань можна буде отримати наступний результат: 8. Передача параметрів між сторінками 8.1. Поверніться у форму GridViewForm.aspx. У інтелектуальному дискрипторі елемента керування GridView виберіть пункт Edit Columns…. У вікні Fields зі списку Availiable Field виберіть тип HyperLinkField та натисніть кнопку Add.
  • 13. 8.2. Нове поле потрапить у список Selected Field, а праворуч з’явиться перелік властивостей, які слід налаштувати так, як показано на наступному рисунку. У властивостях HeaderText та Text задаються заголовок та вміст нового стовпця (у прикладі Info). У властивості NavigateUrl вибирається веб-сторнінка, якій передається керування (у прикладі DetailsViewForm.aspx), у DataNavigateUrlFields – вказується перелік параметрів (у прикладі GoalNo), а у DataNavigateUrlFormatString – задається формат рядка запиту (у прикладі DetailsViewForm.aspx?GoalNo={0}). Декілька разів натисніть кнопку , щоб нове поле Info опинилося першим у списку Selected Field. 8.3. Натисніть кнопку OK. В елементі керування з’явиться новий стовбець Info з відповідним вмістом.
  • 14. 8.4. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат. Тепер при натисканні на посилання Info у певному рядку таблиці (у прикладі “Выбор СЭД”) відбувається перехід на форму DetailsViewForm.aspx, що містить відповідний елемент: 9. Редагування записів 9.1. У формі GridViewForm.aspx у інтелектуальному дискрипторі елемента керування GridView виберіть пункт Edit Columns…. У вікні Fields зі списку Availiable Field виберіть тип Edit, Update, Cancel з групи CommandField. Натисніть кнопку Add, щоб додати нове поле, а потім – кнопку OK.
  • 15. Додавання нового поля до елемента керування GridView можна виконати іншим чином, якщо в інтелектуальному дескрипторі елемента вибрати Add New Column. Тоді на екрані з’явиться інше вікно – Add Field. Зі списка Choose a Field Type виберіть тип поля CommandField, виберіть прапорці Edit/Update та Show Cancel Button, переконайтеся, що всі інші прапорці не помічені як вибрані. Клацніть на кнопці ОК, щоб додати стовпець з редагованими елементами керування. 9.2. Додайте до елемента керування SqlDataSource1 новий SQL-запит. Для цього виберіть пункт Configure Data Source… у інтелектуальному дескрипторі елемента SqlDataSource1 та натискайте кнопку Next, поки не опинитесь у вікні Configure the Select Statement майстра налаштувань. Тут виберіть перемикач Specify a custom SQL statement or stored procedure та натисніть кнопку Next.
  • 16. 9.3. У наступному вікні майстра налаштувань виберіть вкладку UPDATE та натисніть кнопку Query Builder…. 9.4. На екрані з’явиться вікно будівника запитів Query Builder та вікно Add Table. Спершу у вікні Add Table віберіть необхідну таблицю (у прикладі Goal) та натисніть кнопку Add.
  • 17. У вікні Query Builder введіть наступний SQL-запит на редагування та натисніть кнопку OK. 9.5. Збережіть сторінку. Натисніть кнопку F5, щоб отримати наступний результат. Вигляд форми до редагування: Вигляд форми під час редагування:
  • 18. Вигляд форми після редагування (скорочена назва задачі з номером 7 змінилася з ПМЖ на Страна): 10. Додавання та видалення елементів з таблиць БД 10.1. Перейдіть на сторінку DetailsViewForm.aspx та додайте до елемента керування можливість додавання та видалення елементів. Для цього виконайте кроки інструкції 9.1–9.4 з наступними відмінностями. 10.1.1. На кроці 9.1 у вікні Add Field зі списка Choose a Field Type виберіть CommandField, для операції додавання елемента виберіть прапорці New/Insert та Show Cancel Button, а для операції видалення – прапорці Delete та Show Cancel Button. Переконайтеся, що всі інші прапорці не помічені як вибрані. 10.1.2. На кроці 9.3 у вікні майстра налаштувань для операції додавання елемента виберіть вкладку INSERT, а для операції видалення – вкладку DELETE. 10.1.3. На кроці 9.4 у вікні Query Builder SQL-запит для операції додавання елемента матиме наступний вигляд:
  • 19. а SQL-запит для операції видалення – такий: Примітка. Додати до форми GridViewForm.aspx та DetailsViewForm.aspx поле для редагування існуючого або створення нового елемента таблиці можна, вибравши у інтелектуальному дискрипторі елемента керування GridView або DetailsView пункт Edit Columns…. Щоб додати відповідне поле у вікні Fields зі списку Availiable Field потрібно вибрати тип CommandField => Edit, Update, Cancel та натисніть кнопку Add (див. рис. нижче).
  • 20. 10.2. Збережіть сторінку. В результаті вона матиме наступний вигляд у поданні Design 11. Тестування сторінок 11.1. Перейдіть на сторінку GridViewForm.aspx і натисніть клавіші CTRL+F5. ASP.NET об'єднає вміст цієї сторінки з макетом сторінки MasterPage.master в одну сторінку і відобразить підсумкову сторінку у браузері. 11.2. Клацніть на пункті меню Форма DetailsView, відкриється сторінка DetailsViewForm.aspx. Вона також об'єднана зі сторінкою MasterPage.master. 11.3. Знову перейдіть на сторінку GridViewForm.aspx і спробуйте відредагувати один із рядків елемента GridView. Потім перейдіть за допомогою поля на сторінку DetailsViewForm.aspx 11.4. На сторінці DetailsViewForm.aspx спробуйте додати новий елемент у таблицю БД. Переконайтесь, що він з’явився у на сторінці GridViewForm.aspx, а потім спробуйте його видалити. 12. Індивідуальне завдання Лабораторна робота №3 1. Розробити макет сторінки MasterPage за наведеним у таблиці індивідуальним варіантом завдання для відповідної предметної області з Лабораторної роботи №4 (див. нижче). Макет сторінки MasterPage має містити колонтитули, меню, зображення, які відповідають предметній області індивідуального завдання. Вибір кольорової палітри, шрифтів, зображень, тощо залишається на власний розсуд веб-розробника. 2. Пункти меню на макеті сторінки MasterPage повинні містити назви таблиць БД індивідуального завдання та дозволяти переходити на відповідні сторінки з елементами
  • 21. керування GridView, що відображають ці таблиці (див. нижче завдання до Лабораторної роботи №4). 3. Створити декілька сторінок вмісту для ілюстрації макету сторінки MasterPage. Зміст звіту: 1. Постановка завдання для індивідуального варіанту. 2. Текст програми. 3. Протокол роботи програми (скрін-шоти сторінок вмісту, створених за макетом сторінки MasterPage). 4. Висновки. № ва- ріанту Формат сторінки Опис 1 1 – колонтитул з розташованим ліворуч логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – зображення за темою предметної області ПІБ, курс та группа студента, який виконав це завдання, розташовані у заголовку веб-сторінки 2 1 – розташований ліворуч логотип у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – зображення за темою предметної області 3 1 – колонтитул з розташованим ліворуч логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – баннер з зображенням за темою предметної області 4 – змінний контент сторінки 5 – ПІБ, курс та группа студента, який виконав це завдання 4 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – зображення за темою предметної області 5 – пусте біле поле 6 – ПІБ, курс та группа студента, який виконав це завдання 5 1 – назва предметної області, горизонтальне меню з назвами таблиць БД 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле 6 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле
  • 22. 7 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – вертикальне меню з назвами таблиць БД 5 – пусте біле поле 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 8 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле 9 1 – колонтитул з розташованим ліворуч логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – зображення за темою предметної області 3 – вертикальне меню з назвами таблиць БД 4 – змінний контент сторінки 5 – пусте біле поле, розмір якого значно менший, ніж розмір блоку 4 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 10 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – пусте поле з кольором фону як у блока 2 5 – пусте біле поле 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 7 – зображення за темою предметної області 11 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, горизонтальне меню з назвами таблиць БД 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – зображення за темою предметної області ПІБ, курс та группа студента, який виконав це завдання, розташовані у заголовку веб-сторінки 12 1 – горизонтальне меню з назвами таблиць БД, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 13 1 – назва предметної області, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи, 2 – зображення за темою предметної області 3 – горизонтальне меню з назвами таблиць БД 4 – змінний контент сторінки 5 – ПІБ, курс та группа студента, який виконав це завдання
  • 23. 14 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – вертикальне меню з назвами таблиць БД 5 – пусте біле поле 6 – ПІБ, курс та группа студента, який виконав це завдання 15 1 – назва предметної області, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле 16 1 – горизонтальне меню з назвами таблиць БД, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле 17 1 – колонтитул з назвою предметної області та розташованим праворуч логотипом у вигляді зображення, яке відповідає темі роботи 2 – вертикальне меню з назвами таблиць БД 3 – змінний контент сторінки 4 – зображення за темою предметної області 5 – пусте біле поле 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 18 1 – колонтитул з горизонтальним меню з назвами таблиць БД та розташованим праворуч логотипом у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 5 – пусте біле поле 19 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – горизонтальне меню з назвами таблиць БД 3 – зображенням за темою предметної області 4 – пусте біле поле, розмір якого значно менший, ніж розмір блоку 5 5 – змінний контент сторінки 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 20 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, назва предметної області 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – зображення за темою предметної області 5 – пусте біле поле
  • 24. 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 7 – горизонтальне меню з назвами таблиць БД 21 1 – колонтитул з назвою предметної області та розташованим праворуч логотипом у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – вертикальне меню з назвами таблиць БД ПІБ, курс та группа студента, який виконав це завдання, розташовані у заголовку веб-сторінки 22 1 – назва предметної області, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – горизонтальне меню з назвами таблиць БД 23 1 – розташований ліворуч логотип у вигляді зображення, яке відповідає темі роботи, горизонтальне меню з назвами таблиць БД 2 – поле контрастного кольору для розміщення реклами 3 – зображення за темою предметної області 4 – змінний контент сторінки 5 – ПІБ, курс та группа студента, який виконав це завдання 24 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, горизонтальне меню з назвами таблиць БД 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – зображення за темою предметної області 5 – пусте біле поле 6 – ПІБ, курс та группа студента, який виконав це завдання 25 1 – назва предметної області, розташований праворуч логотип у вигляді зображення, яке відповідає темі роботи 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – ПІБ, курс та группа студента, який виконав це завдання 5 – горизонтальне меню з назвами таблиць БД 6 – пусте біле поле 26 1 – колонтитул з розташованим ліворуч логотипом у вигляді зображення, яке відповідає темі роботи, та горизонтальне меню з назвами таблиць БД 2 – зображення за темою предметної області 3 – змінний контент сторінки 4 – зображення за темою предметної області 5 – пусте біле поле 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 27 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи, горизонтальне меню з назвами таблиць БД 2 – назва предметної області 3 – поле контрастного кольору 4 – зображенням за темою предметної області, розмір якого
  • 25. значно менший, ніж розмір блоку 5 5 – змінний контент сторінки 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 28 1 – колонтитул з логотипом у вигляді зображення, яке відповідає темі роботи та відображає її назву, горизонтальне меню з назвами таблиць БД 2 – поле контрастного кольору 3 – змінний контент сторінки 4 – поле контрастного кольору 5 – пусте біле поле 6 – колонтитул, що містить ПІБ, курс та группа студента, який виконав це завдання 7 – зображення за темою предметної області Лабораторна робота №4 1. У MS Access або MS SQL Server створити базу даних, що містить таблиці, зображені на рисунку індивідуального завдання (номер завдання збігається з порядковим номером студента в журналі відвідування занять). Кожна таблиця повинна містити ключове поле КодІм’яТаблиці типу лічильник. Імена таблиць та їх полів НЕ ПОВИННІ містити символів пробілу! 2. Для всіх зазначених на діаграмі БД таблиць, застосувуючи розроблений у Лабораторній роботі №3 макет сторінки MasterPage, створити по 2 форми – одну з елементом керування GridView та одну з елементом керування DetailView. Реалізувати переходи з передачею параметрів між цими двома видами форм. Кожна форма з елементом керування GridView повинна підтримувати можливість редагування елементів відповідної таблиці, а кожна форма з елементом керування DetailView – можливість додавання та видалення елементів. Зміст звіту: 5. Постановка завдання для індивідуального варіанту. 6. Схема розробленої БД 7. Текст програми. 8. Протокол роботи програми (скрін-шоти усіх розроблених форм, що ілюструють їх функціональність, тобто можливості додавання, редагування та видалення елементів). 9. Висновки. Варіанти індивідуальних завдань Индивидуальное задание № 1 Предметная область: Аэропорт
  • 26. Индивидуальное задание № 2 Предметная область: Рынок ПЭВМ Индивидуальное задание № 3 Предметная область: Деканат Индивидуальное задание № 4 Предметная область: Зоопарк
  • 27. Индивидуальное задание № 5 Предметная область: Шахматы Индивидуальное задание № 6 Предметная область: Судоходство Индивидуальное задание № 7 Предметная область: Автотранспортное предприятие
  • 28. Индивидуальное задание № 8 Предметная область: Научные конференции Индивидуальное задание № 9 Предметная область: Программные продукты Индивидуальное задание № 10 Предметная область: Операционная система
  • 29. Индивидуальное задание № 11 Предметная область: Добыча полезных ископаемых Индивидуальное задание № 12 Предметная область: Театр Индивидуальное задание № 13 Предметная область: Справочная аптек
  • 30. Индивидуальное задание № 14 Предметная область: Кулинария Индивидуальное задание № 15 Предметная область: Отдел кадров Индивидуальное задание № 16 Предметная область: Библиотека
  • 31. Индивидуальное задание № 17 Предметная область: Университет Индивидуальное задание № 18 Предметная область: Оптовая база Индивидуальное задание № 19 Предметная область: Производство
  • 32. Индивидуальное задание № 20 Предметная область: Предпринимательство Индивидуальное задание № 21 Предметная область: Автомастерская Индивидуальное задание № 22 Предметная область: Сессия
  • 33. Индивидуальное задание № 23 Предметная область: Управление проектом Индивидуальное задание № 24 Предметная область: Поликлиника Индивидуальное задание № 25 Предметная область: Телефонизация
  • 34. Индивидуальное задание № 26 Предметная область: Спорт Индивидуальное задание № 27 Предметная область: Сельскохозяйственные поставки Индивидуальное задание № 28 Предметная область: Городской транспорт
  • 35. Индивидуальное задание № 29 Предметная область: География Индивидуальное задание № 30 Предметная область: Домоуправление