第6章 微課網(wǎng)網(wǎng)站制作靜態(tài)

1、CONTENTS1. 編寫靜態(tài)代碼2. 設(shè)計(jì)網(wǎng)站頁(yè)面效果編寫靜態(tài)代碼 1.首先回顧一下我們的首頁(yè)設(shè)計(jì)稿，我們?cè)谏弦徽碌臅r(shí)候已經(jīng)創(chuàng)建過(guò)它，如果忘記了，請(qǐng)回到第5章再重新看一下。首頁(yè)的制作PART.1編寫靜態(tài)代碼1. 1. 整體整體布局布局新建一個(gè)HTML5文檔，在文檔的頭部我們加入第三章所介紹的Bootstrap的頭文件。如果忘記請(qǐng)重新回到3.1.1 bootstrap環(huán)境搭建再?gòu)?fù)習(xí)一下。程序清單6-1：首頁(yè)頭部?jī)?nèi)容這個(gè)部分無(wú)需任何解釋，只是Bootstrap自動(dòng)生成的頭部。2. 2. 導(dǎo)航導(dǎo)航搭建好后，從頁(yè)面的頭部導(dǎo)航開始，先來(lái)看一下，導(dǎo)航的詳細(xì)的樣子，導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁(yè)頭的

2、響應(yīng)式基礎(chǔ)組件。它們?cè)谝苿?dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式。如圖6-1所示。程序清單6-2：導(dǎo)航欄第一行中，我們把使用Bootstrap的navbar系列類來(lái)形式化一個(gè)div，通過(guò)添加.navbar-static-top即可創(chuàng)建一個(gè)與頁(yè)面的導(dǎo)航條。首頁(yè)的制作PART.1編寫靜態(tài)代碼圖6-1第二行中，使用Bootstrap柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，內(nèi)容就可以放入這些創(chuàng)建好的布局中。第三行中，向 元素添加一個(gè)標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class nav

3、bar-brand 的 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。第四行中，為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有 classes .collapse、.navbar-collapse 的 中。折疊起來(lái)的導(dǎo)航欄實(shí)際上是一個(gè)帶有 class .navbar-toggle 及兩個(gè) data- 元素的按鈕。第五到第九行，三個(gè)帶有 class .icon-bar 的 創(chuàng)建所謂的漢堡按鈕。這些會(huì)切換為 .nav-collapse 中的元素。首頁(yè)的制作PART.1編寫靜態(tài)代碼3 3. .輪播圖輪播圖程序清單6-3：首頁(yè)輪播圖首頁(yè)的制作PART.1編寫靜態(tài)代碼Bootstrap輪播插件結(jié)構(gòu)比較固定，

4、輪播包含框需要指明ID值和carousel、slide類。框內(nèi)包含三部分組件：標(biāo)簽框（carousel-indicators）圖文內(nèi)容框（carousel-inner）和左右導(dǎo)航按鈕（carousel-control）。第一行，Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。第七行，在其結(jié)構(gòu)的基礎(chǔ)上，來(lái)設(shè)計(jì)本示例的輪播廣告位結(jié)構(gòu)?？紤]到設(shè)計(jì)需要，圖文內(nèi)容框（carousel-inner）中包含了多層內(nèi)嵌結(jié)構(gòu)。第三十九行中，通過(guò)定義（class=right carousel-control），用于顯示左右箭頭，可以改變輪播的方向。首頁(yè)的制作PART.1編

5、寫靜態(tài)代碼4 4. .課程推薦課程推薦程序清單6-4：課程推薦第一行通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。第二行類似 .row 和 .col-sm-6 col-md-3 這種預(yù)定義的類，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。第三行thumbnail類創(chuàng)建縮略圖類。因?yàn)榇蠖鄶?shù)站點(diǎn)都需要在網(wǎng)格中布局圖像、視頻、文本等。首頁(yè)的制作PART.1編寫靜態(tài)代碼課程頁(yè)面在我們這個(gè)網(wǎng)站中是非常重要的，許多來(lái)學(xué)習(xí)的學(xué)習(xí)者都是直接進(jìn)入課程頁(yè)面挑選課程學(xué)習(xí)?；仡櫼幌挛覀兊恼n程設(shè)計(jì)稿，我們?cè)谏弦徽碌臅r(shí)候已經(jīng)創(chuàng)建過(guò)它，如果忘記了，請(qǐng)回

