基于PHP+MySQL的在線相冊設計與實現(xiàn)

張日花 劉婷婷 陳紅娟

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

關鍵詞：在線相冊；PHP；MySQL

中圖分類號：TP311? 文獻標識碼：A? 文章編號：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ù)碼相機和手機在家庭中越來越普及，人們可以更方便地拍攝照片，又不把拍攝的照片都沖印出來，更多是選擇了存儲在電腦和手機里，但時間一長，照片越來越多，就會顯得雜亂無章，不方便管理，在線電子相冊就充當了非常重要的作用，在線電子相冊的設計與實現(xiàn)，能解決大量自拍者以及攝影愛好者大容量圖片資料的存儲與管理問題，為用戶提供一個網(wǎng)絡存儲空間，讓用戶可以方便地把自己的照片分享給朋友或者任何用戶。在線相冊能為這些圖片等進行分類管理，通過創(chuàng)建相冊、上傳圖片、搜索圖片、刪除圖片、圖片生成縮略圖、添加水印等功能來動態(tài)操作這些圖片，并實現(xiàn)相冊資料的在線、實時、交互式管理[1]。

1? 在線相冊的設計

1.1? 在線相冊的需求分析

在本設計中，對于在線相冊的具體需求分析如下：

1）配置本地服務器用于測試和運行項目。

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

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

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

5）在相冊中顯示圖片列表時，為避免圖片文件過大造成頁面打開緩慢，只顯示縮略圖。

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

7）支持相冊圖片的刪除，在刪除相冊時只允許刪除空相冊。

8）支持設置相冊封面。

9）可以通過文件名字搜索相冊中的圖片。

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

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

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

網(wǎng)站的開發(fā)技術是PHP技術。PHP，一個嵌套的縮寫名稱，是英文超級文本預處理語言PHP：Hypertext Preprocessor的縮寫。PHP是全球網(wǎng)站使用最多的腳本語言之一，全球前100萬的網(wǎng)站中，有超過70%的網(wǎng)站使用了PHP開發(fā)，隨著開源潮流的蓬勃發(fā)展，PHP與Linux、Apache和MySQL一起共同組成了一個強大的Web應用程序平臺，簡稱LAMP。PHP之所以應用廣泛，受到大家歡迎，是因為它有很多突出的特點如：開源免費、跨平臺、面向?qū)ο?、支持多種數(shù)據(jù)庫、快捷[2]。

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

Apache服務器是一款源代碼開放的Web服務器，由于其開源、跨平臺和安全性的特點被廣泛應用。

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

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

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

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

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，

];

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

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

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

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

本設計中，對數(shù)據(jù)庫的操作是十分頻繁的，通過封裝函數(shù)實現(xiàn)一次定義多次引用，編寫db_connect（）函數(shù)用于連接數(shù)據(jù)庫，該函數(shù)通過靜態(tài)變量$link保存數(shù)據(jù)庫連接，僅當函數(shù)第一次調(diào)用的時候連接數(shù)據(jù)庫[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ù)庫連接失?。? . mysqli_connect_error（））;

}

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

}

return $link;

}

1.5.2? 引入公共文件

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

require './comm/function.php';

require './comm/db.php';

date_default_timezone_set（'Asia/Shanghai'）;

mb_internal_encoding（'UTF-8'）;

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

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

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

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

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

2? 相冊管理

2.1? 創(chuàng)建相冊

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

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

在后臺接收來自POST方式提交的action隱藏域內(nèi)容，由于在新建相冊時，需要判斷當前相冊嵌套的層數(shù)是否超過了限制，用于根據(jù)相冊id獲取相冊記錄，同時考慮到此功能多次調(diào)用，利用靜態(tài)變量保存從數(shù)據(jù)庫中查詢到的結(jié)果，$data數(shù)組的鍵是待查詢的相冊ID，若從數(shù)據(jù)庫中查不到則返回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ù)后，再編寫創(chuàng)建相冊函數(shù)，計算相冊的上級相冊的數(shù)量，判斷是否達到了最大值，當達到最大值時，輸出提示信息“無法繼續(xù)創(chuàng)建子目錄，已經(jīng)達到最多層級！”，否則，應用INSERT插入語句創(chuàng)建相冊，主要代碼如下：

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

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

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

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

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

通過瀏覽器訪問進行測試效果如圖2、圖3所示。

2.2? 圖片上傳

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

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

// 檢查文件類型是否正確

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

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

return tips（'文件上傳失?。褐辉试S擴展名：' . implode（'， '， config（'ALLOW_EXT'）））;? ? }

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

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

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

2.2.2? 生成縮略圖

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

$info = getimagesize（$file）;

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

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

在計算坐標點時，應考慮原圖寬度大于高度和高度大于寬度兩種情況。主要代碼如下：

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)常需要在所上傳的圖片上添加水印，水印分為圖片水印和文字水印，本項目采用文字水印，在每張上傳的圖片上添加“XX的個人相冊”，以保護自己圖片的信息不被盜用。關鍵代碼如下：

//設置字體

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

//設置字體顏色

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

imagefttext（$thumb， 15， 0， 0，35， $color， $font_style， 'XX的個人相冊'）;

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

2.3? 查看圖片

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

$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'];

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

2.4? 圖片搜索功能

相冊中圖片很多，當忘記自己需要的圖片放置在那個相冊中時，每個相冊逐個查找太麻煩，本項目中提供了圖片搜索功能是按照圖片的文件名進行搜索，用戶可以輸入關鍵詞，查找相冊中所有符合關鍵詞的圖片，利用SQL語句中的LIKE操作符進行搜索即可。需要注意的是，由于LIKE條件可以用“%”“_”進行模糊搜索，為了避免用戶輸入的內(nèi)容和這些字符沖突，應該將這些字符進行轉(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]）;

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

2.5? 刪除圖片

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

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

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

}

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

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

3? 結(jié)? 論

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

參考文獻：

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

[2] 白春雨.基于PHP的社交化藝術品電商平臺的研究與設計 [D].北京：北京郵電大學，2021.

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

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

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

作者簡介：張日花（1980—），女，漢族，山東德州人，高級工程師，本科，研究方向：計算機應用；劉婷婷（1989—），女，漢族，山東德州人，講師，碩士研究生，研究方向：計算機應用；陳紅娟（1998—），女，民族，漢，河北衡水人，工程師，本科，研究方向：計算機科學與技術。