ÅÉêèïÇä éêèÄìÇììƒ èôÉæÄéÄ ÉÄüÄÆê

ЗМІСТ
ВСТУП .................................................................................................................. 3
1 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ДЛЯ УПРАВЛІННЯ

АВТОСАЛОНУ .................................................................................................... 5
1.1 Модель інформаційної системи .................................................................. 5
1.2 Моделювання інтерфейсу веб-сторінок ................................................... 12
1.3 Опис процесу створення веб-сайту .......................................................... 15
2 ПРОГРАМУВАННЯ ФУНКЦІОНАЛЬНОЇ ЧАСТИНИ ІНФОРМАЦІЙНОЇ

СИСТЕМИ ДЛЯ УПРАВЛІННЯ АВТОСАЛОНОМ ....................................... 18
2.1 Технологія створення динамічних веб-сторінок ..................................... 18
2.2 Опис серверних елементів управління ..................................................... 22
3 ДОСТУП ДО БАЗИ ДАНИХ .......................................................................... 23
ВИСНОВКИ ....................................................................................................... 26
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................... 27
Додаток А ........................................................................................................... 28
Додаток Б ............................................................................................................ 39
Додаток В............................................................................................................ 46
Додаток Г ............................................................................................................ 52
Додаток Д ........................................................................................................... 53
Додаток Е ............................................................................................................ 55
3
ВСТУП
Інтернет – найбільший ресурс для обміну інформації та оптимізації

роботи більшості компаній. Саме для роботи з клієнтами найкращим
майданчиком для обміну інформації є веб-сайт.
Веб-сайт – це сукупність програмних, інформаційних, а також недійних
засобів, логічно пов’язаних між собою. Тобто віддзеркалення успішності
фірми, її обличчя.
Він виконує такі завдання як:
— реклама продукції, послуг. Правильно зроблений веб-сайт із
легкістю приведе клієнта до висновку про необхідність покупки товару, або
послуг, або ідей, що пропагуються на ньому;
— продаж товарів, послуг, інформації, ідей. У сучасної людини немає
багато часу для ходіння по магазинах. Тому можливість замовлення товарів і
послуг, не відходячи від комп'ютера, значно розширює можливості і клієнта,
і продавця;
— безкоштовне надання інформації або послуг. Насправді надання
інформації або послуг — це засіб залучення відвідувачів до даного ресурсу
для здобуття, наприклад, статистичної інформації або ж для показу реклами,
якщо це рекламний майданчик;
— підтримка клієнтів.
Такий спосіб передачі повідомлень потенційним клієнтам
ефективніший за звичайні засоби комунікації: пошту, телефон, факс.
Темою курсової роботи є створення інформаційної системи автосалону.
Об’єктом дослідження є автосалон. Необхідність створення сайту
виникла в наслідок зростання обсягу інформації.
Система спроектована за технологією використання баз даних, є
інформаційною системою з розміщенням на сервері в мережі Інтернет, в якій
дані можуть спільно використовуватися й оброблятися багатьма
4
програмними модулями. Тобто, інформаційна система – це сукупність

організаційних і технічних засобів для збереження та обробки інформації з
метою забезпечення інформаційних потреб користувачів.
Однією з найважливіших частин даної інфраструктури, звісно є великі
обсяги даних, які повинні надійно зберігатися та бути легко доступними для
працівників для забезпечення швидкої та ефективної роботи та
обслуговування клієнтів.
З таким збільшенням обсягу даних виникає проблема структурованого
зберігання та обробки даних. На вирішення саме цього питання й спрямована
розробка реляційної бази даних.
Однією з основних задач, що стоять перед системами управління
базами даних, є необхідність представлення користувачам зручних методів
доступу до даних. Ця задача може бути розв'язана шляхом використання мов,
спеціально орієнтованих на роботу з даними. Однією з таких мов являється
структурована мова запитів SQL (Structured Query Language). Мова SQL
представляє собою набір команд, за допомогою яких користувачі й програмні
додатки можуть отримувати доступ до даних, що зберігаються в системі
управління базою даних (СУБД) і виконувати з ними різні операції.
Зрештою необхідно зазначити, що на сьогоднішній день перетворення
в галузі суспільної свідомості призводять до того, що людство поступово
переходить до нової стадії розвитку – інформаційного суспільства, у якому
має отримувати оперативний доступ до будь-якої необхідної інформації
задля вирішення нагальних потреб та швидкого пристосування до умов, які
постійно змінюються.
5
1 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ДЛЯ УПРАВЛІННЯ

АВТОСАЛОНУ
1.1 Модель інформаційної системи
Представимо модель інформаційної системи для управління

автосалоном за допомогою методології IDEF.
Взаємна сукупність методик і моделей концептуального проектування
IDEF розроблена в США за програмою Integrated Computer-Aided
Manufacturing. В даний час є методики функціонального, інформаційного та
поведінкового моделювання та проектування. Розглянемо стандарт IDEF0.
IDEF0 – методологія функціонального моделювання. Як правило,
моделювання засобами IDEF0 є першим етапом вивчення будь-якої системи.
Той факт, що в моделюванні використовується всього два графічних
примітиву, дозволяє досить швидко пояснити діючі правила взаємодій IDEF0
тим людям, які не мають жодного уявлення про цей вид діаграм. [9]
Методологію IDEF0 можна застосовувати для опису функціонального
аспекту будь-якої інформаційної системи.
Для поліпшення візуального сприйняття кожен блок і кожна стрілка
повинні мати своє власне ім'я, яке дозволить ідентифікувати їх серед безлічі
інших блоків і стрілок. Так виглядають в IDEF0 приклади діаграм.
Інформаційна система, побудована з допомогою них, дозволить розібратися у
всіх недоліках і складнощі моделей.
Часто використовується злиття стрілок, і постають питання про їх
іменуванні. Але злиття можливе лише у разі передачі однорідних даних, тому
окремі імена не потрібні, хоча в програмі BPWin їх можна поставити. Також,
якщо відбувається розбіжність стрілок, то їх можна окремо найменувати,
щоб розуміти, що за що відповідає.
6
Нотація IDEF0 використовується для опису бізнес-процесів на

підприємстві і дозволяє зрозуміти які об’єкти або інформація служать
джерелом для виконання функції перетворення, які результати виробляються
роботою, що є керуючими чинниками і які ресурси для цього необхідні.
Відмінною особливістю IDEF0 є її акцент на ієрархічне об’єктів. В
IDEF0 розглядаються логічні зв’язки між роботами, а не їх виконання в часі.
Стандарт IDEF0 представляє організацію як набір функцій, в ньому
існує правило – найбільш важлива функція знаходиться у верхньому лівому
кутку, крім того є правило сторони: – стрілка входу входить завжди в лівий
край (сторону, бік) активності, – стрілка керування – у верхній край, –
стрілка механізму – нижній край, – стрілка виходу – правий край.
Опис виглядає як «чорний ящик» з входами, виходами, управлінням і
механізмом, який поступово деталізований до необхідного рівня. Також для
того що б можна було правильно зрозуміти, існують словники опису
активностей і стрілок. У даних словниках можна описати який зміст ви
вкладаєте в певну активність або стрілку.
Побудова моделі інформаційної системи починається з опису її
функціонування в цілому у вигляді контекстної діаграми.
На рисунку представлена контекстна діаграма інформаційної системи
для управління замовленнями автосалону:
7
Рисунок 1.1 – Нульовий рівень декомпозиції