6、到第5章再重新看一下?，F(xiàn)在我們?cè)贒W里面逐步的實(shí)現(xiàn)它。課程頁(yè)面的制作PART.1編寫靜態(tài)代碼1 1. .課程頁(yè)面導(dǎo)航欄課程頁(yè)面導(dǎo)航欄程序清單6-5：頁(yè)面導(dǎo)航欄圖6-4第一行中，我們把使用Bootstrap的navbar系列類來(lái)形式化一個(gè)div，通過(guò)添加.navbar-fixed-top即可創(chuàng)建一個(gè)與頁(yè)面的導(dǎo)航條。第二行中，使用Bootstrap柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中?！靶校╮ow）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適

7、的排列（aligment）和內(nèi)補(bǔ)（padding）。第三行中，向 元素添加一個(gè)標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。第四行中，為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有 classes .collapse、.navbar-collapse 的 中。折疊起來(lái)的導(dǎo)航欄實(shí)際上是一個(gè)帶有 class .navbar-toggle 及兩個(gè) data- 元素的按鈕。課程頁(yè)面的制作PART.1編寫靜態(tài)代碼2 2. .標(biāo)簽式導(dǎo)航菜單標(biāo)簽式導(dǎo)航菜單程序清單6-6：標(biāo)簽式導(dǎo)航菜第一行中，通過(guò)添加.na

8、v nav-tabs成為標(biāo)簽頁(yè)，Bootstrap 中的導(dǎo)航組件都依賴同一個(gè) .nav 類，狀態(tài)類也是共用的。.nav-tabs 類也依賴 .nav 基類。以一個(gè)帶有 class .nav 的無(wú)序列表開始創(chuàng)建一個(gè)標(biāo)簽式的導(dǎo)航菜單，再添加 class .nav-tabs。后續(xù)的其他行中把需要的導(dǎo)航以列表形式放入就可以了。課程頁(yè)面的制作PART.1編寫靜態(tài)代碼3 3. .課程簡(jiǎn)介課程簡(jiǎn)介程序清單6-7：課程簡(jiǎn)介課程頁(yè)面的制作PART.1編寫靜態(tài)代碼圖6-6 課程簡(jiǎn)介第一行中，blog-post這個(gè)類，打開kecheng.css文件可以看到它的樣式：.blog-post margin-bottom:

9、 20px; background-color:#fff; padding:3%; 在第6行中我們也用到了類似的類 .blog-sidebar，由這個(gè)類來(lái)描繪這個(gè)課程的描述信息呈現(xiàn)的樣式。第四行img-responsive這個(gè)類是自適應(yīng)圖像類，它用來(lái)讓圖像自適應(yīng)頁(yè)面大小變化。它是Bootstrap的一個(gè)樣式類，只要加入了bootstrap.min.css這個(gè)文件，就可以使用這個(gè)類。課程頁(yè)面的制作PART.1編寫靜態(tài)代碼4 4. .頁(yè)碼頁(yè)碼程序清單6-8：頁(yè)碼頁(yè)碼是每一個(gè)頁(yè)面都需要用到的組件，第二行中，頁(yè)碼(Pagination)也是非常常用的頁(yè)面要素，Bootstrap提供兩種風(fēng)格的翻頁(yè)組件。

10、 一個(gè)是多頁(yè)面導(dǎo)航，用于多個(gè)頁(yè)碼的跳轉(zhuǎn)，它具有極簡(jiǎn)主義風(fēng)格的翻頁(yè)提示，能夠很好應(yīng)用在結(jié)果搜索頁(yè)面。課程頁(yè)面的制作PART.1編寫靜態(tài)代碼圖6- 7 頁(yè)碼導(dǎo)航整個(gè)筆記詳情頁(yè)面非常的簡(jiǎn)單，除了標(biāo)準(zhǔn)的導(dǎo)航頭部外，上面是筆記的詳情，下面是對(duì)該筆記的回復(fù)，如圖6-8 所示。程序清單6-9：筆記詳情筆記詳情頁(yè)面的制作PART.1編寫靜態(tài)代碼圖6-8第一行中類navbar-wrapper的作用是在我們的網(wǎng)頁(yè)主體內(nèi)容和導(dǎo)航之間形成一個(gè)邊距。如圖6-9 所示，是加了這一句的，筆記詳情頁(yè)面的制作PART.1編寫靜態(tài)代碼圖6-9 如圖6-10 所示，是不加的。第九到十二行的.media類為頁(yè)面上筆記的發(fā)布者信息提供

