1.1. Основы веб-технологий

 

Работа веб приложений основана на модели клиент-сервер и используют концепцию запрос-ответ. В качестве клиента обычно выступает браузер пользователя, но с развитием API клиентом может быть любая программа, которая заточена на работу определенного приложения. Принцип работы схемы клиент-сервер довольно прост. Клиент посылает запрос серверу, сервер обрабатывает запрос и отправляет ответ. Вот и все. Передача данных осуществляется посредством протокола передачи гипертекста HTTP (Hyper Text Transfer Protocol) и HTTPS (Hyper Text Transfer Secure).

По умолчанию для HTTP и HTTPS зарезервированы порты 80 и 443 соответственно, однако в некоторых случаях задействуют и другие порты, например 8080, 8443 и так далее.

Современные веб приложения достаточно сложны, так как позволяют динамически генерировать страницы, аутентифицировать пользователей и взаимодействовать с базой данных:

Упрощенная схема архитектуры веб серверов

Для работы приложений используются различные технологии, но прежде внесем ясность в терминологию и объясним как эти технологии взаимодействуют друг с другом.

 

Серверные технологии

Веб-сервер — это программное обеспечение, которое обеспечивает доступ к веб-ресурсам через Интернет. Веб-сервер отвечает за обработку запросов от клиентов, например браузеров, и отправку ответов в форме веб-страниц.

Когда пользователь вводит адрес сайта в браузере, браузер отправляет запрос на сервер с помощью протокола HTTP. Веб-сервер получает запрос и ищет соответствующий файл или страницу на сервере. Если файл или страница найдена, сервер отправляет ее в браузер в формате HTML, который браузер отображает на экране.

В качестве веб сервера используют следующие ПО:

    • Apache
    • Internet Information Services (IIS)
    • Nginx

 

Веб приложение – это программа, которая спроектирована для выполнения определенных действий. Все мы привыкли к программам, которые устанавливаются на компьютерах, и каждая из которых выполняет специфическую функцию, например редактирование фотографий, текста, проигрывание медиа файлов и так далее. Веб приложения ничем не отличаются от десктопных приложений. Они могут выполнять точно такие же задачи, но только удаленно и посредством HTTP протокола.

Для написания веб приложений используется множество языков программирования, например PHP, Python, Java и так далее.

Исходя из вышесказанного следует, что веб сервер используется как интерфейс взаимодействия между пользователем/клиентом и веб приложением.

 

База данных — это организованная коллекция данных, которая позволяет эффективно хранить, обрабатывать и извлекать информацию. Базы данных используются во многих приложениях, включая управление складами, банковское дело, системы онлайн-торговли, медицинские системы и т. д.

Базы данных состоят из таблиц, которые содержат записи с информацией, так называемые "строки". Каждая строка содержит данные, разделенные на столбцы, которые называются "полями". Поля могут содержать различные типы данных, такие как числа, текст, даты и т. д.

С помощью языка запросов, такого как SQL, можно осуществлять поиск, добавление, изменение и удаление данных в базе данных.

Базы данных играют важную роль в современном мире, обеспечивая хранение и обработку огромных объемов информации, кроме того, они также хранят имена пользователей и их пароли, обеспечивая аутентификацию и авторизацию пользователей.

Для управления базами данных используют следующие популярные СУБД (Система Управления Базами Данных):

    • MySQL
    • MS SQL (Microsoft)
    • PostgreSQL
    • Oracle Database

Если предусматривается использование БД, то приложение настраивается на работу с ней. Сама БД может быть установлена на той же машине, что и веб сервер либо на отдельной машине.

 

Клиентские технологии

Мы рассмотрели основные веб технологии, которые задействованы на стороне сервера. Теперь рассмотрим какие технологии используется на стороне клиента, то есть в браузере.

HTML (Hypertext Markup Language) – это язык разметки, который используется для создания веб-страниц. Он позволяет определить структуру и содержимое документа с помощью тегов и атрибутов.

Теги – это ключевые слова, которые используются для описания элементов веб-страницы, таких как заголовки, параграфы, изображения и ссылки. Каждый тег начинается с символа "<" и заканчивается символом ">". Атрибуты могут быть добавлены к тегам для определения свойств элементов, таких как цвет, размер и расположение.

Вот как выглядит пример кода на HTML:

Скриншот фрагмента HTML кода

 

CSS (Cascading Style Sheets) – это язык таблиц стилей, который используется для оформления веб-страниц, созданных на языке HTML. Он позволяет определить внешний вид элементов веб-страницы, таких как цвет, шрифт, размер и расположение.

С помощью CSS можно создавать различные стили для разных элементов на странице, а также определять, как элементы должны выглядеть в разных состояниях, например, при наведении курсора мыши на них или при нажатии на них.

Вот как выглядит пример кода на CSS:

Скриншот фрагмента CSS кода

 

JavaScript – это язык программирования, который используется для создания интерактивных и динамических веб-сайтов. Он позволяет добавлять на страницу различные эффекты, анимации, валидацию форм, обработку событий и многое другое.

JavaScript используется вместе с HTML и CSS для создания полнофункциональных веб-сайтов. Он работает на стороне клиента (в браузере) и может взаимодействовать с пользователем, а также обращаться к серверу для получения или отправки данных.

JavaScript является одним из самых популярных языков программирования в мире и используется во многих проектах, начиная от небольших скриптов до сложных веб-приложений. Кроме того, сейчас создается немало так называемых одностраничных веб сайтов, у которых контент страниц динамически генерируется уже не на стороне сервера, а на стороне клиента, то есть в браузере. Для этого применяются специальные фреймворки на базе JavaScript. Наиболее популярные из них — это Angular, Vue, React.