基于PHP+MySQL 的“許愿墻”設(shè)計(jì)

周少卿

(昆山登云科技職業(yè)學(xué)院,江蘇 昆山 215300)

0 引言

在生活中,“許愿墻”是一種承載愿望的實(shí)體,來(lái)源于“許愿樹”的習(xí)俗,寫上愿望,再誠(chéng)心許愿后將其拋上樹干,希望愿望得以實(shí)現(xiàn)。 后來(lái)人們逐漸改變觀念,開始將愿望寫在小紙片上,然后貼在墻上,這就是“許愿墻”的由來(lái)。 隨著網(wǎng)絡(luò)的興起,“許愿墻”被人們搬到了網(wǎng)絡(luò)上,越來(lái)越多的人喜歡在網(wǎng)絡(luò)里許上自己美好的愿望。

1 許愿墻的設(shè)計(jì)

1.1 許愿墻的需求分析

在本設(shè)計(jì)中,對(duì)于許愿墻的具體需求如下:

(1) 配置一個(gè)虛擬主機(jī)用于測(cè)試和運(yùn)行項(xiàng)目。

(2) 通過(guò)MySQL 數(shù)據(jù)庫(kù)保存用戶的數(shù)據(jù)。

(3) 提供展示愿望、發(fā)表愿望、修改愿望和刪除愿望4 個(gè)主要功能。

(4) 提供綠色、藍(lán)色、黃色、紅色4 種顏色的心愿貼紙。

(5) 顯示愿望的發(fā)表時(shí)間,以形如“10 分鐘前 16:21”的友好格式顯示。

(6) 在展示愿望時(shí),為了避免單個(gè)頁(yè)面的數(shù)據(jù)過(guò)多,以分頁(yè)的方式進(jìn)行展示。

(7) 為了防止自己的愿望被其他人隨意修改,在發(fā)表愿望時(shí)可以設(shè)置保護(hù)密碼。

當(dāng)愿望設(shè)置了保護(hù)密碼后,在對(duì)其修改、刪除時(shí),需要驗(yàn)證密碼。

首先進(jìn)行準(zhǔn)備工作,如圖1 所示。

圖1 項(xiàng)目開發(fā)準(zhǔn)備工作

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

操作系統(tǒng):Windows10 專業(yè)版;Apache:Apache 2.4.39以上版本;PHP:PHP7.1 以上版本;MySQL:mysql-5.7.26 以上版本;借助第三方平臺(tái)Phpstudy_pro 安裝配置后使用。

1.3 目錄機(jī)構(gòu)劃分

在項(xiàng)目開發(fā)中,需要對(duì)項(xiàng)目文件進(jìn)行合理的管理,進(jìn)行項(xiàng)目的目錄結(jié)構(gòu)劃分,如表1 所示。 本設(shè)計(jì)的功能主要通過(guò)Index.php 和save.php 來(lái)完成,其中Index.php 是系統(tǒng)的首頁(yè),提供了展示愿望、驗(yàn)證密碼、刪除愿望的功能,save.php 專門用于添加和修改愿望,目錄劃分是參考,大家可以根據(jù)自己的習(xí)慣進(jìn)行劃分,易于維護(hù)即可。

表1 許愿墻的目錄結(jié)構(gòu)

1.4 數(shù)據(jù)庫(kù)連接和數(shù)據(jù)庫(kù)的設(shè)計(jì)

公共函數(shù)是項(xiàng)目中通用的函數(shù)庫(kù),保存在function.php 文件中,用于封裝一些常用的代碼,以提高代碼的可復(fù)用性和可維護(hù)性。 對(duì)于$ _GET、 $ _POST 等外部變量的接收和過(guò)濾是常用的操作[1]。 編了公共文件后,為了能夠在Index.php 和save.php 中使用,應(yīng)在這兩個(gè)文件中引入公共文件,具體代碼如下:

1 ＜? php require ‘./common/init.php’;

2 require ‘./common/function.php’;? ＞

上述代碼執(zhí)行后,即可使用數(shù)據(jù)庫(kù)連接$link 和公共函數(shù)。

