張日花 劉婷婷 陳紅娟

摘? 要：在生活中，人們將照片沖洗出來(lái)后，通常會(huì)把照片放入到相冊(cè)中，以便更好地翻閱，而隨著數(shù)碼時(shí)代的到來(lái)，大多數(shù)人選擇直接將照片保存在電腦或手機(jī)中，還可以上傳到互聯(lián)網(wǎng)中分享，在線相冊(cè)就是一種用于保存圖片的Web應(yīng)用。文章從“在線相冊(cè)”需求分析、功能實(shí)現(xiàn)、功能展示等幾方面入手，采用PHP技術(shù)，同時(shí)結(jié)合MySQL數(shù)據(jù)庫(kù)，實(shí)現(xiàn)了創(chuàng)建相冊(cè)、上傳圖片、生成縮略圖、添加水印、搜索，以及相冊(cè)和圖片的瀏覽等功能，極大地滿(mǎn)足了廣大攝影愛(ài)好者收集相冊(cè)以及管理相冊(cè)的個(gè)性化需求。

關(guān)鍵詞：在線相冊(cè)；PHP；MySQL

中圖分類(lèi)號(hào)：TP311? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：2096-4706（2023）07-0015-05

Abstract： In daily life， after developing photos， people usually put them into photo albums for better browsing. With the advent of the digital era， most people choose to save photos directly on their computers or mobile phones， and they can also upload them to the Internet for sharing. Online photo albums are a Web application for saving photos. Starting with “online photo album” demand analysis， function implementation， function display， and other aspects， this paper uses PHP technology combined with MySQL database to achieve the functions of creating photo albums， uploading images， generating thumbnails， adding watermarks， searching， and browsing photo albums and images， greatly satisfying the personalized needs of photography enthusiasts to collect and manage photo albums.

Keywords： online photo album; PHP; MySQL

0? 引? 言

隨著數(shù)碼相機(jī)和手機(jī)在家庭中越來(lái)越普及，人們可以更方便地拍攝照片，又不把拍攝的照片都沖印出來(lái)，更多是選擇了存儲(chǔ)在電腦和手機(jī)里，但時(shí)間一長(zhǎng)，照片越來(lái)越多，就會(huì)顯得雜亂無(wú)章，不方便管理，在線電子相冊(cè)就充當(dāng)了非常重要的作用，在線電子相冊(cè)的設(shè)計(jì)與實(shí)現(xiàn)，能解決大量自拍者以及攝影愛(ài)好者大容量圖片資料的存儲(chǔ)與管理問(wèn)題，為用戶(hù)提供一個(gè)網(wǎng)絡(luò)存儲(chǔ)空間，讓用戶(hù)可以方便地把自己的照片分享給朋友或者任何用戶(hù)。在線相冊(cè)能為這些圖片等進(jìn)行分類(lèi)管理，通過(guò)創(chuàng)建相冊(cè)、上傳圖片、搜索圖片、刪除圖片、圖片生成縮略圖、添加水印等功能來(lái)動(dòng)態(tài)操作這些圖片，并實(shí)現(xiàn)相冊(cè)資料的在線、實(shí)時(shí)、交互式管理[1]。

1? 在線相冊(cè)的設(shè)計(jì)

1.1? 在線相冊(cè)的需求分析

在本設(shè)計(jì)中，對(duì)于在線相冊(cè)的具體需求分析如下：

1）配置本地服務(wù)器用于測(cè)試和運(yùn)行項(xiàng)目。

2）支持最大5 MB的圖片上傳，將圖片保存到服務(wù)器。

3）使用MySQL數(shù)據(jù)庫(kù)保存相冊(cè)數(shù)據(jù)。

4）在一個(gè)相冊(cè)內(nèi)可以創(chuàng)建子相冊(cè)，默認(rèn)最多支持5級(jí)嵌套，且能夠限制最多層級(jí)數(shù)。

5）在相冊(cè)中顯示圖片列表時(shí)，為避免圖片文件過(guò)大造成頁(yè)面打開(kāi)緩慢，只顯示縮略圖。

