WEB TIN TỨC PHP CĂN BẢN
Bài 1: PHP trang tin tức - Tạo database và cấu trúc folder admin Bài 2: PHP trang tin tức - Viết thư viện xử lý database admin Bài 3: PHP trang tin tức - Viết thư viện session và functions admin Bài 4: PHP trang tin tức - Kết nối database và cấu trúc index admin Bài 5: PHP trang tin tức - Xây dựng header và footer admin Bài 6: PHP trang tin tức - Tạo chức năng đăng nhập, đăng xuất admin Bài 7: PHP trang tin tức - Xây dựng sidebar, content và phân trang admin Bài 8: PHP trang tin tức - Các chức năng chuyên mục admin Bài 9: PHP trang tin tức - Các chức năng chuyên mục admin (tiếp theo) Bài 10: PHP trang tin tức - Các chức năng của hình ảnh admin Bài 11: PHP trang tin tức - Các chức năng của hình ảnh admin (tiếp theo) Bài 12: PHP trang tin tức - Các chức năng của bài viết admin Bài 13: PHP trang tin tức - Các chức năng của bài viết admin (tiếp theo) Bài 14: PHP trang tin tức - Các chức năng cài đặt admin Bài 15: PHP trang tin tức - Các chức năng của tài khoản admin Bài 16: PHP trang tin tức - Các chức năng của tài khoản admin (tiếp theo) Bài 17: PHP trang tin tức - Các chức năng của profile admin Bài 18: PHP trang tin tức - Các chức năng của profile admin (tiếp theo) Bài 19: PHP trang tin tức - Xây dựng dashboard admin và fix bug Bài 20: PHP trang tin tức - Cấu trúc folder client Bài 21: PHP trang tin tức - Kết nối database và rewrite url Bài 22: PHP trang tin tức - Xây dựng header và footer client Bài 23: PHP trang tin tức - Xây dựng layout client Bài 24: PHP trang tin tức - Hiển thị danh sách bài viết mới nhất Bài 25: PHP trang tin tức - Hiển thị danh sách bài viết chuyên mục Bài 26: PHP trang tin tức - Hiển thị nội dung bài viết Bài 27: PHP trang tin tức - Xây dựng chức năng tìm kiếm Bài 28: PHP trang tin tức - Xây dựng các trang con và clear source (End)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 18: PHP trang tin tức - Các chức năng của profile admin (tiếp theo)

Hello, chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng trang tin tức PHP. Trong bài học trước, chúng ta đã xây dựng đựng chức năng cập nhật ảnh đại diện của phần profile admin rồi, ngày hôm nay mình sẽ hướng dẫn các bạn build các chức năng còn lại. Chúng ta đi vào bài học thôi!

1. Cập nhật nội dung bài học

Trước khi vào bài, các bạn vào table accounts và chỉnh sửa field phone sang dạng VARCHAR(11) (thay vì ban đầu là INT(11)).

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

2. Chức năng cập nhật các thông tin

Chức năng này cho phép chúng ta có thể update các thông tin của tài khoản, bao gồm

  • Tên hiển thị
  • Email
  • URL Facebook
  • URL Google
  • URL Twitter
  • Số điện thoại
  • Giới thiệu

Xây dựng template

Các bạn mở file admin/templates/profile.php lên và dán nội dung này bên dưới dòng // Form cập nhật các thông tin còn lại:

echo 
'
	<div class="panel panel-default">
		<div class="panel-heading">Cập nhật thông tin</div>
		<div class="panel-body">
			<form method="POST" onsubmit="return false;" id="formUpdateInfo">
				<div class="form-group">
					<label>Tên hiển thị *</label>
					<input type="text" class="form-control" id="dn_update" value="' . $data_user['display_name'] . '">
				</div>
				<div class="form-group">
					<label>Email *</label>
					<input type="text" class="form-control" id="email_update" value="' . $data_user['email'] . '">
				</div>
				<div class="form-group">
					<label>URL Facebook</label>
					<input type="text" class="form-control" id="fb_update" value="' . $data_user['facebook'] . '">
				</div>
				<div class="form-group">
					<label>URL Google</label>
					<input type="text" class="form-control" id="gg_update" value="' . $data_user['google'] . '">
				</div>
				<div class="form-group">
					<label>URL Twitter</label>
					<input type="text" class="form-control" id="tt_update" value="' . $data_user['twitter'] . '">
				</div>
				<div class="form-group">
					<label>Số điện thoại</label>
					<input type="text" class="form-control" id="phone_update" value="' . $data_user['phone'] . '">
				</div>
				<div class="form-group">
					<label>Giới thiệu</label>
					<textarea id="desc_update" class="form-control">' . $data_user['description'] . '</textarea>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary">Lưu thay đổi</button>
				</div>
				<div class="alert alert-danger hidden"></div>
			</form>
		</div>
	</div>
';

// Form đổi mật khẩu

Lưu và sao đó chạy project, các bạn sẽ được kết quả như hình:

