Trong bài này, mình sẽ hướng dẫn các bạn thiết kế giao diện trang quản lý thành viên. Đây là một trang sẽ nằm bên trong mục quản trị của website dùng để quản lý thông tin thành viên của website.

Thiết kế giao diện

Việc thiết kế giao diện trang quản lý thành viên của chúng ta sẽ bao gồm :

  • Bảng hiển thị danh sách thành viên
  • Mỗi một dòng hiển thị thành viên sẽ có liên kết chỉnh sửa để chỉnh sửa thông tin thành viên, liên kết xóa thành viên
  • Bên trên bảng sẽ chứa liên kết Thêm thành viên, khi ấn vào sẽ di chuyển đến trang thêm thành viên

1. Tạo trang quan-ly-thanh-vien.php

Mình sẽ tạo một file mới tên là quan-ly-thanh-vien.php đặt trong thư mục admin như sau

tạo trang quản lý thành viên - thiết kế gao diện

2. Include các file cần thiết vào

Đầu tiên, chúng ta sẽ copy nội dung như sau bỏ vào file quan-ly-thanh-vien.php

<?php
	session_start(); 
 ?>
<?php require_once("includes/connection.php");?>
<?php include("includes/permission.php");?>
<?php include ("includes/header.php"); ?>

<?php include "includes/footer.php" ?>

Đây chính là mẫu template mà chúng ta đã tạo ra ở các bài trước include :

  • connection : khởi tạo kết nối đến database
  • permission : để kiểm tra quyền xem người truy cập có đủ quyền truy câp file này hay không
  • header : chứa thông tin phần đầu header của trang
  • footer : chứa thông tin phần cuối footer của trang

Khi chạy file quan-ly-thanh-vien.php trên trang localhost chúng ta sẽ có giao diện như hình dưới

giao diện trang quản lý thành viên còn trống - thiết kế giao diện
Giao diện trang quản lý thành viên còn trống

Giao diện lúc này hoàn toàn trống vì ta chỉ mới include các file cần thiết vào.

3. Tiến hành thiết kế giao diện

a. Thêm link dẫn đến trang thêm bài viết

Đầu tiên chúng ta sẽ gắn một liên kết trên trang quan-ly-thanh-vien.php dẫn tới trang them-thanh-vien.php

<a href="them-thanh-vien.php">Thêm thành viên</a>

b. Tạo bảng hiển thị thông tin thành viên

Tiếp theo chúng ta sẽ tiến hành tạo bảng hiển thị thông tin thành viên bao gồm các cột

  1. ID : Hiển thị mã số ID của user
  2. Username : Hiển thị thông tin username
  3. Email : Thông tin email user
  4. Khóa tài khoản : Hiển thị tài khoản người dùng này có bị khóa không
  5. Quyền : Hiện thị quyền của người đó là admin hay member
  6. Hành động : Chứa chức năng chỉnh sửa và xóa người dùng
<table border="1px;" align="center">
	<thead>
		<tr>
			<td bgcolor="#E6E6FA">ID</td>
			<td bgcolor="#E6E6FA">Username</td>
			<td bgcolor="#E6E6FA">Email</td>
			<td bgcolor="#E6E6FA">Khóa tài khoản</td>
			<td bgcolor="#E6E6FA">Quyền</td>
			<td bgcolor="#E6E6FA">Hành động</td>
		<tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>username 1</td>
			<td>email 1</td>
			<td>Không</td>
			<td>Admin</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=1">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=1">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>username 2</td>
			<td>email 2</td>
			<td>Có</td>
			<td>Thành viên</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=2">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=2">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>username 3</td>
			<td>email 3</td>
			<td>Có</td>
			<td>Admin</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=3">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=3">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>4</td>
			<td>username 4</td>
			<td>email 4</td>
			<td>Không</td>
			<td>Thành viên</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=4">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=4">Xóa</a>
			</td>
		</tr>
	</tbody>
</table>

Đoạn code ở trên là mình đã thiết kế một bảng mẫu để hiện thông tin thông tin người dùng, mỗi một dòng dữ liệu trong bảng sẽ chưa thông tin mình đã liệt kê ở trên.

Tuy nhiên các bạn lưu ý giùm mình ở đoạn code này

<a href="chinh-sua-thanh-vien.php?id=4">Sửa</a>
<a href="quan-ly-thanh-vien.php?id_delete=4">Xóa</a>
  • Đường dẫn đầu tiên dùng để sửa thông tin thành viên, đơn giản chỉ là chuyển hướng người dùng tới trang chinh-sua-thanh-vien.php và truyền mã id của người đó vào để chúng ta sẽ thực hiện sửa thông tin người dùng trong các bài hướng dẫn về sau
  • Đường dẫn thứ 2 sẽ dẫn liên kết tới chính trang quan-ly-thanh-vien.php và truyền mã id_delete (id của người dùng) vào để chúng ta sẽ tiến hành xóa người dùng ra khỏi hệ thống thông qua id này

c. Toàn bộ code trang quản lý thành viên – thiết kế giao diện 

Như vậy, toàn bộ code của phần thiết kế giao diện cho trang quản lý thành viên sẽ như sau

<?php
	session_start(); 
 ?>
<?php require_once("includes/connection.php");?>
<?php include("includes/permission.php");?>
<?php include ("includes/header.php"); ?>
<a href="them-thanh-vien.php">Thêm thành viên</a>
<table border="1px;" align="center">
	<thead>
		<tr>
			<td bgcolor="#E6E6FA">ID</td>
			<td bgcolor="#E6E6FA">Username</td>
			<td bgcolor="#E6E6FA">Email</td>
			<td bgcolor="#E6E6FA">Khóa tài khoản</td>
			<td bgcolor="#E6E6FA">Quyền</td>
			<td bgcolor="#E6E6FA">Hành động</td>
		<tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>username 1</td>
			<td>email 1</td>
			<td>Không</td>
			<td>Admin</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=1">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=1">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>username 2</td>
			<td>email 2</td>
			<td>Có</td>
			<td>Thành viên</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=2">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=2">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>username 3</td>
			<td>email 3</td>
			<td>Có</td>
			<td>Admin</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=3">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=3">Xóa</a>
			</td>
		</tr>
		<tr>
			<td>4</td>
			<td>username 4</td>
			<td>email 4</td>
			<td>Không</td>
			<td>Thành viên</td>
			<td>
				<a href="chinh-sua-thanh-vien.php?id=4">Sửa</a>
				<a href="quan-ly-thanh-vien.php?id_delete=4">Xóa</a>
			</td>
		</tr>
	</tbody>
</table>
<?php include "includes/footer.php" ?>

Các bạn lưu lại và chạy thử sẽ thấy kết quả hiển thị như hình dưới đây

Thiết kế giao diện trang quản lý thành viên
Thiết kế giao diện trang quản lý thành viên

Tổng kết

Bài viết tạo trang quản lý thành viên, phần thiết kế giao diện đã khá dài, mình sẽ tạm dừng ở đây, để các bạn dễ nắm, vì viết nhiều quá trong một bài sẽ làm cho nhiều bạn mới học cảm thấy lúng túng.

Nếu bạn có bất kỳ thắc mắc thì để lại bình luận bên dưới bài viết, mình sẽ giải đáp.

Nguồn: cungfuphp.com