Контейнер toast-container будем использовать для показа в нём всплывающих сообщений Bootstrap Toast.

Сами записи для простоты будем хранить в json-файле data.json:
[{"id":1,"title":"6.8\" \u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d Samsung Galaxy S24 Ultra 1024 \u0413\u0411","price":189999},{"id":2,"title":"6.7\" \u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d Google Pixel 8 Pro 256","price":159999},{"id":3,"title":"6.73\" \u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d Xiaomi 14 Ultra 512 \u0413\u0411","price":139999}]

Теперь нам осталось только написать код JavaScript, который будет получать данные из JSON файла и выводить их на страницу:

const escapeHTML = (html) => String(html).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll("'", '&#39;').replaceAll('"', '&quot;');

const template = (row) => `<tr data-id="${escapeHTML(row.id)}">
<th scope="row">${escapeHTML(row.id)}</th>
<td><input type="text" name="title" class="form-control" value="${escapeHTML(row.title)}"><div class="invalid-feedback"></div></td>
<td><input type="text" name="price" class="form-control" value="${escapeHTML(row.price)}"><div class="invalid-feedback"></div></td>
<td><button type="button" class="btn btn-warning w-100">
<span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
<span role="status">Обновить</span>
</button></td>
</tr>`;

document.addEventListener('DOMContentLoaded', async () => {
const response = await fetch('data.json', {
method: 'GET',
headers: {
'pragma': 'no-cache',
'cache-control': 'no-cache'
}
});
if (response.ok) {
const phones = await response.json();
const html = phones.map((row) => template(row)).join('');
document.querySelector('tbody').innerHTML = html;
}
});

🔥Наша страничка готова, скоро перейдём к самому интересному...

Всем привет! 💪 Продолжаем...
Дальше нам необходимо сделать следующее:
1. При нажатии кнопки "Обновить" собрать данные расположенные в этой строке и отправить их на сервер в формате JSON методом PUT с помощью fetch().
2. На сервере с помощью PHP, при получении PUT-запроса, проверить корректность этих данных и попытаться обновить их. В качестве результата подготовить ответ в формате JSON и отправить его клиенту.
3. На клиенте после получения ответа от сервера, разобрать его и отобразить его в браузере посредством вывода сообщений в правом верхнем углу страницы с использованием Bootstrap Toast.

Читать: https://itchief.ru/php/put-method

#itchief #созданиесайтов #php #javascript #bootstrap

Всем привет! 🔥Новая тема на сайте.

Читать: https://itchief.ru/php/pdo-wrapper

#itchief #php

Всем привет 👋! В предыдущем посте мы начали создавать веб-проект Везувий 🔥. Его репозиторий находится на GitHub: https://github.com/itchief/vesuvius.

Везувий – это проект, в рамках которого мы создадим с нуля собственный мини PHP-фреймворк с использованием ООП. В процессе его разработки мы напишем многие архитектурные вещи, изучив которые вы сможете понимать устройства большинства современных PHP-фреймворков. Кроме этого понимания, мы попытаемся сделать это решение полноценным, чтобы его можно было использовать на практике для создания различных веб-сайтов и веб-приложений. При написании этого мини фреймворка будем опираться на PSR-стандарты. Это позволит нам при необходимости заменять одну часть этого фреймворка (некоторое PSR-совместимое решение) на другое, которое реализовано тоже в соответствии с этим PSR-стандартом.

На текущий момент мы разработали только класс Connection, который у нас будет использоваться для соединения с базой данной, в данном случае с MySQL.

Да, создавать мы мини-фреймворк мы начали не сначала, но к этому мы вернёмся позже. Почему так? Потому что базовая структура проекта может ещё измениться. Его описание сделаем потом.

💪 На следующем уроке, мы займёмся HTTP-запросом и HTTP-ответом, которые реализуем в проекте в соответствии со стандартом PSR-7.

Всем привет 👋! Сегодня поговорим, про протокол HTTP и его роль в веб-разработке

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

По сути, HTTP (HyperText Transfer Protocol) – это просто определённые соглашения, которые позволяют двум машинам общаться друг с другом посредством текстовых сообщений. При этом одна машина играет роль клиента, а другая – сервера. Обычно клиентом у нас является веб-браузер, а сервером – Apache или Nginx.