數(shù)據(jù)庫(kù)設(shè)計(jì)在本設(shè)計(jì)開發(fā)過(guò)程中起著至關(guān)重要的作用,如果設(shè)計(jì)不合理、不完善,在開發(fā)和維護(hù)過(guò)程中可能出現(xiàn)很多問(wèn)題。 本設(shè)計(jì)在MySQL 中創(chuàng)建數(shù)據(jù)庫(kù)wish,用于保存本設(shè)計(jì)中的數(shù)據(jù),通過(guò)具體分析,創(chuàng)建數(shù)據(jù)表結(jié)構(gòu),如表2 所示。

表2 wish 表結(jié)構(gòu)

本設(shè)計(jì)為數(shù)據(jù)表插入一些測(cè)試數(shù)據(jù):

INSERT INTO -wish- VALUES

(1, '張三', '天天開心、心想事成、大吉大利、一帆風(fēng)順。 ', 1490240257, 'red', '111'),

(2, 'PHP 愛好者', '祝愿PHP 越來(lái)越好! ', 1490241675, 'yellow', ''),

(3, '匿名', '爭(zhēng)取畢業(yè)月薪過(guò)萬(wàn)! ', 1490251234, 'blue', '000000'),

(4, '小明', '考上清華大學(xué)', 1490252675, 'green', '123')。

1.5 許愿墻的展示

(1)“許愿墻”的首頁(yè)是index.php,當(dāng)頁(yè)面打開后,就會(huì)顯示所有的愿望貼紙,考慮到對(duì)時(shí)間戳進(jìn)行格式化處理是一個(gè)獨(dú)立的功能,本設(shè)計(jì)將這個(gè)功能封裝成函數(shù),從而更好地維護(hù)代碼。 本研究定義format_data()函數(shù)[2],主要代碼如下:function format_date( $time)

{

$diff = time() - $time;

$format = [86400 =＞ '天', 3600 =＞ '小時(shí)', 60=＞ '分鐘', 1 =＞ '秒'];

foreach ( $format as $k =＞ $v) {

$result = floor( $diff/ $k);

if ( $result) {

return $result.$v;

}

}

return '0.5 秒';}

(2)編寫HTML 模板。

通過(guò)對(duì)foreach 遍歷$data 數(shù)組,主要代碼如下:

＜! -- 輸出許愿墻 --＞

＜? php foreach( $data as $v): ? ＞

＜div class="note-list note-list-＜? = $v['color']?＞"＞

＜ul＞

＜li＞ FORM: ＜? =htmlspecialchars( $v['name'])?＞＜/span＞＜/li＞

＜li＞＜? =htmlspecialchars( $v['content'])? ＞＜/li＞

＜li＞(＜? =format_date( $v['time'])? ＞前 ＜? =date('H:i', $v['time'])? ＞)＜/li＞

＜/ul＞

＜/div＞

＜? php endforeach; ? ＞

在完成HTML 模板輸出后,通過(guò)瀏覽器訪問(wèn)進(jìn)行測(cè)試,效果如圖2 所示。

圖2 “許愿墻”展示

(3)分頁(yè)查詢。

當(dāng)“許愿墻”中的愿望越來(lái)越多時(shí),一個(gè)頁(yè)面中承載了大量的數(shù)據(jù),這將導(dǎo)致網(wǎng)頁(yè)打開緩慢,消耗大量的系統(tǒng)資源。 為了防止數(shù)據(jù)量過(guò)大,可以為“許愿墻”添加分頁(yè)功能,一次只查詢指定數(shù)量的數(shù)據(jù)。 分頁(yè)實(shí)現(xiàn)的原理是利用LIMIT 限制SELECT 語(yǔ)句查詢出數(shù)據(jù),SQL 代碼如下:

SELECT ‘content ‘FROM ‘wish’ LIMIT 0,10;#查詢第1 頁(yè)的10 條數(shù)據(jù)。

SELECT ‘content ‘FROM ‘wish’ LIMIT 10,10;#查詢第2 頁(yè)的10 條數(shù)據(jù)。

在實(shí)現(xiàn)分頁(yè)查詢的功能后,為了方便用戶在網(wǎng)頁(yè)中進(jìn)行翻頁(yè)瀏覽,需要提供分頁(yè)導(dǎo)航,通常分頁(yè)導(dǎo)航包括“首頁(yè)”“上一頁(yè)”“下一頁(yè)”和“尾頁(yè)”鏈接,其中“尾頁(yè)”需要用到最后一頁(yè)的頁(yè)碼值,可以自己編一個(gè)函數(shù)來(lái)實(shí)現(xiàn)[3]。 效果如圖3 所示。