11、好看的樣式。筆記詳情頁(yè)面的制作PART.1編寫靜態(tài)代碼圖6-9 登陸頁(yè)面是每一個(gè)網(wǎng)站都需要的。我們的登陸頁(yè)面是有一張表單組成。程序清單6-10：登陸頁(yè)登陸注冊(cè)頁(yè)面的制作PART.1編寫靜態(tài)代碼第一行中，form表單要引用bootstrap的表單樣式form-signin，然后里面的布局也要用它相應(yīng)的樣式。第二行中，兩個(gè)輸入框中間的div是故意加上去的，為了防止兩個(gè)輸入框貼在一起，input標(biāo)簽里面的required屬性則是必填，加了這個(gè)屬性后，輸入框?yàn)榭諘r(shí)，點(diǎn)擊提交會(huì)提示用戶輸入，input標(biāo)簽里的autofocus屬性則是自動(dòng)獲得焦點(diǎn)，在頁(yè)面加載時(shí)，用戶名這個(gè)輸入框會(huì)自動(dòng)獲得焦點(diǎn)。登陸注冊(cè)頁(yè)

12、面的制作PART.1編寫靜態(tài)代碼后臺(tái)腳本編寫 2.一利用Dreamweaver自動(dòng)連接PHP與Mysql Dreamweaver為我們提供了一個(gè)簡(jiǎn)便的方式連接PHP與Mysql。二使用Mysqli_*函數(shù)Mysql數(shù)據(jù)庫(kù)系統(tǒng)包含了在PHP中強(qiáng)制使用新的通信方法的功能，這些方法全部包含在Mysqli_*函數(shù)組中。PART.2后臺(tái)腳本編寫在這一部分中，我們選擇了比較典型的網(wǎng)頁(yè)，來(lái)介紹動(dòng)態(tài)頁(yè)面的編程過(guò)程和與數(shù)據(jù)庫(kù)的配合使用。我們的附件里提供了.html的靜態(tài)頁(yè)面供讀者自行學(xué)習(xí)，你可以先把要寫成動(dòng)態(tài)頁(yè)面的靜態(tài)網(wǎng)頁(yè)打開，另存為.php文件。也可以直接看我們提供的PHP文件。在我們開始新的篇章之前，我們要

13、學(xué)習(xí)如何使用PHP連接Mysql。下面提供兩種連接方式，讀者可以自行選擇。PART.2后臺(tái)腳本編寫1.1.進(jìn)行連接進(jìn)行連接連接到Mysql的基本語(yǔ)法如下：$mysqli = mysqli_connect(“hostname”,”username”,”password”,”database”);$mysqli的值是函數(shù)的結(jié)果，并隨后用在與Mysql通信的函數(shù)。程序清單6-11：簡(jiǎn)單的連接腳本保存腳本為wk.php,并且放在web服務(wù)器的文檔區(qū)域，使用瀏覽器訪問(wèn)。如果連接成功的話會(huì)看到如下所示結(jié)果：Host information: localhost via TCP/IP如果連接失敗的話，會(huì)顯示

14、一條錯(cuò)誤消息。PART.2后臺(tái)腳本編寫2.2.執(zhí)行查詢執(zhí)行查詢PHP中的函數(shù)mysqli_query()用來(lái)向Mysql發(fā)送SQL查詢。在腳本中，首先進(jìn)行連接，然后執(zhí)行一個(gè)查詢。首頁(yè)的動(dòng)態(tài)部分包含了大量的數(shù)據(jù)查詢和數(shù)據(jù)操作。我們先從數(shù)據(jù)庫(kù)中的表開始?？紤]下我們首頁(yè)的功能，它包含下面這些部分：課程，廣告（巨幕部分），專題。下面?zhèn)€部分，分別介紹每個(gè)項(xiàng)目元素。1.1.巨幕模塊的動(dòng)態(tài)腳本巨幕模塊的動(dòng)態(tài)腳本大型的巨幕是瀏覽者一打開網(wǎng)站首先映入眼簾的部分。內(nèi)容包括各類首推的廣告，熱門的課程廣告，專題廣告等。該部分的圖片都非常精美而且精心設(shè)計(jì)。因此設(shè)計(jì)數(shù)據(jù)表的時(shí)候，已經(jīng)考慮了巨幕部分的特殊性，為巨幕部分單獨(dú)

