PHP+MySQL網(wǎng)站開(kāi)發(fā)前臺(tái)功能實(shí)現(xiàn)

模塊六前臺(tái)功能實(shí)現(xiàn)MySQL安裝與使用HTTP,會(huì)話技術(shù)PHP操作數(shù)據(jù)庫(kù)文件,圖像技術(shù)任務(wù)一任務(wù)二任務(wù)三頁(yè)面展示文章展示記錄瀏覽歷史任務(wù)四擴(kuò)展提高響應(yīng)式布局密碼安全存儲(chǔ)目錄在開(kāi)發(fā)前臺(tái)功能時(shí),需要先完成前臺(tái)地初始化文件init.php前臺(tái)初始化<?php//定義項(xiàng)目有關(guān)地常量define('APP_DEBUG',true); 調(diào)試開(kāi)關(guān)define('MON_PATH','./mon/'); //公文件目錄define('UPLOAD_PATH','./upload/'); //上傳文件目錄//載入有關(guān)地文件requireMON_PATH.'function.php'; //載入函數(shù)庫(kù)requireMON_PATH.'db.php'; //載入數(shù)據(jù)庫(kù)函數(shù)requireMON_PATH.'module.php'; //載入模塊函數(shù)任務(wù)一:頁(yè)面展示前臺(tái)首頁(yè)展示——定義模板數(shù)據(jù)前臺(tái)首頁(yè)是用戶訪問(wèn)網(wǎng)站后看到地第一個(gè)頁(yè)面,網(wǎng)站為了留住用戶,通常會(huì)在首頁(yè)放一些吸引地文章內(nèi)容。在首頁(yè)通過(guò)$data數(shù)組進(jìn)行保存,主要分為兩部分內(nèi)容:head用于保存網(wǎng)頁(yè)地頭部信息,即title,keywords,description這些<meta>信息,以便于搜索引擎抓取;nav用于保存本系統(tǒng)地導(dǎo)航欄信息,即頁(yè)面標(biāo)識(shí)與頂部導(dǎo)航欄,方便動(dòng)態(tài)獲取欄目。任務(wù)一:頁(yè)面展示前臺(tái)首頁(yè)展示——定義模板數(shù)據(jù)頂部導(dǎo)航欄是有個(gè)數(shù)限制地,同時(shí)根據(jù)字段sort排序進(jìn)行截取。因此,為方便編程,接下來(lái)在mon\module.php編寫(xiě)module_category_nav()函數(shù),用于獲取導(dǎo)航欄顯示地內(nèi)容。在本項(xiàng)目,導(dǎo)航欄顯示地是頂級(jí)欄目地前4個(gè)欄目。任務(wù)一:頁(yè)面展示前臺(tái)首頁(yè)展示——輸出前臺(tái)布局頁(yè)面在完成數(shù)據(jù)地獲取后,接下來(lái)編寫(xiě)前臺(tái)地頁(yè)面布局文件view\layout.html。前臺(tái)地布局文件包含了頁(yè)面地整體布局,包括頁(yè)面地頭部,內(nèi)容與尾部。在前臺(tái)布局頁(yè)面head部分,輸出index.php定義地網(wǎng)頁(yè)頭部信息模塊在前臺(tái)布局頁(yè)面導(dǎo)航欄部分,輸出index.php獲取到地頂部導(dǎo)航任務(wù)一:頁(yè)面展示前臺(tái)首頁(yè)展示——效果展示任務(wù)一:頁(yè)面展示文章列表展示文章列表是在前臺(tái)首頁(yè)與欄目頁(yè)面都要顯示地內(nèi)容。在實(shí)現(xiàn)時(shí),前臺(tái)地文章列表與后臺(tái)文章列表地開(kāi)發(fā)思路相同,都是根據(jù)欄目ID到數(shù)據(jù)庫(kù)查詢出數(shù)據(jù),然后分頁(yè)進(jìn)行輸出。任務(wù)一:頁(yè)面展示文章列表展示——準(zhǔn)備列表參數(shù)創(chuàng)建文章列表文件list.php,載入項(xiàng)目初始化文件與分頁(yè)函數(shù),并獲取GET參數(shù)$cid與$page。$cid表示當(dāng)前篩選地欄目,$page表示當(dāng)前顯示地頁(yè)碼。任務(wù)一:頁(yè)面展示文章列表展示——獲取文章列表在獲取到列表參數(shù)之后,接下來(lái)在mon\module.php編寫(xiě)module_article函數(shù),獲取文章列表。該函數(shù)參數(shù)$cid表示篩選欄目,$page是當(dāng)前頁(yè)碼,$limit是限制取出地個(gè)數(shù)準(zhǔn)備查詢條件,查詢欄目與子欄目下所有地文章,前臺(tái)只顯示已發(fā)布文章生成LIMIT,獲取總頁(yè)數(shù)查詢文章列表并返回任務(wù)一:頁(yè)面展示文章列表展示——定義模板數(shù)據(jù)繼續(xù)編輯文章列表功能文件list.php,將模板需要顯示地?cái)?shù)據(jù)查詢出來(lái)。定義頂部導(dǎo)航,保存當(dāng)前查看地欄目,獲取導(dǎo)航欄顯示地欄目調(diào)用module_article()函數(shù)獲取文章列表設(shè)置網(wǎng)頁(yè)頭部信息載入HTML模板任務(wù)一:頁(yè)面展示文章列表展示——顯示文章列表頁(yè)面判斷$data數(shù)組是否存在"list"元素,如果存在,則載入文章列表HTML模板view/module_list.html。在文章列表HTML模板view/module_list.html,依次輸出欄目名稱,文章標(biāo)題,文章簡(jiǎn)介,文章封面圖等詳細(xì)信息。任務(wù)一:頁(yè)面展示文章列表展示——效果展示任務(wù)一:頁(yè)面展示側(cè)邊欄展示——獲取側(cè)邊欄數(shù)據(jù)在網(wǎng)頁(yè)設(shè)計(jì),側(cè)邊欄是一種常見(jiàn)地布局方式,通常位于頁(yè)面右側(cè),顯示一些熱門(mén)文章,最新評(píng)論,有關(guān)欄目等信息。下面在文章列表頁(yè)輸出側(cè)邊欄,編輯list.php文件,調(diào)用函數(shù)獲取側(cè)邊欄數(shù)據(jù)調(diào)用自定義函數(shù)module_category_sidebar(),獲取欄目列表在mon\module.php定義相應(yīng)地函數(shù),,會(huì)先根據(jù)欄目ID查找子欄目,如果有子欄目則返回子欄目,如果沒(méi)有子欄目則返回同級(jí)欄目。其,獲取獲取瀏覽歷史與獲取熱門(mén)文章將在以后實(shí)現(xiàn)。任務(wù)一:頁(yè)面展示側(cè)邊欄展示——輸出側(cè)邊欄地欄目模塊在完成數(shù)據(jù)地獲取后,接下來(lái)在HTML模板輸出。<?phpif(isset($data['sidebar'])){require'./view/module_sidebar.html';}?>修改view\layout.html文件,在頁(yè)面內(nèi)容區(qū)添加如下代碼,通過(guò)判斷$data是否存在sidebar元素控制側(cè)邊欄是否顯示。創(chuàng)建view\module_sidebar.html文件,輸出側(cè)邊欄地欄目模塊。任務(wù)一:頁(yè)面展示側(cè)邊欄展示——效果展示任務(wù)一:頁(yè)面展示文章內(nèi)容展示獲取文章內(nèi)容獲取模板數(shù)據(jù)調(diào)用自定義函數(shù)module_article_show()根據(jù)文章ID獲取文章內(nèi)容判斷文章內(nèi)容是否存在,存在時(shí)將文章信息放入網(wǎng)頁(yè)頭部并根據(jù)文章所屬分類查詢分類名與側(cè)邊欄分類信息如果不存在,側(cè)邊欄顯示頂級(jí)欄目地信息任務(wù)二:文章展示文章內(nèi)容展示輸出文章內(nèi)容修改mon\layout.html,判斷當(dāng)$data存在show元素時(shí),顯示文章內(nèi)容。在輸出文章內(nèi)容時(shí),先判斷文章內(nèi)容數(shù)組是否為空如果為空則提示"您查看地文章不存在",并提供一個(gè)返回首頁(yè)地超鏈接在輸出文章信息時(shí),如果文章所屬欄目不存在,則輸出"無(wú)"如果文章作者字段為空,則輸出"匿名"任務(wù)二:文章展示上下篇切換查看文章內(nèi)容時(shí),為了方便用戶瀏覽有關(guān)地文章,通常會(huì)提供"上一篇"與"下一篇"鏈接。而文章上下篇切換地實(shí)現(xiàn)原理是,到數(shù)據(jù)庫(kù)根據(jù)文章地ID或發(fā)布時(shí)間查找最接近地文章。這里以文章ID地方式為例。任務(wù)二:文章展示上下篇切換編寫(xiě)show.php,具體代碼如下。$data['show']['change']=['prev'=>db_fetch(DB_ROW,"SELECT`id`,`title`FROM`s_article` WHERE`id`<?AND`show`='yes'ORDERBY`id`DESCLIMIT1",'i',$id),'next'=>db_fetch(DB_ROW,"SELECT`id`,`title`FROM`s_article` WHERE`id`>?AND`show`='yes'LIMIT1",'i',$id)];任務(wù)二:文章展示上下篇切換獲取到上一篇與下一篇文章地信息后,在view\module_show.html進(jìn)行輸出<?phpif(isset($data['show']['change'])):?>上一篇:<?phpif($data['show']['change']['prev']):?> <ahref="?id=<?=$data['show']['change']['prev']['id']?>"> <?=$data['show']['change']['prev']['title']?></a><?phpelse:?>無(wú)<?phpendif;?>下一篇:<?phpif($data['show']['change']['next']):?> <ahref="?id=<?=$data['show']['change']['next']['id']?>"> <?=$data['show']['change']['next']['title']?></a><?phpelse:?>無(wú)<?phpendif;?><?phpendif;?>任務(wù)二:文章展示上下篇切換——效果展示任務(wù)二:文章展示統(tǒng)計(jì)熱門(mén)文章當(dāng)一篇文章發(fā)布后,隨著訪問(wèn)量地增加,可能會(huì)產(chǎn)生一些熱門(mén)文章。而對(duì)于網(wǎng)站而言,文章地閱讀量越高,說(shuō)明關(guān)注該文章地越多,若網(wǎng)站提供熱門(mén)文章模塊,則可以吸引更多用戶訪問(wèn),提高頁(yè)面瀏覽量與用戶留存率。接下來(lái)將編寫(xiě)程序,在網(wǎng)站前臺(tái)地側(cè)邊欄顯示前10篇熱門(mén)文章。任務(wù)二:文章展示統(tǒng)計(jì)熱門(mén)文章統(tǒng)計(jì)文章瀏覽量為了獲知每篇文章地瀏覽量,可以在文章查看頁(yè)面show.php,更新文章地view字段。每次執(zhí)行show.php時(shí),都會(huì)將文章地瀏覽量加1。db_query("UPDATE`s_article`SET`views`=`views`+1WHERE`id`=?AND`show`='yes'",'i',$id);上述代碼是統(tǒng)計(jì)文章瀏覽量地一種簡(jiǎn)單方法,適合訪問(wèn)量較小地網(wǎng)站,且沒(méi)有對(duì)惡意刷新地情況進(jìn)行限制。如果網(wǎng)站地訪問(wèn)量非常大,建議使用NOSQL型數(shù)據(jù)庫(kù)進(jìn)行緩存,讀者可查找這方面地資料學(xué)習(xí)。任務(wù)二:文章展示統(tǒng)計(jì)熱門(mén)文章獲取熱門(mén)文章在保存了每篇文章地點(diǎn)擊量之后,在mon\module.php編寫(xiě)函數(shù),實(shí)現(xiàn)獲取前10篇熱門(mén)文章地列表信息。functionmodule_hot($limit=10){returndb_fetch(DB_ALL,"SELECT`id`,`title`FROM`s_article`WHERE`show`='yes'ORDERBY`views`DESCLIMIT0,$limit");}任務(wù)二:文章展示統(tǒng)計(jì)熱門(mén)文章獲取熱門(mén)文章接下來(lái)在view\module_sidebar.html輸出側(cè)邊欄地?zé)衢T(mén)文章模塊。<?phpif(!empty($data['sidebar']['hot'])):?>TOP10熱門(mén)文章<?phpforeach($data['sidebar']['hot']as$v):?><ahref="show.php?id=<?=$v['id']?>"><?=$v['title']?></a><?phpendforeach;?><?phpendif?>任務(wù)二:文章展示統(tǒng)計(jì)熱門(mén)文章——效果展示任務(wù)二:文章展示記錄用戶地瀏覽歷史,是網(wǎng)站常見(jiàn)地功能之一。Cookie可以在用戶地會(huì)話保存一些信息,因此通過(guò)Cookie即可記錄用戶地瀏覽歷史。任務(wù)三:記錄瀏覽歷史在mon\module.php編寫(xiě)函數(shù)實(shí)現(xiàn)記錄瀏覽歷史自定義函數(shù)module_history(),第一個(gè)參數(shù)$current表示記錄地文章ID,為false表示不保存;第二個(gè)參數(shù)$limit表示數(shù)量上限將用戶瀏覽過(guò)地文章ID保存到Cookie,最多保存10篇文章當(dāng)接收到Cookie記錄地瀏覽歷史后,根據(jù)文章ID到數(shù)據(jù)庫(kù)取出信息,并保持Cookie地順序。任務(wù)三:記錄瀏覽歷史為了在查看文章時(shí)記錄瀏覽歷史,在show.php修改代碼,將當(dāng)前訪問(wèn)文章添加到歷史記錄,代碼如下。$data['sidebar']['history']=module_history($id);任務(wù)三:記錄瀏覽歷史接下來(lái),在模板文件view\module_sidebar.html輸出瀏覽歷史<?phpif(!empty($data['sidebar']['history'])):?>瀏覽歷史<?phpforeach($data['sidebar']['history']as$v):?><ahref="show.php?id=<?=$v['id']?>"><?=$v['title']?></a><?phpendforeach;?><?phpendif?>任務(wù)三:記錄瀏覽歷史效果展示任務(wù)三:記錄瀏覽歷史移動(dòng)端頁(yè)面設(shè)計(jì)通常情況下,當(dāng)用戶使用桌面環(huán)境瀏覽網(wǎng)頁(yè)時(shí),屏幕是橫向地寬屏;而使用移動(dòng)端設(shè)備瀏覽網(wǎng)頁(yè)時(shí),屏幕是縱向地寬屏。任務(wù)四:響應(yīng)式布局移動(dòng)端頁(yè)面設(shè)計(jì)在設(shè)計(jì)網(wǎng)頁(yè)時(shí),如果屏幕地寬度大于高度,則在排版時(shí)充分利用橫向空間;而如果高度大于寬度,則充分利用縱向空間。因此,內(nèi)容管理系統(tǒng)地移動(dòng)端頁(yè)面設(shè)計(jì)思路,就是將橫向頁(yè)面轉(zhuǎn)換為縱向頁(yè)面。任務(wù)四:響應(yīng)式布局移動(dòng)端頁(yè)面設(shè)計(jì)——效果展示任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)在編寫(xiě)頁(yè)面時(shí),需要適應(yīng)各種各樣地屏幕寬度。需要注意地是,隨著高清屏地發(fā)展,1920*1080分辨率地屏幕已經(jīng)普及,而這么大地分辨率在小尺寸地屏幕上顯示網(wǎng)頁(yè),文字會(huì)非常小,不利于閱讀。任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)因此,搭載高清屏地小尺寸屏幕設(shè)備通常會(huì)使用高像素密度。例如,利用800*1280地屏幕顯示320*512地網(wǎng)頁(yè),網(wǎng)頁(yè)地元素將被放大。這種放大并不是直接放大像素點(diǎn),而是放大字體地字號(hào),圖片也會(huì)基于圖片本身地像素進(jìn)行縮放。接下來(lái)分步驟講解響應(yīng)式頁(yè)面地開(kāi)發(fā)。任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)——添加viewportmeta標(biāo)簽使用viewport可以控制網(wǎng)頁(yè)地顯示寬度,防止瀏覽器直接按照屏幕像素進(jìn)行顯示。在view\layout.html地<head>標(biāo)記添加viewport,具體代碼如下。<metaname="viewport"content="width=device-width,initial-scale=1.0">任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)——開(kāi)發(fā)調(diào)試Chrome瀏覽器,在開(kāi)發(fā)者工具提供了模擬功能單擊開(kāi)發(fā)者工具欄左上角地第2個(gè)按鈕即可啟動(dòng)任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)——適配屏幕寬度網(wǎng)頁(yè)若要根據(jù)屏幕地寬度進(jìn)行響應(yīng),就需要對(duì)各種寬度進(jìn)行適配。在編寫(xiě)CSS樣式時(shí),可以根據(jù)不同地顯示寬度修改樣式。任務(wù)四:響應(yīng)式布局響應(yīng)式頁(yè)面開(kāi)發(fā)——實(shí)際代碼進(jìn)行演示<style>/*設(shè)置默認(rèn)樣式*/.wrap{width:80%;}.sidebar{float:left;}/*當(dāng)屏幕寬度不超過(guò)400px時(shí),改變樣式*/@mediascreenand(max-width:400px){.wrap{width:95%;}.sidebar{float:none;}}/*當(dāng)屏幕寬度不超過(guò)300px時(shí),改變樣式*/@mediascreenand(max-width:300px){.wrap{width:100%;}}</style>任務(wù)四:響應(yīng)式布局?jǐn)U密碼安全存儲(chǔ)當(dāng)網(wǎng)站因安全漏洞導(dǎo)致數(shù)據(jù)被泄露時(shí),基本上管理員往往無(wú)法在第一時(shí)間知道,一旦用戶地密碼遭到竊取,將造成難以挽回地后果。因此,在軟件開(kāi)發(fā)時(shí),對(duì)于密碼存儲(chǔ)地安全一定要慎重。擴(kuò)展提高①創(chuàng)建密碼函數(shù)使用MD5()函數(shù)對(duì)密碼進(jìn)行摘要運(yùn)算對(duì)MD5地運(yùn)算結(jié)果再連接$salt,增加破解難度對(duì)連接$salt進(jìn)行第二次MD5運(yùn)算,防止一次MD5地運(yùn)算結(jié)果被輕易破解。functionpassword($password,$salt){returnmd5(md5($password).$salt);}在mon\function.php添加函數(shù),實(shí)現(xiàn)密碼地加密。擴(kuò)展提高重新創(chuàng)建管理員地?cái)?shù)據(jù)表②修改管理員數(shù)據(jù)表CREATETABLE`s_admin`(`id`INTUNSIGNEDPRIMARYKEYAUTO_INCREMENT,`name`VARCHAR(10)NOTNULLUNIQUEMENT'用戶名',`password`CHAR(32)NOTNULLMENT'密碼',`salt`CHAR(6)NOT