Розглянемо детальніше кожен з них у розрізі нашої діаграми:
 входи (на рис. 1.1) це «Відомості про машину», «Відомості про
клієнта»;
 виходи – «Замовлення»;
 управління – «Інструкції»;
 механізми – «Персонал автосалону».
Механізми – це ті ресурси, котрі необхідні для процесу.
Управління – це правила, якими керується процес ведення кредитних
історій.
Після опису контекстної діаграми проводиться функціональна
декомпозиція – система розбивається на підсистеми і кожна підсистема
описується окремо (діаграми декомпозиції). Потім кожна підсистема
розбивається на більш дрібні і так далі до досягнення потрібного ступеня
деталізації. У результаті такого розбиття, кожен фрагмент системи
зображується на окремій діаграмі декомпозиції.
8
Після подальшого розбиття діаграми отримуємо наступну діаграму

декомпозиції:
Рисунок 1.3 – Перший рівень декомпозиції

Весь процес функціонування ІС розбивається на роботи:
1) «Реєстрація клієнта» – збір інформації необхідної для оформлення
клієнта;
2) «Підбір авто» – вибір авто клієнтом;
3) «Оформлення замовлення» – процес відслідковування статусу
виконання замовлення та оформлення відповідних документів по
завершенню.
Ще одним корисним інструментом при моделюванні предметної
області є діаграма потоків даних (data flow diagram, DFD) – один з основних
інструментів структурного аналізу та проектування інформаційних систем,
що існували до «епохи UML». Незважаючи на те, що має місце в сучасних
умовах зміщення акцентів від структурного до об’єктно-орієнтованого
підходу до аналізу та проектування систем, «старовинні» структурні нотації
9
як і раніше широко і ефективно використовуються як у бізнес-аналізі, так і в

аналізі інформаційних систем.
Діаграми потоків даних (Data Flow Diagram) використовуються для
документування механізмів передачі та обробки інформації в системі, що
моделюється. Діаграми DFD будуються для наочного відображення поточної
роботи системи документообігу організації. Найчастіше діаграми DFD
застосовують як доповнення моделі бізнес-процесів, виконаної в IDEF0.[10]
Після побудови отримаємо наступний результат:
Рисунок 1.4 – DFD-діаграма

На даній діаграмі немає функцій механізму та управління. Їх роль
виконують зовнішні сутності (Закони) та сховища даних (Дані про номера,
клієнтів).
До основних об’єктів даної нотації відносять:
 роботи (activities). Відображають процеси обробки та зміни
інформації;
 стрілки (інформаційні потоки) (arrows). Відображають інформаційні
потоки;
10
 cховища даних (data Store). Відображають дані, до яких здійснюється

доступ, ці дані використовуються, створюються чи змінюються роботами;
 зовнішні сутності (посилання) (external references). Відображають
об’єкти, з якими відбувається взаємодія.
Розглянемо дані структурні об’єкти в розрізі нашої DFD-діаграми:
 Роботи – позначають функції або процеси, які обробляють і
змінюють інформацію. В нашому випадку маємо наступні роботи «Пошук
клієнта в БД», «Реєстрація клієнта», «Реєстрація заявки» тощо.
 Інформаційні потоки – об’єкт позначає інформаційний потік від
об’єкта-джерела до об’єкту-приймача. В нашому випадку маємо наступні
інформаційні потоки: «Дані про клієнта», «Дані про співробітника», «Дані
про нового клієнта» та ін.
 Зовнішні сутності (посилання) – вказують на місце, організацію чи
людину, які беруть участь у процесі обміну інформацією з системою, але
розташовуються за рамками цієї діаграми. В нашому випадку маємо наступні
зовнішні посилання: «Клієнт», «Співробітник».
а) Сховища даних – сховища даних являють собою власне дані, до яких
здійснюється доступ, ці дані також можуть бути створені або змінені
роботами. На одній діаграмі може бути присутні кілька копій одного і того ж
сховища даних. . В нашому випадку маємо сховище даних: «БД» – база даних
підприємства.
Тому для забезпечення вимог моделювання – створимо діаграму
«сутність-зв’язок» (див. додаток А). Діаграма «сутність-зв’язок» є однією з
ключових концепцій, які використовуються в процесі розробки бази даних.
За допомогою цієї діаграми структура даних може бути чітко спроектована
перед тим, як модель буде реалізована у вигляді бази даних. Діаграма
«сутність-зв’язок» включає в себе логічні (віртуальні) об’єкти, які були
використані для представлення в базі даних об’єктів реального світу, і
взаємозв’язки між цими об’єктами.
11
Рисунок 1.5 – ER-діаграма
Слід зазначити, що жорстке дотримання всіх нюансів даних діаграм під

час написання програмного коду не обов'язкове, але діаграми вносять
необхідну зрозумілість у деякі процеси. Після написання програмного коду, у
дані діаграми, як правило, вносяться необхідні поправки.
Отже, виділивши основні етапи, можна переходити до наступних
етапів розробки програмного продукту.
12
1.2 Моделювання інтерфейсу веб-сторінок
Наступним етапом розробки веб-сайту є створення інтерфейсу сторінки.

Безумовно одною з найважливіших частин розробки веб-сайту є
створення інтерфейсу його сторінок.
Веб-сторінка повина мати однаковий вигляд і мати однакову
функціональність при роботі з різними браузерами.
Створення інтерфейсу проводимо з використанням HTML із
застосуванням CSS і JavaScript, як правило за допомогою скриптових мов на
стороні сервера.
Інший (менш універсальний) підхід полягає у використанні Adobe
Flash, Silverlight або Java-аплетів для повної або часткової реалізації
користувацького інтерфейсу. Оскільки більшість браузерів підтримує ці
технології (як правило, за допомогою плагінів), Flash- або Java-застосунки
можуть легко виконуватися. Вони здатні обходити багато несумісності в
конфігураціях браузерів, бо надають програмісту більший контроль над
інтерфейсом, хоча несумісність між Java або Flash реалізаціями на стороні
клієнта може призводити до різних ускладнень.
Веб-інтерфейси зручні тим, що дають можливість вести спільну роботу
співробітникам, які не перебувають в одному офісі.
Веб-інтерфейс дає можливість універсального віддаленого доступу до
служб та пристроїв, у даної технології практично нема альтернатив. Але
водночас, оскільки такий інтерфейс доступний усім, постають серйозні
питання забезпечення безпеки, зокрема автентифікація та авторизація
користувачів, шифрування переданих даних від сторонніх очей, модерація
вмісту тощо.
В залежності від технології створення можна виділити наступні типи
сайтів:
13
 статичні сайти, що містять статичні HTML або XHTML сторінки.

