Обработка запросов с помощью PHP
В прошлом посту мы с вами разобрали самые популярные HTTP-запросы. В этой статье мы научимся их обрабатывать с помощью серверного языка программирования PHP.
И так, для начала нам нужно понять: Что мы хотим от нашего веб-приложения? Если мы хотим создать на сайте поиск, то будет правильнее использовать GET-запросы. Если мы хотим реализовать отправку форм (например, отправка сообщений, авторизация и др.), то правильнее будет использовать POST-запросы с применением AJAX.
Приступим. Начнём с GET-запроса.
Создаём главный файл index.html, где у нас будет небольшая форма с именем и фамилией пользователя. Она нас будет перенаправлять на страницу result.php, где по введённым данным будет приветствовать пользователя.
Чтобы создать форму в html, которая будет использовать GET-запрос, мы пишем следующий код:
<form action="result.php" method="get">
<label>
Enter your name
<input type="text" name="name" placeholder="Enter your name">
</label>
<label>
Enter your surname
<input type="text" name="surname" placeholder="Enter your surname">
</label>
<button type="submit">Go!</button>
</form><form> - это тег формы, внутри которой присутствуют поля для заполнения и обязательная кнопка с типом "submit".
action - это то, какой файл будет отвечать за обработку данных из формы, в нашем случае - это result.php.
method - это метод отправки данных: post или get.
<input> - это элемент поля ввода, куда можно вводить значения. Типов у этого элемента множество, например: text (обычный текст), password (пароль), numeric (цифры и числа), date (дата) и др. В нашем случае, используем text, так как запрашиваем у пользователя только имя и фамилию
placeholder - это текст, который будет находится внутри поля ввода до того момента, пока пользователь не начнёт вводить туда свой текст
name - это название параметра в запросе. Если указать название test, то GET-запрос будет выглядеть следующим образом: example.com/result.php?test={text}
<button> - это элемент кнопки. Объяснять как работает кнопка, думаю не нужно.
type - это тип кнопки: button, submit или reset. button обозначает то, что это просто обычная кнопка, действие которой можно обозначить при помощи javascript. submit - это кнопка отправки формы, то есть после нажатия на кнопку с таким типом, произойдет отправка введённых данных на сервер.
Теперь, когда наша форма готова, можно перейти к написанию серверной части нашего сайта. Мы будем приветствовать пользователя, если нужные данные присутствуют в URL, и, писать, что мы не знаем кто он, если отсутствуют. Приступим.
<?php // Открываем php-скрипт
if (isset($_GET['name'], $_GET['surname']) // Проверяем, существуют ли параметры name и surname
&& trim($_GET['name']) !== '' // Очищаем строку от лишних пробелов и проверяем, не пуста ли она
&& trim($_GET['surname']) !== ''){ // То же самое, что и в условии на одну строку выше
$text = 'Hello, '.$_GET['name'].' '.$_GET['surname'].'!'; // Пишем текст (Hello, Name Surname!)
}else{ // Если одна из строк пуста или параметры отсутствуют, то:
$text = 'I don`t who are you :('; // Пишем текст, что не знаем, кто таков
} // Конец условия. Следующей строкой закрываем скрипт
?>
<!DOCTYPE html>
<html lang="en"> <!-- Начало нашей страницы -->
<head> <!-- Начало головы сайта -->
<title>Result GET-request</title> <!-- Название нашей страницы -->
</head> <!-- Конец головы сайта -->
<body> <!-- Начало тела сайта -->
<h1><?php echo $text; ?></h1> <!-- Пишем пользователю текст. h1 - это заголовок первого уровня -->
</body> <!-- Конец тела сайта -->
</html> <!-- Конец нашей страницы -->Исходя из комментариев, вы должны были понять, как работает данный код. Однако, некоторые функции я всё же разберу:
$_GET - это переменная, которая достаёт параметры из URL, позволяя работать с ними. Как в нашем примере, мы достали параметры name и surname ($_GET['name'] и $_GET['surname'])
isset() - это функция, которая проверяет, существует ли указанный объект.
trim() - эта функция очищает строку от лишних пробелов. То есть, если будет строка ' I am LuckyDevv! ', то после использования функции лишние пробелы пропадут, и останется 'I am LuckyDevv!'. Также существуют функции ltrim и rtrim. По сути, то же самое, только ltrim убирает все ненужные пробелы слева текста, а rtrim - справа текста.
Таким образом, мы с вами научились работать с GET-запросами. GET-запросы также можно создавать через AJAX, но особой нужды в этом нет.
Теперь мы можем перейти к POST-запросам. POST-запросы чаще всего делают через AJAX, чтобы получать результат без обновления страницы.
Давайте сделаем точно такой же сайт, как и в прошлом примере, только теперь будем приветствовать пользователя на этой же странице. Приступим!
Для того, чтобы работать с AJAX-запросами, нам понадобиться библиотека jQuery, которая содержит в себе все необходимые инструменты. Скачиваем её из открытых источников (найдёте сами) и указываете в самом низу тела сайта скрипт, содержащий jQuery. У меня jQuery располагается по адресу ../src/js/jquery.min.js, поэтому это выглядит так:
<script src="../src/js/jquery.min.js"></script>
Создаём такую же форму, что и в прошлом примере, только убираем параметры action и method, так как нам это уже не пригодится. Параметр type у кнопки меняем на button, чтобы страница не перезагружалась. Выглядит в конечном итоге это всё так:
<form> <!-- Форма с методом POST на файл result.php -->
<center> <!-- Центрирование элементов на странице -->
<label>
Enter your name <!-- Лейбл поля ввода -->
<input type="text" id="name" name="name" placeholder="Enter your name">
<!-- Поле ввода с типом `text`, названием `name` и плейсхолдером -->
</label>
<label>
Enter your surname <!-- Лейбл поля ввода -->
<input type="text" id="surname" name="surname" placeholder="Enter your surname">
<!-- Поле ввода с типом `text`, названием `surname` и плейсхолдером -->
</label>
<button type="button" onclick="send()">Go!</button>
<!-- Кнопка отправки формы -->
</center>
</form> <!-- Конец формы -->Как вы могли увидеть, у кнопки не только поменялся параметр type, но и добавился новый - onclick.
onclick - это параметр, который указывает, какую функцию из нашего JavaScript ему нужно выполнить при нажатии пользователем.
Теперь мы можем приступить к написанию JavaScript:
function send(){ // Функция send() для отправки AJAX-POST-запроса
var name = document.getElementById('name').value; // Берём текст из первого ввода
var surname = document.getElementById('surname').value; // Берём текст из второго ввода
$.post('result.php', {'name': name, 'surname': surname}, function(data){ // Функция отправки AJAX
if (data !== null) // Проверяем существование ответа от севрера
{
// Вставляем ответ сервера в нужное сайт
document.getElementById('result').innerText = data;
} // Конец условия
});
}Для вас сейчас многое непонятно, поэтому спешу объяснить:
document - это объект в JavaScript. Этот объект позволяет нам работать со всей нашей страницей.
getElementById - это функция объекта document. Эта функция позволяет работать с элементом с указанным ID.
.value - это значение параметра value, которое присутствует в наших <input>. В value хранится информация о том, что ввёл пользователь в поле ввода.
.innetText - позволяет получить текст внутри элементов и изменять его.
$.post - функция jQuery, которая создаёт AJAX-POST-запрос на указанный сервер. В нашем случае 'result.php' - это адрес, куда должен пойти запрос.
Всё, что внутри фигурных скобок {} - это параметры, которые мы передаём на указанный адрес
function(data){} - то, что должно произойти после получения ответа от сервера
Серверный код у нас будет выглядеть следующим образом (result.php):
<?php
if (isset($_POST['name'], $_POST['surname']) // Проверяем наличие параметров
&& trim($_POST['name']) !== "" // Удаляем лишние пробелмы и проверяем, не пуста ли строка
&& trim($_POST['surname']) !== "") { // По аналогии с верхним
die('Hello, '. $_POST['name'] .' ' . $_POST['surname'] . '!'); // Отправляем ответ (Hello, Name Surname!)
}else{ // Если условие не выполнено, то:
die('I dont know who are you!'); // Отправляем ответ о том, что не знаем кто таков
}$_POST - по аналогии с $_GET. Это переменная, которая достаёт параметры из POST-запроса, позволяя работать с ними.
die() - это функция, которая заканчивает работу скрипта и перед "смертью" отправляет сообщение, если таковое указано.
Таким образом, мы научились с вами обрабатывать GET и POST -запросы. Все материалы из этой статьи вы можете найти на моём GitHub:
https://github.com/LuckyDevv/GET_POST