Задача

Архітектура web-додатка електронного каталогу комп’ютерної техніки

Архітектура клієнт-сервер є одним із архітектурних шаблонів програмного забезпечення та є домінуючою концепцією у створенні розподілених мережних застосунків і передбачає взаємодію та обмін даними між ними. Вона передбачає такі основні компоненти:

• набір серверів, які надають інформацію або інші послуги програмам, які звертаються до них;
• набір клієнтів, які використовують сервіси, що надаються серверами;
• мережа, яка забезпечує взаємодію між клієнтами та серверами.

Дана архітектура буде застосована для розроблюваного сайту.

На рисунку 2.1 показана архітектура Веб-додатка.

Рисунок 2.1 – Архітектура Веб-додатка

Структура сайту буде являти собою схему, у якій відображені основні можливості користувача щодо перегляду каталогу товарів та редагування (рис. 2.2).

Рисунок 2.2 – Структура сайту

Структура бази даних

База даних Інтернет-каталогу створюється в середовищі MySQL. База являє собою набір таблиць з даними. У кожній таблиці присутні поля, які залежно від інформації, що зберігається в них, − мають свій тип даних, довжину тощо. Поля в яких зберігається яка-небудь невелика текстова інформація (назва товару) застосовується тип даних varchar, для зберігання більшої кількості текстової інформації – text (для опису товара), для зберігання інформації такої як лічильники − застосовуємо тип int (цілі числа), для зберігання інформації про ціну товару − застосовуємо тип даних float або double, так як ціна не обов'язково може бути цілим числом (зазвичай для дешевих товарів).

База даних compic має 3 таблиці: users, comp, note, phone, TV,

Таблиця users зберігає інформацію про користувачів сайту. Містить наступні поля:

• Id – ідентифікатор користувача, тип даних int(11), має властивість AUTO_INCREMENT та є первинним ключем PRIMARY_KEY;
• Id – ідентифікатор ПК, тип даних int(11), має властивість AUTO_INCREMENT та є первинним ключем PRIMARY_KEY;
• Id – ідентифікатор ПК, тип даних int(11), має властивість AUTO_INCREMENT та є первинним ключем PRIMARY_KEY;
• Id – ідентифікатор ПК, тип даних int(11), має властивість AUTO_INCREMENT та є первинним ключем PRIMARY_KEY;
• Id – ідентифікатор ПК, тип даних int(11), має властивість AUTO_INCREMENT та є первинним ключем PRIMARY_KEY;

• name – імя користувача, тип даних varchar(45);
• email – адрес електронної пошти користувача, тип даних varchar(45);
• pass – пароль для авторизації користувача, тип даних varchar(45);
• role – тип користувача (звичайний користувач – «1» або адміністратор «2»), тип даних int(3), значення за замовчуванням 1.
• name – повна назва, тип даних varchar(200);
• price – ціна у грн, тип даних float;
• manufacturer – виробник, тип даних varchar(200);
• proc – опис процесора, тип даних varchar(200);
• ram – об’єм оперативної пам’яті у Гб, тип даних int(11);
• rom - об’єм вінчестеру у Гб, тип даних int(11);
• vid - об’єм відео пам’яті у Гб, тип даних int(11);
• ssd - об’єм жорсткого диску у Гб, тип даних int(11);
• mothboard – назва материнської плати, тип даних varchar(200);
• supply – потужність блоку живлення у Вт, тип даних int(11);
• capacity – назва корпусу, тип даних varchar(200);
• cooler - опис системи охолодження, тип даних varchar(200);
• img – назва файлу зображення (разом з розширенням), тип даних varchar(200).
• name – повна назва, тип даних varchar(200);
• price – ціна у грн, тип даних float;
• screen – роздільна здатність екрану, тип даних varchar(200);
• manufacturer – виробник, тип даних varchar(200);
• proc – опис процесора, тип даних varchar(200);
• ram – об’єм оперативної пам’яті у Гб, тип даних int(11);
• rom - об’єм вінчестеру у Гб, тип даних int(11);
• vid - об’єм відео пам’яті у Гб, тип даних int(11);
• ssd - об’єм жорсткого диску у Гб, тип даних int(11);
• mothboard – назва материнської плати, тип даних varchar(200);
• supply – потужність блоку живлення у Вт, тип даних int(11);
• img – назва файлу зображення (разом з розширенням), тип даних varchar(200).
• name – повна назва, тип даних varchar(200);
• price – ціна у грн, тип даних float;
• screen – роздільна здатність екрану, тип даних varchar(200);
• manufacturer – виробник, тип даних varchar(200);
• proc – опис процесора, тип даних varchar(200);
• ram – об’єм оперативної пам’яті у Гб, тип даних int(11);
• rom - об’єм вбудованої пам’яті у Гб, тип даних int(11);
• img – назва файлу зображення (разом з розширенням), тип даних varchar(200).
• name – повна назва, тип даних varchar(200);
• price – ціна у грн, тип даних float;
• screen – роздільна здатність екрану, тип даних varchar(200);
• matr – тип матриці, тип даних varchar(200);
• standart – стандарти підключення, тип даних varchar(200);
• manufacturer – виробник, тип даних varchar(200);
• proc – опис процесора, тип даних varchar(200);
• img – назва файлу зображення (разом з розширенням), тип даних varchar(200).

Таблиця comp зберігає інформацію про персональні комп’ютери (ПК). Містить наступні поля:

Таблиця note зберігає інформацію про ноутбуки (лептопи). Містить наступні поля:

Таблиця phone зберігає інформацію про мобільні телефони (смартфони). Містить наступні поля:

Таблиця TV зберігає інформацію про телевізори. Містить наступні поля:

Між таблицями звзяки не встановлені так як достатньо буде таблиць з даними для отримання потрібної інформації щодо продукції.

Макети дизайну

Оформлення сторінок адміністратора на прикладі каталогу сантехніки (Зробити оформлення схожим чином).

Приклад сторінки перегляду каталогу товарів бази даних від адміністратора

Приклад сторінки додавання запису

Приклад сторінки видалення запису за обраною категорією

Приклад сторінки зміни запису

Оформлення сторінок користувача на прикладі каталогу сантехніки (Зробити оформлення схожим чином).
Приклад стартової сторінки

Приклад сторінки пошуку товарів за критеріями

Приклад сторінки опису детального опису товару