Статичні веб-сторінки – це статичні файли (набір тексту, таблиць,
малюнків і т.д.), які створюється за допомогою мови розмітки HTML (мають
розширення .html або .htm) і зберігаються в готовому вигляді у файловій
системі сервера;
 динамічні сайти, в яких веб-сторінки генеруються або формуються
(створюються динамічно) в процесі виконання запиту користувача.
Динамічні сайти бувають двох типів. У першому типі сайтів, веб-сторінки
генеруються або формуються з даних, які зберігаються на сервері в базі
даних. У другому типі сайтів веб-сторінки генеруються на стороні
клієнтського додатка (в браузері);
 Flash-сайти – це інтерактивні програми, розроблені в середовищі
Macromedia Flash. Основним інструментом розробки flash-програм є
векторна графіка (інтерактивна векторна анімація для Web). Flash надає
сайтам динамічність та інтерактивність;
 комбіновані сайти, в яких використовуються вищевикладені
технології створення сайтів.
Для обміну даними між користувачем і сервером у веб-сторінку можна
вставити веб-додаток, який називається HTML-формою (form). Форма – це
частина веб-сторінки, в яку користувач може вводити свою інформацію і
відправляти її на сервер. Запити обробляються на сервері, який генерує
відповідну вихідну інформацію. Запити в формі можуть виконуватися
методами GET або POST.
Основою верстки є макет, що дозволяє створити цілісну картину
елементів сторінки, єдність та відчуття неподільного образного ряду. Іноді,
макетом сайту називають готовий зверстаний шаблон сторінки сайту.
Веб-сторінка фактично розглядається як набір прямокутних блоків, які
складаються в певному порядку. Завдання макетування полягає у
гармонійному розташуванні різноманітних текстових та графічних блоків
майбутньої сторінки.
14
Інформація розподіляється наступним чином:

а)у верхній частині сторінки (шапка) містяться:
 логотип;
 заголовок;
 меню навігації (по сайту).
б) у середній (основній) частині сторінки:
 меню навігації по тематичних розділах сайту;
 основна інформація;
 зображення;
в) у нижній частині сторінки:
 адреси, телефони;
 лічильники і банери;
 додаткове меню навігації (по сайту, по розділах сайту).
Створимо проекти макетів сторінок, які будуть формувати інтерфейс
веб-додатку у вигляді ескізів.
Рисунок 1.4 – Ескіз головної сторінки інформаційної системи

15
1.3 Опис процесу створення веб-сайту
Розглянемо основні етапи створення сайту та подальшого його

функціонування.
Основні етапи створення сайту:
 проектування і створення технічного завдання;
 створення та затвердження графічного дизайну сайту;
 перенесення дизайну у структуру веб-сторінок (верстка сайту);
 програмування сайту
 тестування;
 запуск (перенесення сайту на сервер);
 наповнення контентом (наповнення сайту тематичною інформацією);
 пошукова оптимізація сайту (заходи для покращення позицій сайту у
пошукових системах);
Для того, щоб зверстати сторінку, ми використовували програму під
назвою Brackets. Brackets — текстовий редактор від компанії Adobe,
призначений для редагування JavaScript, HTML і CSS. Код Brackets
написаний з використанням веб-технологій (JavaScript, HTML і CSS) і
поширюється під ліцензією MIT. Редактор оформлений у вигляді
відокремленого настільного застосунка, для установки якого підготовлені
deb-, dmg- і msi- пакети для Linux, OS X і Windows.
Ми застосували гумову і адаптивну верстку. Гумова верстка сайтів - це
різновид верстки, при якій розміри компонентів веб-сторінок сайту
пропорційно «розтягуються» і «стискуються», підбудовуючись під розмір
монітора користувача. З моменту свого винаходу гумова верстка сайтів
використовувалася дуже активно. Однак сучасні веб-дизайнери вважають,
що гумова верстка може негативно позначитися на ефективності сайту.
16
Адаптивна верстка змінює дизайн сторінки в залежності від поведінки

користувача, платформи, розміру екрану і орієнтації девайса і є невід'ємною
частиною сучасної веб-розробки.
Побудувавши сторінку отримали наступне її відображення у вікні
браузера (рисунок 1.6):
17
Рисунок 1.6 – Вид сайту в вікні браузера

18
2 ПРОГРАМУВАННЯ ФУНКЦІОНАЛЬНОЇ ЧАСТИНИ ІНФОРМАЦІЙНОЇ

СИСТЕМИ ДЛЯ УПРАВЛІННЯ АВТОСАЛОНОМ
2.1 Технологія створення динамічних веб-сторінок
Динамічний сайт – сайт, що складається з динамічних сторінок –

шаблонів, контенту, скриптів та іншого, у вигляді окремих файлів. Сторінка
сайту, який показується в результаті браузеру користувача, формується на
стороні сервера динамічно, за запитом, з сторінки-шаблону та контенту
(інформації, скриптів і ін.), що окремо зберігається. Як правило для
відображення будь-якої кількості однотипних сторінок використовується
одна сторінка-шаблон, в яку завантажується відповідний вміст, це дозволяє
одномоментно коригувати зовнішній вигляд сайту (великої кількості всіх
його сторінок), редагуючи всього лише один шаблон.
На відміну від статичних, динамічні сайти набагато більш гнучкі в
керуванні. Динамічні сайти являють собою сукупність тексту й графіки, мови
розмітки -точно так само, як і статичні сайти. Однак на додаток до цього
динамічні сайти використовують також різні технології, що дозволяють
«коструювати» веб-сторінки «на льоту».
Динамічні сайти можна розробляти «з нуля», вручну створюючи всі
необхідні програмні коди, скрипти й т.д. Однак набагато частіше для
створення динамічних сайтів використовуються спеціальні системи
керування контентом – CMS. CMS дозволяють використовувати вже готові
програмні модулі й компоненти, без необхідності щораз створювати їх «з
нуля». На основі однієї CMS можна створити будь-яку кількість динамічних
сайтів.
Динамічні сайти в браузері формуються з декількох частин або ж
браузер заповнює інформацією вже готові шаблони сторінок. У динамічних
19
сайтах реалізований поділ змісту й оформлення веб-сторінок - це дозволяє

оперативно змінювати інформацію на сайтах без необхідності змінювати
програмні коди сторінок.
Динамічні сайти можуть «підлаштовуватися» під своїх відвідувачів,
реагуючи на їхні дії. Для цього використовуються технології серверних,
клієнтських скриптів, за допомогою яких і створюються сценарії поводження
сайту при певних діях користувачів.
Доступні різні методи, які дозволяють браузеру залишатись на одній
сторінці, навіть якщо додаток вимагає взаємодії з сервером:
 JavaScript frameworks;
 Ajax;
 Websockets;
 Server-sent events;
 Browser plugins;
 Data transport (XML, JSON and Ajax);
 Server architecture.
