Контейнер toast-container будем использовать для показа в нём всплывающих сообщений Bootstrap Toast.
Сами записи для простоты будем хранить в json-файле data.json:
Сами записи для простоты будем хранить в 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('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll("'", ''').replaceAll('"', '"');
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 с помощью
2. На сервере с помощью PHP, при получении PUT-запроса, проверить корректность этих данных и попытаться обновить их. В качестве результата подготовить ответ в формате JSON и отправить его клиенту.
3. На клиенте после получения ответа от сервера, разобрать его и отобразить его в браузере посредством вывода сообщений в правом верхнем углу страницы с использованием Bootstrap Toast.
Читать: https://itchief.ru/php/put-method
#itchief #созданиесайтов #php #javascript #bootstrap
Дальше нам необходимо сделать следующее:
1. При нажатии кнопки "Обновить" собрать данные расположенные в этой строке и отправить их на сервер в формате JSON методом PUT с помощью
fetch()
.2. На сервере с помощью PHP, при получении PUT-запроса, проверить корректность этих данных и попытаться обновить их. В качестве результата подготовить ответ в формате JSON и отправить его клиенту.
3. На клиенте после получения ответа от сервера, разобрать его и отобразить его в браузере посредством вывода сообщений в правом верхнем углу страницы с использованием Bootstrap Toast.
Читать: https://itchief.ru/php/put-method
#itchief #созданиесайтов #php #javascript #bootstrap
ИТ Шеф
Пример обработки PUT-запроса на PHP
В этой статье мы рассмотрим пример обработки запроса на PHP, отправленного клиентом с использованием HTTP-метода PUT. Отправка данных с помощью данного...
Всем привет 👋! В предыдущем посте мы начали создавать веб-проект Везувий 🔥. Его репозиторий находится на GitHub: https://github.com/itchief/vesuvius.
Везувий – это проект, в рамках которого мы создадим с нуля собственный мини PHP-фреймворк с использованием ООП. В процессе его разработки мы напишем многие архитектурные вещи, изучив которые вы сможете понимать устройства большинства современных PHP-фреймворков. Кроме этого понимания, мы попытаемся сделать это решение полноценным, чтобы его можно было использовать на практике для создания различных веб-сайтов и веб-приложений. При написании этого мини фреймворка будем опираться на PSR-стандарты. Это позволит нам при необходимости заменять одну часть этого фреймворка (некоторое PSR-совместимое решение) на другое, которое реализовано тоже в соответствии с этим PSR-стандартом.
На текущий момент мы разработали только класс
Да, создавать мы мини-фреймворк мы начали не сначала, но к этому мы вернёмся позже. Почему так? Потому что базовая структура проекта может ещё измениться. Его описание сделаем потом.
💪 На следующем уроке, мы займёмся HTTP-запросом и HTTP-ответом, которые реализуем в проекте в соответствии со стандартом PSR-7.
Везувий – это проект, в рамках которого мы создадим с нуля собственный мини 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 (HyperText Transfer Protocol) – это просто определённые соглашения, которые позволяют двум машинам общаться друг с другом посредством текстовых сообщений. При этом одна машина играет роль клиента, а другая – сервера. Обычно клиентом у нас является веб-браузер, а сервером – Apache или Nginx.
Эти сообщения называются HTTP-сообщениями. Их разделяют на:
• запрос (HTTP Request) – вид сообщения, которое клиент отправляет на сервер с целью получить на него ответ;
• ответ (HTTP Response) – вид сообщения, которое сервер отправляет в ответ на клиентский запрос.
В простейшем случае взаимодействие между браузером и веб-сервером происходит так. Когда браузеру необходимо получить страницу, он создаёт HTTP-запрос и отправляет его сервер. Сервер после получения HTTP-запроса подготавливает на него HTTP-ответ, который отправляет обратно браузеру. После этого, браузер отрисовывает его нам в окне.
Что из этого нам важно 💪, как backend-разработчикам. Это понимать, что у нас запрашивает браузер, и конечно подготовить на него соответствующий HTTP-ответ.
Что из этого нам важно 💪, как backend-разработчикам. Это понимать, что у нас запрашивает браузер, и конечно подготовить на него соответствующий HTTP-ответ.
Итак, клиент и сервер общаются между собой посредством HTTP-сообщений. Эти сообщения состоят из информации, записанной в несколько строк:
1. Стартовая строка (Start line) – обязательный элемент сообщения, её содержимое всегда занимает ровно одну строку. В зависимости от вида сообщения она описывает запрос или ответ.
2. Заголовки (Headers) – дополнительная информация для правильной обработки запросов и ответов. Например, заголовок «
3. Пустая строка (Blank line) – она нужна чтобы указать, что здесь заканчиваются заголовки и дальше идёт уже тело сообщения.
4. Тело сообщения (Body) – это некие данные, отправляемые вместе с запросом или передаваемые в качестве ответа. При этом тело является необязательным, и может отсутствовать в HTTP-сообщениях.
1. Стартовая строка (Start line) – обязательный элемент сообщения, её содержимое всегда занимает ровно одну строку. В зависимости от вида сообщения она описывает запрос или ответ.
2. Заголовки (Headers) – дополнительная информация для правильной обработки запросов и ответов. Например, заголовок «
Content-Type
» в ответах сервера сообщает клиенту какой тип данных (текст, картинка и т.д.) содержится в ответе. Каждый заголовок занимает одну строчку и записывается в формате «Ключ: Значение
». Отделение ключа (имени заголовка) от значения осуществляется с помощью знака двоеточия (:
).3. Пустая строка (Blank line) – она нужна чтобы указать, что здесь заканчиваются заголовки и дальше идёт уже тело сообщения.
4. Тело сообщения (Body) – это некие данные, отправляемые вместе с запросом или передаваемые в качестве ответа. При этом тело является необязательным, и может отсутствовать в HTTP-сообщениях.
Это сообщение отображает всю информацию, необходимую для понимания того, что запрашивает клиент.
Оно начинается со стартовой строки, которая сообщает:
- метод запроса:
- цель запроса:
- поддерживаемую версию HTTP:
Информация в стартовой строке отделяется друг от друга с помощью пробела.
Далее следуют заголовки:
-
-
-
Тело у данного сообщения отсутствует.
Оно начинается со стартовой строки, которая сообщает:
- метод запроса:
GET
;- цель запроса:
/
;- поддерживаемую версию HTTP:
HTTP/1.1
.Информация в стартовой строке отделяется друг от друга с помощью пробела.
Далее следуют заголовки:
-
Host
– указывает на какой домен или IP-адрес нужно обратиться, чтобы получить запрашиваемый контент;-
Accept
– отмечает, какие типы контента, выраженные как MIME-типы, клиент может понять;-
User-Agent
– строка, которая содержит информацию о клиенте (браузере и операционной системе) с помощью которого выполняется запрос на сервер.Тело у данного сообщения отсутствует.
Итак, для получения данных запроса в PHP это можно сделать так:
Чтобы это протестировать, мы можем в Visual Studio Code установить расширение Thunder Client и протестировать наш код отправляя на сервер различные запросы.
<?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 и протестировать наш код отправляя на сервер различные запросы.
Данный ответ клиенту, начинается со стартовой строки, которая в данном случае называется строкой статуса (status line). На ней располагаются следующие элементы:
- версия протокола:
- код состояния:
- пояснение:
После этого следуют заголовки ответа, которые используются для того, чтобы уточнить ответ. В данном конкретном случае содержатся следующие:
-
-
-
Последней частью ответа является его тело. Несмотря на то, что у большинства ответов тело присутствует, оно не является обязательным. В данном случае тело содержит HTML-документ.
- версия протокола:
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
Все подробности в статье: https://itchief.ru/php/psr-7-http-message
#itchief #созданиесайтов #php
ИТ Шеф
Добавление реализации PSR-7 в проект для работы с HTTP
В этой статье рассмотрим, что такое HTTP-протокол и структуру сообщений. На практике добавим реализацию стандарта PSR-7 от Slim в наш PHP-фреймворк Везувий.
Всем привет 👋! Продолжаем разрабатывать мини-фреймворк Везувий на PHP. Перед тем как переходить дальше, сначала разберём как нам получить необходимые данные запроса из объекта
Итак, у нас есть серверный запрос, который мы на предыдущем шаге создали так:
Для работы с куками у нас в решение от Slim имеется класс Cookies:
Пример, как мы сейчас будем получать входные данные:
Выведем этот массив на экран:
#itchief #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 #минифреймворк
Всем привет! Продолжаем разрабатывать мини-фреймворк Везувий на 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);
Telegram
ИТ Шеф – JavaScript, CSS, PHP, HTML, CSS, React ❤️
Всем привет 👋! Продолжаем разрабатывать мини-фреймворк Везувий на PHP. Перед тем как переходить дальше, сначала разберём как нам получить необходимые данные запроса из объекта $request. В качестве реализации PSR-7 в проекте как вы уже знаете мы используем…