Веб-орієнтовані системи

В структурі курсу – 2 паралельні лінії та спільна частина

Перша лінія

• Контейнеризація
• Оркестрація

Друга лінія

• Вступ до ОС.
• Операційна система Linux та її можливості
• Вступ до БД
• Використання GIT
• Використання інструментів збірки

Спільна частина

• Автоматизація збірки та розгортання систем
• Вступ до AWS та EC2

Що таке інформаційна система?

Інформаційна система (англ. іnfоrmаtіоn sуstеm) — сукупність організаційних і технічних засобів для збереження та обробки інформації з метою забезпечення інформаційних потреб користувачів.�

Приклади інформаційних систем (заповнити)

• GitHub
• Бібліотека
• LMS
• Azure DevOps
• Jira
• Privat24
• Розклад руху автобусів
• Освітній портал
• ​

Класи інформаційних систем за сферою застосування

• Наукові ІС
• ІС автоматизованого проектування
• ІС організаційного керування
• ІС керування технологічними процесами

Що таке WWW?

WWW

World Wide Web (WWW, Всесвітнє павутиння) – електронна розподілена система, що надає доступ до зв'язаних між собою документів, розміщених на різних комп'ютерах, підключених до Інтернету.

WWW працює за клієнт-серверною моделлю

Browser

Web server

HTTP-REQUEST

HTTP-RESPONSE

Що таке Веб-орієнтована інформаційна система?

Веб-орієнтована інформаційна система

• Працює через Інтернет
• Як правило, декілька веб-додатків
• Великі системи можуть поєднувати веб-сайт, набір сервісів та веб-застосунки, а також використовувати зовнішні API

​

Приклад інформаційної системи ВНЗ

Типові особливості ВОІС в системі WWW

• доступ через мережу Інтернет
• клієнт-серверна архітектура;
• наявність URL для документів та ресурсів;
• використання протоколу HTTP для передачі ресурсів та здійснення циклу запит-відповідь

Форми організації веб-орієнтованих систем

• Веб-сайти - сукупність веб-сторінок, доступних у мережі Інтернет, які об'єднані як за змістом, так і за навігацією під єдиним доменним ім'ям.
• Веб-сервіси – програмні засоби, що забезпечують обмін та обробку інформацією між сайтами, додатками та базами даних
• Прикладні веб-застосунки – програми, інструменти, доступні в Вебі, орієнтовані на безпосередню взаємодію з користувачем для виконання певних завдань

Сучасні тренди розвитку ВОІСТ

• обробка великих масивів даних
• задачі машинного навчання
• інтеграція з системами хмарних технологій
• використання протоколу WebSocket
• побудова сервісів RESTful API

Технології розробки ВОІСТ

• Операційні системи (Linux, Windows, MacOS)
• Веб-сервери (Apache, nginx, IIS)
• Бази даних та СКБД (MySQL, MongoDB, MsSQL Server)
• Мови клієнтської розробки (HTML, CSS, JavaScript)
• CSS-фреймворки
• Клієнтські фреймворки
• Мови серверної розробки
• Фреймворки серверної розробки
• CMS (Content Management System, система управління контентом)
• Інструменти управління контейнерами

Сучасні популярні веб-сервери

Частка веб-серверів у використанні серед активних сайтів за даними Netcraft:

https://news.netcraft.com/archives/2017/02/27/february-2017-web-server-survey.html

Веб-сайти

Веб-сайти - сукупність веб-сторінок, доступних у мережі Інтернет, які об'єднані як за змістом, так і за навігацією під єдиним доменним ім'ям. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Веб-сайти можуть бути статичними та динамічними

Статичні та динамічні веб-сайти

Статичні сайти – це набір HTML-файлів, розміщених на веб-сервері

Динамічні сайти – сайти, сторінки яких формуються по запиту користувача

​

Схема роботи сервера із статичним веб-сайтом

Client (Browser)

Server

HTTP-REQUEST

index.html

HTTP-RESPONSE

Схема роботи сервера із динамічним веб-сайтом

Client (Browser)

Server

HTTP-REQUEST

index.php

HTTP-RESPONSE

index.php:

Hello, World!

Hello, World!

Приклад динамічного сайту

https://en.wikipedia.org/wiki/PHP

https://en.wikipedia.org/wiki/Elephant

Огляд сучасних мов та технологій клієнтської та серверної веб-розробки

Сучасні мови та платформи веб-розробки

На стороні клієнта (веб-інтерфейси, клієнтський функціонал):

• HTML
• CSS
• JavaScript

На стороні сервера (серверний функціонал):

• PHP + MySQL
• NodeJS + MongoDB
• ASP.NET + MsSQL Server
• Java
• Python
• Ruby
• Perl

​

Мови клієнтської розробки (дизайн веб-сайтів)

HTML

• HTML – HyperText Markup Language - мова гіпертекстової розмітки сторінок;
• Гіпертекст – текст, що пов'язує дану сторінку із іншими сторінками, документами, ресурсами;
• HTML описується HTML-тегами;
• Коже HTML-тег відповідає окремому елементу

​

HTML

HTML в браузері

XML

Історія HTML

