PHP Note Online - Đổi mật khẩu (kết thúc) - Ứng dụng Note và Chat với PHP
Xin chào các bạn, chào mừng các bạn đã quy trở lại với series hướng dẫn xây dựng ứng dụng ghi chú online bằng PHP OOP và Ajax. Ở bài trước chúng ta đã hiển thị và viết các chức năng thêm/sửa/xoá ghi chú rồi. Trong bài học hôm nay mình sẽ hướng dẫn các bạn viết chức năng đổi mật khẩu và đây cũng ...
Xin chào các bạn, chào mừng các bạn đã quy trở lại với series hướng dẫn xây dựng ứng dụng ghi chú online bằng PHP OOP và Ajax. Ở bài trước chúng ta đã hiển thị và viết các chức năng thêm/sửa/xoá ghi chú rồi. Trong bài học hôm nay mình sẽ hướng dẫn các bạn viết chức năng đổi mật khẩu và đây cũng là bài học cuối cùng của series này. Bây giờ chúng ta bắt đầu thôi !
1. Chức năng đổi mật khẩu
Layout
Các bạn mở file templates/change-pass-form.php
lên và dán đoạn code này vào:
<div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="text-primary">Đổi mật khẩu</h3> <form method="POST" onsubmit="return false;" id="formChangePass"> <div class="form-group"> <label for="user_signin">Mật khẩu cũ</label> <input type="password" class="form-control" id="old_pass"> </div> <div class="form-group"> <label for="user_signin">Mật khẩu mới</label> <input type="password" class="form-control" id="new_pass"> </div> <div class="form-group"> <label for="user_signin">Nhập lại mật khẩu mới</label> <input type="password" class="form-control" id="re_new_pass"> </div> <a href="index.php" class="btn btn-default"> <span class="glyphicon glyphicon-arrow-left"></span> Trở về </a> <button class="btn btn-primary" id="submit_change_pass"> <span class="glyphicon glyphicon-ok"></span> Thay đổi </button> <br><br> <div class="alert alert-danger hidden"></div> </form> </div> </div> </div>
Trong đó: #formChangePass
là form đổi mật khẩu.
Viết Ajax gửi dữ liệu
File js/functions/change-pass.js
sẽ đảm nhận chức năng này, các bạn mở file lên và copy nội dung này vào:
// Bắt đầu khi click vào nút Thay đổi $('#submit_change_pass').on('click', function() { // Gán các giá trị trong form tạo note vào các biến $old_pass = $('#old_pass').val(); $new_pass = $('#new_pass').val(); $re_new_pass = $('#re_new_pass').val(); // Nếu một trong các biến này rỗng if ($old_pass == '' || $old_pass == '' || $re_new_pass == '') { $('#formChangePass .alert').removeClass('hidden'); $('#formChangePass .alert').html('Vui lòng điền đầy đủ thông tin bên trên.'); } // Ngược lại else { // Thực thi gửi dữ liệu bằng Ajax $.ajax({ url : 'change-pass.php', // Đường dẫn file nhận dữ liệu type : 'POST', // Phương thức gửi dữ liệu // Các dữ liệu data : { old_pass : $old_pass, new_pass : $new_pass, re_new_pass : $re_new_pass // Thực thi khi gửi dữ liệu thành công }, success : function(data) { $('#formChangePass .alert').removeClass('hidden'); $('#formChangePass .alert').html(data); } }); } });
OK, bây giờ chúng ta sẽ viết PHP để nhận và xử lý dữ liệu.
Viết PHP xử lý dữ liệu
Mở file change-pass.php
lên và paste đoạn code bên dưới :
<?php // Kết nối database, session, general info require_once 'core/init.php'; // Nếu không tồn tại $user if (!$user) { header('Location: index.php'); // Di chuyển đến trang chủ } // Nhận dữ liệu và gán vào các biến đồng thời xử lý chuỗi $old_pass = @md5($_POST['old_pass']); $new_pass = @$_POST['new_pass']; $re_new_pass = @$_POST['re_new_pass']; // Các biến chứa code JS về thông báo $show_alert = "<script>$('#formChangePass .alert').removeClass('hidden');</script>"; $hide_alert = "<script>$('#formChangePass .alert').addClass('hidden');</script>"; $success_alert = "<script>$('#formChangePass .alert').attr('class', 'alert alert-success');</script>"; // Nếu mật khẩu cũ nhậ đúng if ($old_pass != $data_user['password']) { echo $show_alert.'Mật khẩu cũ nhập không chính xác, đảm bảo đã tắt caps lock.'; } // Ngược lại nếu độ dài mật khẩu mới nhỏ hơn 6 ký tự else if (strlen($new_pass) < 6) { echo $show_alert.'Mật khẩu quá ngắn, hãy thử với mật khẩu khác an toàn hơn.'; } // Ngược lại nếu mật khẩu mởi nhập lại không khớp else if ($new_pass != $re_new_pass) { echo $show_alert.'Nhập lại mật khẩu mới không khớp, đảm bảo đã tắt caps lock.'; } // Ngược lại else { $new_pass = md5($new_pass); // Mã hoá mật khẩu sang MD5 // Lệnh SQL đổi mật khẩu $sql_change_pass = "UPDATE users SET password = '$new_pass' WHERE id_user = '$data_user[id_user]'"; // Thực hiện truy vấn $db->query($sql_change_pass); // Giải phóng kết nối $db->close(); // Hiển thị thông báo và tải lại trang echo $show_alert.$success_alert.'Đổi mật khẩu thành công. <script> location.reload(); </script> '; } ?>
Xong rồi, giờ các bạn thử đổi mật khẩu xem được không nhé!
2. Lời kết
Series đến đây là kết thúc, mình hi vọng qua bài này các bạn có thể rèn luyện lại Ajax và đặc biệt là PHP OOP, ngoài ra cũng có thể tạo được một ứng dụng hay nữa. Trong series này nếu có chỗ nào thắc mắc, chưa hiểu rõ hoặc thiếu sót, các bạn có thể comment trên blog, đăng trên group hoặc inbox trực tiếp mình trên Facebook để nhận hỗ trợ sớm nhất nhé! Hẹn gặp lại và chúc bạn các bạn thành công!