15、設(shè)計(jì)了圖片類型“jumbotron”。登陸注冊(cè)頁(yè)面的制作PART.2后臺(tái)腳本編寫2.2.執(zhí)行查詢執(zhí)行查詢PHP中的函數(shù)mysqli_query()用來(lái)向Mysql發(fā)送SQL查詢。在腳本中，首先進(jìn)行連接，然后執(zhí)行一個(gè)查詢。首頁(yè)的動(dòng)態(tài)部分包含了大量的數(shù)據(jù)查詢和數(shù)據(jù)操作。先從數(shù)據(jù)庫(kù)中的表開始?？紤]下首頁(yè)的功能，它包含下面這些部分：課程，廣告（巨幕部分），專題。1.1.巨幕模塊的動(dòng)態(tài)腳本巨幕模塊的動(dòng)態(tài)腳本大型的巨幕是瀏覽者一打開網(wǎng)站首先映入眼簾的部分。內(nèi)容包括各類首推的廣告，熱門的課程廣告，專題廣告等。該部分的圖片都非常精美而且精心設(shè)計(jì)。因此設(shè)計(jì)數(shù)據(jù)表的時(shí)候，已經(jīng)考慮了巨幕部分的特殊性，為巨幕部分單獨(dú)

16、設(shè)計(jì)了圖片類型“jumbotron”。程序清單6-12：巨幕動(dòng)態(tài)腳本首頁(yè)的動(dòng)態(tài)頁(yè)面制作第2行到第6行使用內(nèi)聯(lián)查詢的方式，查詢存在picture表，module表和pictureobj表里的跟巨幕相關(guān)的數(shù)據(jù)。第7行，把查詢得到的數(shù)據(jù)存在$indexjumbotron中。第8行，把查詢得到的數(shù)據(jù)條數(shù)存在$totalRows_indexjumbotron中。得到查詢數(shù)據(jù)后，修改程序清單6-3，加入動(dòng)態(tài)語(yǔ)句，如程序清單6-13所示。程序清單6-13：首頁(yè)輪播圖動(dòng)態(tài)腳本在第10行，用$row_indexjumbotron保存獲得的第一個(gè)巨幕的數(shù)據(jù)。在第11行中，把$row_indexjumbotronP

17、ictureadd圖片地址取出來(lái)給圖片標(biāo)簽的src屬性。在第14行中，在標(biāo)題1標(biāo)簽中加入課程名字$row_indexjumbotronModuleName。首頁(yè)的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫第15行，在段落標(biāo)簽中加入圖片介紹說(shuō)明$row_indexjumbotronPictureIntr。第20行，用while()語(yǔ)句，取出其他的巨幕圖片數(shù)據(jù)，包括課程名字，圖片簡(jiǎn)介等。第21-31行，循環(huán)在瀏覽器輸出巨幕內(nèi)容。2.2.熱門課程熱門課程熱門課程部分的數(shù)據(jù)需要課程圖片，課程說(shuō)明，課程編號(hào)，課程點(diǎn)擊率等。在數(shù)據(jù)庫(kù)module表中ModuleClickRate字段保存著用戶的點(diǎn)擊次數(shù)。因此這部

18、分的查詢內(nèi)容為：程序清單6-15：熱門課程動(dòng)態(tài)腳本第2-8行用內(nèi)聯(lián)的方式組合查詢數(shù)據(jù)語(yǔ)句，降序排列（第7行DESC）、取前四位（第8行）。首頁(yè)的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫第9行，把數(shù)據(jù)從數(shù)據(jù)庫(kù)中查詢出來(lái)。存到$hotmodule變量中。第10行，獲得數(shù)據(jù)個(gè)數(shù)$totalRows_hotmodule。得到查詢結(jié)果后，對(duì)熱門課程部分的靜態(tài)腳本程序清單6-4進(jìn)行修改。這部分的代碼非常簡(jiǎn)單。程序清單6-15：熱門課程動(dòng)態(tài)腳本第6至10行中，用while語(yǔ)句獲得查詢得到的熱門課程的數(shù)據(jù)，$row_hotmodulePictureadd填入熱門課程的縮略圖，$row_hotmoduleModul