6）在瀏覽圖片時(shí)，可以通過(guò)“上一張”“下一張”按鈕切換到本相冊(cè)內(nèi)的其他圖片。

7）支持相冊(cè)圖片的刪除，在刪除相冊(cè)時(shí)只允許刪除空相冊(cè)。

8）支持設(shè)置相冊(cè)封面。

9）可以通過(guò)文件名字搜索相冊(cè)中的圖片。

在實(shí)現(xiàn)以上效果前，首先進(jìn)行準(zhǔn)備工作，如圖1所示。

1.2? 開(kāi)發(fā)環(huán)境配置及要求

網(wǎng)站開(kāi)發(fā)設(shè)計(jì)工具Sublime 4.0是一款非常高效的代碼編輯工具，既可以編寫(xiě)代碼還可以編輯文本，此軟件是主流前端開(kāi)發(fā)編輯器，體積較小，運(yùn)行速度快，文本功能強(qiáng)大，支持編譯功能且可在控制臺(tái)看到輸出，內(nèi)嵌Python解釋器支持插件開(kāi)發(fā)以達(dá)到可擴(kuò)展目的。

網(wǎng)站的開(kāi)發(fā)技術(shù)是PHP技術(shù)。PHP，一個(gè)嵌套的縮寫(xiě)名稱(chēng)，是英文超級(jí)文本預(yù)處理語(yǔ)言PHP：Hypertext Preprocessor的縮寫(xiě)。PHP是全球網(wǎng)站使用最多的腳本語(yǔ)言之一，全球前100萬(wàn)的網(wǎng)站中，有超過(guò)70%的網(wǎng)站使用了PHP開(kāi)發(fā)，隨著開(kāi)源潮流的蓬勃發(fā)展，PHP與Linux、Apache和MySQL一起共同組成了一個(gè)強(qiáng)大的Web應(yīng)用程序平臺(tái)，簡(jiǎn)稱(chēng)LAMP。PHP之所以應(yīng)用廣泛，受到大家歡迎，是因?yàn)樗泻芏嗤怀龅奶攸c(diǎn)如：開(kāi)源免費(fèi)、跨平臺(tái)、面向?qū)ο?、支持多種數(shù)據(jù)庫(kù)、快捷[2]。

數(shù)據(jù)庫(kù)應(yīng)用MySQL，MySQL是最流行的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，MySQL性能卓越、服務(wù)穩(wěn)定，開(kāi)放源代碼，自主性及使用成本低，體積小，安裝方便，易于維護(hù)，支持多種操作系統(tǒng)，提供多種API接口，支持多種開(kāi)發(fā)語(yǔ)言，特別是PHP。

Apache服務(wù)器是一款源代碼開(kāi)放的Web服務(wù)器，由于其開(kāi)源、跨平臺(tái)和安全性的特點(diǎn)被廣泛應(yīng)用。

1.3? 目錄結(jié)構(gòu)劃分

在線相冊(cè)系統(tǒng)的功能主要通 index.php、show.php和search.php來(lái)完成。其中index.php是相冊(cè)的首頁(yè)，提供了相冊(cè)瀏覽、新建相冊(cè)、上傳圖片、刪除圖片、刪除相冊(cè)、設(shè)置圖片為相冊(cè)封面等功能；show.php用于圖片的查看功能；search.php提供了圖片的搜索功能[3]。如表1所示。

1.4? 創(chuàng)建配置文件

在項(xiàng)目中通常有一些常用配置，如數(shù)據(jù)庫(kù)連接信息，使用獨(dú)立的配置文件來(lái)保存配置可以使代碼更利于維護(hù)。接下來(lái)，在comm目錄中創(chuàng)建配置文件config.php，保存數(shù)據(jù)庫(kù)的連接信息，相冊(cè)層級(jí)最大值，允許的圖片擴(kuò)展名，縮略圖大小等主要代碼如下：

return [

'DB_CONNECT' => [

'host' => 'localhost'，

'user' => 'root'，

'pass' => 'root'，

'dbname' => 'php_album'，

'port' => '3306'

]，

'DB_CHARSET' => 'utf8'，

'LEVEL_MAX' => 5，

'ALLOW_EXT' => ['jpg'， 'jpeg'， 'png']，

'THUMB_SIZE' => 260，

];