Эти сообщения называются HTTP-сообщениями. Их разделяют на:
• запрос (HTTP Request) – вид сообщения, которое клиент отправляет на сервер с целью получить на него ответ;
• ответ (HTTP Response) – вид сообщения, которое сервер отправляет в ответ на клиентский запрос.

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

Что из этого нам важно 💪, как backend-разработчикам. Это понимать, что у нас запрашивает браузер, и конечно подготовить на него соответствующий HTTP-ответ.

Всем привет 👋! Продолжаем разговор про HTTP и сегодня разберём структуру HTTP-сообщений. Слева приведён примера запроса, а справа – ответа.

Итак, клиент и сервер общаются между собой посредством HTTP-сообщений. Эти сообщения состоят из информации, записанной в несколько строк:

1. Стартовая строка (Start line) – обязательный элемент сообщения, её содержимое всегда занимает ровно одну строку. В зависимости от вида сообщения она описывает запрос или ответ.

2. Заголовки (Headers) – дополнительная информация для правильной обработки запросов и ответов. Например, заголовок «Content-Type» в ответах сервера сообщает клиенту какой тип данных (текст, картинка и т.д.) содержится в ответе. Каждый заголовок занимает одну строчку и записывается в формате «Ключ: Значение». Отделение ключа (имени заголовка) от значения осуществляется с помощью знака двоеточия (:).

3. Пустая строка (Blank line) – она нужна чтобы указать, что здесь заканчиваются заголовки и дальше идёт уже тело сообщения.

4. Тело сообщения (Body) – это некие данные, отправляемые вместе с запросом или передаваемые в качестве ответа. При этом тело является необязательным, и может отсутствовать в HTTP-сообщениях.

Всем привет 👋! Сегодня более подробно рассмотрим запрос, на примере приведённого выше.

Всякий раз, когда клиент (веб-браузер) делает запрос, он отправляет небольшое текстовое сообщение на сервер и ждет ответа.

Это сообщение отображает всю информацию, необходимую для понимания того, что запрашивает клиент.

Оно начинается со стартовой строки, которая сообщает:
- метод запроса: GET;
- цель запроса: /;
- поддерживаемую версию HTTP: HTTP/1.1.
Информация в стартовой строке отделяется друг от друга с помощью пробела.

Далее следуют заголовки:
- Host – указывает на какой домен или IP-адрес нужно обратиться, чтобы получить запрашиваемый контент;
- Accept – отмечает, какие типы контента, выраженные как MIME-типы, клиент может понять;
- User-Agent – строка, которая содержит информацию о клиенте (браузере и операционной системе) с помощью которого выполняется запрос на сервер.

Тело у данного сообщения отсутствует.

Всем привет 👋! Сегодня рассмотрим, как мы получаем данные запроса в PHP. Это нужно для понимания процесса. Так мы данные запроса во фреймворке конечно же получать не будем.

Итак, для получения данных запроса в PHP это можно сделать так:

<?php

$headers = getallheaders();

echo 'Method: ' . $_SERVER['REQUEST_METHOD'] . PHP_EOL;
echo 'URI: ' . $_SERVER['REQUEST_URI'] . PHP_EOL;
echo 'Protocol: ' . $_SERVER['SERVER_PROTOCOL'] . PHP_EOL;
echo PHP_EOL;
echo 'Host: ' . $headers['Host'] . PHP_EOL;
echo 'Accept: ' . $headers['Accept'] . PHP_EOL;
echo 'User-Agent: ' . $headers['User-Agent'] . PHP_EOL;

Чтобы это протестировать, мы можем в Visual Studio Code установить расширение Thunder Client и протестировать наш код отправляя на сервер различные запросы.

Всем привет 👋! Как только сервер получит запрос, наше приложение должно взять эту информацию и сгенерировать некоторый вывод. Сервер объединит наш вывод как часть своего ответа клиенту. На картинке приведён пример HTTP-ответа.

Данный ответ клиенту, начинается со стартовой строки, которая в данном случае называется строкой статуса (status line). На ней располагаются следующие элементы:

- версия протокола: HTTP/1.1;
- код состояния: 200 (показывает насколько успешно завершилось обработка запроса);
- пояснение: OK (короткое текстовое описание к коду состояния, - которое используется исключительно для того, чтобы упростить его понимание человеком).

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

- Server – cодержит информацию о сервере, который сгенерировал ответ;
- Date – дата и время, когда сообщение было создано;
- Content-Type – MIME-тип передаваемого контента.