19、eName填入課程名字里面。首頁(yè)的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫3.3.最新專題最新專題在熱門課程下面是我們的首頁(yè)很重要的另外一部分，最新專題，在這里我們使用了跟熱門課程不一樣的UI元素media類。程序清單6-16：最新專題查詢腳本這部分實(shí)現(xiàn)最新專題的查詢功能，從數(shù)據(jù)庫(kù)中獲得最新的專題項(xiàng)目，ORDER BY topic.topicstart DESC，按項(xiàng)目開始時(shí)間降序排序。程序清單6-17：最新專題動(dòng)態(tài)腳本這一段代碼跟上一程序清單6-15一樣，用while語(yǔ)句獲得查詢得到的熱門專題的數(shù)據(jù)并且放入$row_topicmodule變量中，這里的鏈接應(yīng)該鏈接到專題詳情的部分。作為練習(xí)。首頁(yè)

20、的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫課程頁(yè)面包含全部課程、近期熱門課程、評(píng)分最高、和即將開始的課程這么多部分。課程頁(yè)面的動(dòng)態(tài)腳本非常的復(fù)雜，作者按照頁(yè)面的模塊介紹，并且在提供的附件kecheng10.php里面，也有代碼行注釋。因?yàn)樯婕暗椒浅６嗟姆诸惒糠?，除了分類的?nèi)容不同，其他的都類似，因此也只是介紹重點(diǎn)的內(nèi)容，其他部分，請(qǐng)自行查看kecheng10.php觀察課程頁(yè)面，不管哪種分類，我們都需要輸出課程內(nèi)容和頁(yè)碼，如圖6- 12 、圖6- 13所示。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫圖6- 12圖6- 13為此編寫了2個(gè)函數(shù)可以復(fù)用，以增加效率。1.1.輸出課程內(nèi)容函數(shù)輸出課程

21、內(nèi)容函數(shù)該函數(shù)用來(lái)輸出課程內(nèi)容。我們把靜態(tài)代碼程序清單6-7進(jìn)行修改如課程清單6-18所示。程序清單6-18：輸出課程內(nèi)容函數(shù)這個(gè)函數(shù)有一個(gè)參數(shù)$moduleq，用來(lái)接收查詢而得的數(shù)據(jù)內(nèi)容，if($totalRows_module 1)如果行數(shù)為0，說(shuō)明該分類中沒(méi)有數(shù)據(jù)。第4至第15行，使用了heredoc格式將一個(gè)字符床存儲(chǔ)到$dplay_block變量中，創(chuàng)建了輸出沒(méi)有該類內(nèi)容的提示信息。第16行輸出代碼塊$dplay_block字符串。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫第17行，如果$totalRows_module中行數(shù)不等于0。在第19到31行中，把查詢出來(lái)的符合該分類的

22、課程內(nèi)容打印出來(lái)。第22行之前使用了heredoc格式。第23行以后都是標(biāo)準(zhǔn)的PHP輸出格式，從這個(gè)對(duì)比中我們可以發(fā)現(xiàn)，heredoc格式非常的簡(jiǎn)潔和優(yōu)雅，建議都采用這個(gè)格式進(jìn)行大塊代碼的輸出。2.2.輸出頁(yè)碼函數(shù)輸出頁(yè)碼函數(shù)在頁(yè)面的最后，需要輸出頁(yè)碼，查詢出來(lái)很多數(shù)據(jù)的時(shí)候，不能都放到一張頁(yè)面里因此需要輸出頁(yè)碼，以供用戶翻頁(yè)。程序清單6-19：輸出頁(yè)碼函數(shù)課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫在該函數(shù)中，參數(shù)為$totalrow,$curr_page,$menuclass；含義分別為總行數(shù)，當(dāng)前頁(yè)碼，當(dāng)前分類。第2行設(shè)置一頁(yè)顯示的記錄數(shù)，在這里因?yàn)閿?shù)據(jù)庫(kù)中的示例數(shù)據(jù)不多，為了展示結(jié)果

