Web前端開發(fā)實訓(xùn)案例教程（中級）

目 錄
第1章 實踐概述\t1
1．1 實踐目標(biāo)\t1
1．2 實踐知識地圖\t1
1．3 實施安排\t10
1．3．1 實驗（技術(shù)專題）部分\t10
1．3．2 綜合實踐部分\t19
第2章 開發(fā)工具（HBuilder）\t22
2．1 實驗?zāi)繕?biāo)\t22
2．2 實驗任務(wù)\t22
2．3 設(shè)計思路\t22
2．4 實驗實施（跟我做）\t22
2．4．1 步驟一：下載并安裝
HBuilder\t22
2．4．2 步驟二：HBuilder主界面\t23
2．4．3 步驟三：在HBuilder中安裝
PHP插件\t24
2．4．4 步驟四：創(chuàng)建Web項目
工程\t25
2．4．5 步驟五：創(chuàng)建HTML
頁面\t26
2．4．6 步驟六：編輯html文件\t27
2．4．7 步驟七：運(yùn)行\(zhòng)t28
第3章 Web靜態(tài)網(wǎng)頁開發(fā)
（小說網(wǎng)首頁）\t29
3．1 實驗?zāi)繕?biāo)\t29
3．2 實驗任務(wù)\t30
3．3 設(shè)計思路\t32
3．4 實驗實施（跟我做）\t35
3．4．1 步驟一：創(chuàng)建工程\t35
3．4．2 步驟二：制作首頁\t35
3．4．3 步驟三：制作小說列表
頁面\t37
3．4．4 步驟四：加載小說列表
頁面\t39
3．4．5 步驟五：添加樣式美化
首頁\t40
3．4．6 步驟六：添加樣式美化小說
列表頁面\t44
第4章 JavaScript開發(fā)交互效果頁面
（房貸計算器）\t47
4．1 實驗?zāi)繕?biāo)\t47
4．2 實驗任務(wù)\t48
4．3 設(shè)計思路\t49
4．4 實驗實施（跟我做）\t52
4．4．1 步驟一：創(chuàng)建工程\t52
4．4．2 步驟二：使用HTML布局
頁面\t52
4．4．3 步驟三：使用CSS樣式美化
頁面\t53
4．4．4 步驟四：創(chuàng)建house．js
文件\t56
4．4．5 擴(kuò)展：正則表達(dá)式驗證
輸入\t59
第5章 jQuery開發(fā)交互效果頁面
（留言頁面）\t61
5．1 實驗?zāi)繕?biāo)\t61
5．2 實驗任務(wù)\t62
5．3 設(shè)計思路\t63
5．4 實驗實施（跟我做）\t64
5．4．1 步驟一：創(chuàng)建工程\t64
5．4．2 步驟二：使用HTML布局
留言頁面\t64
5．4．3 步驟三：使用CSS樣式美化
留言頁面\t65
5．4．4 步驟四：引入jQuery文件和jQuery UI文件\t66
5．4．5 步驟五：輸入留言信息\t67
5．4．6 步驟六：發(fā)布留言\t68
5．4．7 步驟七：保存留言信息\t68
第6章 Bootstrap開發(fā)頁面
（注冊頁面）\t69
6．1 實驗?zāi)繕?biāo)\t69
6．2 實驗任務(wù)\t70
6．3 設(shè)計思路\t70
6．4 實驗實施（跟我做）\t72
6．4．1 步驟一：引入Bootstrap
文件\t72
6．4．2 步驟二：制作頁頭導(dǎo)航欄\t73
6．4．3 步驟三：制作注冊欄\t73
6．4．4 步驟四：制作頁腳\t76
6．4．5 步驟五：運(yùn)行效果\t76
第7章 Bootstrap開發(fā)頁面
（分類信息頁面）\t77
7．1 實驗?zāi)繕?biāo)\t77
7．2 實驗任務(wù)\t78
7．3 設(shè)計思路\t79
7．4 實驗實施（跟我做）\t82
7．4．1 步驟一：引入Bootstrap\t82
7．4．2 步驟二：制作頁頭\t82
7．4．3 步驟三：制作產(chǎn)地篩選欄和
商品信息欄\t84
7．4．4 步驟四：制作頁腳\t86
7．4．5 步驟五：響應(yīng)到移動端\t86
第8章 MySQL（MySQL基本
操作）\t88
8．1 實驗?zāi)繕?biāo)\t88
8．2 實驗任務(wù)\t88
8．3 設(shè)計思路\t89
8．4 實驗實施（跟我做）\t89
8．4．1 步驟一：下載并安裝
MySQL\t89
8．4．2 步驟二：登錄MySQL\t90
8．4．3 步驟三：數(shù)據(jù)庫基本操作\t92
第9章 MySQL（試題信息管理）\t93
9．1 實驗?zāi)繕?biāo)\t93
9．2 實驗任務(wù)\t94
9．3 設(shè)計思路\t95
9．4 實驗實施（跟我做）\t97
9．4．1 步驟一：創(chuàng)建數(shù)據(jù)庫\t97
9．4．2 步驟二：創(chuàng)建表\t97
9．4．3 步驟三：表的操作\t99
9．4．4 步驟四：視圖\t100
9．4．5 步驟五：索引\t100
9．4．6 步驟六：管理表數(shù)據(jù)\t100
9．4．7 步驟七：查詢表數(shù)據(jù)\t101
9．4．8 步驟八：導(dǎo)入和導(dǎo)出數(shù)據(jù)庫
腳本\t102
9．4．9 步驟九：事務(wù)控制\t103
9．4．10 步驟十：觸發(fā)器\t104
9．4．11 步驟十一：存儲過程\t105
第10章 PHP制作動態(tài)網(wǎng)頁
（第一個PHP程序）\t107
10．1 實驗?zāi)繕?biāo)\t107
10．2 實驗任務(wù)\t108
10．3 設(shè)計思路\t108
10．4 實驗實施（跟我做）\t108
10．4．1 步驟一：更改Apache的
網(wǎng)站根目錄\t108
10．4．2 步驟二：制作第一個PHP
程序\t110
10．4．3 步驟三：發(fā)布運(yùn)行\(zhòng)t111
10．4．4 步驟四：擴(kuò)展\t112
第11章 PHP制作動態(tài)網(wǎng)頁
（日期計算器）\t113
11．1 實驗?zāi)繕?biāo)\t113
11．2 實驗任務(wù)\t114
11．3 設(shè)計思路\t114
11．4 實驗實施（跟我做）\t115
11．4．1 步驟一：編寫主頁\t115
11．4．2 步驟二：判斷閏年\t116
11．4．3 步驟三：驗證日期\t116
11．4．4 步驟四：計算天數(shù)\t117
11．4．5 步驟五：處理請求\t118
11．4．6 步驟六：運(yùn)行效果\t119
第12章 PHP制作動態(tài)網(wǎng)頁
（購物車）\t120
12．1 實驗?zāi)繕?biāo)\t120
12．2 實驗任務(wù)\t121
12．3 設(shè)計思路\t123
12．4 實驗實施（跟我做）\t124
12．4．1 步驟一：制作商品列表
頁面\t124
12．4．2 步驟二：將商品加入
購物車\t126
12．4．3 步驟三：制作購物車
頁面\t128
12．4．4 步驟四：改變購物車內(nèi)的
商品數(shù)量\t129
12．4．5 步驟五：制作確認(rèn)訂單
頁面\t129
12．4．6 步驟六：制作訂單頁面\t131
第13章 PHP制作動態(tài)網(wǎng)頁
（在線投票系統(tǒng)）\t132
13．1 實驗?zāi)繕?biāo)\t132
13．2 實驗任務(wù)\t133
13．3 設(shè)計思路\t133
13．4 實驗實施（跟我做）\t135
13．4．1 步驟一：創(chuàng)建項目和
文件\t135
13．4．2 步驟二：頁面基類\t136
13．4．3 步驟三：姓名輸入頁面\t137
13．4．4 步驟四：投票頁面\t138
13．4．5 步驟五：數(shù)據(jù)的獲取和
寫入\t139
第14章 PHP制作動態(tài)網(wǎng)頁
（學(xué)生成績管理）\t141
14．1 實驗?zāi)繕?biāo)\t141
14．2 實驗任務(wù)\t142
14．3 設(shè)計思路\t143
14．4 實驗實施（跟我做）\t146
14．4．1 步驟一：創(chuàng)建項目和
文件\t146
14．4．2 步驟二：創(chuàng)建數(shù)據(jù)庫\t147
14．4．3 步驟三：制作CSS
樣式\t147
14．4．4 步驟四：制作登錄
頁面\t147
14．4．5 步驟五：制作成績管理
頁面\t149
14．4．6 步驟六：編寫數(shù)據(jù)庫操作
PHP代碼\t151
14．4．7 步驟七：數(shù)據(jù)的獲取和
寫入\t153
第15章 AJAX制作動態(tài)網(wǎng)頁
（閱讀器）\t158
15．1 實驗?zāi)繕?biāo)\t158
15．2 實驗任務(wù)\t159
15．3 設(shè)計思路\t160
15．4 實驗實施（跟我做）\t161
15．4．1 步驟一：創(chuàng)建項目和
文件\t161
15．4．2 步驟二：實現(xiàn)XML格式
數(shù)據(jù)接口\t161
15．4．3 步驟三：實現(xiàn)JSON格式
數(shù)據(jù)接口\t162
15．4．4 步驟四：制作HTML
頁面\t163
15．4．5 步驟五：制作CSS樣式\t163
15．4．6 步驟六：編寫AJAX
請求\t164
15．4．7 步驟七：構(gòu)建XML格式的
書籍內(nèi)容\t165
15．4．8 步驟八：構(gòu)建JSON格式的
書籍內(nèi)容\t166
15．4．9 步驟九：清除頁面內(nèi)容\t167
第16章 RESTful API規(guī)范
（視頻列表）\t168
16．1 實驗?zāi)繕?biāo)\t168
16．2 實驗任務(wù)\t169
16．3 設(shè)計思路\t170
16．4 實驗實施（跟我做）\t172
16．4．1 步驟一：處理API
請求\t172
16．4．2 步驟二：返回視頻列表
數(shù)據(jù)\t175
16．4．3 步驟三：使用RESTful
API\t176
第17章 Laravel框架構(gòu)建動態(tài)網(wǎng)站
（第一個Laravel程序）\t178
17．1 實驗?zāi)繕?biāo)\t178
17．2 實驗任務(wù)\t179
17．3 設(shè)計思路\t180
17．4 實驗實施（跟我做）\t181
17．4．1 步驟一：安裝
Composer\t181
17．4．2 步驟二：配置國內(nèi)鏡像\t183
17．4．3 步驟三：創(chuàng)建Laravel
工程\t183
17．4．4 步驟四：配置虛擬主機(jī)\t184
17．4．5 步驟五：編寫index．blade．php
文件\t186
17．4．6 步驟六：編寫路由\t186
第18章 Laravel框架構(gòu)建動態(tài)網(wǎng)站
（在線答題）\t187
18．1 實驗?zāi)繕?biāo)\t187
18．2 實驗任務(wù)\t188
18．3 設(shè)計思路\t188
18．4 實驗實施（跟我做）\t190
18．4．1 步驟一：創(chuàng)建Laravel
工程\t190
18．4．2 步驟二：配置路由\t191
18．4．3 步驟三：創(chuàng)建控制器類QuizController\t191
18．4．4 步驟四：編寫quiz．blade．php
文件\t192
18．4．5 步驟五：編寫result．blade．php
文件\t193
18．4．6 步驟六：編寫QuizController()
處理函數(shù)\t194
第19章 Laravel框架構(gòu)建動態(tài)網(wǎng)站
（個人博客）\t197
19．1 實驗?zāi)繕?biāo)\t197
19．2 實驗任務(wù)\t198
19．3 設(shè)計思路\t200
19．4 實驗實施（跟我做）\t203
19．4．1 步驟一：創(chuàng)建Laravel
工程\t203
19．4．2 步驟二：配置路由\t204
19．4．3 步驟三：創(chuàng)建控制器類\t205
19．4．4 步驟四：實現(xiàn)登錄功能
（查詢構(gòu)建器）\t205
19．4．5 步驟五：創(chuàng)建模型類\t206
19．4．6 步驟六：實現(xiàn)登錄功能\t207
19．4．7 步驟七：顯示博客列表\t208
19．4．8 步驟八：添加博客\t212
19．4．9 步驟九：修改和刪除
博客\t212
第20章 AJAX制作動態(tài)網(wǎng)頁
（天氣預(yù)報）\t214
20．1 實驗?zāi)繕?biāo)\t214
20．2 實驗任務(wù)\t216
20．3 設(shè)計思路\t216
20．4 實驗實施（跟我做）\t217
20．4．1 步驟一：創(chuàng)建工程和
文件\t217
20．4．2 步驟二：實現(xiàn)PHP數(shù)據(jù)
接口\t218
20．4．3 步驟三：制作HTML
頁面\t219
20．4．4 步驟四：制作CSS
樣式\t220
20．4．5 步驟五：編寫AJAX
請求\t221
第21章 綜合實踐（淘興趣）\t223
21．1 項目簡介\t223
21．2 實踐目標(biāo)\t223
21．3 需求分析\t224
21．4 頁面設(shè)計\t226
21．4．1 工作任務(wù)\t226
21．4．2 設(shè)計思路\t226
21．4．3 實現(xiàn)（跟我做）\t228
21．5 第一階段PHP頁面混合式：
創(chuàng)建工程\t233
21．5．1 工作任務(wù)\t233
21．5．2 設(shè)計思路\t233
21．5．3 實現(xiàn)（跟我做）\t236
21．6 第一階段PHP頁面混合式：
系統(tǒng)管理\t241
21．6．1 PHP頁面混合式：管理員
登錄\t241
21．6．2 PHP頁面混合式：興趣
管理\t246
21．7 第一階段PHP頁面混合式：
用戶注冊\t253
21．7．1 工作任務(wù)\t253
21．7．2 設(shè)計思路\t254
21．7．3 實現(xiàn)（跟我做）\t255
21．8 第一階段PHP頁面混合式：
用戶登錄\t258
21．8．1 工作任務(wù)\t258
21．8．2 設(shè)計思路\t259
21．8．3 實現(xiàn)（跟我做）\t259
21．9 第一階段PHP頁面混合式：
個人中心\t261
21．9．1 工作任務(wù)\t261
21．9．2 設(shè)計思路\t262
21．9．3 實現(xiàn)（跟我做）\t263
21．10 第一階段PHP頁面混合式：
首頁\t265
21．10．1 工作任務(wù)\t265
21．10．2 設(shè)計思路\t267
21．10．3 實現(xiàn)（跟我做）\t268
21．11 第一階段PHP頁面混合式：
趣點(diǎn)管理\t270
21．11．1 PHP頁面混合式：創(chuàng)建
趣點(diǎn)\t270
21．11．2 PHP頁面混合式：搜索
趣點(diǎn)\t275
21．11．3 PHP頁面混合式：訂閱
趣點(diǎn)\t281
21．12 第一階段PHP頁面混合式：
微博管理\t287
21．12．1 工作任務(wù)\t287
21．12．2 設(shè)計思路\t289
21．12．3 實現(xiàn)（跟我做）\t289
21．13 第二階段移動端響應(yīng)式頁面：
首頁\t293
21．13．1 工作任務(wù)\t293
21．13．2 設(shè)計思路\t293
21．13．3 實現(xiàn)（跟我做）\t294
21．14 第三階段AJAX+JSON：
用戶注冊\t297
21．14．1 工作任務(wù)\t297
21．14．2 設(shè)計思路\t298
21．14．3 實現(xiàn)（跟我做）\t299
21．15 第三階段AJAX+JSON：
用戶登錄\t307
21．15．1 工作任務(wù)\t307
21．15．2 設(shè)計思路\t308
21．15．3 實現(xiàn)（跟我做）\t309
21．16 第三階段AJAX+JSON：
趣點(diǎn)管理\t314
21．16．1 工作任務(wù)\t314
21．16．2 設(shè)計思路\t316
21．16．3 實現(xiàn)（跟我做）\t316
21．17 第三階段AJAX+JSON：
微博管理\t328
21．17．1 工作任務(wù)\t328
21．17．2 設(shè)計思路\t330
21．17．3 實現(xiàn)（跟我做）\t330
21．18 第四階段RESTful API：
搜索趣點(diǎn)\t339
21．18．1 工作任務(wù)\t339
21．18．2 設(shè)計思路\t340
21．18．3 實現(xiàn)（跟我做）\t342
21．19 第五階段Laravel：用戶
注冊\t350
21．19．1 工作任務(wù)\t350
21．19．2 設(shè)計思路\t351
21．19．3 實現(xiàn)（跟我做）\t352
21．20 第五階段Laravel：用戶
登錄\t359
21．20．1 工作任務(wù)\t359
21．20．2 設(shè)計思路\t360
21．20．3 實現(xiàn)（跟我做）\t361