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

周少卿

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

0 引言

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

1 許愿墻的設(shè)計

1.1 許愿墻的需求分析

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

(1) 配置一個虛擬主機用于測試和運行項目。

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

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

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

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

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

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

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

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

圖1 項目開發(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 以上版本;借助第三方平臺Phpstudy_pro 安裝配置后使用。

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

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

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

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

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

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

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

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

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

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

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

INSERT INTO -wish- VALUES

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

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

(3, '匿名', '爭取畢業(yè)月薪過萬! ', 1490251234, 'blue', '000000'),

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

1.5 許愿墻的展示

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

{

$diff = time() - $time;

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

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

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

if ( $result) {

return $result.$v;

}

}

return '0.5 秒';}

(2)編寫HTML 模板。

通過對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 模板輸出后,通過瀏覽器訪問進(jìn)行測試,效果如圖2 所示。

圖2 “許愿墻”展示

(3)分頁查詢。

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

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

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

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

圖3 分頁導(dǎo)航

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

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

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

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

(5)修改和刪除愿望。

為了防止愿望被作者以外的人修改,在發(fā)表愿望時可以設(shè)置保護(hù)密碼,當(dāng)愿望受到密碼保護(hù)后,在修改和刪除愿望時就要先驗證密碼;在修改連接上添加愿望id 和頁碼;在主頁中,獲取待編輯的愿望id,顯示密碼驗證表單;驗證不通過,顯示對應(yīng)的提示信息;驗證通過,顯示修改愿望表單;在保存頁中,接收用戶編輯的愿望數(shù)據(jù),同時在修改前要驗證保護(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í)行刪除操作時需要驗證保護(hù)密碼。

2 結(jié)語

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

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