JavaScript фреймворки, такі як AngularJS, ember.js, Meteor.js, ExtJS і
React реалізовують принципи SPA.
AngularJS – це JavaScript-фреймворк з відкритим програмним кодом,
який розробляє Google. Призначений для розробки односторінкових
додатків, що складаються з однієї HTML сторінки з CSS і JavaScript. Його
мета – розширення браузерних застосунків на основі шаблону Модель-вид-
контролер (MVC), а також спрощення їх тестування та розробки.
Фреймворк працює зі сторінкою HTML, що містить додаткові атрибути
і пов'язує області вводу або виводу сторінки з моделлю, яка є звичайними
змінними JavaScript. Значення цих змінних задаються вручну або
отримуються зі статичних або динамічних JSON-даних.
AngularJS спроектований з переконанням, що декларативне
програмування найкраще пасує для побудови інтерфейсів користувача та
20
опису програмних компонентів, в той час як імперативне програмування

пасує для опису бізнес-логіки. Фреймворк адаптує та розширює традиційний
HTML, щоб забезпечити двосторонню прив'язку даних для динамічного
контенту, що дозволяє автоматично синхронізувати модель та вид. У
результаті AngularJS зменшує роль DOM-маніпуляцій з метою підвищення
продуктивності та спрощення тестування.
Основними цілями розробки AngularJS є наступні:
а) відділення DOM-маніпуляцій від логіки програми, що в свою чергу
покращує можливість тестуваннякоду;
б) ставлення до тестування як до важливої частини розробки.
Складність тестування безпосередньо залежить від структурованості коду;
в) відділення клієнтської від серверної сторони, що дозволяє вести
розробку паралельно;
г) проведення розробника через весь шлях створення програми: від
проектування призначеного для користувача інтерфейсу, через написання
бізнес-логіки, до тестування.
Angular дотримується MVC-шаблону проектування та заохочує
слабкий зв’язок між представленням, даними та логікою компонентів.
Використовуючи впровадження залежності, Angular переносить на
клієнтську сторону такі класичні серверні служби, як видозалежні
контролери. Отже, зменшується навантаження на сервер і веб-додаток стає
легше. [11]
jQuery — популярна JavaScript-бібліотека з відкритим кодом.
Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації
зручнішим завдяки вибору елементів DOM, створенню анімації, обробки
подій. jQuery також надає можливості для розробників для створення
плагінів. Використовуючи ці об'єкти, розробники можуть створювати
абстракції для низькорівневої взаємодії та створювати анімацію для ефектів
високого рівня. Це сприяє створенню потужних і динамічних веб-сторінок.
21
Основне завдання jQuery — це надавати розробнику легкий та гнучкий

інструментарій кросбраузерної адресації DOM об'єктів за допомогою CSS.
Також даний фреймворк надає інтерфейси для Ajax, обробників подій і
простої анімації. Принцип роботи jQuery полягає в використанні класу
(функції), який при звертанні до нього повертає сам себе. Таким чином, це
дозволяє будувати послідовний ланцюг методів.
Бібліотека jQuery є JavaScript файлом, яка включає події(events),
ефекти(effects), і Ajax функції. Вона може бути додана до web-сторінки
посиланням на локальну копію, або на одну з копій доступних на публічному
сервері (наприклад Google або Microsoft CDN) [5].
<script type="text/javascript" src="jquery.js"></script>
22
2.2 Опис серверних елементів управління
Браузер отримує дані з веб-серверу за допомогою скриптів php. Ми

використовували файли get_user.php, get_user1.php, get_user2.php (Додатки
Б-Г) і db.php.
В файлі db.php прописано адресу, ім’я бази, ім’я користувача і пароль.
Всі ці дані використовуються, щоб з’єднатись с сервером бази даних і
отримати таблиці від нього.
Лістинг 2.1 – Файл db.php

<?php
$host = 'mysql.zzz.com.ua'; // адрес сервера
$database ='yulia_guzhva';// имя базы данных
$user = 'yulia_guzhva'; // имя пользователя
$password = 'Asdfg654'; // пароль
mysql_set_charset("utf8");
if (!$connection || !$db)
{
exit(mysql_error());
}
?>
За допомогою файлів get_user.php, get_user1.php, get_user2.php,
get_user3.php, usluga.php, zakaz.php в нас проходить підключення до серверу
бази даних потім запит на вивід та ввід інформації, а з серверу йдуть дані
які потім виводяться в блок user_data який ми задали в index.html за
допомогою наступного лістингу [8].
23
3 ДОСТУП ДО БАЗИ ДАНИХ
Існує безкоштовний хостинг https://www.zzz.com.ua/ru на якому ми

