Làm cách nào để tạo thư viện ảnh trong PHP?

Question

Trong hướng dẫn này, chúng ta sẽ tạo một hệ thống thư viện an toàn với PHP, MySQL và JavaScript. Chúng tôi sẽ sử dụng PHP và HTML để điền vào tất cả các hình ảnh của chúng tôi, những hình ảnh này sẽ được lấy từ cơ sở dữ liệu MySQL. Ngoài ra, chúng tôi sẽ tạo một cửa sổ bật lên sáng tạo sẽ hiển thị hình ảnh tương ứng ở độ phân giải cao hơn

Nội dung chính Show

Hệ thống thư viện là gì?
1. Bắt đầu
1. 1. Yêu cầu
1. 2. Bạn sẽ học được gì trong Hướng dẫn này
1. 3. Cấu trúc & Thiết lập Tệp
Cấu trúc tệp
2. Tạo cơ sở dữ liệu và thiết lập bảng
3. Thiết kế hệ thống thư viện bằng CSS
4. Tạo tệp chức năng
5. Tạo Trang chủ
6. Tạo trang tải lên
7. Tạo Trang Xóa
Phần kết luận
Gói (Tiết kiệm 53%)
về tác giả
Làm cách nào để tạo thư viện ảnh động trong PHP?
Làm cách nào để tạo thư viện ảnh trong PHP và MySQL?
Làm cách nào để hiển thị động một hình ảnh trong PHP?
Làm cách nào để hiển thị nhiều hình ảnh từ cơ sở dữ liệu MySQL trong PHP bằng thanh trượt hình ảnh?

Hệ thống thư viện là gì?

Chúng tôi có thể sử dụng hệ thống thư viện để giới thiệu và sắp xếp hình ảnh của mình. Vì hệ thống dựa trên trực tuyến nên bất kỳ ai có URL đều có thể xem và tải lên hình ảnh

Bao gồm các tính năng bổ sung và liên kết tải xuống mã nguồn. Ngoài ra, nó chứa mã nguồn hướng dẫn và phiên bản cơ bản

nội dung

1. Bắt đầu

Có một số bước chúng ta cần thực hiện trước khi tạo hệ thống thư viện bằng PHP. Chúng tôi cần thiết lập môi trường máy chủ web của mình (nếu bạn chưa có) và đảm bảo rằng chúng tôi đã bật các tiện ích mở rộng cần thiết

1. 1. Yêu cầu

Máy chủ web — Nếu bạn chưa cài đặt gói giải pháp máy chủ web cục bộ, tôi khuyên bạn nên tải xuống và cài đặt XAMPP. XAMPP là gói giải pháp máy chủ web mã nguồn mở
Tiện ích mở rộng PDO của PHP — Vì chúng ta sẽ sử dụng tiện ích mở rộng PDO của PHP, hãy đảm bảo rằng nó đã được bật. Nó thường được mặc định, nhưng trong một số trường hợp, nó có thể không được

1. 2. Bạn sẽ học được gì trong Hướng dẫn này

Hệ thống mẫu — Tạo một hệ thống mẫu cơ bản với PHP. Chúng ta sẽ sử dụng các hàm PHP để tạo các hàm tiêu đề và chân trang mẫu
Tải lên hình ảnh - Tải hình ảnh lên máy chủ bằng biểu mẫu HTML và PHP
Tương tác MySQL — Chèn thông tin hình ảnh vào cơ sở dữ liệu MySQL và truy xuất kết quả
Xóa hình ảnh — Xóa tệp hình ảnh khỏi máy chủ (PHP) và xóa bản ghi khỏi cơ sở dữ liệu MySQL
Cửa sổ bật lên hình ảnh bằng JS — Tạo cửa sổ bật lên bằng JavaScript sẽ hiển thị hình ảnh tương ứng cùng với tiêu đề và mô tả
Thiết kế hệ thống thư viện — Thiết kế hệ thống thư viện với HTML5 và CSS3

1. 3. Cấu trúc & Thiết lập Tệp

Bây giờ chúng tôi sẽ khởi động máy chủ web của mình và tạo các tệp và thư mục mà chúng tôi sẽ sử dụng cho hệ thống thư viện của mình

