php登錄界面代碼上節(jié)課來到前端網(wǎng)站增加新聞信息一覽顯示頁面和詳細(xì)頁面php登錄 表單 代碼
2022-01-27
最后一節(jié)課，完成了整個后臺網(wǎng)站的功能開發(fā)。您可以創(chuàng)建、編輯、刪除和查詢新聞信息數(shù)據(jù)。
這個類來到前端網(wǎng)站，增加了新聞信息列表展示頁面和詳細(xì)頁面。
寫新聞列表頁
列表頁可以參考后臺的列表查詢頁，但查詢條件不要求，需要修改翻頁方式，保證每次傳輸?shù)臄?shù)據(jù)只是當(dāng)前頁的數(shù)據(jù)。
.php 代碼如下：
.php 代碼如下：
news.css 代碼修改如下：
先登錄后臺頁面，總共增加5條記錄：
然后直接通過瀏覽器訪問網(wǎng)頁url地址：
可以看到當(dāng)前頁顯示2條新聞，出現(xiàn)頁數(shù)，點(diǎn)擊第2頁：
您可以看到顯示正確的數(shù)據(jù)。
寫新聞詳情展示頁面
明細(xì)頁面不僅是顯示主表信息，還通過循環(huán)顯示明細(xì)表的信息。
.php 代碼如下：
.php 代碼如下：
news.css 代碼修改如下：
通過瀏覽器訪問新聞概覽頁面：
然后點(diǎn)擊第一條新聞進(jìn)入詳細(xì)頁面：
可以看到，根據(jù)設(shè)置的數(shù)據(jù)，內(nèi)容、圖片等信息正常顯示。
進(jìn)入后臺管理功能頁面，將這條消息的詳情增加為2張圖片2段文字：
然后回到前臺新聞詳情頁面，刷新一下：
可以看到顯示了兩張圖片和對應(yīng)的文字內(nèi)容。
整體測試
調(diào)整上一頁翻頁的參數(shù)，修改為10條記錄翻頁：
.php修改如下：
.php修改如下：
然后在之前寫的.html中添加一個鏈接seo優(yōu)化，鏈接到新聞列表顯示頁面。
.html 修改如下：
刷新 .html 頁面：
點(diǎn)擊“新聞信息列表”按鈕：
然后通過后臺管理頁面，添加更多數(shù)據(jù)，再通過前端頁面瀏覽，看看功能是否正常。
云服務(wù)器創(chuàng)建數(shù)據(jù)庫和表結(jié)構(gòu)
首先，到云服務(wù)器的數(shù)據(jù)庫系統(tǒng)中創(chuàng)建數(shù)據(jù)庫和對應(yīng)的表，然后。
在創(chuàng)建之前，需要準(zhǔn)備好創(chuàng)建數(shù)據(jù)庫和表的SQL語句。
可以從以前的數(shù)據(jù)庫客戶端軟件中導(dǎo)出。
打開數(shù)據(jù)庫客戶端軟件，打開連接和數(shù)據(jù)庫：
然后右鍵單擊數(shù)據(jù)庫并選擇菜單“Dump SQL File”：
然后點(diǎn)擊“保存”按鈕：
可以看到構(gòu)建完成。單擊關(guān)閉按鈕。
然后去文件管理器找到.sql文件，用文本編輯器打開：
可以看到是創(chuàng)建表結(jié)構(gòu)的SQL語句和添加數(shù)據(jù)的SQL語句。刪除新數(shù)據(jù)的注釋語句和SQL語句，最后保留如下：
然后通過scp命令或者軟件把這個文件.sql上傳到云服務(wù)器的主目錄：
然后，通過ssh命令或程序遠(yuǎn)程登錄云服務(wù)器，進(jìn)入/home目錄，使用ls命令查看.sql軟件是否存在：
確保該文件存在，然后運(yùn)行以下命令進(jìn)入客戶端軟件程序，進(jìn)行創(chuàng)建數(shù)據(jù)庫和創(chuàng)建數(shù)據(jù)表的操作
# - -p 輸入
輸入數(shù)據(jù)庫密碼
>顯示;輸入
顯示當(dāng)前有多少個數(shù)據(jù)庫
> 設(shè)置 utf8 ；進(jìn)入
創(chuàng)建數(shù)據(jù)庫名稱是，字符集是utf8
>顯示;輸入
顯示當(dāng)前有多少個數(shù)據(jù)庫，應(yīng)該還有一個數(shù)據(jù)庫
>使用; 進(jìn)入
進(jìn)入數(shù)據(jù)庫
>顯示;輸入
查看當(dāng)前數(shù)據(jù)庫有多少表
> /home/.sql; 進(jìn)入
執(zhí)行sql文件
>顯示;輸入
檢查當(dāng)前數(shù)據(jù)庫中有多少個表，您應(yīng)該會看到另外 3 個表，并且
> * 來自 ; 進(jìn)入
查詢表中的數(shù)據(jù)，應(yīng)該沒有記錄
>退出進(jìn)入
退出客戶端程序小程序開發(fā)，返回系統(tǒng)環(huán)境
以上步驟是創(chuàng)建數(shù)據(jù)庫和創(chuàng)建3個表的過程。
步驟截圖如下：
如果以上步驟都完成了，下次進(jìn)入數(shù)據(jù)庫查詢數(shù)據(jù)時，只需要以下步驟即可。
# - -p
>使用；
> * 來自 ; 或其他 SQL 語句
>退出
代碼更新部署到云服務(wù)器
整理好需要更新的文件，上傳到云服務(wù)器。
更新文件列表如下：
.php
.php
.php
.php
.php
.php
.php
.html
.php
.php
.php
.php
.php
.php
.php
新聞.css
新聞.js
頂部.php
上傳前需要注意的是，如果云服務(wù)器上設(shè)置的root用戶的密碼和本地服務(wù)器上設(shè)置的密碼不一樣，需要修改一下：
.php修改如下：
然后在云服務(wù)器的web目錄中添加一個目錄，例如服務(wù)器創(chuàng)建/usr///html/目錄。
并將目錄的權(quán)限更改為755：
#cd /usr///html
#
#sudo 777 -R
步驟截圖如下：
上傳完成后目錄文件如下：
通過域名訪問云服務(wù)器并測試
然后通過域名訪問網(wǎng)站：
可以多看到一個按鈕，點(diǎn)擊“新聞信息列表”按鈕：
發(fā)現(xiàn)頁面并沒有打開新窗口顯示新聞信息列表頁面，而是變成了php文件的下載，這是因?yàn)橹霸品?wù)器沒有做php相關(guān)的配置。
通過ssh登錄云服務(wù)器或運(yùn)行以下命令：
#sudo apt-get -y php5 php5-php5-fpm
#sudo vi /etc//站點(diǎn)-/
修改為以下內(nèi)容：
然后輸入：wq，保存退出。
完成配置文件編輯后，運(yùn)行命令重啟 php5-fpm 并：
須藤 php5-fpm
須藤
然后刷新首頁，點(diǎn)擊“新聞信息列表”按鈕：
可以看到進(jìn)入了新聞信息列表查看頁面，但是由于數(shù)據(jù)庫中沒有新的數(shù)據(jù)，所以是一個空白頁面。
直接輸入url地址進(jìn)入后臺管理功能頁面管理新聞信息：
輸入用戶名和密碼，點(diǎn)擊登錄，發(fā)現(xiàn)報錯“登錄超時或無權(quán)限php登錄界面代碼，請重新登錄！” 經(jīng)檢查，發(fā)現(xiàn).php有問題，少了一句()；函數(shù)調(diào)用在第一行。由于之前的運(yùn)行環(huán)境，這個和php的配置不同。所以這個必須加。
.php修改如下：
修改后重新上傳這個文件到云服務(wù)器，然后再次登錄，這時候就可以進(jìn)入主后臺頁面了：
然后點(diǎn)擊菜單進(jìn)入新聞信息管理頁面：
然后可以執(zhí)行數(shù)據(jù)維護(hù)操作。插入2條數(shù)據(jù)：
回到前端新聞信息概覽頁面，刷新頁面：
點(diǎn)擊新聞進(jìn)入詳細(xì)頁面：
可以看到正常信息的顯示。
第四章小結(jié)
第4章主要介紹了PHP語言，結(jié)合HTML、CSS和動態(tài)數(shù)據(jù)網(wǎng)站的編寫，同時學(xué)習(xí)了SQL語言的基本知識，學(xué)會了使用數(shù)據(jù)庫進(jìn)行數(shù)據(jù)查詢和更新操作。
然后通過學(xué)生成績信息管理和新聞信息發(fā)布管理兩個例子，練習(xí)如何整合所有知識，實(shí)現(xiàn)最基本的網(wǎng)站頁面功能。
下一章php登錄界面代碼，我們將通過一個更實(shí)際的例子來復(fù)習(xí)和鞏固前面所學(xué)的知識：圖書館管理系統(tǒng)：HTML+CSS+PHP+實(shí)現(xiàn)一個經(jīng)典的網(wǎng)站。
