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

Đâ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

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

Đ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

  • Đườ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

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.

Đăng ký nhận bài viết theo mẫu bên dưới để cập nhật những bài viết mới nhất trên kungfu php qua email nhé !


Nếu bạn thấy bài viết có ích và muốn cảm ơn mình thì bạn có thể donate mời mình 1 lý cà phê nhé
Địa chỉ ví BTC của mình : 1NWVkBYnd5iSZ5BsAg4fbr4bYWC7hn9Vcz
Địa chỉ ví ETH của mình : 0xa4881fe9ed28b270a7a7F6D339fe0B73c35DBAd1
Cám ơn và chúc bạn nhiều niềm vui trong cuộc sống !