Mở Bảng điều khiển XAMPP
Bên cạnh mô-đun Apache, nhấp vào Bắt đầu
Bên cạnh mô-đun MySQL, nhấp vào Bắt đầu
Điều hướng đến thư mục cài đặt XAMPPs (C. \xampp)
Mở thư mục htdocs
Tạo các thư mục và tệp sau

Cấu trúc tệp

\-- phpgallery
    . -- chức năng. php
    . -- mục lục. php
    . -- tải lên. php
    . -- xóa bỏ. php
    . -- Phong cách. css
\-- hình ảnh
     . -- tòa nhà bỏ hoang. jpg
     . -- bờ biển. jpg
     . -- thành phố. jpg
     . -- núi. jpg
     . -- đường bộ. jpg
     . -- sao. jpg

Các tệp và thư mục trên sẽ chứa các mục sau

chức năng. php — Tệp này sẽ chứa tất cả các chức năng chúng tôi cần cho hệ thống thư viện của mình (tiêu đề mẫu, chân trang mẫu và chức năng kết nối cơ sở dữ liệu)
mục lục. php — Điền tất cả các hình ảnh từ cơ sở dữ liệu MySQL và triển khai các nút điều hướng để liên kết đến các trang được phân trang
tải lên. php — Tệp này sẽ được sử dụng để tải lên hình ảnh và chèn chi tiết hình ảnh vào cơ sở dữ liệu MySQL của chúng tôi
xóa bỏ. php — Tệp này sẽ được sử dụng để xóa hình ảnh khỏi máy chủ của chúng tôi và các chi tiết liên quan khỏi cơ sở dữ liệu MySQL
Phong cách. php — Biểu định kiểu (CSS3) cho hệ thống thư viện của chúng tôi
hình ảnh — Thư mục này sẽ chứa tất cả các hình ảnh đã tải lên của chúng tôi. Bạn có thể tải xuống tất cả các hình ảnh trong bộ chứa cấu trúc tệp ở trên

2. Tạo cơ sở dữ liệu và thiết lập bảng

Đối với phần này, bạn sẽ cần truy cập cơ sở dữ liệu MySQL của mình, bằng cách sử dụng phpMyAdmin (đi kèm với XAMPP) hoặc ứng dụng quản lý cơ sở dữ liệu MySQL ưa thích của bạn

Nếu bạn đang sử dụng phpMyAdmin, hãy làm theo các hướng dẫn sau

Điều hướng đến http. //localhost/phpmyadmin/
Nhấp vào tab Cơ sở dữ liệu ở trên cùng
Trong Tạo cơ sở dữ liệu, nhập phpgallery vào hộp văn bản
Chọn utf8_General_ci làm đối chiếu (UTF-8 là mã hóa mặc định trong HTML5)
Nhấp vào Tạo

Điều đó sẽ tạo cơ sở dữ liệu MySQL mà chúng ta sẽ sử dụng. Bây giờ, chúng ta cần tạo bảng và chèn các hình ảnh ví dụ nằm trong thư mục hình ảnh. Chúng tôi chỉ có thể thực hiện truy vấn bên dưới để chèn tất cả các chi tiết cho hình ảnh của mình vào cơ sở dữ liệu thay vì tạo tất cả các bảng và bản ghi riêng lẻ. Đảm bảo chọn cơ sở dữ liệu phpgallery trước và nhấp vào tab SQL nằm ở trên cùng

SQL

