基于PHP+MySQL許愿墻的設(shè)計(jì)與實(shí)現(xiàn)

王汝山 郭俊亮 張洪川

（銅仁職業(yè)技術(shù)學(xué)院 貴州省銅仁市 554300）

隨著學(xué)習(xí)的不斷深入，在完成網(wǎng)頁、數(shù)據(jù)庫等課程的基礎(chǔ)上，綜合運(yùn)用Web 表單和MySQL 數(shù)據(jù)庫設(shè)計(jì)開發(fā)“許愿墻”階段案例，將所學(xué)內(nèi)容運(yùn)用到實(shí)際案例中，達(dá)到學(xué)以致用的目的。

1 需求分析

1.1 實(shí)驗(yàn)背景

隨著網(wǎng)絡(luò)的普及，人們將許愿墻搬上網(wǎng)絡(luò)，通過網(wǎng)頁來管理愿望，這便是網(wǎng)絡(luò)“許愿樹”。

1.2 功能描述

在本項(xiàng)目中，對于許愿墻的具體需求如下：

（1）配置虛擬主機(jī)；

（2）MySQL 保存數(shù)據(jù)；

（3）提供發(fā)布、展示、修改和刪除功能；

（4）提供紅、綠、藍(lán)、黃貼紙；

（5）顯示發(fā)布時(shí)間；

（6）分頁展示；

（7）密碼保護(hù)可選項(xiàng)。

1.3 開發(fā)環(huán)境

開發(fā)環(huán)境如下：

操作系統(tǒng)：Windows 7 旗艦版

Apache：Apache2.4.41

PHP：PHP7.2.27

MySQL：mysql-8.0.19

2 案例實(shí)現(xiàn)

2.1 前期準(zhǔn)備

2.1.1 創(chuàng)建虛擬機(jī)

虛擬主機(jī)又稱共享主機(jī)，通過虛擬主機(jī)可在一臺服務(wù)器上部署多個(gè)項(xiàng)目。首先，啟用虛擬主機(jī)配置文件。打開Apache 配置文件httpd.conf，找到httpd-vhosts.conf 所在的行，取消注釋即可。

其次，配置虛擬主機(jī)文件。打開httpd-vhosts.conf 文件進(jìn)行配置，其中域名如下：

ServerName www.wishingwall.com

最后，配置本地DNS。打開C 盤下的系統(tǒng)文件hosts[2]，添加：127.0.0.1 www.wishingwall.com。重啟Apache 服務(wù)確保配置生效，在主目錄文件中編寫測試文件，添加代碼

2.1.2 目錄結(jié)構(gòu)

項(xiàng)目的開發(fā)除必要的PHP 文件外，頁面的前端展示還需要HTML、CSS、JavaScript 等[3]。本項(xiàng)目包括含目錄common、css、js、view，基本文件function.php、init.php、save.php、index.php，自定義模板文件index.php、add.html、edit.html、password.html。其中的index.php 是項(xiàng)目主頁，主要有展示、刪除愿望及密碼驗(yàn)證等功能，save.php 主要有添加、修改愿望等功能。

2.1.3 連接數(shù)據(jù)庫

連接數(shù)據(jù)庫時(shí)使用MySQLi 擴(kuò)展，打開PHP 配置文件php.ini，找到mysqli 所在行并取消注釋，重啟Apache 服務(wù)即可生效。

在MySQL 中創(chuàng)建數(shù)據(jù)庫，在init.php 文件中使用mysqli_connect()連接數(shù)據(jù)庫。

2.1.4 準(zhǔn)備公共函數(shù)

將公共函數(shù)保存在function.php 文件中。input()函數(shù)根據(jù)$method 為get 或post 確定對應(yīng)的超全局變量，根據(jù)$type 的值返回對應(yīng)類型的數(shù)據(jù)，例如s 對應(yīng)string，d 對應(yīng)int，a 對應(yīng)數(shù)組，若不存在，使用trigger_error()自定義錯(cuò)誤。

2.1.5 引入公共文件

為能夠在index.php 和save.php 中使用定義在common 中的init.php 和function.php，使用require 將其引入。

2.2 數(shù)據(jù)庫設(shè)計(jì)

在數(shù)據(jù)庫wish 中創(chuàng)建數(shù)據(jù)表wall，用于保存數(shù)據(jù)。表含有字段id、name、content、time、color、password，數(shù)據(jù)類型分別為int、varchar、varchar、int、varchar、varchar，分別代表id、姓名、內(nèi)容、發(fā)布時(shí)間戳、顏色、密碼。其中發(fā)布時(shí)間time 使用整型表示，主要用于保存 Unix 時(shí)間戳。在命令行使用insert 插入幾條測試數(shù)據(jù)。