php trang tin tuc cac chuc nang cua profile admin tiep theo ket qua template cap nhat thong tin khac jpgViết Ajax gửi dữ liệu

Cái này mình nghĩ sẽ rất đơn giản nếu bạn nào đã theo dõi đến bài này của series, các bạn hãy thử code và đối chiếu với code của mình bên dưới nhé.

Mở file admin/js/form.js và dán dòng code này vào:

// Cập nhật thông tin khác
$('#formUpdateInfo button').on('click', function() {
	$('#formUpdateInfo button').html('Đang tải ...');
	$dn_update = $('#dn_update').val();
	$email_update = $('#email_update').val();
	$fb_update = $('#fb_update').val();
	$gg_update = $('#gg_update').val();
	$tt_update = $('#tt_update').val();
	$phone_update = $('#phone_update').val();
	$desc_update = $('#desc_update').val();

	if ($dn_update && $email_update) {
		$.ajax({
			url : $_DOMAIN + 'profile.php',
			type : 'POST',
			data : {
				dn_update : $dn_update,
				email_update : $email_update,
				fb_update : $fb_update,
				gg_update : $gg_update,
				tt_update : $tt_update,
				phone_update : $phone_update,
				desc_update : $desc_update,
				action : 'update_info'
			}, success : function(data) {
				$('#formUpdateInfo .alert').removeClass('hidden');
				$('#formUpdateInfo .alert').html(data);
			}, error : function() {
				$('#formUpdateInfo .alert').removeClass('hidden');
				$('#formUpdateInfo .alert').html('Đã có lỗi xảy ra, vui lòng thử lại.');
			}
		});
		$('#formUpdateInfo button').html('Lưu thay đổi');
	} else {
		$('#formUpdateInfo button').html('Lưu thay đổi');
        $('#formUpdateInfo .alert').removeClass('hidden');
        $('#formUpdateInfo .alert').html('Vui lòng điền đầy đủ thông tin.');
	}
});

Viết PHP xử lý dữ liệu

Cái này cũng quá quen thuộc rồi, ở phần này chúng ta chỉ cần kiểm tra cái field: tên hiển thị, email và số điện thoại (nếu có).

Các bạn mở file admin/profile.php và dán đoạn code này bên dưới code // Xoá ảnh đại diện:

// Cập nhật các thông tin 
else if ($action == 'update_info')
{
	// Xử lý các giả trị
	$dn_update = trim(htmlspecialchars(addslashes($_POST['dn_update'])));
	$email_update = trim(htmlspecialchars(addslashes($_POST['email_update'])));
	$fb_update = trim(htmlspecialchars(addslashes($_POST['fb_update'])));
	$gg_update = trim(htmlspecialchars(addslashes($_POST['gg_update'])));
	$tt_update = trim(htmlspecialchars(addslashes($_POST['tt_update'])));
	$phone_update = trim(htmlspecialchars(addslashes($_POST['phone_update'])));
	$desc_update = trim(htmlspecialchars(addslashes($_POST['desc_update'])));

	// Các biến xử lý thông báo
	$show_alert = '<script>$("#formUpdateInfo .alert").removeClass("hidden");</script>';
	$hide_alert = '<script>$("#formUpdateInfo .alert").addClass("hidden");</script>';
	$success = '<script>$("#formUpdateInfo .alert").attr("class", "alert alert-success");</script>';

	if ($dn_update && $email_update) {
		// Kiểm tra tên hiển thị
		if (strlen($dn_update) < 3 || strlen($dn_update) > 50) {
			echo $show_alert.'Tên hiển thị phải nằm trong khoảng từ 3-50 ký tự.';
		// Kiểm tra email	
		} else if (filter_var($email_update, FILTER_VALIDATE_EMAIL) === FALSE) {
			echo $show_alert.'Email không hợp lệ.';
		// Kiểm tra số điện thoại
		} else if ($phone_update && (strlen($phone_update) < 10 || strlen($phone_update) > 11 || preg_match('/^[0-9]+$/', $phone_update) == false)) {
			echo $show_alert.strlen($phone_update) . 'Số điện thoại không hợp lệ.';
		} else {
			$sql_update_info = "UPDATE accounts SET
				display_name = '$dn_update',
				email = '$email_update',
				facebook = '$fb_update',
				google = '$gg_update',
				twitter = '$tt_update',
				phone = '$phone_update',
				description = '$desc_update'
				WHERE id_acc = '$data_user[id_acc]'
			";
			$db->query($sql_update_info);
			echo $success.'Cập nhật thông tin thành công.';
			new Redirect($_DOMAIN.'profile');
		}
	} else {
		echo $show_alert.'Vui lòng điền đầy đủ thông tin.';
	}
}
Bây giờ các bạn chạy lại và update thông tin thử xem nhé!

3. Chức năng đổi mật khẩu

Đây là chức năng cuối cùng trong phần này, chức năng cũng đơn giản nên các bạn có thể tự làm và tham khảo code của mình nhé!