CREATE TABLE IF NOT EXISTS `images` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`title` text NOT NULL,
  	`description` text NOT NULL,
  	`filepath` text NOT NULL,
  	`uploaded_date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

INSERT INTO `images` (`id`, `title`, `description`, `filepath`, `uploaded_date`) VALUES
(1, 'Abandoned Building', '', 'images/abandoned-building.jpg', '2019-07-16 20:09:26'),
(2, 'Beach', 'Hot summer day at the beach.', 'images/beach.jpg', '2019-07-16 20:10:05'),
(3, 'City', 'A view down at the city.', 'images/city.jpg', '2019-07-16 20:10:45'),
(4, 'Mountain', '', 'images/mountain.jpg', '2019-07-16 20:11:27'),
(5, 'Road', 'Going down the only road I''ve even known.', 'images/road.jpg', '2019-07-16 20:12:00'),
(6, 'Stars', 'A wonderful view of the night sky.', 'images/stars.jpg', '2019-07-16 20:12:39');

Câu lệnh trên sẽ tạo bảng hình ảnh với các cột sau

id - Mã định danh duy nhất của bản ghi. Chúng ta có thể sử dụng cột này để xác định cột nào là cột nào
tiêu đề - Tiêu đề của hình ảnh
description — Mô tả của hình ảnh
filepath - Đường dẫn tệp của hình ảnh
upload_date — Ngày hình ảnh được tải lên

Hãy lưu ý, chúng tôi cũng đã chèn các hình ảnh ví dụ vào bảng hình ảnh. Để đảm bảo chúng hiển thị chính xác trên hệ thống thư viện của bạn, bạn cần tải xuống các hình ảnh từ phần này và đặt chúng vào thư mục hình ảnh

Cấu trúc bảng hình ảnh sẽ xuất hiện như sau trên phpMyAdmin

http. //localhost/phpmyadmin/

Làm cách nào để tạo thư viện ảnh trong PHP?

Đó là tất cả những gì chúng ta cần làm cho cơ sở dữ liệu MySQL của mình. Vui lòng đóng phpMyAdmin vì chúng tôi không còn cần sử dụng nó nữa

3. Thiết kế hệ thống thư viện bằng CSS

Để làm cho hệ thống thư viện của chúng tôi trông hấp dẫn hơn, chúng tôi cần thêm một số CSS. Thêm CSS sau vào phong cách. tập tin css

CSS

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}
.image-popup {
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}
.image-popup .con {
    display: flex;
    flex-flow: column;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
}
.image-popup .con h3 {
    margin: 0;
    font-size: 18px;
}
.image-popup .con .edit, .image-popup .con .trash {
    display: inline-flex;
    justify-content: center;
    align-self: flex-end;
    width: 40px;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 10px;
}
.image-popup .con .trash {
    background-color: #b73737;
}
.image-popup .con .trash:hover {
    background-color: #a33131;
}
.image-popup .con .edit {
    background-color: #37afb7;
}
.image-popup .con .edit:hover {
    background-color: #319ca3;
}
.home .upload-image {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 0;
}
.home .upload-image:hover {
    background-color: #32a367;
}
.home .images {
    display: flex;
    flex-flow: wrap;
}
.home .images a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px 0;
}
.home .images a:hover span {
    opacity: 1;
    transition: opacity 1s;
}
.home .images span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    transition: opacity 1s;
}
.upload form {
    padding: 15px 0;
    display: flex;
    flex-flow: column;
    width: 400px;
}
.upload form label {
    display: inline-flex;
    width: 100%;
    padding: 10px 0;
    margin-right: 25px;
}
.upload form input, .upload form textarea {
    padding: 10px;
    width: 100%;
    margin-right: 25px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
}
.upload form textarea {
    height: 200px;
}
.upload form input[type="submit"] {
    display: block;
    background-color: #38b673;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    width: 200px;
    margin-top: 15px;
    border-radius: 5px;
}
.upload form input[type="submit"]:hover {
    background-color: #32a367;
}
.delete .yesno {
    display: flex;
}
.delete .yesno a {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 10px 15px 0;
    border-radius: 5px;
}
.delete .yesno a:hover {
    background-color: #32a367;
}

Đoạn mã trên là biểu định kiểu chúng tôi sẽ sử dụng cho hệ thống thư viện. Thiết kế đơn giản và sạch sẽ. Không lạ mắt như nó có thể, nhưng đó là một điểm khởi đầu tuyệt vời. Bạn có thể tự do tùy chỉnh nó theo ý thích của mình, đừng quên xóa bộ nhớ cache trong trình duyệt của bạn khi thực hiện các thay đổi đối với nó

4. Tạo tệp chức năng

Tệp chức năng sẽ chứa tiêu đề mẫu, chân trang mẫu và chức năng kết nối cơ sở dữ liệu. Các hàm sẽ cho phép chúng tôi thực thi mã mà không cần triển khai cùng một mã trên tất cả các trang sẽ tận dụng các chức năng của chúng tôi

Chỉnh sửa các chức năng. tập tin php và thêm

PHP

Chức năng trên sẽ được sử dụng để kết nối với cơ sở dữ liệu MySQL của chúng tôi bằng giao diện PDO. Nếu bằng cách nào đó bạn không kết nối được bằng các chi tiết trên, bạn sẽ phải cập nhật các biến cơ sở dữ liệu và đảm bảo rằng chúng phản ánh thông tin đăng nhập MySQL của bạn

Thêm vào sau

PHP

// Template header; feel free to customize it, but do not indent the PHP code or it will throw an error
function template_header($title) {
echo <<

	
		
		$title
		
		
	
	
    
    	
    		Gallery System
            Gallery
    	
    
EOT;
}

Đoạn mã trên là chức năng tiêu đề chúng tôi sẽ sử dụng cho tất cả các trang chúng tôi tạo. Tất cả những gì chúng ta phải làm là thực thi tên hàm thay vì viết cùng một mã trong mọi tệp mà chúng ta tạo. Thoải mái tùy chỉnh tiêu đề. Chúng tôi đang sử dụng thư viện Font Awesome tuyệt vời để hiển thị các biểu tượng trên các trang của chúng tôi

Thêm vào sau

PHP

// Template footer
function template_footer() {
echo <<

EOT;
}
?>

Mẫu chân trang ở trên sẽ đóng tất cả các thẻ mở mà chúng tôi đã xác định trong chức năng tiêu đề. Chúng tôi không muốn một tài liệu không hợp lệ chứa các thẻ không được đóng;

`5. Tạo Trang chủ`

Trang chủ sẽ chứa tất cả các hình ảnh mà chúng tôi đã tải lên và các liên kết điều hướng đến các trang khác

Chỉnh sửa chỉ mục. tập tin php và thêm

PHP

query('SELECT * FROM images ORDER BY uploaded_date DESC');
$images = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

Đầu tiên, chúng tôi bao gồm các chức năng. php, chứa các chức năng mà chúng ta sẽ sử dụng. Sau đó, chúng tôi kết nối với cơ sở dữ liệu MySQL của mình bằng cách thực thi hàm pdo_connect_mysql() và sau đó truy xuất tất cả các chi tiết cho hình ảnh mà chúng tôi đã tải lên từ hình ảnh trong bảng cơ sở dữ liệu của mình, được sắp xếp theo cột ngày đã tải lên (giảm dần)

Thêm vào sau

PHP




	Gallery
	Welcome to the gallery page! You can view the list of uploaded images below.
	Upload Image
	
		
		
		
			" data-id="" data-title="" width="300" height="200">

Như bạn có thể thấy ở trên, tất cả những gì chúng ta phải làm để bao gồm mẫu tiêu đề là thực thi tên hàm (cùng với tiêu đề), mà chúng ta đã thực hiện ở trên

Ngoài ra, chúng tôi điền vào tất cả các hình ảnh được lấy từ cơ sở dữ liệu MySQL ở định dạng HTML. Với hàm foreach, chúng ta có thể lặp lại mảng kết hợp và xử lý từng bản ghi tương ứng. Hàm file_exists tự giải thích;

Các thuộc tính data-* sẽ được sử dụng để lưu trữ thông tin liên quan đến hình ảnh mà sau đó chúng tôi có thể truy xuất bằng JavaScript. Họ sẽ xác định những gì sẽ xuất ra trong cửa sổ bật lên

Thêm vào sau

JavaScript

Đoạn mã JavaScript trên sẽ tạo cửa sổ bật lên cho hình ảnh tương ứng. Nếu bạn muốn đặt mã JavaScript của mình vào một tệp JS riêng, bạn cũng có thể làm điều đó

Thêm vào sau

PHP

________số 8_______Và bây giờ chúng ta có thể kết thúc template cho trang chủ bằng cách thực hiện chức năng template footer
Đó là tất cả những gì chúng ta cần làm cho trang chủ. Nếu chúng tôi điều hướng đến http. // localhost/phpgallery/index. php, chúng ta sẽ thấy như sau
http. // localhost/phpgallery/index. php
Và nếu chúng ta nhấp vào một trong những hình ảnh, chúng ta sẽ thấy như sau
http. // localhost/phpgallery/index. php
Hiệu ứng hình ảnh bật lên được tạo bằng JavaScript và do đó chúng tôi không cần tải lại trang mỗi khi chúng tôi nhấp vào một trang khác. Chúng tôi có thể đóng cửa sổ bật lên bằng cách nhấp vào bên ngoài vùng chứa hình ảnh
6. Tạo trang tải lên
Trang tải lên là trang chúng tôi sẽ sử dụng để tải lên hình ảnh mới và lưu trữ thông tin liên quan đến những hình ảnh đó trong bảng hình ảnh cơ sở dữ liệu MySQL của chúng tôi
Chỉnh sửa tải lên. tập tin php và thêm
PHP 
 500000) {
			$msg = 'Image file size too large, please choose an image less than 500kb.';
		} else {
			// Everything checks out now we can move the uploaded image
			move_uploaded_file($_FILES['image']['tmp_name'], $image_path);
			// Connect to MySQL
			$pdo = pdo_connect_mysql();
			// Insert image info into the database (title, description, image path, and date added)
			$stmt = $pdo->prepare('INSERT INTO images (title, description, filepath, uploaded_date) VALUES (?, ?, ?, CURRENT_TIMESTAMP)');
	        $stmt->execute([ $_POST['title'], $_POST['description'], $image_path ]);
			$msg = 'Image uploaded successfully!';
		}
	} else {
		$msg = 'Please upload an image!';
	}
}
?>
Đoạn mã trên sẽ tải một hình ảnh mới lên thư mục hình ảnh và lưu trữ các chi tiết được liên kết với nó trong cơ sở dữ liệu MySQL, nhưng trước khi hình ảnh được tải lên, trước tiên chúng tôi kiểm tra xem tệp hình ảnh đã tồn tại chưa và đảm bảo rằng đó thực sự là một hình ảnh. Chúng tôi sử dụng hàm getimagesize() để xác thực hình ảnh
Ngoài ra, nếu hình ảnh tải lên đã tồn tại, mã sẽ xuất ra thông báo lỗi cho người dùng. Kích thước hình ảnh tối đa được đặt thành 500kb, bạn có thể thay đổi kích thước này nếu muốn tải lên hình ảnh có kích thước tệp lớn hơn
Cuối cùng, nếu không có thông báo lỗi nào xảy ra, chi tiết hình ảnh sẽ được chèn vào bảng hình ảnh MySQL của chúng tôi
Thêm vào sau
PHP 
* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}
.image-popup {
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}
.image-popup .con {
    display: flex;
    flex-flow: column;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
}
.image-popup .con h3 {
    margin: 0;
    font-size: 18px;
}
.image-popup .con .edit, .image-popup .con .trash {
    display: inline-flex;
    justify-content: center;
    align-self: flex-end;
    width: 40px;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 10px;
}
.image-popup .con .trash {
    background-color: #b73737;
}
.image-popup .con .trash:hover {
    background-color: #a33131;
}
.image-popup .con .edit {
    background-color: #37afb7;
}
.image-popup .con .edit:hover {
    background-color: #319ca3;
}
.home .upload-image {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 0;
}
.home .upload-image:hover {
    background-color: #32a367;
}
.home .images {
    display: flex;
    flex-flow: wrap;
}
.home .images a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px 0;
}
.home .images a:hover span {
    opacity: 1;
    transition: opacity 1s;
}
.home .images span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    transition: opacity 1s;
}
.upload form {
    padding: 15px 0;
    display: flex;
    flex-flow: column;
    width: 400px;
}
.upload form label {
    display: inline-flex;
    width: 100%;
    padding: 10px 0;
    margin-right: 25px;
}
.upload form input, .upload form textarea {
    padding: 10px;
    width: 100%;
    margin-right: 25px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
}
.upload form textarea {
    height: 200px;
}
.upload form input[type="submit"] {
    display: block;
    background-color: #38b673;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    width: 200px;
    margin-top: 15px;
    border-radius: 5px;
}
.upload form input[type="submit"]:hover {
    background-color: #32a367;
}
.delete .yesno {
    display: flex;
}
.delete .yesno a {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 10px 15px 0;
    border-radius: 5px;
}
.delete .yesno a:hover {
    background-color: #32a367;
}
0Đoạn mã trên là mẫu tải lên, bao gồm một biểu mẫu HTML mà chúng tôi sẽ sử dụng để nhập các chi tiết liên quan đến hình ảnh tương ứng
Ngoài ra, khi người dùng nhấp vào nút gửi, biểu mẫu sẽ được xử lý bằng mã PHP mà chúng tôi đã thêm trước đó. Phương thức yêu cầu được đặt thành POST, được sử dụng để gửi dữ liệu đến máy chủ. Không giống như yêu cầu GET, phương thức POST sẽ không nối các tham số vào URL
Nếu chúng tôi điều hướng đến trang tải lên, chúng tôi sẽ thấy như sau
http. //localhost/phpgallery/tải lên. php



Để kiểm tra xem nó có hoạt động chính xác hay không, hãy chọn một hình ảnh và điền vào biểu mẫu — hãy nhớ rằng hình ảnh cần có kích thước dưới 500kb và nhấp vào nút Tải hình ảnh lên sau khi bạn hoàn tất. Bạn sẽ thấy phản hồi nằm bên dưới biểu mẫu
7. Tạo Trang Xóa
Trang xóa sẽ được sử dụng để xóa hình ảnh mà chúng tôi đã tải lên. Hình ảnh được chỉ định sẽ bị xóa khỏi thư mục hình ảnh và thông tin liên quan đến hình ảnh sẽ bị xóa khỏi bảng hình ảnh MySQL
Chỉnh sửa xóa. tập tin php và thêm
PHP 
* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}
.image-popup {
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}
.image-popup .con {
    display: flex;
    flex-flow: column;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
}
.image-popup .con h3 {
    margin: 0;
    font-size: 18px;
}
.image-popup .con .edit, .image-popup .con .trash {
    display: inline-flex;
    justify-content: center;
    align-self: flex-end;
    width: 40px;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 10px;
}
.image-popup .con .trash {
    background-color: #b73737;
}
.image-popup .con .trash:hover {
    background-color: #a33131;
}
.image-popup .con .edit {
    background-color: #37afb7;
}
.image-popup .con .edit:hover {
    background-color: #319ca3;
}
.home .upload-image {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 0;
}
.home .upload-image:hover {
    background-color: #32a367;
}
.home .images {
    display: flex;
    flex-flow: wrap;
}
.home .images a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px 0;
}
.home .images a:hover span {
    opacity: 1;
    transition: opacity 1s;
}
.home .images span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    transition: opacity 1s;
}
.upload form {
    padding: 15px 0;
    display: flex;
    flex-flow: column;
    width: 400px;
}
.upload form label {
    display: inline-flex;
    width: 100%;
    padding: 10px 0;
    margin-right: 25px;
}
.upload form input, .upload form textarea {
    padding: 10px;
    width: 100%;
    margin-right: 25px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
}
.upload form textarea {
    height: 200px;
}
.upload form input[type="submit"] {
    display: block;
    background-color: #38b673;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    width: 200px;
    margin-top: 15px;
    border-radius: 5px;
}
.upload form input[type="submit"]:hover {
    background-color: #32a367;
}
.delete .yesno {
    display: flex;
}
.delete .yesno a {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 10px 15px 0;
    border-radius: 5px;
}
.delete .yesno a:hover {
    background-color: #32a367;
}
1Trước khi hình ảnh tương ứng bị xóa, mã yêu cầu ID của hình ảnh, được lấy từ tham số GET, vì nó sẽ xác định hình ảnh nào chúng ta sẽ xóa. Tham số ID được liên kết với ID trong cơ sở dữ liệu MySQL
Chúng tôi cũng kiểm tra xem hình ảnh có trong cơ sở dữ liệu hay không và kiểm tra xem người dùng đã nhấp vào nút xác nhận Có hay chưa. Nếu người dùng nhấp vào nút Có, mã sẽ xóa tệp khỏi máy chủ bằng cách sử dụng chức năng hủy liên kết () và sau đó thực thi câu lệnh XÓA TỪ MySQL sẽ xóa bản ghi hình ảnh khỏi cơ sở dữ liệu
Thêm vào sau
PHP 
* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}
.image-popup {
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}
.image-popup .con {
    display: flex;
    flex-flow: column;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
}
.image-popup .con h3 {
    margin: 0;
    font-size: 18px;
}
.image-popup .con .edit, .image-popup .con .trash {
    display: inline-flex;
    justify-content: center;
    align-self: flex-end;
    width: 40px;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 12px;
    border-radius: 5px;
    margin-top: 10px;
}
.image-popup .con .trash {
    background-color: #b73737;
}
.image-popup .con .trash:hover {
    background-color: #a33131;
}
.image-popup .con .edit {
    background-color: #37afb7;
}
.image-popup .con .edit:hover {
    background-color: #319ca3;
}
.home .upload-image {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 0;
}
.home .upload-image:hover {
    background-color: #32a367;
}
.home .images {
    display: flex;
    flex-flow: wrap;
}
.home .images a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px 0;
}
.home .images a:hover span {
    opacity: 1;
    transition: opacity 1s;
}
.home .images span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    transition: opacity 1s;
}
.upload form {
    padding: 15px 0;
    display: flex;
    flex-flow: column;
    width: 400px;
}
.upload form label {
    display: inline-flex;
    width: 100%;
    padding: 10px 0;
    margin-right: 25px;
}
.upload form input, .upload form textarea {
    padding: 10px;
    width: 100%;
    margin-right: 25px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
}
.upload form textarea {
    height: 200px;
}
.upload form input[type="submit"] {
    display: block;
    background-color: #38b673;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    width: 200px;
    margin-top: 15px;
    border-radius: 5px;
}
.upload form input[type="submit"]:hover {
    background-color: #32a367;
}
.delete .yesno {
    display: flex;
}
.delete .yesno a {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 10px 15px 0;
    border-radius: 5px;
}
.delete .yesno a:hover {
    background-color: #32a367;
}
2Đoạn mã trên là mẫu cho trang xóa của chúng tôi, trang này sẽ xác nhận với người dùng bằng nút Có và Không nếu họ muốn xóa hình ảnh
Nếu chúng tôi điều hướng đến trang chủ và nhấp vào một trong các hình ảnh, chúng tôi sẽ thấy biểu tượng xóa và nếu chúng tôi nhấp vào đó, chúng tôi sẽ thấy một cái gì đó tương tự như sau
http. // localhost/hướng dẫn/xóa. php?id=6
Nếu chúng tôi nhấp vào nút Có, hình ảnh sẽ bị xóa khỏi thư mục hình ảnh và cơ sở dữ liệu MySQL của chúng tôi
Phần kết luận
Xin chúc mừng. Bạn đã tạo thành công một hệ thống thư viện bảo mật đầy đủ chức năng với PHP, MySQL và JavaScript. Tiếp theo là gì? 
Bây giờ bạn đã có hiểu biết cơ bản về cách điền và tải hình ảnh lên bằng PHP
Cân nhắc chia sẻ bài viết trên các trang web xã hội nếu bạn thấy nó hữu ích và để lại nhận xét bên dưới. Chúng tôi đánh giá rất cao sự hỗ trợ
Thưởng thức mã hóa, và cảm ơn bạn đã đọc
Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua hệ thống thư viện nâng cao bên dưới vì nó sẽ giúp chúng tôi tạo ra nhiều hướng dẫn hơn và duy trì hoạt động của trang web của chúng tôi. Gói nâng cao bao gồm mã cải tiến và nhiều tính năng hơn
Nâng cao
$ 25. 00
xem thêm chi tiết
Hệ thống thư viện an toàn
Xác thực người dùng
Tải lên hình ảnh, video và tệp âm thanh
Bộ sưu tập phương tiện
Giống như tính năng truyền thông
Tính năng phê duyệt phương tiện
Kéo và thả nhiều tệp
Xem trước phương tiện
Tích hợp AJAX
Hình thu nhỏ phương tiện
Tối ưu hóa hình ảnh
Chuyển đổi SVG sang PNG



bảng quản trị
Thiết kế đáp ứng
Tệp SCSS
Mã nhận xét
Cập nhật và hỗ trợ miễn phí
Thêm. Phiên bản cơ bản
Thêm. Mã nguồn hướng dẫn
PayPal Tải xuống Crypto Tải xuống
Giảm giá
Gói (Tiết kiệm 53%)
$ 119. 00
255. 00
xem thêm chi tiết
Hệ thống đăng nhập và đăng ký an toàn
Hệ thống giỏ hàng
Ứng dụng CRUD
Hệ thống bán vé
Hệ thống thư viện
Hệ thống lịch sự kiện
Hệ thống thăm dò ý kiến và bỏ phiếu
Hệ thống bình luận
Đánh giá hệ thống
Mâu liên hệ
Hệ thống trò chuyện hỗ trợ trực tiếp
Bản tin & Hệ thống gửi thư
Truy cập vào các tập lệnh trong tương lai
PayPal Tải xuống Crypto Tải xuống
về tác giả
David Adams
Nhà phát triển trang web nhiệt tình, tôi đã thiết kế và phát triển các ứng dụng web trong hơn 10 năm, tôi tận hưởng sự sáng tạo mà tôi đưa vào các dự án của mình và tận hưởng những gì người khác mang đến cho trang web tuyệt vời. Mục tiêu của tôi là giúp những người mới tìm hiểu cách sử dụng web
 
Làm cách nào để tạo thư viện ảnh động trong PHP?
Thư viện ảnh php động . 
 Tạo một dự án. php-photo-gallery trong thư mục htdocs của XAMPP
 Tải xuống và thêm hình ảnh vào một thư mục
 Tạo một hình thu nhỏ của tập tin. php để tạo hình thu nhỏ động của hình ảnh
 Tạo một thư viện ảnh tập tin. php để hiển thị hình thu nhỏ động dưới dạng thư viện ảnh
 
Làm cách nào để tạo thư viện ảnh trong PHP và MySQL?
Vậy hãy bắt đầu viết mã. Chúng tôi sẽ có cấu trúc tệp sau để tạo bộ sưu tập hình ảnh bằng PHP MySQL.  . 
 Tải lên nhiều hình ảnh bằng jQuery, PHP & MySQL
 Giảm hoặc nén kích thước hình ảnh khi tải lên bằng PHP
 Tải lên hình ảnh mà không cần làm mới trang bằng PHP và jQuery
 
Làm cách nào để hiển thị động một hình ảnh trong PHP?
Các chức năng hình ảnh của thư viện GD là cách dễ nhất để tạo hình ảnh động với văn bản trong PHP . Trong một số tình huống, bạn cần tạo một hình ảnh nhanh chóng và viết văn bản động vào hình ảnh. Để tạo một hình ảnh ngẫu nhiên động với PHP, thư viện GD cần được cài đặt. 
Làm cách nào để hiển thị nhiều hình ảnh từ cơ sở dữ liệu MySQL trong PHP bằng thanh trượt hình ảnh?
Bước1. Tạo bảng cơ sở dữ liệu MySQL. Trong hướng dẫn này, chúng ta sẽ tạo nhiều Slider hình ảnh bằng cách lấy hình ảnh từ cơ sở dữ liệu MySQL. . 
 Bước 2. Bao gồm các tệp Bootstrap, jQuery và Slider. trong chỉ mục. . 
 Bước 3. Tạo Bootstrap Nhiều thanh trượt hình ảnh HTML. . 
 Bước 4. Xử lý nhiều chức năng thanh trượt hình ảnh với jQuery

programming php

Làm cách nào để tạo thư viện ảnh trong PHP?

Hệ thống thư viện là gì?

nội dung

1. Bắt đầu

1. 1. Yêu cầu

1. 2. Bạn sẽ học được gì trong Hướng dẫn này

1. 3. Cấu trúc & Thiết lập Tệp

Cấu trúc tệp

2. Tạo cơ sở dữ liệu và thiết lập bảng

3. Thiết kế hệ thống thư viện bằng CSS

4. Tạo tệp chức năng

5. Tạo Trang chủ

Gallery

6. Tạo trang tải lên

7. Tạo Trang Xóa

Phần kết luận

Nâng cao

Gói (Tiết kiệm 53%)

về tác giả

David Adams

Làm cách nào để tạo thư viện ảnh động trong PHP?

Làm cách nào để tạo thư viện ảnh trong PHP và MySQL?

Làm cách nào để hiển thị động một hình ảnh trong PHP?

Làm cách nào để hiển thị nhiều hình ảnh từ cơ sở dữ liệu MySQL trong PHP bằng thanh trượt hình ảnh?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`5. Tạo Trang chủ`