Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Архитектура Веба Веб-разработка на PHP

Современные сайты разрабатываются на множестве языков, используя совершенно разные технологии, но принципы их устройства одинаковые. То, почему сайты внутри устроены похожим образом, определяется архитектурой веба. В его основе лежит протокол HTTP, с которым вы уже знакомы по одноимённому курсу.

Современный веб несколько сложнее благодаря WebSocket, что существенно влияет на принципы разработки сайтов, которые активно его используют. Однако веб-сокеты не замена обычному способу взаимодействия, а дополнение, необходимое для некоторых ситуаций. К таким задачам относится любое взаимодействие в реальном времени (real-time), например, чаты или многопользовательские игры

http session

Принцип взаимодействия с любым сайтом сводится к следующим шагам (сам процесс сложнее, но нас интересует только взаимодействие с приложением):

  1. Пользователь запрашивает страницу сайта
  2. Браузер выполняет HTTP-запрос к веб-серверу
  3. Веб-сервер возвращает содержимое страницы в HTTP-ответе
  4. Браузер отрисовывает страницу сайта
  5. Пользователь кликает по ссылке на сайте и весь процесс повторяется снова.

Каждый такой цикл включает в себя HTTP-сессию: HTTP-запрос и HTTP-ответ. Проще всего увидеть HTTP-сессию, используя утилиту curl:

$ curl -v --head http://code-basics.ru
* Rebuilt URL to: http://code-basics.ru/
*   Trying 100.102.175.148...
* TCP_NODELAY set
* Connected to code-basics.ru (100.102.175.148) port 80 (#0)
# Ниже приведён запрос
> HEAD / HTTP/1.1
> Host: code-basics.ru
> User-Agent: curl/7.54.0
> Accept: */*
>
# А это ответ
< HTTP/1.1 200 OK
< Date: Wed, 04 Jul 2018 08:38:22 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 7902
< Connection: keep-alive
< Server: nginx/1.15.1

<
* Connection #0 to host code-basics.ru left intact

Как видно, принцип взаимодействия не зависит от того, на чём написан сайт. С точки зрения сайта, всегда есть запрос, который нужно обработать и вернуть ответ в виде, например, HTML. То, каким будет HTML для конкретного запроса, определяется самим запросом, то есть запрошенной страницей и различными параметрами HTTP (к примеру, заголовки). В конечном итоге, код сайта представляет из себя набор обработчиков разных страниц, которые принимают входящие запросы, формируют ответ и возвращают его. Ниже вы увидите примеры на разных языках. Даже не зная синтаксиса достаточно легко уловить общую структуру всех примеров кода: функция-обработчик, привязанная к конкретной странице.

PHP

<?php

use Slim\Factory\AppFactory;
$app = AppFactory::create();

$app->get('/', function ($request, $response) {
    return $response->write('Welcome to Slim!');
});

$app->get('/about', function ($request, $response) {
    return $response->write('About My Site');
});

$app->run();

Ruby

require 'sinatra'
get '/frank-says' do
  'Put this in your pipe & smoke it!'
end

Python

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello World!"

Java

import static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

JavaScript

import Express from 'express';
const app = new Express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

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


Самостоятельная работа

  1. Выполните запрос curl --head https://hexlet.io. Изучите отправляемые и возвращаемые заголовки
  2. Откройте в браузере консоль разработчика, перейдите в ней на вкладку Network (Сеть) и загрузите https://ru.hexlet.io в этой вкладке. Изучите, какие запросы делает сайт (и с какими заголовками), а также то, что приходит в ответ.

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
29 сентября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»