Xây dựng template

Các bạn copy nội dung này và chèn bên dưới dòng // Form đổi mật khẩu trong file admin/templates/profile.php:

echo 
'
	<div class="panel panel-default">
		<div class="panel-heading">Đổi mật khẩu</div>
		<div class="panel-body">
			<form method="POST" id="formChangePw" onsubmit="return false;">
				<div class="form-group">
					<label>Mật khẩu cũ</label>
					<input type="password" class="form-control" id="oldPwChange">
				</div>
				<div class="form-group">
					<label>Mật khẩu mới</label>
					<input type="password" class="form-control" id="newPwChange">
				</div>
				<div class="form-group">
					<label>Nhập lại mật khẩu mới</label>
					<input type="password" class="form-control" id="reNewPwChange">
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary">Lưu thay đổi</button>
				</div>
				<div class="alert alert-danger hidden"></div>
			</form>
		</div>
	</div>
';
Các bạn reload sẽ được kết quả bên dưới:

php trang tin tuc cac chuc nang cua profile admin tiep theo ket qua template doi mat khau jpg

Viết Ajax gửi dữ liệu

Mở file admin/js/form.js lên, sau đó các bạn dán đoạn code này:

$('#formChangePw button').on('click', function() {
	$('#formChangePw button').html('Đang tải ...');	
	$old_pw_change = $('#old_pw_change').val();
	$new_pw_change = $('#new_pw_change').val();
	$re_new_pw_change = $('#re_new_pw_change').val();

	if ($old_pw_change && $new_pw_change && $re_new_pw_change) {
		$.ajax({
			url : $_DOMAIN + 'profile.php',
			type : 'POST',
			data : {
				old_pw_change : $old_pw_change,
				new_pw_change : $new_pw_change,
				re_new_pw_change : $re_new_pw_change,
				action : 'change_pw'
			}, success : function(data) {
				$('#formChangePw .alert').removeClass('hidden');
        		$('#formChangePw .alert').html(data);
			}, error : function() {
				$('#formChangePw .alert').removeClass('hidden');
        		$('#formChangePw .alert').html('Đã có lỗi xảy ra, vui lòng thủ lại.');
			}
		});
		$('#formChangePw button').html('Lưu thay đổi');
	} else {
		$('#formChangePw button').html('Lưu thay đổi');
        $('#formChangePw .alert').removeClass('hidden');
        $('#formChangePw .alert').html('Vui lòng điền đầy đủ thông tin.');
	}
});

Viết PHP xử lý dữ liệu

Các bạn copy đoạn code này bên dưới code // Cập nhật thông tin trong file admin/profile.php:

// Đổi mật khẩu
else if ($action == 'change_pw') 
{
	// Xử lý các giá trị
	$old_pw_change = md5($_POST['old_pw_change']);
	$new_pw_change = trim(htmlspecialchars(addslashes($_POST['new_pw_change'])));
	$re_new_pw_change = trim(htmlspecialchars(addslashes($_POST['re_new_pw_change'])));

	// Các biến xử lý thông báo
	$show_alert = '<script>$("#formChangePw .alert").removeClass("hidden");</script>';
	$hide_alert = '<script>$("#formChangePw .alert").addClass("hidden");</script>';
	$success = '<script>$("#formChangePw .alert").attr("class", "alert alert-success");</script>';

	if ($old_pw_change && $new_pw_change && $re_new_pw_change) {
		// Kiểm tra mật khẩu cũ chính xác
		if ($old_pw_change != $data_user['password']) {
			echo $show_alert.'Mật khẩu cũ không chính xác.';
		// Kiểm tra mật khẩu mới	
		} else if (strlen($new_pw_change) < 6) {
			echo $show_alert.'Mật khẩu mới quá ngắn.';
		// Kiểm tra mật khẩu mới khớp với mật khẩu mới nhập lại	
		} else if ($new_pw_change != $re_new_pw_change) {
			echo $show_alert.'Mật khẩu mới nhập lại không khớp.';
		} else {
			$new_pw_change = md5($new_pw_change);
			$sql_change_pw = "UPDATE accounts SET password = '$new_pw_change' WHERE id_acc = '$data_user[id_acc]'";
			$db->query($sql_change_pw);
			echo $success.'Thay đổi mật khẩu thành công.';
			new Redirect($_DOMAIN.'profile');
		}
	} else {
		echo $show_alert.'Vui lòng điền đầy đủ thông tin.';
	}
}
Ok rồi, giờ các bạn chiêm ngưỡng thành quả thôi :v

4. Lời kết

Phù! Thế là đã xong phần profile admin rồi. Qua bài sau, chúng ta sẽ build phần cuối cùng trong admin, đó là dashboard. Nếu có gì thắc mắc, các bạn cứ comment bên dưới hoặc đăng trên group kèm theo link bài viết để được hỗ trợ sớm nhất. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công!

Cùng chuyên mục:

Hàm key_exists() trong PHP

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP

Top