• 1990-1991. Розроблена перша версія HTML як похідна мова від SGML (мова для розмітки тексту для читання машинами, що почала свою історію ще з 1960-х)
• В той же час було написано перший браузер та необхідне серверне ПЗ

Перша версія HTML – орієнтована на розмітку тексту�https://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html�

Історія HTML

• 1993 – HTML – до тексту додано атрибути курсив, жирний текст, тег для зображення;
• 1995 – HTML 2.0 – підтримка форм;
• Січень, 1997 – HTML 3.2 – таблиці, обтікання текстом зображень, інтеграція аплетів;
• Грудень, 1997 – HTML 4.0 – CSS, скрипти, фрейми. Розділення на Strict, Frameset та Transitional.
• Грудень, 1999 – HTML 4.1
• Квітень, 2008 – HTML 5 – словник об'єднав версії HTML 4.01 та XHTML 1.0. Додано ряд семантичних елементів, елементів та атрибутів форм.

W3C

• World Wide Consortium – Консорціум Всесвітньої Павутини – головна міжнародна організація, що розробляє і впроваджує технологічні стандарти для Вебу;
• Заснована в 1994 році;
• Очолює організацію Tim Berners Lee;
• Офіційний сайт:
• https://www.w3.org

CSS

Cascade Style Sheets – Набір правил для стильового оформлення елементів на веб-сторінці

​

• Розділення структури та оформлення
• Різне оформлення для різних пристроїв
• Великий набір властивостей стилів
• Прискорення завантаження сайту
• Єдине стильове оформлення великої кількості документів
• Централізоване керування

​

JavaScript

JavaScript – інтерпретована мова для веб-програмування

• Робота зі структурою веб-сторінки:
• Створення, додавання, зміна, видалення html-елементів
• Додавання, зміна, видалення CSS-стилів
• Реагування на події
• Виконання асинхронних запитів до сервера
• Робота з елементами форм
• Робота з графікою

​

Мови серверної розробки

PHP (PHP: Hypertext Preprocessor)

• Мова загального призначення, що застосовується для створення динамічних веб-сайтів
• Скриптова мова програмування з відкритим кодом, що використовується для веб-розробки і може бути вбудована в HTML

Переваги PHP

• 80% всіх ресурсів Вебу (дані Google, Wappalyzer)
• Встановлений практично на всіх веб-серверах
• Сучасна версія (PHP 7) є лідером серед стандартів сучасної Веб-розробки
• Простота в вивченні і використанні
• Вдосконалення синтаксису, стандартів оформлення коду
• Використання рушія JustInTime для кешування скомпільованих виконавчих файлів
• STACK: LAMP (Linux, Apache, MySQL(MariaDB), PHP)

CMS на PHP (движки, рушії)

Загального призначення: Wordpress, Drupal, Joomla, Typo3, DataLife Engine, 1C-Bitrix

• Форуми: phpBB, vBulletin
• Веб-магазини: OpenCart, Magento, PrestaShop, Umi.CMS
• Соціальні мережі: InstantCMS, Sngine, LiveStreet

PHP-фреймворки

• Laravel
• CodeIgniter
• Symfony
• Zend
• CakePHP
• Yii

Node.js

Серверна технологія, в основі якої лежить подійно-орієнтована та асинхронна модель виконання запитів

• Розробник: Rayan Dahl
• Дата виходу: 27 травня 2009 року
• Компанія: Joyent
• 80% коду написано на C++ (ядро)
• 20% JavaScript API

Можливості Node.js

• Робота в якості сервера
• Розробка віконних додатків (NV.js, AppJS, Electron)
• Програмування мікроконтролерів (tessel, espruino)

​

Особливості Node.js

• Node.js використовує движок V8 (Chrome V8) в якості середовища виконання
• Асинхронний код
• Подійно-орієнтоване програмування
• Модулі як спосіб організації коду
• Використання без браузера
• Робота з файловою системою
• Робота з базами даних
• Робота з мережею
• Бібліотеки
• MERN (Mongo, Express, React, NodeJS), MEVN, MEAN

Модулі Node.js

• HTTP-server, Express framework
• DB: MySQL, PostgreSQL, MongoDB, Mongoose
• Шаблонізатори: Handlebars, ECT
• Обробка запитів: звичайні, а також Socket, Ajax
• Lodash (Underscore): функції для роботи зі масивами, колекціями, функціями, об’єктами

Переваги Веб-орієнтованих систем

• Задовлення потреб користувачів;
• Доступність з мережі Веб;
• Зручність (швидкість, автоматизація);
• Кросплатформеність;
• Масштабованість систем;
• Надійність;
• Автомазитоване оновлення;

Недоліки веб-орієнтовних систем

• залежність від доступу до Інтернету;
• складність: велика кількість задач, компонентів, протоколів, даних різного типу;
• залежність від сервера;
• безпекові питання: захист інформації, шифрування;
• ​

Література

• Dino Esposito. Modern Web Development: Understanding domains, technologies, and user experience
• https://www.hostinger.com.ua/rukovodstva/8-luchshih-php-framework-dla-web-razrabotchikov/
• https://trends.builtwith.com/framework - Розподіл використання фреймворків
• Статистика використання веб-серверів
• Перша в світі веб-сторінка, написана Tim Berners Lee в 1992

Домашнє завдання