[BÀI 35] HƯỚNG DẪN VIẾT MỘT TRANG WEB CƠ BẢN (PHẦN 4: THỰC HIỆN CHỨC NĂNG QUẢN LÝ BANNER)

Trong trang web tôi hướng dẫn các bạn làm, banner đóng vai trò rất quan trọng, thể hiện được điều mà chủ website muốn khách hàng chú ý, mà truyền tải thông điệp tới khách hàng. Nội dung của một banner luôn nổi bật và đây là phần mà khách hàng dễ dàng quan sát nhất.

Một số chức năng cơ bản để quản lý banner:

  • Thêm banner mới
  • Sửa banner cũ
  • Xóa một banner đã có

Trong thực tế, để quản lý một banner sẽ cần nhiều chức năng hơn như thế này, song để bắt đầu chúng ta hãy bắt đầu với những chức năng đơn giản và cơ bản nhất.

Thêm một banner mới:

Phần menu tôi đã tạo sẵn một mục là banner dùng để quản lý các chức năng về banner:

ql-banner

Tôi sẽ sửa “banner hiện tại” thành “danh sách banner” và thêm một mục nữa là “thêm banner mới”, để làm điều này tôi vào file admin/view/layout/layout.php và sửa lại như sau:

Sau khi chỉnh sửa, menu banner sẽ hiển thị như sau:

menu-banner

Tạo trang thêm banner:

Tạo một folder tên là “banner” trong thư mục admin/view/

Tiếp tục tạo file add.php trong thư mục admin/view/banner/add.php

Trong file admin/view/banner/add.php tôi viết như sau:

Tạo một bảng lưu thông tin các banner trong csdl:

  • Tạo một bảng có tên là banner.
  • Trong bảng banner tạo 2 trường sau: id (kiểu int – khóa chính – tự động tăng) , link (để lưu tên hình ảnh, kiểu varchar 200)

Tạo một controller để quản lý banner:

  • Trong thư mục admin/controller/ tôi tạo một file có tên là controller_banner.php
  • file admin/controller/controller_banner.php tôi viết như sau:

  • Đừng quên tạo một thư mục imgs ngang cấp với thư mục admin, và trong thư mục imgs hãy tạo một thư mục có tên là banner (để lưu các ảnh của banner vào đây).
  • Cấu trúc file sẽ như sau:
  • cau-truc-file-imgs

Kết thúc bước này các bạn đã upload được ảnh vào thư mục imgs/banner và lưu tên ảnh vào csdl.

Thực hiện chức năng hiển thị danh sách ảnh banner:

Tạo view danh sách: tôi tạo một file có tên là list.php nằm trong thư mục admin/view/banner/ để viết giao diện hiển thị danh sách banner.

File admin/view/banner/list.php tôi viết như sau:

Quay lại file admin/controller/controller_banner.php, tôi viết tiếp lệnh xử lý hiển thị danh sách như sau:

Sau đó tôi quay lại sửa file admin/view/banner/list.php để đổ dữ liệu vừa select vào đấy:

Viết chức năng sửa banner:

Trang danh sách banner sẽ hiển thị như sau:

giao-dien-danh-sach-banner

Tôi có tạo một nút “Sửa” (màu xanh) để có thể sửa hình ảnh. và nút sửa này là 1 thẻ a để tôi truyền biến do=edit và id= id của ảnh. Giống như bài trước, ở bài này tôi sẽ hướng dẫn các bạn xóa ảnh theo id.

Các bước để xóa 1 ảnh:

  • Chỉ thực hiện khi người dùng submit form sửa.
  • Lấy ảnh mới mà người dùng vừa thêm và tải vào mục imgs/banner/ đồng thời update trường “link” trong csdl
  • Xoá ảnh cũ.

Tạo một file để hiển thị trang sửa banner: trong thư mục admin/view/ tôi tạo file là edit.php. file này có nội dung như sau:

Sau đó tôi quay lại file admin/controller/controller_banner.php viết tiếp các lệnh: lấy dữ liệu ảnh cũ đổi ra màn hình. sau đó thực hiện cập nhật nếu form được nhấn. Chi tiết như sau:

Và tôi sửa lại link edit và del banner trong trang admin/view/banner/list.php thành: index.php?controller=banner&act=edit&id=… , và index.php?controller=banner&act==del&id= cho ngắn hơn:

Quay lại file admin/view/banner/edit.php tôi đổ dữ liệu vừa select ra vào giao diện này:

Đến bước này, bạn đã có thể thay đổi ảnh banner.

Xóa một banner:

Quay lại trang danh sách, tôi muốn khi nhấn vào nút “xóa”, thì tôi sẽ xóa hình ảnh đấy theo id:

Trong file admin/controller/controller_banner.php tôi viết hàm xóa như sau:

Tuy nhiên ở bước trước tôi có viết link xóa thừa 1 dấu bằng “=” cho nên sẽ không thực hiện được, link cũ của tôi là: index.php?controller=banner&act==del&id= tôi sửa lại thành  index.php?controller=banner&act=del&id= , chi tiết tôi sửa ở file admin/view/banner/list.php như sau:

Đến đây, tôi đã hoàn tất hướng dẫn các bạn thực hiện các thao tác quản lý banner cơ bản, chúc các bạn thành công. Tải toàn bộ mã nguồn bài hôm nay tại đây!

Xem video hướng dẫn thực hiện chức năng quản lý banner: