У сучасній веб-розробці важливою частиною є підключення фронтенду до бекенду, щоб створити динамічні веб-додатки. У цій статті ми розглянемо, як підключити фронтенд за допомогою HTML, CSS або JavaScript (Vue.js) до бекенду, побудованого на PHP та MySQL.
Першим кроком є налаштування бази даних MySQL. Потрібно створити базу даних та таблицю для зберігання інформації користувачів, таких як ім’я користувача та пароль. Для цього можна використовувати phpMyAdmin або командний рядок MySQL. Наприклад, створюємо базу даних user_management і таблицю users з полями для імені користувача та пароля.
Зв’язок з базою даних здійснюється через файл config.php, який дозволяє підключити PHP до MySQL. Для реєстрації користувача, дані з форми передаються до бази даних, де пароль шифрується за допомогою функції password_hash() для підвищення безпеки. Після цього дані користувача зберігаються в таблиці.
Для обробки процесу входу створюється файл login.php, який перевіряє, чи введений користувачем логін і пароль співпадають з тими, що збережені в базі даних, використовуючи функцію password_verify().
Після успішного входу користувач потрапляє на home.php, де система перевіряє активність сесії. Якщо сесія не активна, користувач буде перенаправлений на сторінку входу. Якщо сесія активна, відображається ім’я користувача та електронна пошта, а також є можливість вийти з системи через посилання на сторінці.
У дизайні використовуються HTML та CSS для створення адаптивних форм реєстрації та входу, де користувач вводить свій логін та пароль, а дані обробляються за допомогою PHP.
Для тестування застосунку спочатку потрібно зареєструвати користувача, заповнивши форму реєстрації. Після успішної реєстрації, дані користувача зберігаються в базі даних. Потім користувач може увійти в систему, використовуючи свої облікові дані. Система перевіряє правильність введених даних і, у разі успіху, перенаправляє на головну сторінку, де відображається персональна інформація.
Усі дані користувачів, що зареєструвались, можна переглянути в phpMyAdmin, що дозволяє зручно керувати базою даних через веб-інтерфейс.
Після виконання усіх кроків, ми створили простий додаток для реєстрації та входу за допомогою HTML, CSS, PHP та MySQL. Цей додаток дозволяє безпечно реєструвати та авторизувати користувачів, при цьому забезпечуючи належний рівень безпеки завдяки шифруванню паролів.
Посилання на GitHub:
GitHub - ArsipPrakAplikasiWeb
Перекладено з: Praktikum Aplikasi Web: Menghubungkan Frontend dengan Backend menggunakan PHP dan MySQL