圖3 分頁(yè)導(dǎo)航

(4)發(fā)表愿望。

當(dāng)單擊“許愿墻”頁(yè)面中的“我要許愿”按鈕時(shí),就會(huì)出現(xiàn)一個(gè)用于填寫信息的表單,這個(gè)效果是通過(guò)JavaScript 實(shí)現(xiàn)的。 為了便于程序維護(hù),表單的HTML代碼保存在添加的html 文件中。 準(zhǔn)備發(fā)表愿望的表單,在index.html 中引入,利用自定義的input()函數(shù)接收并過(guò)濾用戶提交的數(shù)據(jù),按照要求對(duì)用戶提交的數(shù)據(jù)進(jìn)行判斷。 例如,貼紙的顏色只能是藍(lán)、黃、綠、紅中的一種,通過(guò)驗(yàn)證后,將用戶提交的數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中。 在viewindex.html 中引入add.html 的代碼如下:

(1) ＜! --添加愿望表單--＞

(2) ＜? php require ‘/view/common/add.html’;? ＞

(5)修改和刪除愿望。

為了防止愿望被作者以外的人修改,在發(fā)表愿望時(shí)可以設(shè)置保護(hù)密碼,當(dāng)愿望受到密碼保護(hù)后,在修改和刪除愿望時(shí)就要先驗(yàn)證密碼;在修改連接上添加愿望id 和頁(yè)碼;在主頁(yè)中,獲取待編輯的愿望id,顯示密碼驗(yàn)證表單;驗(yàn)證不通過(guò),顯示對(duì)應(yīng)的提示信息;驗(yàn)證通過(guò),顯示修改愿望表單;在保存頁(yè)中,接收用戶編輯的愿望數(shù)據(jù),同時(shí)在修改前要驗(yàn)證保護(hù)密碼是否正確。如刪除愿望的部分代碼:/ / 修改或刪除愿望。

$id = max(input('get', 'id', 'd'), 0);

$action = input('get', 'action', 's');

if ( $id) {

$password = input('post', 'password', 's');

$SQL = 'SELECT -name-,-content-,-color-,-password- FROM -wish- WHERE -id-='.$id;

if (! $res = mySQLi_query( $link, $SQL)) {

exit("SQL[ $SQL]執(zhí)行失敗:".mySQLi_error( $link).$SQL);

if (! $edit = mySQLi_fetch_assoc( $res)) {

exit('該愿望不存在! ');

“刪除愿望”功能用于作者自己刪除自己的愿望,為防止被其他人誤刪,在執(zhí)行刪除操作時(shí)需要驗(yàn)證保護(hù)密碼。

2 結(jié)語(yǔ)

本設(shè)計(jì)的主要目的是能夠根據(jù)開發(fā)需求,利用表單輸入信息,在提交表單后能將其保存到數(shù)據(jù)庫(kù)中。同時(shí),要考慮是否需要對(duì)來(lái)自外部的數(shù)據(jù)進(jìn)行過(guò)濾,提高程序的健壯性和穩(wěn)定性。 在完成此設(shè)計(jì)后,本團(tuán)隊(duì)可以嘗試開發(fā)其他類型的項(xiàng)目,如留言板、博客、學(xué)生管理系統(tǒng)等,靈活運(yùn)用所學(xué)知識(shí),增加項(xiàng)目開發(fā)經(jīng)驗(yàn),在課堂教學(xué)管理和學(xué)生管理中起到積極作用。

高職學(xué)生的學(xué)習(xí)尤其需要老師引導(dǎo),“許愿墻”的設(shè)計(jì)一方面能夠激發(fā)學(xué)生的學(xué)習(xí)興趣,另一方面也可以發(fā)掘?qū)W生的潛能。 潛能是有待開發(fā)的深層智慧和能量,正常人還有90%的潛能尚未利用。 許愿墻項(xiàng)目開發(fā)好以后,班級(jí)出現(xiàn)了許多的運(yùn)動(dòng)健將、手繪能手、演講高手、網(wǎng)頁(yè)制作高手等[4]。