{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":17,"offset":222}],"inlineStyleRanges":[],"text":"Создание формы входа — это не просто технический процесс; это ключевой элемент безопасности вашего веб-приложения. В этом пошаговом руководстве мы научимся добавлять форму входа в ваше веб-приложение, которое уже включает форму регистрации. Мы будем использовать существующие файлы и добавлять необходимый код для реализации функционала входа. Это руководство идеально подходит как для начинающих, так и для опытных разработчиков.","type":"unstyled","key":"8lh2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 1: Обновление HTML-файла","type":"header-three","key":"bcrer"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Добавление формы входа в существующий файл","type":"unstyled","key":"2u6mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если у вас уже есть файл 'index.html', откройте его и добавьте код для формы входа. Убедитесь, что форма регистрации уже присутствует в этом файле.","type":"unstyled","key":"6gs65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Вход в систему

","type":"blockquote","key":"5hpun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fpq7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полный пример файла 'index.html'","type":"unstyled","key":"950ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3spe0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8b4b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6725o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"lh4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6a8u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма регистрации и входа","type":"blockquote","key":"ehujh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5pom7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dc4ps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3pjrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Регистрация пользователя

","type":"blockquote","key":"4kg5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1ptli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имя пользователя:","type":"blockquote","key":"33ck6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"85itl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Email:","type":"blockquote","key":"e08u1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"1985k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пароль:","type":"blockquote","key":"2qc1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"blockquote","key":"4ev3m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"de1hr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"c446k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2celh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Вход в систему

","type":"blockquote","key":"fop9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"562k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"tb94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"j4va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cgqmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"92j4m"},{"data":{"image":{"id":"676bbb6eb96b121a4a246cac"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"изображение формы регистрации и входа в браузере.","type":"atomic:image","key":"ggk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 2: Добавление JavaScript для обработки формы входа","type":"header-three","key":"dcc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Создание JavaScript для обработки формы входа","type":"unstyled","key":"f8kkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создайте файл 'login.js' (если его еще нет) и добавьте следующий код для обработки отправки формы входа:","type":"unstyled","key":"6633q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('loginForm').addEventListener('submit', function(event) {","type":"blockquote","key":"83qoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.preventDefault(); // предотвращаем стандартное поведение формы","type":"blockquote","key":"a6qkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const username = document.getElementById('loginUsername').value;","type":"blockquote","key":"2dhng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const password = document.getElementById('loginPassword').value;","type":"blockquote","key":"fruu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const data = { username, password };","type":"blockquote","key":"cr4r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetch('login.php', {","type":"blockquote","key":"b6fj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"method: 'POST',","type":"blockquote","key":"e02ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"headers: {","type":"blockquote","key":"1far"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"'Content-Type': 'application/json'","type":"blockquote","key":"4dpin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"},","type":"blockquote","key":"fb51d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body: JSON.stringify(data)","type":"blockquote","key":"77bjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"blockquote","key":"p9bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".then(response => response.json())","type":"blockquote","key":"4uc76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".then(data => {","type":"blockquote","key":"3h83u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (data.success) {","type":"blockquote","key":"agjp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alert('Успешный вход!');","type":"blockquote","key":"b4fvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.location.href = 'welcome.html'; // Перенаправление на страницу приветствия","type":"blockquote","key":"2j1lq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} else {","type":"blockquote","key":"bshf8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alert('Ошибка: ' + data.message);","type":"blockquote","key":"3giaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"apurk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"blockquote","key":"jk6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".catch((error) => {","type":"blockquote","key":"fmrb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.error('Ошибка:', error);","type":"blockquote","key":"eebhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"a926n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"e7cq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2en9k"},{"data":{"image":{"id":"676bbc51dd0d3000cd9d8de4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"код JavaScript для обработки формы входа в текстовом редакторе.","type":"atomic:image","key":"1mmo0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3: Создание PHP-скрипта для проверки учетных данных","type":"header-three","key":"cgkeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Шаг 3: Создание PHP-скрипта","type":"unstyled","key":"7reb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте файл 'login.php', который будет принимать данные из формы и проверять их в базе данных. Добавьте следующий код:","type":"unstyled","key":"curep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"connect_error) {","type":"blockquote","key":"5emu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"die(json_encode(['success' => false, 'message' => 'Ошибка подключения к базе данных']));","type":"blockquote","key":"3tfg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ceb35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$data = json_decode(file_get_contents(\"php://input\"), true);","type":"blockquote","key":"1482f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$username = $conn->real_escape_string($data['username']);","type":"blockquote","key":"a8kai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$password = $data['password']; // Не хешируем пароль здесь","type":"blockquote","key":"9nep8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$sql = \"SELECT * FROM users WHERE username='$username'\";","type":"blockquote","key":"4s5v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$result = $conn->query($sql);","type":"blockquote","key":"cidna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if ($result->num_rows > 0) {","type":"blockquote","key":"7lke1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$row = $result->fetch_assoc();","type":"blockquote","key":"utv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Проверяем пароль","type":"blockquote","key":"1haqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (password_verify($password, $row['password'])) {","type":"blockquote","key":"3539m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"echo json_encode(['success' => true]);","type":"blockquote","key":"1rglo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} else {","type":"blockquote","key":"cmfdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"echo json_encode(['success' => false, 'message' => 'Неверный пароль']);","type":"blockquote","key":"9nsu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ckq7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} else {","type":"blockquote","key":"cjiuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"echo json_encode(['success' => false, 'message' => 'Пользователь не найден']);","type":"blockquote","key":"e3lqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"fl4pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$conn->close();","type":"blockquote","key":"13svc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?>","type":"blockquote","key":"e8ndg"},{"data":{"image":{"id":"676bbda37feaf72a3749ba13"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"код PHP для проверки учетных данных в текстовом редакторе.","type":"atomic:image","key":"e5kdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 4: Обработка успешного входа","type":"header-three","key":"drs5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Шаг 4: Создание страницы приветствия","type":"unstyled","key":"eebj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После успешного входа вы можете перенаправить пользователя на страницу приветствия ('welcome.html'). Убедитесь, что у вас есть такая страница с приветствием.","type":"unstyled","key":"52q1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример страницы приветствия ('welcome.html'):","type":"header-three","key":"ai95m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"20ak8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7mush"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4fcj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7d3na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bueil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добро пожаловать","type":"blockquote","key":"dks4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4l780"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"43lav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Добро пожаловать!

","type":"blockquote","key":"c35ij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Вы успешно вошли в систему.

","type":"blockquote","key":"5lnqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fp40k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fhme6"},{"data":{"image":{"id":"676bc517d47151283697363a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"изображение страницы приветствия.","type":"atomic:image","key":"36bev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"951lp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"djdgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь у вас есть полное руководство по созданию формы входа с использованием JavaScript и PHP. Если у вас возникли вопросы или вы хотите узнать больше о программировании и веб-разработке, не стесняйтесь оставлять комментарии под этим постом!","type":"unstyled","key":"aevka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попробуйте реализовать эту форму входа на своем проекте и делитесь своими успехами! Если вам понравилось это руководство, подписывайтесь на мой канал в Яндекс Дзен, чтобы не пропустить новые полезные материалы и уроки. Спасибо за внимание! Жду вас на следующем уроке!","type":"unstyled","key":"1kv0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"IM8b0bHPM0bKsrWamHSO"}],"entityMap":{"0":{"data":{"url":"https://dzen.ru/a/Z2sMjm4fV3hXmrL2"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}