2.3 愿望展示

2.3.1 查詢顯示所有愿望

在首頁index.php 中使用select 查詢所有愿望貼紙，并使用mysqli_query()執(zhí)行SQL 語句，使用mysqli_fetch_all()取出并顯示所有愿望。

2.3.2 日期格式化

由于表中保存的是Unix 時(shí)間戳，為讓其以友好格式顯示，在function.php 中添加format_date()函數(shù)，其實(shí)現(xiàn)思想是：計(jì)算當(dāng)前時(shí)間戳與表中時(shí)間戳的差（秒數(shù)），該差值若超過1 天則換算為天數(shù)；若不滿一天且超過1 小時(shí)則換算為小時(shí)數(shù)；若不滿1 小時(shí)且超過1 分鐘則換算為分鐘數(shù)；若不滿1 分鐘且超過1 秒則返回秒數(shù)；若不滿1 秒則返回“1 秒”。

其中$format 數(shù)組的鍵為對應(yīng)單位時(shí)間內(nèi)的秒數(shù)，例如1 天為60*60*24 秒，即86400 秒。為以良好的格式顯示貼紙，可將已取出的數(shù)據(jù)輸出到指定的index.html 模板中。

2.3.3 HTML 模板

打開index.html 文件，依次遍歷取出的$data 數(shù)組并顯示。對于name 和content 字段，由于是用戶輸入數(shù)據(jù)，使用htmlspecialchars()函數(shù)進(jìn)行轉(zhuǎn)義[4]；time 字段是自動獲取的系統(tǒng)時(shí)間，無需轉(zhuǎn)義，使用format_date()和date()進(jìn)行格式化輸出；color由單選按鈕提供，也無需轉(zhuǎn)義。

2.4 分頁查詢

2.4.1 原理

當(dāng)表中的數(shù)據(jù)越來越多時(shí)，頁面無法將其全部顯示，為防止數(shù)據(jù)量過大，可使用分頁功能。分頁功能又分為“假分頁”和“真分頁”。所謂“假分頁”是指一次性查詢出全部數(shù)據(jù)，顯示時(shí)依次取出部分?jǐn)?shù)據(jù)?！罢娣猪摗笔侵覆樵儠r(shí)限定查詢數(shù)量，將查詢出的數(shù)據(jù)全部顯示[5]。此處利用“真分頁”減輕服務(wù)器負(fù)擔(dān)。

MySQL 中的limit 命令用于限定select 命令中記錄的起始位置和數(shù)量。limit 后的第2 個(gè)參數(shù)為每次查詢的最大記錄數(shù)，第1 個(gè)參數(shù)為查詢起始記錄的偏移量。其兩個(gè)參數(shù)關(guān)系如下：

第1 個(gè)參數(shù) =(頁碼 - 1)*第2 個(gè)參數(shù)

由于每頁顯示的最大記錄數(shù)固定，可將第2 個(gè)參數(shù)定義為常量，在function.php 中創(chuàng)建函數(shù)返回limit 的兩個(gè)參數(shù)。

2.4.2 實(shí)現(xiàn)

通過function.php 中的input()函數(shù)確定當(dāng)前要顯示的頁碼，結(jié)合limit 參數(shù)拼接SQL 語句，通過ORDER 使最新發(fā)布的愿望排在最前面。為防止查詢到空白頁碼，需對流程進(jìn)行控制，使用header()重定向，并停止腳本執(zhí)行。

2.4.3 分頁導(dǎo)航

實(shí)現(xiàn)分頁查詢后，為方便翻頁瀏覽，需提供分頁導(dǎo)航功能，通常包括“首頁”、“上一頁”、“下一頁”、“尾頁”鏈接。首頁的頁碼為1，尾頁的頁碼為最后一頁的頁碼。

使用count(*)獲取總記錄數(shù)，總頁數(shù)為總記錄數(shù)/每頁記錄數(shù)，若不能整除則向上取整，最小值為1。

打開function.php，將分頁導(dǎo)航代碼封裝到函數(shù)page_html()中，用于返回導(dǎo)航鏈接。其中，若位于首頁時(shí)，取消“首頁”和“上一頁”鏈接；若位于“尾頁”時(shí)，取消“下一頁”和“尾頁”鏈接。將鏈接輸出到index.html 模板中，通過瀏覽器訪問測試，如圖1所示。

2.5 發(fā)布愿望

2.5.1 創(chuàng)建表單

使用JS 實(shí)現(xiàn)當(dāng)單擊主頁中的“我要許愿”按鈕時(shí)彈出許愿表單，將其保存在add.html 文件中，在HTML 模板文件index.html 使用require 引入即可。

