ТЗ звучит так
Создать страницу HTML.
На странице расположить форму (строго посередине экрана).
Форма имеет два поля: Логин и пароль. Под полями кнопка: Отправить.
После нажатия на кнопку форма, по средствам Ajax должна отправить данные на некий сервер в PHP скрипт. Метод отправки: POST, формат данных JSON, в заголовок запроса, перед отправкой добавить рандомный GUID.
Обработка на сервере:
В результате отработки скрипта, сервер должен вернуть объект JSON. Обязательные параметры: “result” и “GUID”. GUID – параметр, который отправлялся в заголовке формы.
Если не указан параметр “Логин”. Result = “_ERROR: Не указан логин“. Если не указан “Пароль”, Result = “_ERROR: не указан пароль”.
Закодировать в base64 строку “Логин”:”Пароль” – добавить полученное в возвращаемый JSON : параметр “Answer”.
Записать данные в таблицу MySQL. Имя таблицы _test_table. Поля: “login”, “password”, “b64”.
Login – данные от формы “Логин”, “password” – данные от формы “Пароль”, “b64” – результат кодировки в base64.
Если запись прошла успешно, параметр “Result” = “_SUCCESS”
После получения ответа от сервера вывести json в консоль браузера, а так же вывести ответ сервера в виде текстовой строки в блок DIV с ID = TResult, который располагается под кнопкой “Отправить”.
В Качестве данных для подключения к MySQL использовать рандомные данные (для примера).
Сделать в версии PHP: 5.6.
два файла:
1. index.html
2. server.php
Решение
Файл - index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chai&Coffee</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
justify-content: center;
align-items: center;
}
#formContainer {
padding: 25px;
border-radius: 8px;
box-shadow: 0px 0px 15px rgba(0,0,0, .3);
}
</style>
</head>
<body>
<div id="formContainer">
<form id="loginForm">
<div>
<label>Логин:</label><br/>
<input type="text" id="login" name="login" required />
</div>
<div style="margin-top:10px;">
<label>Пароль:</label><br/>
<input type="password" id="password" name="password" required />
</div>
<div style="margin-top:10px;">
<button type="submit">Отправить</button>
</div>
</form>
<div id="TResult" style="margin-top:15px; white-space: pre-wrap; border:1px solid #ccc; padding:10px;"></div>
</div>
<script>
function generateGUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
var login = document.getElementById('login').value.trim();
var password = document.getElementById('password').value.trim();
var GUID = generateGUID();
var data = {
login: login,
password: password
};
fetch('server.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-GUID': GUID
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(json => {
console.log(json);
document.getElementById('TResult').textContent = JSON.stringify(json, null, 2);
})
.catch(error => {
console.error('Ошибка:', error);
document.getElementById('TResult').textContent = 'Ошибка при отправке запроса.';
});
});
</script>
</body>
</html>
Файл - server.php
<?php
$dbFile = 'test_sqlite.db';
try {
$pdo = new PDO('sqlite:' . $dbFile);
} catch (Exception $e) {
die("Ошибка открытия базы данных");
}
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$createTableSql = "CREATE TABLE IF NOT EXISTS _test_table (
id INTEGER PRIMARY KEY AUTOINCREMENT,
login TEXT,
password TEXT,
b64 TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)";
$pdo->exec($createTableSql);
$guidHeader = isset($_SERVER['HTTP_X_GUID']) ? $_SERVER['HTTP_X_GUID'] : '';
$inputJSON = file_get_contents('php://input');
$inputData = json_decode($inputJSON, true);
$resultArr = array(
"result" => "",
"GUID" => $guidHeader,
);
$login = isset($inputData['login']) ? trim($inputData['login']) : '';
$password = isset($inputData['password']) ? trim($inputData['password']) : '';
if (empty($login)) {
$resultArr["result"] = "_ERROR: Не указан логин";
} elseif (empty($password)) {
$resultArr["result"] = "_ERROR: не указан пароль";
} else {
$b64_str = base64_encode($login . ':' . $password);
$stmt = $pdo->prepare("INSERT INTO _test_table (login, password, b64) VALUES (?, ?, ?)");
try {
$stmt->execute([$login, $password, $b64_str]);
$resultArr["result"] = "_SUCCESS";
$resultArr["Answer"] = $b64_str;
header('Content-Type: application/json');
echo json_encode($resultArr);
exit;
}
catch (Exception $e) {
$resultArr["result"] = "_ERROR при вставке данных";
header('Content-Type: application/json');
echo json_encode($resultArr);
exit;
}
}
if (isset($b64_str)) {
$resultArr["Answer"] = $b64_str;
}
header('Content-Type: application/json');
echo json_encode($resultArr);
?>