23、，在這里設(shè)置一頁(yè)只顯示1行。第3行中判斷總的記錄個(gè)數(shù)模每頁(yè)顯示的記錄數(shù)，如果不為0，則說(shuō)明有余數(shù)，要多加一頁(yè)$pagenav = ($totalrow/1)+1;如果為0則正好顯示完整 。第7行對(duì)所得的頁(yè)數(shù)變量設(shè)置整數(shù)類型。第10-19行計(jì)算當(dāng)前頁(yè)碼$curr_page為第幾頁(yè)，并且判斷向前一頁(yè)$pagel和向后一頁(yè)$pager分別是第幾頁(yè)。第23行下面的代碼塊用來(lái)輸出頁(yè)碼。$_SERVERPHP_SELF變量中存儲(chǔ)了當(dāng)前頁(yè)面，并且以當(dāng)前頁(yè)碼$cur和當(dāng)前分類菜單$menuclass為參數(shù)進(jìn)行跳轉(zhuǎn)。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫3.3.全部課程全部課程對(duì)于全部課程，只要羅列所有

24、課程即可，但是要注意，我們可以時(shí)間排序或者是以首字母排序。程序清單6-20：查詢?nèi)空n程的腳本在查詢語(yǔ)句腳本里面我們需要包括課程內(nèi)容、分類、分類名字、圖片、課程語(yǔ)言等非常多的信息，因此，我們聯(lián)接了grade、moduleclassify、classindustry、classmname、pictureobj 、picture 、classmodulelanguage這么多表。在第5行的最后，形成查詢語(yǔ)句部分，沒(méi)有設(shè)置限制，就是為了在第7行得到所有的記錄$totalRows_module = mysql_num_rows($module);以便于計(jì)算頁(yè)碼。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳

25、本編寫第8行，當(dāng)用戶剛進(jìn)入這個(gè)頁(yè)面時(shí)，如果沒(méi)有點(diǎn)擊頁(yè)碼查看，需要在頁(yè)面顯示一部分的課程，每頁(yè)顯示的個(gè)數(shù)保存在變量$rowperpage中，在程序的最開始定義，清單6-20沒(méi)有顯示出來(lái)，請(qǐng)參看附件中kecheng10.php，會(huì)看到完整的代碼。第12行，調(diào)用輸出課程函數(shù)，第13行，調(diào)用輸出頁(yè)碼函數(shù)。第14行，如果用戶點(diǎn)擊頁(yè)碼查看，那么在第15行設(shè)置當(dāng)前頁(yè)面，第16行$limit_q變量中保存從那個(gè)數(shù)據(jù)記錄開始讀取。第17行的末尾，LIMIT .$limit_q.,.$rowperpage;這部分限制了查詢出來(lái)的數(shù)據(jù)，從$limit_q開始讀取一共$rowperpage條。后兩行同樣是調(diào)用輸出課程

26、函數(shù)和輸出頁(yè)碼函數(shù)。這里請(qǐng)注意，由于輸入的數(shù)據(jù)非常的少，因此有些課程是沒(méi)有顯示出來(lái)的，課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫4.4.近期熱門近期熱門近期熱門這個(gè)二級(jí)菜單，羅列了收藏人數(shù)較多的課程。程序清單6-21：近期熱門腳本會(huì)發(fā)現(xiàn)程序清單6-20與程序清單6-21的結(jié)構(gòu)基本一致。分三塊：第一塊從第1行至第7行，查詢得出近期熱門的課程數(shù)目，存到$totalRows_module變量里。第4行末尾，ORDER BY COUNT( UserID ) DESC LIMIT 0,.$rowperpage;語(yǔ)句的作用為計(jì)算點(diǎn)擊該門課程的用戶ID個(gè)數(shù)，并且降序排列。第二塊從第8行到第13行，當(dāng)用戶

