1. Phân tích chức năng
Trang đăng ký với chức năng đăng ký người dùng thông qua các thông tin định danh như email và mật khẩu bảo mật
2. Thực thi
B1: Xây dựng phương thức register trong tập tin core/function.php có chức năng đăng ký người dùng vào hệ thống.
Phương thức register sẽ kiểm tra sự tồn tại người dùng duy nhất thông qua email trên bảng cơ sở dữ liệu users.
Nếu email đã tồn tại sẽ báo false. Ngược lại sẽ lưu thông tin email và mật khẩu sau khi mã hóa md5 vào cơ sở dữ liệu
B2: Tạo controller register.php tại thư mục gốc
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
include_once './view/_register.php';
}
controller đóng vai trò phân luồng với 2 phương thức GET và POST của http
Với phương thức GET hàm include_once sẽ nhúng giao diện ở thư mục view với mục đích hiển thị nội dung.
Tập tin _register.php có chức năng hiển thị form đăng ký sau khi người dùng điền thông tin và thực hiện submit dữ liệu sẽ chuyển sang trang register.php với method POST
Tại method POST trên trang register.php sẽ gọi phương thức register trong function.php để xử lý đăng ký người dùng
<?php require_once 'core/boot.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<?php include 'inc/header.php'; ?>
<?php include 'inc/navbar.php'; ?>
<!-- form wrapper -->
<div class="container py-16">
<div class="max-w-lg mx-auto shadow px-6 py-7 rounded overflow-hidden">
<h2 class="text-2xl uppercase font-medium mb-1">
create an acocunt
</h2>
<p class="text-gray-600 mb-6 text-sm">
Register here if you don't have account
</p>
<form action="register.php" method="post">
<div class="space-y-4">
<div>
<label class="text-gray-600 mb-2 block">
Full Name <span class="text-primary">*</span>
</label>
<input name="fullname" type="text" class="input-box" placeholder="Full name">
</div>
<div>
<label class="text-gray-600 mb-2 block">
Email Address <span class="text-primary">*</span>
</label>
<input name="email" type="email" class="input-box" placeholder="Enter your email">
</div>
<div>
<label class="text-gray-600 mb-2 block">Password <span class="text-primary">*</span></label>
<input type="password" class="input-box" placeholder="Password">
</div>
<div>
<label class="text-gray-600 mb-2 block">Confirm Password
<span class="text-primary">*</span>
</label>
<input name="password" type="password" class="input-box" placeholder="Confirm your password">
</div>
</div>
<div class="flex items-center mt-6">
<input type="checkbox" id="agreement" class="text-primary focus:ring-0 rounded-sm cursor-pointer">
<label for="agreement" class="text-gray-600 ml-3 cursor-pointer">
I have read and agree to the
<a href="#" class="text-primary">terms & conditions</a>
</label>
</div>
<div class="mt-4">
<button type="submit" class="block w-full py-2 text-center text-white bg-primary border border-primary rounded hover:bg-transparent hover:text-primary transition uppercase font-roboto font-medium">
create account
</button>
</div>
</form>
<!-- login with social -->
<div class="mt-6 flex justify-center relative">
<div class="absolute left-0 top-3 w-full border-b-2 border-gray-200"></div>
<div class="text-gray-600 uppercase px-3 bg-white relative z-10">
OR SINGUP IN WITH
</div>
</div>
<div class="mt-4 flex gap-4">
<a href="#" class="block w-1/2 py-2 text-center text-white bg-blue-800 rounded uppercase font-roboto font-medium text-sm">
Facebook
</a>
<a href="#" class="block w-1/2 py-2 text-center text-white bg-yellow-600 rounded uppercase font-roboto font-medium text-sm">
Google
</a>
</div>
<!-- login with social end -->
<p class="mt-4 text-gray-600 text-center">
Already have an account? <a href="login.html" class="text-primary">Login Now</a>
</p>
</div>
</div>
<!-- form wrapper end -->
<?php include 'inc/footer.php'; ?>
</body>
</html>