上述代碼通過(guò)數(shù)組保存了數(shù)據(jù)庫(kù)連接信息，其中DB_CONNECT數(shù)組保存了用于mysqli_connect（）函數(shù)使用的連接參數(shù)，DB_CHARSET保存了用于 mysqli_set_charset（）函數(shù)使用的字符集信息。

1.5? 數(shù)據(jù)庫(kù)的連接與設(shè)計(jì)

對(duì)于數(shù)據(jù)庫(kù)的操作，有許多重復(fù)的代碼需要編寫(xiě)。因此，可以將這些代碼封裝成函數(shù)，從而提高項(xiàng)目的開(kāi)發(fā)速度。在comm目錄中創(chuàng)建db.php保存數(shù)據(jù)庫(kù)操作相關(guān)的函數(shù)，具體函數(shù)如下。

1.5.1? 連接數(shù)據(jù)庫(kù)

本設(shè)計(jì)中，對(duì)數(shù)據(jù)庫(kù)的操作是十分頻繁的，通過(guò)封裝函數(shù)實(shí)現(xiàn)一次定義多次引用，編寫(xiě)db_connect（）函數(shù)用于連接數(shù)據(jù)庫(kù)，該函數(shù)通過(guò)靜態(tài)變量$link保存數(shù)據(jù)庫(kù)連接，僅當(dāng)函數(shù)第一次調(diào)用的時(shí)候連接數(shù)據(jù)庫(kù)[3]。主要代碼如下：

function db_connect（）

{

static $link = null;

if （！$link） {

$config = array_merge（['host' => ''， 'user' => ''， 'pass' => ''，

'dbname' => ''， 'port' => '']， config（'DB_CONNECT'））;

if （！$link = call_user_func_array（'mysqli_connect'， $config）） {

exit（'數(shù)據(jù)庫(kù)連接失?。? . mysqli_connect_error（））;

}

mysqli_set_charset（$link， config（'DB_CHARSET'））;

}

return $link;

}

1.5.2? 引入公共文件

公共函數(shù)是項(xiàng)目中通用的函數(shù)庫(kù)，保存在function.php和db.php中，用于封裝常用的代碼，提高代碼的復(fù)用性和可維護(hù)性，$_POST接收和過(guò)濾常用的操作[4]。為了在項(xiàng)目中使用，還需要引入這些文件。下面通過(guò)項(xiàng)目的初始化文件comm/init.php來(lái)引入這些公共文件，并設(shè)置項(xiàng)目的時(shí)區(qū)和字符集，具體代碼如下：

require './comm/function.php';

require './comm/db.php';

date_default_timezone_set（'Asia/Shanghai'）;

mb_internal_encoding（'UTF-8'）;

完成上述代碼后，就可以通過(guò)引入init.php來(lái)實(shí)現(xiàn)項(xiàng)目的初始化。

1.5.3? 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)設(shè)計(jì)對(duì)項(xiàng)目功能的實(shí)現(xiàn)起著至關(guān)重要的作用，如果設(shè)計(jì)不合理、不完善，在開(kāi)發(fā)和維護(hù)過(guò)程中可能會(huì)出現(xiàn)很多問(wèn)題，本設(shè)計(jì)在MySQL中創(chuàng)建數(shù)據(jù)庫(kù)_ablum.sql，用戶(hù)保存本設(shè)計(jì)中的數(shù)據(jù)[5]，根據(jù)項(xiàng)目的需求分析，在數(shù)據(jù)庫(kù)中創(chuàng)建album 和 picture兩個(gè)數(shù)據(jù)表，分別保存相冊(cè)和圖片數(shù)據(jù)。

相冊(cè)信息表保存在線相冊(cè)的相冊(cè)ID、上級(jí)相冊(cè)ID、相冊(cè)名、相冊(cè)路徑、封面圖地址及圖片數(shù)等，其中相冊(cè)路徑和封面圖地址是附加信息，用于記錄用戶(hù)上傳的圖片保存的位置，圖片數(shù)用于記錄相冊(cè)中上傳了幾張圖片，表結(jié)構(gòu)如表2所示。

