Hướng dẫn tạo trang quản lý thành viên PHP – cập nhật thông tin user (phần 3)
Ở bài trước, chúng ta đã dừng lại ở việc hiển thị dữ liệu danh sách thành viên có trong cơ sở dữ liệu ra ngoài dưới dạng bảng. Trong bài viết này, mình sẽ tiếp tục hướng dẫn các bạn bổ sung thêm chức năng cập nhật thông tin thành viên.
Review lại mục 3 ở bài viết trước , trên mỗi dòng của table, cột hành động, chúng ta có các chức năng là Sửa
<td> <a href="chinh-sua-thanh-vien.php?id=<?php echo $data["id"]; ?>">Sửa</a> </td>
Khi người dùng click link này, người quản trị sẽ được chuyển hướng tới các trang chinh-sua-thanh-vien.php , trong trang này chúng ta sẽ viết các đoạn mã làm nhiệm vụ sửa các thông tin của user như là họ tên, địa chỉ email, quyền và lưu xuống cơ sở dữ liệu.
3. Tạo trang quản lý thành viên
a. Trang sửa thông tin thành viên
Tạo file chinh-sua-thanh-vien.php, đặt trong thư mục admin.
Trong trang này, chúng ta sẽ dùng phương thức $_GET để lấy biến id của người dùng truyền qua từ bên trang quan-ly-thanh-vien.php, sau đó thực hiện việc gọi vào cơ sở dữ liệu, thông qua biến id để truy vấn toàn bộ thông tin người dùng lên để quản trị viên có thể xem được thông tin người dùng, đồng thời tiến hành cập nhật khi quản trị viên chỉnh sửa một thông tin nào đó.
Bước 1 : Tạo form hiển thị thông tin
Trong file quan-ly-thanh-vien.php, gõ đoạn code như bên dưới để thiết kế một form dùng để hiển thị thông tin thành viên với các field họ tên, địa chỉ email, cấp độ và một button để lưu thông tin xuống cơ sở dữ liệu.
<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">
<title>Thông tin thành viên</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h3> Thông tin thành viên</h3>
<form method="POST" name="fr_update">
<table class="table">
<caption>Danh sách thành viên đã đăng ký</caption>
<input type="hidden" name="id_user" value="">
<tr><td>Họ tên : </td><td><input type="text" name="name" /></td></tr>
<tr><td>Địa chỉ email : </td><td><input type="text" name="email" /></td></tr>
<tr>
<td>Cấp độ : </td>
<td>
<select name="level">
<option value="1">Administrator</option>
<option value="2">Member</option>
</select>
</td>
</tr>
<tr><td colspan="2"><input type="submit" name="save" value="Lưu thông tin"></td></tr>
</table>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body></html>
Vào http://localhost/my_website/admin/chinh-sua-thanh-vien.php, các bạn sẽ thấy giao diện như sau :
Vậy là chúng ta đã thiết kế xong giao diện hiển thị thông tin.
Bước 2 : thực hiện truy vấn, hiển thị thông tin
Như những lần trước, để gọi vào cơ sở dữ liệu, ta phải require_one trang connection.php vào
<?php
require_once("../lib/connection.php");
?>
tiếp đến, lấy tham số id được truyền tới bằng biến $_GET và kiểm tra xem biến có tồn tại hay không bằng từ khóa isset (nếu tồn tại sẽ trả về true, ngược lại sẽ trả về false). Nếu tồn tại biến id, ta sẽ thực thi việc lấy thông tin thành viên thông qua biến id đó.
<?php
require_once("../lib/connection.php");
if (isset($_GET["id"])) {
//thực hiện việc lấy thông tin user
}
?>
Sau khi đã lấy thông tin user, ta sẽ truy vấn dữ liệu và hiển thị dữ liệu
Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!
<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">
<title>Thông tin thành viên</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<?php
require_once("../lib/connection.php");
$id = "";
$name = "";
$email = "";
$level = "";
if (isset($_GET["id"])) {
//thực hiện việc lấy thông tin user
$id = $_GET["id"];
$sql = "select * from users where id = $id";
$query = mysqli_query($conn, $sql);
while ( $data = mysqli_fetch_array($query) ) {
$name = $data["name"];
$email = $data["email"];
$level = $data["level"];
}
}
?>
<h3> Thông tin thành viên</h3>
<form method="POST" name="fr_update">
<table class="table">
<caption>Danh sách thành viên đã đăng ký</caption>
<input type="hidden" name="id_user" value="<?php echo $id; ?>">
<tr><td>Họ tên : </td><td><input type="text" name="name" value="<?php echo $name; ?>" /></td></tr>
<tr><td>Địa chỉ email : </td><td><input type="text" name="email" value="<?php echo $email; ?>"/></td></tr>
<tr>
<td>Cấp độ : </td>
<td>
<select name="level">
<option value="1" <?php echo ($level == 1)?"selected":""; ?>>Administrator</option>
<option value="2" <?php echo ($level == 2)?"selected":""; ?>>Member</option>
</select>
</td>
</tr>
<tr><td colspan="2"><input type="submit" name="save" value="Lưu thông tin"></td></tr>
</table>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body></html>
Ở đoạn code trên, sau khi đã truy vấn các thông tin trong cơ sở dữ liệu như name, email, level. Ta sẽ tiến hành gửi các giá trị này vào thuộc tính value của các thẻ <input> để hiển thị thông tin ứng với mỗi field. Các bạn lưu ý đoạn code
<?php echo ($level == 1)?"selected":""; ?>
đây chỉ đơn giản là cách viết tắt của đoạn code sau :
<?php
if($level == 1){
echo "selected";
}else{
echo "";
}
?>
để hiểu rõ hơn, các bạn có thể lên google, gõ từ khóa “PHP Shorthand If / Else” để đọc nhé. Mục đích của đoạn code trên là mình sẽ kiểm tra nếu mà dữ liệu level bằng 1 thì sẽ ép dropdown hiển thị tùy chọn là Administrator, ngược lại nếu bằng 2 sẽ là Member
Lưu lại toàn bộ code đã thay đổi, chạy link http://localhost/my_website/admin/chinh-sua-thanh-vien.php?id=1 (với id là tham số truyền từ trang quan-ly-thanh-vien.php), các bạn sẽ được kết quả như sau :
Tiếp đến, chúng ta sẽ tiếp tục xử lý nút Lưu thông tin để lưu thông tin người dùng khi quản trị viên thay đổi bất kỳ 1 thông tin nào đó.
if (isset($_POST["save"])) {
$id_user = $_POST["id_user"];
$name = $_POST["name"];
$email = $_POST["email"];
$level = $_POST["level"];
$sql = "update users set name = '$name', email = '$email', level = '$level' where id = $id_user";
mysqli_query($conn, $sql);
}
Toàn bộ code cho trang chinh-sua-thanh-vien.php
<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">
<title>Thông tin thành viên</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<?php
require_once("../lib/connection.php");
if (isset($_POST["save"])) {
$id_user = $_POST["id_user"];
$name = $_POST["name"];
$email = $_POST["email"];
$level = $_POST["level"];
$sql = "update users set name = '$name', email = '$email', level = '$level' where id = $id_user";
mysqli_query($conn, $sql);
}
$id = "";
$name = "";
$email = "";
$level = "";
if (isset($_GET["id"])) {
//thực hiện việc lấy thông tin user
$id = $_GET["id"];
$sql = "select * from users where id = $id";
$query = mysqli_query($conn, $sql);
while ( $data = mysqli_fetch_array($query) ) {
$name = $data["name"];
$email = $data["email"];
$level = $data["level"];
}
}
?>
<h3> Thông tin thành viên</h3>
<form method="POST" name="fr_update">
<table class="table">
<caption>Danh sách thành viên đã đăng ký</caption>
<input type="hidden" name="id_user" value="<?php echo $id; ?>">
<tr><td>Họ tên : </td><td><input type="text" name="name" value="<?php echo $name; ?>" /></td></tr>
<tr><td>Địa chỉ email : </td><td><input type="text" name="email" value="<?php echo $email; ?>"/></td></tr>
<tr>
<td>Cấp độ : </td>
<td>
<select name="level">
<option value="1" <?php echo ($level == 1)?"selected":""; ?>>Administrator</option>
<option value="2" <?php echo ($level == 2)?"selected":""; ?>>Member</option>
</select>
</td>
</tr>
<tr><td colspan="2"><input type="submit" name="save" value="Lưu thông tin"></td></tr>
</table>
</form>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body></html>
Trong bài tiếp theo, chúng ta sẽ tiếp tục làm tiếp chức năng xóa user ra khỏi hệ thống. Đến đây nếu bạn có bất kỳ thắc mắc nào thì để lại comment bên dưới nhé !
a ơi, cho em hỏi xíu, sao em tạo 1 file dùng để chỉnh sửa dữ liệu lúc chạy cục bộ bằng xampp thì chỉnh sửa xong lưu lại thì ok, nhưng lên hosting thì không lưu lại dữ liệu chỉnh sửa đc, mặc dù không thấy báo lỗi gì. anh biết chỉ giúp em với. em cám ơn nhiều ạ
lên host lưu thì thường là có thể không tương thích hoặc kết nối chưa đúng, e thử echo để debug ngay đoạn code lưu xem nó lưu được không