27、沒(méi)有點(diǎn)擊頁(yè)碼的時(shí)候，把熱門課程第一頁(yè)輸出來(lái)。第三塊是從第14行開始到最后，當(dāng)用戶點(diǎn)擊了某一個(gè)頁(yè)碼的時(shí)候，把該頁(yè)碼的課程輸出來(lái)。唯一變化的就是查詢的限制。請(qǐng)通過(guò)閱讀附件kecheng10.php學(xué)習(xí)，舉一反三。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫5.5.類別內(nèi)容菜單類別內(nèi)容菜單課程頁(yè)有三種分類，按語(yǔ)言分類、按課程內(nèi)容分類、按行業(yè)分類，不同的分類中包含很多項(xiàng)內(nèi)容，因此動(dòng)態(tài)代碼的思路是先獲得該分類的內(nèi)容，再根據(jù)該分類的內(nèi)容查詢課程并且輸出。程序清單6-22：語(yǔ)言類內(nèi)容腳本從第1到第6行，按語(yǔ)言分類查詢?cè)摫恚⑶耀@得語(yǔ)言類別，這里實(shí)際上得到中文、英文兩種語(yǔ)言分類，再加上全部語(yǔ)言一共三個(gè)分類項(xiàng)

28、。第7行開始，用while()語(yǔ)句把列表項(xiàng)挨個(gè)打印出來(lái)。值得注意的是，如果看附件kecheng10.php 的話，大家會(huì)發(fā)現(xiàn)，這段代碼是分開寫在兩個(gè)部分的，1-6行寫在頁(yè)頭查詢部分，從第7行開始寫在列表項(xiàng)里。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫5.5.類別內(nèi)容菜單類別內(nèi)容菜單課程頁(yè)有三種分類，按語(yǔ)言分類、按課程內(nèi)容分類、按行業(yè)分類，不同的分類中包含很多項(xiàng)內(nèi)容，因此動(dòng)態(tài)代碼的思路是先獲得該分類的內(nèi)容，再根據(jù)該分類的內(nèi)容查詢課程并且輸出。程序清單6-22：語(yǔ)言類內(nèi)容腳本從第1到第6行，按語(yǔ)言分類查詢?cè)摫?，并且獲得語(yǔ)言類別，這里實(shí)際上得到中文、英文兩種語(yǔ)言分類，再加上全部語(yǔ)言一共三個(gè)分類項(xiàng)

29、。第7行開始，用while()語(yǔ)句把列表項(xiàng)挨個(gè)打印出來(lái)。值得注意的是，如果看附件kecheng10.php 的話，大家會(huì)發(fā)現(xiàn)，這段代碼是分開寫在兩個(gè)部分的，1-6行寫在頁(yè)頭查詢部分，從第7行開始寫在列表項(xiàng)里。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫程序清單6-23：內(nèi)容類腳本輸出如圖6- 14 所示從中可以看出，內(nèi)容類的腳本形式也跟語(yǔ)言類相似，前面從第1行到第5行查詢內(nèi)容數(shù)據(jù)，后面的代碼塊用來(lái)輸出內(nèi)容列表。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫6- 146.6.按語(yǔ)言分類菜單按語(yǔ)言分類菜單有了分類列表后，每一個(gè)分類中包含的課程就用下面的代碼輸出來(lái)。程序清單6-24：按語(yǔ)言分類腳本

30、第1行到第4行，從數(shù)據(jù)庫(kù)中查詢，獲得數(shù)據(jù)。第6行得到符合條件的總的記錄條數(shù)，以用來(lái)生成頁(yè)碼。從第7行開始，如果用戶沒(méi)有點(diǎn)擊頁(yè)碼鏈接，查詢數(shù)據(jù)庫(kù)，獲得前$rowperpage條數(shù)據(jù)，$rowperpage變量是每頁(yè)要顯示的記錄條數(shù)。在第11、12行中輸出課程和頁(yè)碼。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫第13行開始的代碼塊是在用戶點(diǎn)擊了某個(gè)頁(yè)碼鏈接后，查詢數(shù)據(jù)庫(kù)，獲得從$limit_q開始的$rowperpage條記錄。第17、18行調(diào)用函數(shù)輸出內(nèi)容和頁(yè)碼。7.7.按內(nèi)容分類菜單按內(nèi)容分類菜單按課程所包含的內(nèi)容分類，跟按語(yǔ)言分類的腳本結(jié)構(gòu)是一樣的。程序清單6-25：按語(yǔ)言分類腳本第1行到