2.5.2 接收并過濾

add 表單會將數(shù)據(jù)提交到save.php 文件，因此在該腳本中使用input()接收變量，同時(shí)限制用戶提交數(shù)據(jù)的長度并指定默認(rèn)值。strlen()函數(shù)對于中、英文字符并不能準(zhǔn)確地獲取字符長度，因此需要使用PHP 提供的mb_strlen()函數(shù)，使用mb_strimwidth()截取指定寬度的字符串。而該函數(shù)的使用需要在PHP 配置文件中開啟相應(yīng)的擴(kuò)展，找到mbstring 一行并取消注釋，重啟Apache 服務(wù)即可生效。

2.5.3 保存數(shù)據(jù)

完成對輸入數(shù)據(jù)的過濾后，即可將數(shù)據(jù)保存到數(shù)據(jù)庫中。打開save.php，利用MySQLi 擴(kuò)展提供的預(yù)處理方式，實(shí)現(xiàn)了SQL 語句與數(shù)據(jù)的分離，同時(shí)支持批量操作。

PHP 執(zhí)行SQL 的傳統(tǒng)方式是將發(fā)送的數(shù)據(jù)與SQL 語句綁定，每條SQL 都需要經(jīng)過分析、編譯、優(yōu)化，而預(yù)處理方式則是預(yù)先編譯一次用戶提交的SQL 模板，在操作時(shí)，直接添加數(shù)據(jù)即可，大大提高了運(yùn)行效率。保存完畢，使用header()函數(shù)跳轉(zhuǎn)到首頁。

2.6 修改愿望

2.6.1 驗(yàn)證密碼

為防止提交的愿望被隨意修改，在發(fā)布時(shí)提供密碼保護(hù)可選項(xiàng)。若設(shè)置密碼，則在修改和刪除愿望時(shí)需首先驗(yàn)證密碼。在展示愿望貼紙時(shí)，顯示每個(gè)愿望的修改鏈接。

單擊超鏈接會為index.php 傳遞愿望id 和當(dāng)前page 頁碼。打開首頁index.php，使用input()函數(shù)獲取待編輯愿望的id，使用max()確保id 有效。在獲取$id 后，即可根據(jù)$id 判斷是否需要顯示驗(yàn)證密碼表單。

利用$id 及密碼驗(yàn)證表單中的密碼即可查詢指定的數(shù)據(jù)記錄是否存在。在首頁index.php 中添加如下代碼：

$checked = isset($_POST['password'])|| empty($edit['password']);

其中的$checked 指明密碼驗(yàn)證是否成功。當(dāng)原密碼為空或密碼正確時(shí)值為true，密碼不正確時(shí)值為false。$tips 保存驗(yàn)證失敗時(shí)的提示信息。為顯示修改表單，在模板中添加如下代碼：

require($checked?'edit':'password').'.html';

圖1：分頁導(dǎo)航

圖2：修改或刪除標(biāo)記

將index.php 中查詢出結(jié)果集取出，使用函數(shù)mysqli_fetch_assoc()將數(shù)據(jù)保存為關(guān)聯(lián)數(shù)組，并在edit.html 顯示修改愿望表單。

2.6.2 確認(rèn)更新

save.php 目前只有添加功能，根據(jù)傳遞的id 參數(shù)可以判斷此時(shí)是添加還是修改操作。在修改前，同樣需要驗(yàn)證保護(hù)密碼。若數(shù)據(jù)記錄存在且密碼一致，使用預(yù)處理操作修改數(shù)據(jù)記錄。

2.7 刪除愿望

刪除愿望主要用于發(fā)布者刪除自己的愿望。為防止被別人誤刪，同樣需要進(jìn)行密碼驗(yàn)證。添加刪除超鏈接，其中的“action=delete”用于區(qū)分刪除和修改功能，單擊超鏈接會為index.php 傳遞待刪除愿望id 和當(dāng)前page 頁碼。

當(dāng)要修改或刪除愿望時(shí)，將鼠標(biāo)移動至愿望貼紙上，即可顯示修改和刪除標(biāo)記和×，如圖2所示。

3 結(jié)束語

本文主要使用Apache+PHP+MySQL 實(shí)現(xiàn)“許愿墻”案例。利用Apache 配置虛擬主機(jī)，利用MySQL 保存數(shù)據(jù)記錄，使用MySQLi 擴(kuò)展訪問數(shù)據(jù)庫，實(shí)現(xiàn)了Unix 時(shí)間戳的友好顯示，實(shí)現(xiàn)了分頁顯示功能，為限制修改提供了密碼保護(hù)功能。通過該階段性案例，加強(qiáng)了學(xué)生對PHP 基礎(chǔ)知識的理解。