2. Розробка інтерфейсу програми

2.1 Кроки розробки призначених для користувача інтерфейсів

Для проектування інтерфейсу додатку знадобилося дізнатись інформацію про користувача, проаналізувати його рівень комп’ютерних знань та вмінь. Я проаналізувала можливих користувачів, які будуть користуватися додатком та вивела інформацію в окрему таблицю, табл.2.1

Табл. 2.1 - Характеристика користувача

Характеристика	Градації
Рівень знань і досвід
Комп’ютерна грамотність	Середній. Користувач повинен володіти елементарними навиками користування комп’ютером
Системний досвід	Середній
Досвід роботи з подібними програмами	Середній
Освіта	Закінчена середня освіта
Рівень читання	12 років в школі
Машинопис	135 слів за хвилину
Фізичні характеристики користувача
Вік	Молодий, середнього віку, літній
Стать	Чоловіча, жіноча
Розвиненість рук	Лівша, правша, володіє однаково обома руками
Фізичні вади	Бажано без фізичних вад
Характеристики завдань і роботи користувача
Спосіб використання цієї програми	Ознайомлення з інформацією, яка в ній знаходиться

2.2 Проектування інтерфейсу

1) Вікно «Робітники « ДЗ Сонечко»:

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 11 кнопок, для швидкого доступу до інших вікон. Додаю в Data Module ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource1таким чином з’єднавши їх з таблицею «Робітники». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, Додаток 2.

2) Вікно «Діти«ДЗ Сонечко»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 8 кнопок, для швидкого доступу до інших вікон. Додаю в Data Module ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource2таким чином з’єднавши їх з таблицею «Діти». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, Додаток 2.

3) Вікно «Послуги «ДЗ Сонечко»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 8 кнопок, для швидкого доступу до інших вікон. Додаю в Data Module ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource3таким чином з’єднавши їх з таблицею «Послуги». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, Додаток 2.

4) Вікно «Розклад дня «ДЗ Сонечко»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 8 кнопок, для швидкого доступу до інших вікон. Додаю в Data Module ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource4таким чином з’єднавши їх з таблицею «Розклад дня». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, Додаток 2.

5) Вікно «Оплата «ДЗ Сонечко»»

Додаю на Form1 MainMenu, ToolBar, StatusBar, DBGrid, DBNavigator, Button1, Button2, RadioButton;

Натиснувши 2 рази на MainMenu прописую назви кнопок швидкого доступу.

На ToolBar за допомогою команди NewButton додаю 10 кнопок, для швидкого доступу до інших вікон. Додаю в Data Module ImageList, натискаю 2 рази і за допомогою команди Add додаю зображення з розширенням *.bmp.

У властивостях ToolBar змінюю такі властивості: DisabledImages, HotImages, Images на ImageList1. Потім у властивості ImageIndex вибираю потрібний номер картинки для кнопки і прописую відповідний для неї код. Виділяю DBGrid та DBNavigator, змінюю властивість DataSource-> DataModule2->DataSource5таким чином з’єднавши їх з таблицею «Оплата». На Button1 прописую код для пошуку інформації по виділеному стовпчику (стовпчик виділяється RadioButton) . На Button2 прописую код для фільтрації інформації по виділеному стовпчику (стовпчик виділяється RadioButton) .

Зберігаю отриману форму, Додаток 2.

6) Вікно звіту Робітники.

Додаю на форму QuickRep, TitleBand1, DetailBand1, QRLabel1, QRDBText1.

У властивостях QuickRep змінюю DataSet на Form7->ADOTable1 (тим самим прив'язую таблицю «Робітники»). На TitleBand1 додаю 7 QRLabel1 та у властивості Caption прописую назви стовпців в звіті. На DetailBand1 додаю 6 QRDBText1 та змінюю властивість DataSet на Form7->ADOTable1 та DataField на потрібну назву таблиці.. Натискаю Preview і переглядаю створений звіт, Зберігаю в Додаток 2.

7) Вікно звіту Діти

Додаю на форму QuickRep, TitleBand1, DetailBand1, QRLabel1, QRDBText1.

У властивостях QuickRep змінюю DataSet на Form8->ADOTable1 (тим самим прив'язую таблицю «Діти»). На TitleBand1 додаю 6 QRLabel1 та у властивості Caption прописую назви стовпців в звіті. На DetailBand1 додаю 6 QRDBText1 та змінюю властивість DataSet на Form8->ADOTable1 та DataField на потрібну назву таблиці.. Натискаю Preview і переглядаю створений звіт, Зберігаю в Додаток 2.

8) Вікно довідки про програму.

Додаю на форму Memo.

У властивостях компонента Memo змінюю Lines-> «Довідка про програму». Зберігаю створену форму, Додаток 2.

9) Вікно довідки про розробника.

Додаю на форму Image, Lable.

Додаю Image, і у властивості Picture додаю картинку (логотип компанії). У властивостях компонента Memo змінюю Lines-> «Довідка про розробника та версію». Зберігаю створену форму, Додаток 2.