31、第4行，從數(shù)據(jù)庫(kù)中查詢，獲得數(shù)據(jù)。第6行得到符合用戶所選內(nèi)容，保存在變量$_GETclassMnameID中，的記錄條數(shù)，生成頁(yè)碼數(shù)。從第7行開始，如果用戶沒(méi)有點(diǎn)擊頁(yè)碼鏈接，那么從數(shù)據(jù)庫(kù)中獲得前$rowperpage條數(shù)據(jù)。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫在第11、12行中輸出課程和頁(yè)碼。第13行開始，在用戶點(diǎn)擊了某個(gè)頁(yè)碼鏈接后，從數(shù)據(jù)庫(kù)中獲得從$limit_q開始的$rowperpage條記錄。第18、19行調(diào)用函數(shù)輸出內(nèi)容和頁(yè)碼。課程頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫筆記詳情包含筆記內(nèi)容和對(duì)筆記的評(píng)論。這一部分非常簡(jiǎn)單，因此就介紹如果形成筆記內(nèi)容，筆記的評(píng)論就自行完成

32、。程序清單6-26：按語(yǔ)言分類腳本第1行，獲得筆記的ID號(hào)，進(jìn)行查詢。如果沒(méi)有筆記的ID號(hào)，那么是進(jìn)入不了筆記的詳情頁(yè)面的。第2行至第7行從數(shù)據(jù)庫(kù)notes表中查詢含有該NotesId的數(shù)據(jù)。如果沒(méi)有就提示沒(méi)有找到，如果有第10行開始就把內(nèi)容輸出到頁(yè)面上。筆記詳情頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫用戶登陸和注冊(cè)是每一個(gè)網(wǎng)站都離不開的部分。本網(wǎng)站的登陸注冊(cè)部分采用session會(huì)話記錄用戶的登陸信息。1.1.理解理解sessionsession機(jī)制機(jī)制我們?yōu)槭裁葱枰猄ession，就是因?yàn)槲覀冃枰鎯?chǔ)各個(gè)用戶的狀態(tài)數(shù)據(jù)。一個(gè)訪問(wèn)者訪問(wèn)你的web網(wǎng)站將被分配一個(gè)唯一的 id, 就是所謂的會(huì)

33、話 id。PHP設(shè)計(jì)管理session的方案分別包含了以下信息l session id用戶session唯一標(biāo)識(shí)符，隨機(jī)生成的一串字符串，具有唯一性，隨機(jī)性。主要用于區(qū)分其它用戶的session數(shù)據(jù)。l session data我們把需要通過(guò)session保存的用戶狀態(tài)信息，稱為用戶session數(shù)據(jù)，也稱為session數(shù)據(jù)。登陸注冊(cè)頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫用戶登陸和注冊(cè)是每一個(gè)網(wǎng)站都離不開的部分。本網(wǎng)站的登陸注冊(cè)部分采用session會(huì)話記錄用戶的登陸信息。1.1.理解理解sessionsession機(jī)制機(jī)制我們?yōu)槭裁葱枰猄ession，就是因?yàn)槲覀冃枰鎯?chǔ)各個(gè)用戶的狀態(tài)

34、數(shù)據(jù)。一個(gè)訪問(wèn)者訪問(wèn)你的web網(wǎng)站將被分配一個(gè)唯一的 id, 就是所謂的會(huì)話 id。PHP設(shè)計(jì)管理session的方案分別包含了以下信息l session filePHP 默認(rèn)將session數(shù)據(jù)存放在一個(gè)文件里。我們把存放session數(shù)據(jù)的文件稱為session文件。l session lifetime我們把初始化session開始，直到注銷session這段期間，稱為session生命周期，這樣有助于我們理解session管理函數(shù)。登陸注冊(cè)頁(yè)面的動(dòng)態(tài)頁(yè)面制作PART.2后臺(tái)腳本編寫2.2.用戶注冊(cè)用戶注冊(cè)用戶注冊(cè)的腳本 包含了一個(gè)表單和用戶會(huì)話。在整個(gè)腳本的頭部，我們加入了session_start();語(yǔ)句開啟一個(gè)會(huì)話；$error_msg = ;聲明一個(gè)輸出錯(cuò)誤信息的字符串變量。程序清單6-27：用戶注冊(cè)腳本這個(gè)腳本分2個(gè)部分，如果用戶沒(méi)有看到過(guò)注冊(cè)表單，就顯示注冊(cè)表單，如果已經(jīng)注冊(cè)提交表單了，就插入數(shù)據(jù)，輸出提