Hướng dẫn dùng php profile trong PHP
Hello, xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng trang web tin tức căn bản PHP. Ở bài hôm trước chúng ta đã xây dựng xong các chức năng tài khoản trong admin, hôm nay mình sẽ hướng dẫn các bạn viết các chức năng profile. Bây giờ chúng ta đi vào bài thôi! Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. 1. Khái quátPhần này có nhiệm vụ update các thông tin hồ sơ của tài khoản tác giả cũng như quản trị viên. Các đặc điểm và chức năng trong phần này:
2. Table hồ sơTable này chúng ta đã tạo khi xây dựng chức năng đăng nhập ở bài 6, đó chính là table accounts. Các field chúng ta tương tác là: Bài viết này được đăng tại [free tuts .net]
Mình sẽ chia các field này thành 3 phần để xây dựng
3. Upload ảnh đại diệnChức năng này cũng giống như chức năng upload hình ảnh, các bạn cũng có thể tự code và tham khảo code của mình dưới đây: Xây dựng templateCác bạn mở file admin/templates/profile.php lên và dán nội dung này vào: Hồ sơ cá nhân Upload ảnh đại diện
Sau đó các bạn chạy lại, chúng ta sẽ có kết quả như sau: Viết Ajax gửi dữ liệuTrong phần này chúng ta sẽ viết code gửi dữ liệu 3 chức năng:
Những chức năng trên cũng tương đối giống với của bên upload hình ảnh, chúng ta chỉ lược bỏ các vòng lặp thôi! Các bạn mở file admin/js/form.js và lần lượt copy các đoạn code bên dưới: Xem trước ảnh khi upload// Xem ảnh avatar trước function preUpAvt() { img_avt = $('#img_avt').val(); $('#formUpAvt .box-pre-img').html(' Ảnh xem trước '); $('#formUpAvt .box-pre-img').removeClass('hidden'); // Nếu đã chọn ảnh if (img_avt != '') { $('#formUpAvt .box-pre-img').html('Ảnh xem trước '); $('#formUpAvt .box-pre-img').removeClass('hidden'); $('#formUpAvt .box-pre-img').append(''); } // Ngược lại chưa chọn ảnh else { $('#formUpAvt .box-pre-img').html(''); $('#formUpAvt .box-pre-img').addClass('hidden'); } }Upload ảnh đại diện// Upload ảnh đại diện $('#formUpAvt').submit(function(e) { img_avt = $('#img_avt').val(); $('#formUpAvt button[type=submit]').html('Đang tải ...'); // Nếu có chọn ảnh if (img_avt) { size_img_avt = $('#img_avt')[0].files[0].size; type_img_avt = $('#img_avt')[0].files[0].type; e.preventDefault(); // Nếu lỗi về size ảnh if (size_img_avt > 5242880) { // 5242880 byte = 5MB $('#formUpAvt button[type=submit]').html('Upload'); $('#formUpAvt .alert-danger').removeClass('hidden'); $('#formUpAvt .alert-danger').html('Tệp đã chọn có dung lượng lớn hơn mức cho phép.'); // Nếu lỗi về định dạng ảnh } else if (type_img_avt != 'image/jpeg' && type_img_avt != 'image/png' && type_img_avt != 'image/gif') { $('#formUpAvt button[type=submit]').html('Upload'); $('#formUpAvt .alert-danger').removeClass('hidden'); $('#formUpAvt .alert-danger').html('File ảnh không đúng định dạng cho phép.'); } else { $(this).ajaxSubmit({ beforeSubmit: function() { target: '#formUpAvt .alert-danger', $("#formUpAvt .box-progress-bar").removeClass('hidden'); $("#formUpAvt .progress-bar").width('0%'); }, uploadProgress: function (event, position, total, percentComplete){ $("#formUpAvt .progress-bar").animate({width: percentComplete + '%'}); $("#formUpAvt .progress-bar").html(percentComplete + '%'); }, success: function (data) { $('#formUpAvt button[type=submit]').html('Upload'); $('#formUpAvt .alert-danger').attr('class', 'alert alert-success'); $('#formUpAvt .alert-success').html(data); }, error: function() { $('#formUpAvt button[type=submit]').html('Upload'); $('#formUpAvt .alert-danger').removeClass('hidden'); $('#formUpAvt .alert-danger').html('Không thể upload hình ảnh vào lúc này, hãy thử lại sau.'); }, resetForm: true }); return false; } // Ngược lại không chọn ảnh } else { $('#formUpAvt button[type=submit]').html('Upload'); $('#formUpAvt .alert-danger').removeClass('hidden'); $('#formUpAvt .alert-danger').html('Vui lòng chọn tệp hình ảnh.'); } }); Xoá ảnh đại diện// Xoá ảnh đại diện $('#del_avt').on('click', function() { $confirm = confirm('Bạn có chắc chắn muốn xoá ảnh đại diện này không?'); if ($confirm == true) { $.ajax({ url : $_DOMAIN + 'profile.php', type : 'POST', data : { action : 'delete_avt' }, success : function() { location.reload(); }, error : function() { alert('Đã có lỗi xảy ra, vui lòng thử lại.'); } }); } else { return false; } }); Cái này đã quá quen thuộc rồi nên mình sẽ không giải thích nữa nhé! Viết PHP xử lý dữ liệuỞ phần này, chúng ta chỉ xử lý 2 luồng dữ liệu, đó là:
Trước tiên, các bạn tạo cho mình file admin/profile.php để code, sau đó các bạn copy toàn bộ code bên dưới này vào: query($sql_up_avt); echo 'Upload thành công.'; $db->close(); new Redirect($_DOMAIN.'profile'); } // Nếu tồn tại POST action else if (isset($_POST['action'])) { $action = trim(addslashes(htmlspecialchars($_POST['action']))); // Xoá ảnh đại diện if ($action == 'delete_avt') { if (file_exists('../'.$data_user['url_avatar'])) { unlink('../'.$data_user['url_avatar']); } $sql_delete_avt = "UPDATE accounts SET url_avatar = '' WHERE id_acc = '$data_user[id_acc]'"; $db->query($sql_delete_avt); $db->close(); } } else { new Redirect($_DOMAIN); } } // Ngược lại chưa đăng nhập else { new Redirect($_DOMAIN); // Trở về trang index } ?> Bây giờ các bạn chạy thử xem, mình chắc chắn rằng vẫn còn có cái gì đó không ổn. Đó chính là ảnh đại diện bên sidebar, nó vẫn chưa hiển thị được. Để fix lỗi này các bạn chỉ cần mở file admin/templates/sidebar.php lên và thay đổi code //URL ảnh đại diện tài khoản thành đoạn code dưới đây: // URL ảnh đại diện tài khoản if ($data_user['url_avatar'] == '') { echo $_DOMAIN.'images/profile.png'; } else { echo str_replace('admin/', '', $_DOMAIN).$data_user['url_avatar']; } Bây giờ thì mượt rồi đấy :v 4. Lời kếtBài dài quá rồi, mình sẽ dừng tại đây. Qua bài sau, chúng ta sẽ tiếp tục xây dựng các chức năng còn lại của profile admin. Nếu có gì thắc mắc, các bạn cứ comment bên dưới hoặc đăng bài trên group kèm theo link bài viết để được hỗ trợ nhanh nhất. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công! |