0
Mã nguồn trang web hiển thị chồng ảnh đơn giản sử dụng PHP và API

Trang web Image Stack hoạt động như thế nào?

Trang web Image Stack sử dụng Pexels API. Khách truy cập có thể khám phá nhiều hình ảnh đa dạng trên trang. Mỗi trang hiển thị 40 hình ảnh dựa trên từ khóa được nhập vào ô tìm kiếm. Tính năng tìm kiếm cho phép người dùng lọc các hình ảnh phù hợp với từ khóa đã nhập. Ngoài ra, người dùng có thể xem trước hình ảnh bằng cách nhấp vào ảnh đó; hành động này sẽ mở ra một cửa sổ bật lên (modal) hiển thị tên nhiếp ảnh gia, các nút tải xuống cho nhiều kích thước ảnh khác nhau và hình ảnh ở kích thước lớn hơn.

Các tính năng và chức năng

  1. Ứng dụng sở hữu các tính năng và chức năng sau:

  2. Hiển thị bộ sưu tập hình ảnh dạng xếp chồng (stack)

  3. Phân trang

  4. Ô tìm kiếm

  5. Cửa sổ xem trước (modal)

  6. Hiển thị thông tin chi tiết

  7. Liệt kê các liên kết tải xuống cho từng kích thước ảnh có sẵn

Công nghệ:

  1. Dự án sử dụng các công nghệ sau để phát triển:

  2. PHP

  3. Pexels API [https://pexels.com/api]

  4. HTML

  5. CSS

  6. Bootstrap Framework

  7. Thư viện jQuery

php-image-stack-search.pngphp-image-stack-search-preview.png

Chưa có changelog.

Cách chạy chương trình?

Yêu cầu

  1. Tải xuống và cài đặt một máy chủ web cục bộ (local web server) bất kỳ, chẳng hạn như XAMPP.

  2. Tải xuống tệp zip chứa mã nguồn (nút tải xuống nằm ở bên dưới).

  3. Tạo Khóa API Pexel

  4. Đăng nhập hoặc Đăng ký tài khoản trên pexels.com.

  5. Sau khi đăng nhập thành công, hãy nhấp vào biểu tượng ảnh đại diện người dùng trên thanh điều hướng. Từ menu thả xuống, chọn Image and Video API.

pexels-api.png

Nhấn nút Your API Key để tạo khóa API của bạn.

pexels-generated-api.png

Cài đặt/Thiết lập hệ thống

  1. Mở XAMPP Control Panel và khởi động Apache.

  2. Giải nén tệp zip chứa mã nguồn đã tải về.

  3. Sao chép thư mục mã nguồn vừa giải nén và dán vào thư mục "htdocs" của XAMPP.

  4. Truy cập PHPMyAdmin trên trình duyệt (ví dụ: http://localhost/phpmyadmin).

  5. Tìm và mở tệp stackAPI.class.php bằng trình soạn thảo mã nguồn mà bạn thường dùng.

  6. Thay thế giá trị $this->apiKey bằng Pexels API Key của bạn và lưu lại.

  7. Truy cập trang web Simple Image Stack trên trình duyệt (ví dụ: http://localhost/php-image-stack/).

License cá nhân — dùng cho 1 dự án. Liên hệ nếu cần commercial/multi-site.

Hỗ trợ cài đặt cơ bản qua email/zalo trong 7 ngày đầu sau khi mua.

Cần tuỳ biến sâu? Liên hệ để báo giá.

0.0
0 đánh giá