Bài 04: Ứng dụng Chat Ajax - Đăng ký - đăng nhập - đăng xuất

DOWNLOAD

Chào mừng các bạn trở lại với series hướng dẫn xây dựng ứng dụng Messenger với kỹ thuật PHP và Ajax. Ở bài trước chúng ta đã kết nối thành công database và xây dựng header, footer cho ứng dụng. Bài hôm nay, ta sẽ tạo chức năng đăng nhập, đăng ký và đăng xuất.

1. Đăng nhập và đăng ký

Trước tiên mình trình bày luồng xử lý của chức năng đăng ký và đăng nhập đã nhé.

Nguyên lý hoạt động

Để mình nói sơ qua về nguyên lý hoạt động của hai chức năng này. Như các bạn đã thấy trên video demo mình lồng đăng nhập và đăng ký chung một form với nhau. Khi ta nhập một username và password thì sẽ gửi dữ liệu tới file xử lý, file này sẽ kiểm tra hai nhánh.

  • Nếu không tồn tại username trong table users thì thực thi đăng ký tài khoản.
  • Ngược lại nếu tồn tại username thì ta sẽ thực thi đăng nhập.

Mình sẽ minh hoạ qua sơ đồ sau cho các bạn dễ hiểu:

Xây dựng layout

Trước tiên chúng ta phải thiết kế layout form cho đăng nhập và đăng ký. Như mình nói trên thì chúng ta chỉ làm một form duy nhất thôi, các bạn mở file index.php lên và thay toàn bộ nội dung sau :

<?php
// Kết nối database, lấy dữ liệu chung
include('includes/general.php');
// Kết nối header
include('includes/header.php');
?>
<div class="box-join">
    <p>Tạo tài khoản hoặc đăng nhập để tham gia với chúng tôi</p>
    <form method="POST" id="formJoin" onsubmit="return false;">
        <input type="text" placeholder="Tên đăng nhập" class="data-input" id="username">
        <input type="password" placeholder="Mật khẩu" class="data-input" id="password">
        <button class="btn-submit">Bắt đầu</button>
        <div class="alert danger"></div>
    </form><!-- form#formJoin -->
</div><!-- div.box-join -->
<?php
// Kết nối footer
include('includes/footer.php');
?>

Kế tiếp là viết CSS cho form, mở file css/style.css lên và thêm đoạn code sau :

/* Form Login & Register */
.box-join {text-align: center; padding: 20px 10px;}
#formJoin .data-input {display: block; margin: auto; margin-top: 10px; padding: 8px 7px; border: 1px solid #ccc; font-size: 15px; width: 300px; color: #555; max-width: calc(100% - 16px);}
#formJoin .btn-submit {margin-top: 10px; padding: 8px 15px; background-color: #428bca; color: #fff; border: 1px solid #428bca; font-size: 15px; }
#formJoin .btn-submit:hover {cursor: pointer; opacity: 0.9;}
#formJoin .alert {color: #fff; width: 300px; padding: 8px 7px; margin: auto; margin-top: 10px; text-align: left; display: none;}

OK, thế là xong phần giao diện. Tiếp theo chúng ta sẽ viết Ajax để gửi dữ liệu form.

Viết Ajax

Mở file js/join.js lên và dán nội dung này vào :

// Hàm gửi dữ liệu
function Join() {
    // Khai báo các biến dữ liệu trong form
    $username = $('#username').val();
    $password = $('#password').val();

    // Gửi dữ liệu
    $.ajax({
        url: 'join.php', // Đường dẫn file xử lý
        type: 'POST', // Phương thức
        // Các dữ liệu
        data: {
            username: $username,
            password: $password
                    // Thực thi khi gửi dữ liệu thành công
        }, success: function (result) {
            $('#formJoin .btn-submit').html('Bắt đầu');
            $('#formJoin .alert').html(result); // Thông báo
        }
    });
}

// Bắt sự kiện click vào nút bắt đầu của form
$('#formJoin .btn-submit').click(function () {
    $(this).html('Đang tải ...');
    // Thực thi gửi dữ liệu
    Join();
});

Nếu bạn nào biết một chút về Jquery và Ajax thì đoạn code trên cũng không gì là khó hiểu phải không :)

Viết PHP để nhận dữ liệu

Đầu tiên các bạn mở file join.php lên và copy nội dung sau :

<?php
// Kết nối database, lấy dữ liệu chung
include('includes/general.php');

// Khai báo các biến nhận dữ liệu
$username = @mysqli_real_escape_string($cn, $_POST['username']);
$password = @mysqli_real_escape_string($cn, $_POST['password']);

// Các biến hiển thị thông báo 
$show_alert = '<script>$("#formJoin .alert").show();</script>'; // Hiển thị thông báo lỗi
$hide_alert = '<script>$("#formJoin .alert").hide();</script>'; // Ẩn thông báo lỗi
$success_alert = '<script>$("#formJoin .alert").attr("class", "alert success");</script>'; // Thông báo thành công
// Kiểm tra có tồn tại username
$query_check_exist_user = mysqli_query($cn, "SELECT * FROM users WHERE username = '$username'");