圖片信息表有四個(gè)字段：圖片ID、所屬相冊(cè)ID、圖片名、保存地址，如表3所示。

2? 相冊(cè)管理

2.1? 創(chuàng)建相冊(cè)

一般動(dòng)態(tài)網(wǎng)站都分為前臺(tái)代碼和后臺(tái)代碼分開(kāi)設(shè)計(jì)與制作，因此，創(chuàng)建相冊(cè)首先進(jìn)行網(wǎng)站的前臺(tái)頁(yè)面的設(shè)計(jì)，創(chuàng)建新建相冊(cè)表單，為了便于用戶(hù)在當(dāng)前瀏覽的相冊(cè)中創(chuàng)建子相冊(cè)，可以在頁(yè)面中提供一個(gè)新建相冊(cè)的表單。主要代碼如下：

在上述代碼中，隱藏域“action”用于標(biāo)識(shí)當(dāng)前表單提交的操作為“new”，表示新建相冊(cè)。由于沒(méi)有 指定表單的 action 屬性，表單在提交時(shí)會(huì)自動(dòng)攜帶當(dāng)前參數(shù)。例如，當(dāng) index.php的參數(shù)為“？id=1”時(shí)，提交新建相冊(cè)的表單就表示在ID為1的相冊(cè)中創(chuàng)建子相冊(cè)。

在后臺(tái)接收來(lái)自POST方式提交的action隱藏域內(nèi)容，由于在新建相冊(cè)時(shí)，需要判斷當(dāng)前相冊(cè)嵌套的層數(shù)是否超過(guò)了限制，用于根據(jù)相冊(cè)id獲取相冊(cè)記錄，同時(shí)考慮到此功能多次調(diào)用，利用靜態(tài)變量保存從數(shù)據(jù)庫(kù)中查詢(xún)到的結(jié)果，$data數(shù)組的鍵是待查詢(xún)的相冊(cè)ID，若從數(shù)據(jù)庫(kù)中查不到則返回FALSE。主要代碼如下：

static $data = [0 => false];

if （！isset（$data[$id]）） {

$data[$id] = db_fetch_row（"SELECT `pid`，`path`，`name`，`cover`，`total`

FROM `album` WHERE `id`=$id"） ？： false;

完成上邊函數(shù)后，再編寫(xiě)創(chuàng)建相冊(cè)函數(shù)，計(jì)算相冊(cè)的上級(jí)相冊(cè)的數(shù)量，判斷是否達(dá)到了最大值，當(dāng)達(dá)到最大值時(shí)，輸出提示信息“無(wú)法繼續(xù)創(chuàng)建子目錄，已經(jīng)達(dá)到最多層級(jí)！”，否則，應(yīng)用INSERT插入語(yǔ)句創(chuàng)建相冊(cè)，主要代碼如下：

if （substr_count（$data['path']， '，'） >= config（'LEVEL_MAX'）） {

exit（'無(wú)法繼續(xù)創(chuàng)建子目錄，已經(jīng)達(dá)到最多層級(jí)！'）;}

$name = mb_strimwidth（trim（$name）， 0， 12）;

db_exec（'INSERT INTO `album` （`pid`，`path`，`name`） VALUES （？，？，？）'， 'iss'， [

$pid， （$data['path'] . $pid . '，'）， （$name ？： '未命名'） ]）;

通過(guò)瀏覽器訪問(wèn)進(jìn)行測(cè)試效果如圖2、圖3所示。

2.2? 圖片上傳

2.2.1? 檢查上傳文件并且生成文件名和保存路徑

創(chuàng)建完相冊(cè)后，相冊(cè)為空，接下來(lái)我們?cè)诳障鄡?cè)中添加圖片，在index.html中添加文件上傳的表單，隱藏域action用于標(biāo)識(shí)當(dāng)前表單提交后執(zhí)行upload操作，即圖片上傳?？紤]到相冊(cè)中可以保存大量的圖片，為了避免文件名沖突，或者在一個(gè)目錄中保存過(guò)多的文件導(dǎo)致難以維護(hù)，在album_upload（）函數(shù)中實(shí)現(xiàn)文件名和保存目錄的自動(dòng)生成，并判斷上傳圖像的類(lèi)型是否符合要求，關(guān)鍵代碼如下：

