基于PHP+MySQL 的“許愿墻”設計

周少卿

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

0 引言

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

1 許愿墻的設計

1.1 許愿墻的需求分析

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

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

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

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

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

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

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

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

當愿望設置了保護密碼后,在對其修改、刪除時,需要驗證密碼。

首先進行準備工作,如圖1 所示。

圖1 項目開發準備工作

1.2 開發環境配置及要求

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

1.3 目錄機構劃分

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

表1 許愿墻的目錄結構

1.4 數據庫連接和數據庫的設計

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

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

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

上述代碼執行后,即可使用數據庫連接$link 和公共函數。

數據庫設計在本設計開發過程中起著至關重要的作用,如果設計不合理、不完善,在開發和維護過程中可能出現很多問題。 本設計在MySQL 中創建數據庫wish,用于保存本設計中的數據,通過具體分析,創建數據表結構,如表2 所示。

表2 wish 表結構

本設計為數據表插入一些測試數據:

INSERT INTO -wish- VALUES

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

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

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

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

1.5 許愿墻的展示

(1)“許愿墻”的首頁是index.php,當頁面打開后,就會顯示所有的愿望貼紙,考慮到對時間戳進行格式化處理是一個獨立的功能,本設計將這個功能封裝成函數,從而更好地維護代碼。 本研究定義format_data()函數[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 數組,主要代碼如下:

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

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

圖2 “許愿墻”展示

(3)分頁查詢。

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

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

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

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

圖3 分頁導航

(4)發表愿望。

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

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

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

(5)修改和刪除愿望。

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

$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]執行失敗:".mySQLi_error( $link).$SQL);

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

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

“刪除愿望”功能用于作者自己刪除自己的愿望,為防止被其他人誤刪,在執行刪除操作時需要驗證保護密碼。

2 結語

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

高職學生的學習尤其需要老師引導,“許愿墻”的設計一方面能夠激發學生的學習興趣,另一方面也可以發掘學生的潛能。 潛能是有待開發的深層智慧和能量,正常人還有90%的潛能尚未利用。 許愿墻項目開發好以后,班級出現了許多的運動健將、手繪能手、演講高手、網頁制作高手等[4]。