// Nếu username hoặc password trống
if ($username == '' || $password == '') {
    echo $show_alert . 'Vui lòng điền đầy đủ thông tin bên trên.'; // Thông báo
}
// Ngược lại
else {
    // Nếu tồn tại username thì thực thi đăng nhập
    if (mysqli_num_rows($query_check_exist_user)) {
        $password = md5($password); // Mã hoá password sang MD5
        // Kiểm tra thông tin đăng nhập
        $query_check_login = mysqli_query($cn, "SELECT * FROM users WHERE username = '$username' AND password = '$password'");
        // Nếu thông tin đăng nhập đúng
        if (mysqli_num_rows($query_check_login)) {
            echo $show_alert . $success_alert . 'Đăng nhập thành công.'; // Thông báo
            $_SESSION['username'] = $username; // Lưu session giá trị username
            echo '<script>window.location.reload();</script>'; // Tải lại trang
        }
        // Ngược lại
        else {
            echo $show_alert . 'Tên đăng nhập hoặc mật khẩu không chính xác.'; // Thông báo
        }
    }
    // Ngược lại thì thực thi đăng ký
    else {
        // Nếu độ dài username < 6 hoặc > 40
        if (strlen($username) < 6 || strlen($username) > 40) {
            echo $show_alert . 'Tên đăng nhập trong khoảng từ 6-40 ký tự.'; // Thông báo
        }
        // Nếu username chứa khoảng trắng và ký tự đặc biệt
        else if (preg_match('/\W/', $username)) {
            echo $show_alert . 'Tên đăng nhập không chứa khoảng trắng và ký tự đặc biệt.'; // Thông báo
        }
        // Nếu độ dài password < 6
        else if (strlen($password) < 6) {
            echo $show_alert . 'Mật khẩu của bạn quá ngắn, hãy thử lại với mật khẩu khác an toàn hơn.'; // Thông báo
        }
        // Không mắc các lỗi trên thì insert vào table
        else {
            $password = md5($password); // Mã hoá password sang MD5
            // Thêm thông tin người dùng vào table users 
            $query_create_user = mysqli_query($cn, "INSERT INTO users VALUES (
						'',
						'$username',
						'$password',
						'$date_current' 
					)");
            echo $show_alert . $success_alert . 'Đăng ký tài khoản thành công.'; // Thông báo
            $_SESSION['username'] = $username; // Lưu session giá trị username
            echo '<script>window.location.reload();</script>'; // Tải lại trang
        }
    }
}
?>

Mình đã giải thích trong code rồi nên mình chỉ nói về phần lưu session thôi. Khi mà đăng nhập hoặc đăng ký thành công, ta sẽ gửi session đến file includes/general.php để nó lưu giá trị username. Bạn nào nếu chưa hiểu lắm về session có thể tham khảo bài session và cookie. Còn một điều nữa, có lẽ một số bạn thắc mắc ký hiệu @ là dùng để làm gì phải không nào, dấu này dùng để bỏ qua lỗi nếu trường hợp đoạn code đó xử lý bị lỗi.

Lưu session

Tiếp theo chúng ta mở file includes/general.php lên và thêm đoạn code nào vào :

<?php
// Bắt đầu lưu session
session_start();
// Nếu tồn tại session
if (@$_SESSION['username']) {
    // Gán $user = session
    $user = $_SESSION['username'];
}
// Ngược lại 
else {
    // $user rỗng
    $user = '';
}

Thế là chúng ta đã có thể lưu session được rồi. Các bạn chạy thử và hiển thị  $user trong file includes/general.php xem được không, rồi kiểm tra nó có insert dữ liệu vào table users khi đăng ký không nhé !

2. Đăng xuất

Về phần này thì quá đơn giản, các bạn copy nội dung sau vào file logout.php.

<?php
// Bắt đầu session
session_start();
// Xoá session
session_destroy();
// Di chuyển đến trang index.php
header('Location: index.php');
?>

Thế là chúng ta đã xây dựng xong ba chức năng đăng nhập, đăng ký và đăng xuất rồi :)

3. Lời kết

Qua bài này chúng ta đã nắm được các xây dựng các xử lý dữ liệu phân nhánh, lồng các kiểu rồi nè :) Ngoài ra còn lưu session, xoá session và gửi dữ liệu bằng Ajax nữa. Trong bài tiếp theo chúng ta sẽ sẽ xây dựng menu và giao diện trò chuyện. Chúc các bạn thành công !

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminLeChiHuy

LeChiHuy

Sinh năm 2001, thích lập trình, ham học hỏi. Bắt đầu tham gia vào Freetuts giữa năm 2016, mong được sự ủng hộ của các bạn !

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.