Последней частью ответа является его тело. Несмотря на то, что у большинства ответов тело присутствует, оно не является обязательным. В данном случае тело содержит HTML-документ.

Всем привет 👋! Теперь нам осталось познакомиться с PSR-7 и добавить его реализацию в проект. Создавать самостоятельно реализацию не будем, так как это очень объёмная задача. Установим в проект Везувий готовое решение от Slim, которое мне очень нравится ❤️.

Все подробности в статье: https://itchief.ru/php/psr-7-http-message

#itchief #созданиесайтов #php

Всем привет 👋! Продолжаем разрабатывать мини-фреймворк Везувий на PHP. Перед тем как переходить дальше, сначала разберём как нам получить необходимые данные запроса из объекта $request. В качестве реализации PSR-7 в проекте как вы уже знаете мы используем решение от Slim.

Итак, у нас есть серверный запрос, который мы на предыдущем шаге создали так:

// создадим серверный запрос из суперглобальных массивов PHP
$request = ServerRequestFactory::createFromGlobals();

Для работы с куками у нас в решение от Slim имеется класс Cookies:

$cookies = new Cookies($request->getCookieParams());

Пример, как мы сейчас будем получать входные данные:

$result = [
'method' => $request->getMethod(), // получим метод запроса
'path' => $request->getUri()->getPath(), // получим цель запроса
'q' => $request->getQueryParams()['q'] ?? null, // получим GET-параметр с именем "q"
'token' => $cookies->get('token'), // получим куку с именем "token"
'content-type' => $request->getHeaderLine('content-type'), // получим заголовок Content-Type
];

Выведем этот массив на экран:

$output = '<pre>' . print_r($result, true) . '</pre>';

// создадим тело как поток
$body = (new StreamFactory)->createStream($output);
// создадим ответ, с кодом статуса 200 и телом $body
$response = (new ResponseFactory)->createResponse(200)->withBody($body);

// выведем ответ
(new ResponseEmitter())->emit($response);

#itchief #php #минифреймворк

Чтобы выполнить тест воспользуемся Thunder Client, который можно установить себе в Visual Studio Code.

💪 В результате у нас получился вот-такой ответ.

Всем привет! Продолжаем разрабатывать мини-фреймворк Везувий на PHP. В предыдущем сообщении (https://t.me/itchief_ru/304) мы поняли как получать различные данные из HTTP-запроса. А точнее, мы посмотрели как узнать HTTP-метод, цель запроса (URI), GET-параметры, куку с нужным именем и определённые значения HTTP-заголовков.

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

Первое мы уже научились делать, теперь рассмотрим как делать вывод (отправлять ответ).

Здесь все действия сводятся к созданию объекта $response. Это осуществляется с помощью класса ResponseFactory, который выполняет роль фабрики:

$response = (new ResponseFactory())->createResponse(StatusCodeInterface::STATUS_OK);

При этом STATUS_OK является статусом по умолчанию и его можно не указывать:

$response = (new ResponseFactory())->createResponse();

После этого к ответу ($response) мы можем добавлять заголовки, тело. Это осуществляется соответственно с помощью методов withHeader(), withBody(). При этом данные методы не изменяют текущий ответ, а возвращают новый ответ для которого они устанавливают соответственно заголовки или тело. Создание нового ответа осуществляется посредством клонирования текущего.

$response = (new ResponseFactory())->createResponse();
$response = $response->withHeader('X-Engine', 'Vesuvius');

Для вывода ответа используем следующую строчку:

(new ResponseEmitter())->emit($response);

Итак, принцип работы сайта на стороне сервера будет сводится к следующему:

<?php

use App\Core\ResponseEmitter;
use Fig\Http\Message\StatusCodeInterface;
use Slim\Psr7\Factory\ServerRequestFactory;
use Slim\Psr7\Factory\ResponseFactory;

require __DIR__ . '/../app/vendor/autoload.php';

// создаём серверный запрос из суперглобальных массивов PHP
$request = ServerRequestFactory::createFromGlobals();

// выполняем какие-то действия
// ...

// создаём ответ
$response = (new ResponseFactory())->createResponse();
$response = $response->withHeader('X-Engine', 'Vesuvius');

// выводим ответ
(new ResponseEmitter())->emit($response);