// 檢查文件類(lèi)型是否正確

$ext = pathinfo（$file['name']， PATHINFO_EXTENSION）;

if （！in_array（strtolower（$ext）， config（'ALLOW_EXT'））） {

return tips（'文件上傳失敗：只允許擴(kuò)展名：' . implode（'， '， config（'ALLOW_EXT'）））;? ? }

// 生成文件名和保存路徑

$new_dir = date（'Y-m/d'）;

$new_name = md5（microtime（true）） .".$ext";

2.2.2? 生成縮略圖

在相冊(cè)管理模塊中，圖片的上傳是必不可少的功能，但隨著高分辨率相片的普及，上傳圖片的容量會(huì)很大。在很多圖片的網(wǎng)頁(yè)中，圖片容量越大打開(kāi)網(wǎng)頁(yè)的速度越慢。在用戶(hù)上傳圖片時(shí)，可能圖片的大小尺寸不同，就會(huì)出現(xiàn)同一相冊(cè)中圖片大小不一，影響美觀程度，為了解決以上問(wèn)題，需要對(duì)用戶(hù)上傳的圖片進(jìn)行相應(yīng)的處理，可以讓其在指定大小的地方顯示，定義函數(shù)實(shí)現(xiàn)縮略圖的生成，主要代碼如下：

$info = getimagesize（$file）;

list（$width， $height） = $info;

在獲取到原圖的寬高后，就可以計(jì)算生成縮略圖所需的坐標(biāo)點(diǎn)，實(shí)現(xiàn)縮略圖的生成。由于原圖的比例不確定，為了避免縮略圖比例失調(diào)，這里使用了最大裁剪的方式來(lái)生成縮略圖。例如，一張400×200 px的圖片，若要生成100×100 px的縮略圖，就按照比例從原圖的中心位置取出200×200 px的圖像內(nèi)容，如圖4所示。取出之后，再將圖像縮小成100×100 px的縮略圖即可。

在計(jì)算坐標(biāo)點(diǎn)時(shí)，應(yīng)考慮原圖寬度大于高度和高度大于寬度兩種情況。主要代碼如下：

if （$width > $height） {

$size = $height;

$x = （int） （（$width - $height） / 2）;

$y = 0;

} else {

$size = $width;

$x = 0;

$y = （int） （（$height - $width） / 2）;

}

$thumb = imagecreatetruecolor（$limit， $limit）;

imagecopyresampled（$thumb， $img， 0， 0， $x， $y， $limit， $limit， $size， $size）;

2.2.3? 添加水印

在網(wǎng)站上，為了保證網(wǎng)站中所上傳的圖片不被他人盜用，經(jīng)常需要在所上傳的圖片上添加水印，水印分為圖片水印和文字水印，本項(xiàng)目采用文字水印，在每張上傳的圖片上添加“XX的個(gè)人相冊(cè)”，以保護(hù)自己圖片的信息不被盜用。關(guān)鍵代碼如下：

//設(shè)置字體

$font_style = 'C：＼Windows＼Fonts＼simsun.ttc';

//設(shè)置字體顏色

$color = imagecolorallocate（$thumb， 0xff， 0x00， 0xff）;

imagefttext（$thumb， 15， 0， 0，35， $color， $font_style， 'XX的個(gè)人相冊(cè)'）;

實(shí)現(xiàn)效果如圖5、圖6所示。

2.3? 查看圖片

在瀏覽相冊(cè)中的多個(gè)圖片時(shí)，若要反復(fù)從相冊(cè)列表和圖片查看頁(yè)面切換，顯得非常麻煩。因此可以在圖片展示頁(yè)面中添加切換上一張和下一張圖片的鏈接，主要代碼如下：

$prev = db_fetch_row（"SELECT `id` FROM `picture` WHERE `pid`=$pid AND `id`<$id

ORDER BY `id` DESC LIMIT 1"）['id'];

$next = db_fetch_row（"SELECT `id` FROM `picture` WHERE `pid`=$pid AND `id`>$id

