2.5 Проектування інтерфейсу користувача
Після того, як були зібрані вимоги замовника та створені вимоги розробника, ми зіткнулися з проблемою дизайну майбутнього сайту компанії з виробництва пластикових вікон. Переглянувши відомі та популярні інтернет сайти можна зробити приблизний макет сайту.
Головна сторінка сайту повинна містити:
1) коротку інформацію про вікна, щоб відвідувач сайту з першої сторінки міг отримати необхідну для себе вступну інформацію;
2) картинки, фото або інші графічні об'єкти;
3) реєстраційну панель (реєстрація нових клієнтів);
4) форму аутентифікації (входу зареєстрованих користувачів);
5) пошук вікон за заданими параметрами;
6) посилання.
Важливим є фактор дизайну, який орієнтований на потреби користувачів. Це потрібно для того, щоб стимулювати користувачів для роботи з системою. Наприклад, збільшення для числа постійних користувачів сайту, підвищення популярності певних функцій системи. Також інтерфейс забезпечує зручне введення даних, тобто користувачеві з ним легко і зручно працювати.
2.6 Проектування програмного забезпечення
В даному курсовому проекті було розроблено й продемонстровано чотири вида діаграм: варіантів використання, послідовності, компонентів та розгортання.
2.6.1 Розробка uml діаграм
1) Діаграма варіантів використання дозволяє визначити основні вимоги до програмного продукту, а також його основні функціональні можливості. Також вона описує взаємозв’язки і залежності між групою випадків використання і акторами, що беруть участь у процесі.
Ця діаграма призначена для того, щоб спрощувати виявлення та виправлення помилок, корегувати та доповнювати програму.
Залежність між двома варіантами використання зі стереотипом "включає" ("include") показує, що додатковий варіант використання є обов'язковим. Стрілка починається з основного варіанту використання та вказує на додатковий. Залежність зі стереотипом "розширює" ("extend") показує, що додатковий варіант використання не є обов'язковим і може бути реалізований пізніше. Стрілка починається з додаткового варіанту використання та вказує на основний [15].
Стрілка між актором та головними варіантами використання на діаграмі є асоціацією.
Незареєстрованому користувачу надається можливість реєстрації, та перегляду головної сторінки сайту. Він може переглядати каталог вікон, контакти та інформацію про компанію.
Для користувачів, які зареєструвались, список можливих дій значно збільшується. Вони можуть входити в систему за допомогою введення логіну та паролю, здійснювати повний перегляд сайту, що включає перегляд каталогу вікон, контактів, інформації про компанію, пошук вікон за певними параметрами, можливість залишати відгуки та замовляти необхідний товар.
Всі можливі дії на сайті може здійснювати тільки адміністратор. До основних з них відноситься редагування інформації, що включає корекцію, додавання та видалення даних з таблиць бази даних, управління користувачами, тобто їх редагування та видалення.
Розроблена діаграма варіантів використання, яка представлена у Додатку В, зображує три типи користувачів – адміністратора, зареєстрованого користувача та незареєстрованого користувача.
2) Діаграма послідовності - діаграма, на якій показані взаємодії об'єктів, впорядковані за часом їх прояву. На ній зображуються тільки ті об'єкти, які безпосередньо беруть участь у взаємодії. Ключовим моментом для діаграм послідовності є динаміка взаємодії об'єктів у часі. У UML діаграмах послідовності має як би два виміри. Перше зліва направо у вигляді вертикальних ліній, кожна з яких зображає лінію життя окремого об'єкта, який бере участь у взаємодії. Крайнім зліва на діаграмі зображується об'єкт, який є ініціатором взаємодії. Правіше зображується інший об'єкт, який безпосередньо взаємодіє з першим.
Графічно кожен об'єкт зображується прямокутником і розташовується у верхній частині своєї лінії життя. Усередині прямокутника записуються ім'я об'єкта і ім'я класу розділені двокрапкою. При цьому вся запис підкреслюється, що є ознакою об'єкта.
Прослушать
На латинице
Другим виміром діаграми послідовності є вертикальна тимчасова вісь, спрямована зверху вниз. Початкового моменту часу відповідає сама верхня частина діаграми. Взаємодії об'єктів реалізуються за допомогою повідомлень, які надсилаються одними об'єктами іншим. Повідомлення зображуються у вигляді горизонтальних стрілок з ім'ям повідомлення, а їх порядок визначається часом виникнення[15].
Розроблена діаграма послідовності представлена у Додатку Г.
3) Діаграма компонентів - статична структурна діаграма, показує розбиття програмної системи на структурні компоненти та зв'язку (залежності) між компонентами[15]. Компонент реалізує деякий набір інтерфейсів і служить для загального позначення елементів фізичного представлення моделі. Для графічного подання компонента може використовуватися спеціальний символ - прямокутник зі вставленими зліва двома дрібнішими прямокутниками. Усередині осяжний прямокутника записується ім'я компонента і, можливо, деяка додаткова інформація.
Рисунок 2.3 – Діаграма компонентів
4) Для представлення загальної конфігурації і топології розподіленою програмної системи в UML призначені діаграми розгортання. Діаграма розгортання також призначена для візуалізації елементів і компонентів програми, які існують лише на етапі її виконання. Діаграма розгортання містить графічні зображення процесорів, пристроїв, процесів і зв'язків між ними [15].
Для маленьких сайтів вибрати інструменти й технології досить просто. Особливо в тих випадках, коли важливу роль грає вартість проекту, можливі лише кілька комбінацій - Apache, MySQL або PostgreSQL, PHP або Perl. Самим популярним рішенням зазвичай виявляється комбінація Apache + PHP + MySQL.
Рисунок 2.4 – Діаграма розгортання