Создание сайтов. Теория и практика.
1. Общие положения.
1.1. Устройство сайта (современный взгляд).
1.1.1. Физическое расположение сайта. Сайт физически размещается на компьютерах, являющихся серверами в интернет. На сервере располагается корневая папка, в которой располагается специальный файл index. Этот файл является закодированным текстом, который может быть обработан программным обеспечением сервера по умолчанию. Для обработки других файлов в папках на сервере необходимо добавить в строку запроса путь к файлу. Доступом к файлам на сервере можно управлять через конфигурационные файлы, такие, например, как .htaccess.
1.1.2. Протокол обращения к серверу. Серверное программное обеспечение построено таким образом, что принимает и обрабатывает запросы, поступающие на его сетевые порты. Протокол описывает, как устроен запрос, и сервер разбирая запрос на компоненты способен их обработать и передать в интерпретаторы или компиляторы. Эти программы в итоге создают ответ сервера, который по тому или другому протоколу быть отправлен туда откуда пришел запрос, или туда куда этот ответ должен был перенаправлен. Реализация обращения к серверу называется API (application programming interface), который позволяет отдать backend ответ сервера в виде, который может быть обработан на стороне frontend.
1.1.3. Программы формирующие запросы к серверам в интернете. Это любые программы, которые умеют формировать запрос по протоколу, понятному серверу. Все что происходит на сервере для формирования ответа, изменения данных относится к backend.
1.1.4. Зарегистрированное размещение сайта. Каждый сайт должен быть зарегистрированным в специальной системе доменных имен, которые позволяют установить связь между физическим расположением сайта и этим именем. Это имя необходимо передать в программу, формирующую запросы к серверам. Обратившись к системе регистрации, программа получит физический адрес сервера сайта и отправит ему стандартный запрос. В результате устанавливается физический канал связи между программой на компьютере пользователя и сервером.
1.1.5. Рендеринг сайта на компьютере пользователя представляет собой отображение ответа сервера на устройствах компьютера, главным образом на экране. Пользователь может управлять процессом рендеринга или с помощью отправки на сервер новых запросов (например, для получения каких-то данных хранящихся на серверах в интернете), либо с помощью изменений в ранее поступившие ответы, либо создания таких изменений средствами программ на компьютере пользователя. Все что относится к рендерингу относится к frontend.
1.2. Структура ответа сервера на http запрос браузера.
1.2.1. Ответ состоит из заголовков и тела. Заголовки определяют правила обработки ответа. Тело представляет собой html текст, которое обрабатывается браузером и создает в памяти компьютера объект DOM (document object model).
1.2.2. Если в ответе присутствуют теги link и script, то элементы DOM получают css свойства и js переменные и функционал обработки событий на этих элементах.
1.2.3. После загрузки тела ответа в браузер и формирование DOM в памяти, браузер рендерит страницу, которая представляет интерфейс для взаимодействия пользователя с сайтом.
1.2.4. Аналогичным образом работают и другие программы, взаимодействующие с сервером, на котором находится сайт, например, мобильные приложения.
2. Представление сайта в модели grandjetstudio.
2.1. В модели сайт представляет собой класс Site. Создание экземпляра класса, инициализирует все свойства сайта из базы данных. Таким образом сайт обладает лишь теми свойствами, которые записаны в базу данных. Добавление в базу данных таблиц и записей добавляет свойства сайту.
2.2. Сайт состоит из независимых друг от друга страниц. На каждой странице может быть установлен блок навигаций, обеспечивающий переходы по странице и между страницами. Кроме того, могут быть установлены дополнительные ссылки на текстах меню, статей и изображений.
2.3. Контент страниц состоит из нескольких информационных частей:
2.3.1. Информация о типе, локализации и назначении сайта.
2.3.2. Информация общая для всех страниц.
2.3.3. Информация, относящаяся к отдельной странице.
2.3.4. Информация, относящаяся к отдельной бизнес задаче.
3. Классификация сайтов.
3.1.1. По типу. Тип сайта отражает его работу в браузере и бизнес –назначение. Например, MVC – интернет магазин, LAND – блог, SPA – квест, SPA – CRM и так далее.
3.1.2. По локализации. Поддержка языков: один, два, мультиязычый.
3.1.3. По назначению. Сайт персоны. Сайт компании. Корпоративный сайт. Сайт проекта. Сайт новостей. Сайт блогов. Сайт видео блогов. Сайт каталог. Сайт портал. Сайт презентация.
3.1.4. По количеству страниц. Одностраничный или многостраничный.
4. HTML структура страницы сайта.
4.1. Весь html-код страницы помещен в основной контейнер и разбит на секции.
4.2. На каждой странице могут находится секция с заданной структурой и в определенном порядка: шапка, навигация, галерея, контент и футер, которые могут быть отключены установкой параметров.
4.3. Также на страницу могут добавлены дополнительные секции, структура которых может быть настроена.
4.4. За отображение секций отвечает основной контейнер макета.
4.5. Каждая секция является набором модулей, каждый из которых реализует определенную бизнес задачу на сайте.
4.6. Секции определяют их css-класс, записанный в первую группу поля desc макета. Если класс и контент секции не пусты, то на страницу рендерится данная секция с контентом внутри.
4.7. Контент секции представляет собой последовательность модулей со своими свойствами.
4.8. Вид макета страницы в браузере определяется css свойствами элементов (тегов и их атрибутов).
4.9. Свойства css могут быть определены в самих элементах, в теги head страницы или в погружены из внешних файлов, расположенных на хостинге сайта или на других ресурсах сети интернет.
5. PHP структура модуля.
5.1. Модуль представляет собой функцию на PHP, которая принимает в себя определенный контент из таблиц базы данных и глобальную переменную с свойствами классов прописанных в остальных группах поля desc макета.
5.2. CSS свойства модулей определяются файлами окружения страницы и могут быть изменены в конструкторе страницы.
5.3. Результат функции модуля записывается в массив свойств секции. Массив рендерится в секцию. Секция на страницу сайта.
6. Управление с помощью javascript.
6.1. Браузеры предоставляют возможность управления результатом рендеринга и делать ререндерингу модулей и секций макета.
6.2. Управление осуществляется через специальный объект DOM создаваемый браузером в памяти. Встроенный язык javascript в браузер позволяет создавать скрипты управления этим объектом. Любые изменения, вносимые этим скриптом в объект DOM приводит к рендерингу страницы, т.е. перерисовывают экран.
6.3. Скрипты javascript подобно скриптам или таблицам css могут быть описаны в модулях верстки или загружены на страницу из внешних источников.
6.4. JS-скрипт также облает свойствами обрабатывать действиями пользователя и формировать запросы к серверу в соответствии с логикой, заложенной в этот скрипт.
6.5. В языке javascript также заложены возможности обработки различных событий, происходящих на страницы в браузере. Реагировать на действия совершаемые с помощью мыши, клавиатуры или изменениями свойств экрана устройства пользователя.
7. Управление с помощью API.
7.1. Для взаимодействия backend на сервере и frontend в браузере на сайте реализуется специальный функционал называемый программный интерфейс приложений или API (application program interface).
7.2. Приложение — это, например, скрипт на js, который умеет обратится у сервера. API получив запрос умеет сформировать ответ, т.е. предоставить данные из базы данных сайта. JS-скрипт меняет DOM. Браузер рендерит страницу и полученные данные с сервера становятся доступны пользователям сайта.