ORDER BY `id` ASC LIMIT 1"）['id'];

實(shí)現(xiàn)效果如圖7所示。

2.4? 圖片搜索功能

相冊(cè)中圖片很多，當(dāng)忘記自己需要的圖片放置在那個(gè)相冊(cè)中時(shí)，每個(gè)相冊(cè)逐個(gè)查找太麻煩，本項(xiàng)目中提供了圖片搜索功能是按照?qǐng)D片的文件名進(jìn)行搜索，用戶(hù)可以輸入關(guān)鍵詞，查找相冊(cè)中所有符合關(guān)鍵詞的圖片，利用SQL語(yǔ)句中的LIKE操作符進(jìn)行搜索即可。需要注意的是，由于LIKE條件可以用“%”“_”進(jìn)行模糊搜索，為了避免用戶(hù)輸入的內(nèi)容和這些字符沖突，應(yīng)該將這些字符進(jìn)行轉(zhuǎn)義。主要代碼如下：

$search = input（'get'， 'search'， 's'）;

$like = '%' .db_escape_like（$search）. '%';

$list = db_fetch_all（"SELECT `id`，`name`，`save` FROM `picture` WHERE `name` LIKE ？ ORDER BY `id` DESC"， 's'， [$like]）;

實(shí)現(xiàn)效果如圖8所示。

2.5? 刪除圖片

對(duì)于相冊(cè)中不再需要的照片可以刪除，實(shí)現(xiàn)圖片的刪除，在刪除圖片時(shí)，不僅需要?jiǎng)h除數(shù)據(jù)庫(kù)中的記錄，還需要?jiǎng)h除圖片的文件和縮略圖。主要代碼如下：

if （！$data = album_picture_data（$id）） {

return tips（'刪除失?。簣D片不存在！'）;

}

db_exec（"DELETE FROM `picture` WHERE `id`=$id"）;

實(shí)現(xiàn)效果如圖9所示。

3? 結(jié)? 論

在線相冊(cè)系統(tǒng)的實(shí)現(xiàn)，方便大家存儲(chǔ)和管理自己的照片和喜歡的圖片，也能夠及時(shí)與他人分享自己的生活記錄。通過(guò)創(chuàng)建相冊(cè)模塊可以將圖片清楚的分類(lèi)管理，通過(guò)生成縮略圖可以使相冊(cè)中的圖片大小比較統(tǒng)一，添加水印功能保證網(wǎng)站中所上傳的圖片不被他人盜用，通過(guò)查找功能可以很快找到自己想要的圖片，使用戶(hù)在體驗(yàn)本系統(tǒng)同時(shí)更加愉快。本設(shè)計(jì)實(shí)現(xiàn)了一個(gè)個(gè)性化的在線相冊(cè)，為廣大攝影愛(ài)好者提供了溝通和交流的平臺(tái)。

參考文獻(xiàn)：

[1] 朱小琴.基于PHP技術(shù)的電子相冊(cè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn) [J].河北軟件職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016，18（4）：56-59+73.

[2] 白春雨.基于PHP的社交化藝術(shù)品電商平臺(tái)的研究與設(shè)計(jì) [D].北京：北京郵電大學(xué)，2021.

[3] 黑馬程序員.PHP基礎(chǔ)案例教程 [M].北京：人民郵電出版社，2017.

[4] 王飛飛.MySQL數(shù)據(jù)庫(kù)應(yīng)用從入門(mén)到精通 [M].北京：中國(guó)鐵道出版社，2014.

[5] 周少卿.基于PHP+MySQL的“許愿墻”設(shè)計(jì) [J].無(wú)線互聯(lián)科技，2022，19（11）：73-75.

作者簡(jiǎn)介：張日花（1980—），女，漢族，山東德州人，高級(jí)工程師，本科，研究方向：計(jì)算機(jī)應(yīng)用；劉婷婷（1989—），女，漢族，山東德州人，講師，碩士研究生，研究方向：計(jì)算機(jī)應(yīng)用；陳紅娟（1998—），女，民族，漢，河北衡水人，工程師，本科，研究方向：計(jì)算機(jī)科學(xué)與技術(shù)。