зареєструвалися та активували акаунт і додали свою базу даних . Вводимо
ім`я користувача и пароль котрі ми будемо використовувати при вході в базу
даних. Зайшовши ми маємо наповнити базу даними.
Рисунок 3.1 – Сторінка інтерфейсу phpMyAdmin

При реєстрації ми створюємо собі домен з потрібною нам назвою і
чекаємо його активації. Потім підключаємося до FTP-серверу за допомогою
логіну и паролю котрий ми вказали при реєстрації. Там бачимо папку з
назвою нашого домену заходимо в неї та натискаємо кнопку «Завантажити на
сервер» і обираємо архів формату zip з файлами для нашого сайту і
завантажуємо.
Рисунок 3.2 – Головна сторінка нашого хостингу.

24
Рисунок 3.2 – Сторінка інтерфейсу сервера FTP

Адреса сайту: http://auto-prestige.zzz.com.ua/
25
В результаті чого відкриється головна сторінка нашого додатку:
Рисунок 3.3 – Результат відкриття додатку з консолі

26
ВИСНОВКИ
Відповідно до завдання курсової роботи, було cтворено

інформаційну систему розподілу учбового навантаження вищого учбового
закладу. Веб-сайт повинен полегшити і зробити більш ефективним процес
перегляду інформації. Відповідно до цілей, база даних забезпечує:
1. Масштабованість, дозволяє підтримувати велику кількість операцій.
2. Зменшення обсягів надмірної інформації.
3. Полегшення роботи, та зменшення її трудомісткості.
4. Ефективний облік необхідних даних.
5. Прискорення процесу доступу до даних.
Створена інформаційна система задовольняє всі вимоги поставлені у
завданні, дозволяє значно підвищити продуктивність складання розкладу.
Основними пропозиціями, щодо покращення є:
1. Продовження вдосконалення даної інформаційної системи, для
забезпечення комфортного користування.
2. Забезпечення розмежування прав на розподіл навантажень між
викладачами.
Застосування такої системи дозволить навчальному закладу:
 значно зменшити витрати на створення розкладу;
 розвантажити викладачів від надлишкової інформації;
У процесі написання курсового проекту були докладно розглянуті
наступні питання:
 зміст веб-технологій;
 моделювання інтерфейсу веб-сторінок;
 створення загальних макетів сторінок веб-додатку;
 програмування обробок веб-додатку;
 опис серверних елементів управління.
27
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Справочник CSS. URL: https://webref.ru/css/ .

2. Визуальное руководство по свойствам Flexbox из CSS3. URL:
http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-
css3.html .
3. Начало работы с Bootstrap. URL: http://mybootstrap.ru/get-started.
4. Современный учебник Javascript. URL: http://learn.javascript.ru/ .
5. Уроки по HTML и CSS. URL: https://webref.ru/layout/learn-html-
css/ .
6. PHP MySQL Tutorial. URL: http://www.freewebmasterhelp.com/
tutorials/phpmysql .
7. Automation of strategy using IDEF0. URL:
https://www.sciencedirect.com/science/article/pii/S2214716015000111.
8. PHP 5 Tutorial. URL: https://www.w3schools.com/php/default.asp.
9. Опис стандарту IDEF0. URL: http://easy-code.com.ua/2011/03/opis-
standartu-idef0/.
10. Построение диаграммы декомпозиции в нотации DFD. URL:
http://khpi-iip.mipk.kharkiv.edu/library/technpgm/labs/lab06.html
11. Guide to Angular 1 Documentation. URL: https://docs.angularjs.org/
guide
28
Додаток А
Лістинг 1 – HTML-код сторінки index.html

<!DOCTYPE html>
<html lang="en" class="no-js">


<head>
<meta charset="utf-8" />
<title>Автосалон Prestige</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />


<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700"
rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"
type="text/css" />
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


<link href="css/animate.css" rel="stylesheet">
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css" />


<link href="css/layout.min.css" rel="stylesheet" type="text/css" />


<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#price').click(function() {
$.get('get_user.php', function(data) {
$('#user_data').html(data);
});
});
});
$('#price1').click(function() {
$.get('get_user2.php', function(data) {
});
});
});
29
</script>
</head>

<script src="dev-tools/package.json"></script>

<body>


<header class="header navbar-fixed-top">

<nav class="navbar" role="navigation">
<div class="container">

<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>


<div class="logo">
<a class="logo-wrap" href="index.html">
<img class="logo-img logo-img-main" src="img/logo-large.png"
alt="Prestige Logo">
<img class="logo-img logo-img-active" src="img/logo-large.png"
</a>
</div>

</div>

<div class="collapse navbar-collapse nav-collapse">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover active"
href="index.html">Главная</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover"
href="#avto">Авто</a></li>
href="zakaz.php">Заказ авто</a></li>
href="prodaz.php">Покупка авто</a></li>
href="#contact">Контакты</a></li>
</ul>
30
</div>
</div>

</div>
</nav>

</header>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
</div>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/2.jpg" alt="Slider Image">
<div class="carousel-centered">
<div class="margin-b-40">
<h1 class="carousel-title ">Мы не предсказываем будущего, мы
создаем его</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="carousel-centered">
<h2 class="carousel-title">Позвольте себе больше</h2>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-brd text-
uppercase">Авто</a>
</div>
</div>
</div>
</div>
</div>




<section class="avto" id="avto">
<div class="bg-color-sky-light" data-auto-height="true">
31
<div class="content-lg container">

<div class="row row-space-1 margin-b-2">
<div class="col-sm-4 sm-margin-b-2">
<div class="wow fadeInLeft" data-wow-duration=".3" data-wow-
delay=".3s">
<div class="service" data-height="height">
<div class="service-info">
<h3>Audi</h3>
<img class="img-responsive" src="img/audi.jpg" alt="Slider
Image">
</div>
<a href="audi.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
delay=".2s">
<h3>BMW</h3>
<img class="img-responsive" src="img/bmw1.jpg" alt="Slider
Image">
</div>
<a href="bmw.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
<div class="col-sm-4">
delay=".1s">
<h3>Ford</h3>
<img class="img-responsive" src="img/ford.jpg" alt="Slider Image">
</div>
<a href="ford.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
</div>

<div class="row row-space-1">

delay=".4s">
<h3>Mitsubishi</h3>
32
<img class="img-responsive" src="img/mitsubishi1.jpg" alt="Slider

Image">
</div>
<a href="mitsubishi.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
delay=".5s">
<h3>Hyundai</h3>
<img class="img-responsive" src="img/hyundai.jpg" alt="Slider
Image">
</div>
<a href="hyundai.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
delay=".6s">
<h3>Mercedes</h3>
</div>
<a href="mercedes.html" class="content-wrapper-link"></a>
</div>
</div>
</div>
</div>

</div>
</div>
</section>



<div class="content-lg container">s
<div class="row margin-b-40">
<h2>Новости</h2>
</div>
</div>
</div>

<div class="row">
33
<div class="wow zoomIn" data-wow-duration=".3" data-wow-delay=".1s">
<img class="img-responsive" src="img/ford_pterlog.JPG" alt="Latest
Products Image">
</div>
</div>
<p>Победитель Autobest 2019 едет в Украину: старт продаж
пассажирского Citroen Berlingo</p>
<a class="link" href="#">Подробнее</a>
</div>


<img class="img-responsive" src="img/ford_2_l.JPG" alt="Latest
Products Image">
</div>
</div>
<h4><a href="#">Ford Fusion ECOBOOST</a> <span class="text-uppercase
margin-l-20">Цена: $ 17000,00</span></h4>
<p>Год - 2016
Коробка передач -Автомат; Привод: FWD- Передний Кол-во дверей: 4
Кол-во мест: 4 Цвет: Не указано Топливо: Бензин Объем: двигателя 1,5
Пробег:13 тыс.км Тип кузова:Sedan ID Ford 1107</p>
</div>

<img class="img-responsive" src="img/hyundai_2l.JPG" alt="Latest
Products Image">
</div>
</div>
<h4><a href="#">Hyundai Santa FE</a> <span class="text-uppercase margin-
l-20">Цена: $ 48900,00</span></h4>
<p>
Год 2018
Коробка передач Автомат
Привод FWD- Передний
Кол-во дверей 5
Кол-во мест 5
Цвет Белый
Топливо Дизель
Объем двигателя 2
Пробег 1 тыс. км
Тип кузова Внедорожник
34
ID Hyundai 1185</p>
</div>
</div>




<div class="bg-color-sky-light">

<div class="swiper-slider swiper-clients">

<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/bbw.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/ford.png" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/ford.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/audi.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/88_685big.jpg"
alt="Clients Logo">
</div>
</div>

</div>

</div>
</div>



<div class="pricing">
<div class="margin-b-30 text-center">
<i class="pricing-icon icon-chemistry"></i>
<h3>Заказ автомобиля</h3>
35
<p>Подбор и доставка автомобилей на заказ с лучших европейских и

американских площадок.</p>
</div>
<a href="zakaz.html" class="btn-theme btn-theme-sm btn-default-bg text-
uppercase">Выбрать</a>
</div>
<a href="usluga.html" class="btn-theme btn-theme-sm btn-default-bg text-
uppercase">Добавить</a>
</div>
</div>






<section class="contact" id="contact">
<div class="section-seperator">
<div class="row">
delay=".3s">
<h3><a href="#">Киев</a> <span class="text-uppercase margin-l-
20">Главный офис</span></h3>
<p>бульвар Леси Украинки, 36</p>
<ul class="list-unstyled contact-list">
<li><i class="margin-r-10 color-base icon-call-out"></i> 099-56-89-
589</li>
<li><i class="margin-r-10 color-base icon-envelope"></i>
prestige_kyiv@gmail.com</li>
</ul>
</div>
</div>


delay=".3s">
<h3><a href="#">Харьков</a> </h3>
<p>ул. Воздвиженская, 59</p>
547</li>
prestige_kharkov@gmail.com</li>
</ul>
</div>
36
</div>

delay=".3s">
<h3><a href="#">Сумы</a></h3>
<p>ул. Петропавловская, 20</p>
597</li>
prestige_sumy@gmail.com</li>
</ul>
</div>
</div>
</div>

</div>
</div>
</section>



<footer class="footer">

<div class="footer-seperator">
<div class="row">

<ul class="list-unstyled footer-list">
<li class="footer-list-item"><a class="footer-list-link"
href="#">Главная</a></li>
href="#">Авто</a></li>
href="#">Специальные предложения</a></li>
href="#">Предложения и услуги</a></li>
href="#">Контакты</a></li>
</ul>

</div>

37

href="#">Twitter</a></li>
href="#">Facebook</a></li>
href="#">Instagram</a></li>
</ul>

</div>
<h2 class="color-white">Есть вопрос?</h2>
<input type="text" class="form-control footer-input margin-b-20"
placeholder="Имя" required>
<input type="email" class="form-control footer-input margin-b-20"
placeholder="Email" required>
<input type="Вопрос" class="form-control footer-input margin-b-20"
placeholder="Телефон" required>
<textarea class="form-control footer-input margin-b-30" rows="6"
placeholder="Сообщение" required></textarea>
<button type="submit" class="btn-theme btn-theme-sm btn-base-bg text-
uppercase">Отправить</button>
</div>
</div>

</div>
</div>



<div class="content container">
<div class="row">
<div class="col-xs-6">
<img class="footer-logo" src="img/logo.png" alt="Asentus Logo">
</div>
>
</div>

</div>

</footer>



<a href="javascript:void(0);" class="js-back-to-top back-to-top">Top</a>


<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/jquery-migrate.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
38


<script src="vendor/jquery.easing.js" type="text/javascript"></script>
<script src="vendor/jquery.back-to-top.js" type="text/javascript"></script>
<script src="vendor/jquery.smooth-scroll.js" type="text/javascript"></script>
<script src="vendor/jquery.wow.min.js" type="text/javascript"></script>
<script src="vendor/swiper/js/swiper.jquery.min.js" type="text/javascript"></script>
<script src="vendor/masonry/jquery.masonry.pkgd.min.js"
type="text/javascript"></script>
<script src="vendor/masonry/imagesloaded.pkgd.min.js"


<script src="js/layout.min.js" type="text/javascript"></script>
<script src="js/components/wow.min.js" type="text/javascript"></script>
<script src="js/components/swiper.min.js" type="text/javascript"></script>
<script src="js/components/masonry.min.js" type="text/javascript"></script>
<main rel="main">
<section class="dtwo-tab dtwo-container">
<div ng-repeat="tab in $ctrl.tabs" ng-hide="{{tab.tab == 0}}" class="dtwo-
tab__item">
<a href="{{tab.link.path}}" ng-click="$ctrl.setTab(tab.tab, $event)">

<img ng-src="{{tab.image}}" height="400" width="300" alt="{{tab.title}}"
title="{{tab.title}}">
</a>
</div>
</section>
</main>
</body>

</html>
39
Додаток Б
Лістинг 2 – Код файлу usluga.html

<!DOCTYPE html>


<head>
<title>Metronic "Asentus" Frontend Freebie</title>

type="text/css" />




$('#usluga').click(function() {
$.get('proba.php', function(data) {
$('#proba').html(data);
});
});
});
</script>
</head>



40
<body>



</button>


<div class="logo">
<img class="logo-img logo-img-main" src="img/logo.png"
alt="Asentus Logo">
<img class="logo-img logo-img-active" src="img/logo.png"
alt="Asentus Logo">
</a>
</div>

</div>
href="index.html">Главная</a></li>
href="pricing.html">Авто</a></li>
href="about.html">Специальные предложения</a></li>
href="products.html">Предложения и услуги</a></li>
href="faq.html">Контакты</a></li>
</ul>
</div>
</div>
</div>
</nav>

</header>

41


<div class="parallax-window" data-parallax="scroll" data-image-
src="img/1920x1080/01.jpg">
<div class="parallax-content container">
<h1 class="carousel-title">Предложения и услуги</h1>
</div>
</div>


<div id="contact" class="text-center">

<div class="overlay">
<div class="section-title center">
<h2>Новое авто</h2>
</div>
<div class="col-md-8 col-md-offset-2">
<form method="POST" action="proba.php">
<div class="row">
<div class="col-md-6">
Название
<input name="nazva" type="text" class="form-control" required="">
</div>
Марка
<select name="marka" required="" class="form-control">
<option value="1">Audi</option>
<option value="3">BMW</option>
<option value="5">Ford</option>
<option value="7">Hyundai</option>
<option value="10">Mercedes-Benz</option>
<option value="11">Mitsubishi</option>
</select>
</div>
Страна
<select name="strana" required="" class="form-control">
<option value="2">Германия</option>
<option value="8">США</option>
<option value="10">Япония</option>
<option value="11">Корея</option>
</select>
</div>
Статус
<select name="statys" required="" class="form-control">
<option value="1">Свободная продажа</option>
<option value="2">Заказан</option>
<option value="3">Продан</option>
42
</select>
</div>
<div class="col-md-12 text-center">

Модификация
</div>
Длина
<input name="dlina" type="text" class="form-control" required="">
</div>
Ширина
<input name="shurina" type="text" class="form-control"
required="">
</div>
Высота
<input name="vusota" type="text" class="form-control"
required="">
</div>
Количество мест
<input name="mesta" type="text" class="form-control" required="">
</div>
Вес
<input name="vec" type="text" class="form-control" required="">
</div>
Максимальная скорость
<input name="skorost" type="text" class="form-control"
required="">
</div>
Тип двигателя
<select name="dvigatel" required="" class="form-control">
<option value="1">Бензиновый</option>
<option value="2">Дизельный</option>
<option value="3">Турбодизель</option>
<option value="4">Електрический</option>
</select>
</div>
Робочий обьем двигателя
<input name="objem" type="text" class="form-control" required="">
</div>
Выпуск
<input name="vupysk" type="text" class="form-control"
required="">
</div>
43
<div class="col-md-6" class="form-control">

Дата поступления
<input name="DOB" type="date" class="form-control">
</div>
Цвет
<input name="svet" type="text" class="form-control" required="">
</div>
Цена
<input name="price" type="text" class="form-control" required="">
</div>
<button type="submit" name="new_avto" class="btn btn-
default">Добавить авто</button>
</form>
</div>
</div>
</div>
</div>




<div class="swiper-slider swiper-clients">

<div class="swiper-wrapper">
<img class="swiper-clients-img" src="img/clients/bmw.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/ford.png" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/ford.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/audi.jpg" alt="Clients
Logo">
</div>
<img class="swiper-clients-img" src="img/clients/88_685big.jpg"
alt="Clients Logo">
</div>
</div>
44


</div>

</div>
</div>





<div class="row">

</ul>

</div>

</ul>

</div>
45

</div>
</div>

</div>
</div>



<div class="row">
</div>
<div class="col-xs-6 text-right">
<p class="margin-b-0"><a class="color-base fweight-700"
href="http://keenthemes.com/preview/asentus/">Asentus</a> Theme Powered by: <a
class="color-base fweight-700"
href="http://www.keenthemes.com/">KeenThemes.com</a></p>
</div>
</div>

</div>
</footer>


<script src="vendor/jquery.parallax.min.js" type="text/javascript"></script>
</body>

</html>
46
Додаток В
Лістинг 3 – Код файлу zakaz.html

<!DOCTYPE html>


<head>
<title>Metronic "Asentus" Frontend Freebie</title>

type="text/css" />




<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
$('#zakaz').click(function() {
$.get('get_user.php', function(data) {
});
});
});
</script>
</head>

47
<body>



</button>


<div class="logo">
<img class="logo-img logo-img-main" src="img/logo-large.png"
<img class="logo-img logo-img-active" src="img/logo-large.png"
</a>
</div>

</div>
href="index.html">Вернуться на главную страницу</a></li>
</ul>
</div>
</div>
</div>
</nav>

</header>

<div id="contact" class="text-center">
<div class="overlay">
<div class="section-title center">
<h2>Заказать авто</h2>
</div>
<div class="col-md-8 col-md-offset-2">
48
<form method="POST" action="get_user.php">

<div class="row">
Марка
<select name="marka" required="" class="form-control">
<option value="1">Audi</option>
<option value="3">BMW</option>
<option value="5">Ford</option>
<option value="7">Hyundai</option>
<option value="10">Mercedes-Benz</option>
<option value="11">Mitsubishi</option>
</select>
</div>
</div>
Названиие
<input name="nazva" type="text" class="form-control"
required="">
</div>
<div class="col-md-12 text-center">
Контактные данные
</div>
Фамилия
<input name="surname" type="text" class="form-control"
required="">
</div>
Имя
<input name="name" type="text" class="form-control"
required="">
</div>
Отчество
<input name="otchestvo" type="text" class="form-control"
required="">
</div>
Телефон
<input name="phone" type="text" class="form-control"
required="">
</div>
Ел. почта
<input name="mail" type="text" class="form-control"
required="">
</div>
</div>
<div class="row">
49
</div>
<a href="get_user.php" class="btn-theme btn-theme-sm btn-default-bg text-
uppercase">Заказать</a>
</form>
<div id="test" class="test">
<input type ="button" value="Заказ" id="zakaz">
</div>
<div id="user_data">
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="row">

</ul>

</div>

</ul>

</div>
50

</div>
</div>

</div>
</div>



<div class="row">
</div>
>
</div>

</div>
</footer>



<script src="vendor/masonry/jquery.masonry.pkgd.min.js"
<script src="vendor/masonry/imagesloaded.pkgd.min.js"

51

<script src="js/components/masonry.min.js" type="text/javascript"></script>
<main rel="main">
<section class="dtwo-tab dtwo-container">
<div ng-repeat="tab in $ctrl.tabs" ng-hide="{{tab.tab == 0}}" class="dtwo-
tab__item">
<a href="{{tab.link.path}}" ng-click="$ctrl.setTab(tab.tab, $event)">

<img ng-src="{{tab.image}}" height="400" width="300" alt="{{tab.title}}"
title="{{tab.title}}">
</a>
</div>
</section>
</main>
</body>

</html>
52
Додаток Г
Лістинг 4 – Код файлу get_user.php
<?php
require_once 'db.php';
$link = mysqli_connect($host, $user, $password, $database)
or die("Ошибка " . mysqli_error($link));
$query ="select Заказ_Идн, Авто.Авто_Идн, Марка.Марка_Идн, Человек.Человек_Идн,
Контактная_информация.Конт_Инфо_Идн from Заказ join Авто on
(Заказ.Авто_Идн=Авто.Авто_Идн)join Марка on (Заказ.Марка_Идн=Марка.Марка_Идн)
join Человек on (Человек.Человек_Идн=Заказ.Человек_Идн) join Контактная_информация
on (Заказ.Конт_Инфо_Идн=Контакнтная_информация.Конт_Инфо_Идн) ";
$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
if($result)
{
$rows = mysqli_num_rows($result); // количество полученных строк
echo "<table><tr>
<th>Название        </th>
<th>Марка        </th>
<th>Фамилия         </th><th>Имя
             <
/th><th>Отчество       </th>
<th>Телефон        </th>
<th>Ел.почта        </th>";
for ($i = 0 ; $i < $rows ; ++$i)
{ $row = mysqli_fetch_row($result);
echo "<tr>";
for ($j = 0 ; $j < 10 ; ++$j) echo "<td>$row[$j]</td>";
echo "</tr>"; }
echo "</table>";
// очищаем результат
mysqli_free_result($result);
}
mysqli_close($link);
?>
53
Додаток Д
Лістинг 5 – Код файлу get_user1.php
<?php
require_once 'db.php';
$link = mysqli_connect($hostname, $username, $database)
or die("Ошибка " . mysqli_error($link));
$query ="select Авто_Идн, Название_авто, Марка.Марка_Идн, Страна.Страна_Идн,
Статус.Статус_Идн, Модификация.Модификация.Идн, Поставщик.Поставщик_Идн,
Дата_Поступления, Дата_Продажи, Изначальная_Цена from Авто join Марка on
(Авто.Марка_Идн=Марка.Марка_Идн) join Страна on
(Авто.Страна_Идн=Страна.Страна_Идн) join Статус on
(Авто.Статус_Идн=Статус.Статус_Идн) join Модификация on
(Авто.Модификация_Идн=Модификация.Модификация_Идн) join Поставщик on
(Авто.Поставщик_Идн=Поставщик.Поставщик_Идн)";
$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
if($result)
{
$rows = mysqli_num_rows($result); // количество полученных строк
echo "<table><tr>
<th>Авто        </th>
<th>Название        </th>
<th>Марка         </th>
<th>Страна         </th><th>Статус
             <
/th><th>Длина       </th>
<th>Ширина       </th>
<th>Высота       </th>
<th>Количество мест       </th>
<th>Вес       </th>
<th>Максимальная скорость       </th>
<th>Тип двигателя       </th>
<th>Робочий обьем двигателя       </th>
<th>Выпуск       </th>
<th>Поставщик        </th>
54
<th>Цвет        </th>
<th>Дата поступления        </th>
<th>Дата продажи        </th>
<th>Изначальная
цена        </th></tr>";
for ($i = 0 ; $i < $rows ; ++$i)
{
$row = mysqli_fetch_row($result);
echo "<tr>";
for ($j = 0 ; $j < 10 ; ++$j) echo "<td>$row[$j]</td>";
echo "</tr>";
}
echo "</table>";
// очищаем результат
mysqli_free_result($result);
}
if (!$mysqli->query("SET @msg = ''") || !$mysqli->query("CALL p(@msg)")) {
echo "Не удалось вызвать хранимую процедуру: (" . $mysqli->errno . ") " . $mysqli->error;
}
mysqli_close($link);
?>
55
Додаток Е
Лістинг 6 – Код файлу layout.js

var Layout = function () {
'use strict';
// handle on page scroll

var handleHeaderOnScroll = function() {
if ($(window).scrollTop() > 60) {
$('body').addClass('page-on-scroll');
} else {
$('body').removeClass('page-on-scroll');
}
}
// handle carousel
var handleCarousel = function() {
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){

$wHeight = $(window).height();
$item.height($wHeight);
});
}
// handle group element heights

var handleHeight = function() {
$('[data-auto-height]').each(function() {
var parent = $(this);
var items = $('[data-height]', parent);
var height = 0;
var mode = parent.attr('data-mode');
var offset = parseInt(parent.attr('data-offset') ? parent.attr('data-offset') : 0);
56
items.each(function() {
if ($(this).attr('data-height') == "height") {
$(this).css('height', '');
} else {
$(this).css('min-height', '');
}
var height_ = (mode == 'base-height' ? $(this).outerHeight() :

$(this).outerHeight(true));
if (height_ > height) {
height = height_;
}
});
height = height + offset;
items.each(function() {
if ($(this).attr('data-height') == "height") {
$(this).css('height', height);
} else {
$(this).css('min-height', height);
}
});
if(parent.attr('data-related')) {
$(parent.attr('data-related')).css('height', parent.height());
}
});
}
return {
init: function () {
handleHeaderOnScroll(); // initial setup for fixed header
handleCarousel(); // initial setup for carousel
handleHeight(); // initial setup for group element height
// handle minimized header on page scroll

$(window).scroll(function() {
handleHeaderOnScroll();
});
}
};
}();
Layout.init();
});
57

ÅÉêèïÇä éêèÄìÇììƒ èôÉæÄéÄ ÉÄüÄÆê

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ÅÉêèïÇä éêèÄìÇììƒ èôÉæÄéÄ ÉÄüÄÆê

Uploaded by

Copyright:

Available Formats

ЗМІСТ

1 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ДЛЯ УПРАВЛІННЯ

1.1 Модель інформаційної системи .................................................................. 5

1.2 Моделювання інтерфейсу веб-сторінок ................................................... 12

1.3 Опис процесу створення веб-сайту .......................................................... 15

2 ПРОГРАМУВАННЯ ФУНКЦІОНАЛЬНОЇ ЧАСТИНИ ІНФОРМАЦІЙНОЇ

2.1 Технологія створення динамічних веб-сторінок ..................................... 18

2.2 Опис серверних елементів управління ..................................................... 22

3 ДОСТУП ДО БАЗИ ДАНИХ .......................................................................... 23

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................... 27

Інтернет – найбільший ресурс для обміну інформації та оптимізації

програмними модулями. Тобто, інформаційна система – це сукупність

1 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ДЛЯ УПРАВЛІННЯ

1.1 Модель інформаційної системи

Представимо модель інформаційної системи для управління

Нотація IDEF0 використовується для опису бізнес-процесів на

Рисунок 1.1 – Нульовий рівень декомпозиції

Після подальшого розбиття діаграми отримуємо наступну діаграму

Рисунок 1.3 – Перший рівень декомпозиції

як і раніше широко і ефективно використовуються як у бізнес-аналізі, так і в

Рисунок 1.4 – DFD-діаграма

 cховища даних (data Store). Відображають дані, до яких здійснюється

Рисунок 1.5 – ER-діаграма

Слід зазначити, що жорстке дотримання всіх нюансів даних діаграм під

1.2 Моделювання інтерфейсу веб-сторінок

Наступним етапом розробки веб-сайту є створення інтерфейсу сторінки.

 статичні сайти, що містять статичні HTML або XHTML сторінки.

Інформація розподіляється наступним чином:

Рисунок 1.4 – Ескіз головної сторінки інформаційної системи

1.3 Опис процесу створення веб-сайту

Розглянемо основні етапи створення сайту та подальшого його

Адаптивна верстка змінює дизайн сторінки в залежності від поведінки

Рисунок 1.6 – Вид сайту в вікні браузера

2 ПРОГРАМУВАННЯ ФУНКЦІОНАЛЬНОЇ ЧАСТИНИ ІНФОРМАЦІЙНОЇ

2.1 Технологія створення динамічних веб-сторінок

Динамічний сайт – сайт, що складається з динамічних сторінок –

сайтах реалізований поділ змісту й оформлення веб-сторінок - це дозволяє

опису програмних компонентів, в той час як імперативне програмування

Основне завдання jQuery — це надавати розробнику легкий та гнучкий

2.2 Опис серверних елементів управління

Браузер отримує дані з веб-серверу за допомогою скриптів php. Ми

Лістинг 2.1 – Файл db.php

3 ДОСТУП ДО БАЗИ ДАНИХ

Існує безкоштовний хостинг https://www.zzz.com.ua/ru на якому ми

Рисунок 3.1 – Сторінка інтерфейсу phpMyAdmin

Рисунок 3.2 – Головна сторінка нашого хостингу.

Рисунок 3.2 – Сторінка інтерфейсу сервера FTP

В результаті чого відкриється головна сторінка нашого додатку:

Рисунок 3.3 – Результат відкриття додатку з консолі

Відповідно до завдання курсової роботи, було cтворено

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Справочник CSS. URL: https://webref.ru/css/ .

Лістинг 1 – HTML-код сторінки index.html

<html lang="en" class="no-js">

<div class="content-lg container">