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

目 錄




第1章 實(shí)踐概述 1
1.1 實(shí)踐目標(biāo) 1
1.2 實(shí)踐知識(shí)地圖 1
1.3 實(shí)施安排 8
第2章 開(kāi)發(fā)環(huán)境：開(kāi)發(fā)工具 10
2.1 實(shí)驗(yàn)?zāi)繕?biāo) 10
2.2 實(shí)驗(yàn)任務(wù) 10
2.3 設(shè)計(jì)思路 10
2.4 實(shí)驗(yàn)實(shí)施（跟我做） 11
2.4.1 步驟一：下載并安裝HBuilder 11
2.4.2 步驟二：HBuilder的主界面 12
2.4.3 步驟三：在HBuilder中安裝
PHP插件 12
2.4.4 步驟四：創(chuàng)建Web項(xiàng)目 13
2.4.5 步驟五：創(chuàng)建HTML文件 14
2.4.6 步驟六：編輯HTML文件 15
2.4.7 步驟七：運(yùn)行HTML文件 15
第3章 HTML5+CSS3：直播平臺(tái) 17
3.1 實(shí)驗(yàn)?zāi)繕?biāo) 17
3.2 實(shí)驗(yàn)任務(wù) 17
3.3 設(shè)計(jì)思路 19
3.4 實(shí)驗(yàn)實(shí)施（跟我做） 22
3.4.1 步驟一：創(chuàng)建項(xiàng)目 22
3.4.2 步驟二：制作首頁(yè) 23
3.4.3 步驟三：添加樣式美化首頁(yè) 31
第4章 JavaScript：動(dòng)態(tài)驗(yàn)證碼 38
4.1 實(shí)驗(yàn)?zāi)繕?biāo) 38
4.2 實(shí)驗(yàn)任務(wù) 38
4.3 設(shè)計(jì)思路 39
4.4 實(shí)驗(yàn)實(shí)施（跟我做） 42
4.4.1 步驟一：創(chuàng)建項(xiàng)目 42
4.4.2 步驟二：使用HTML文件
布局頁(yè)面 42
4.4.3 步驟三：使用CSS文件美化
頁(yè)面 43
4.4.4 步驟四：創(chuàng)建JavaScript文件 44
第5章 jQuery：電影選座 47
5.1 實(shí)驗(yàn)?zāi)繕?biāo) 47
5.2 實(shí)驗(yàn)任務(wù) 48
5.3 設(shè)計(jì)思路 49
5.4 實(shí)驗(yàn)實(shí)施（跟我做） 51
5.4.1 步驟一：創(chuàng)建項(xiàng)目 51
5.4.2 步驟二：使用HTML代碼編寫(xiě)
頁(yè)面 51
5.4.3 步驟三：使用CSS文件美化
頁(yè)面 52
5.4.4 步驟四：實(shí)現(xiàn)選擇座位功能 54
5.4.5 步驟五：實(shí)現(xiàn)切換場(chǎng)次功能 56
第6章 Bootstrap：互動(dòng)問(wèn)答頁(yè)面 59
6.1 實(shí)驗(yàn)?zāi)繕?biāo) 59
6.2 實(shí)驗(yàn)任務(wù) 60
6.3 設(shè)計(jì)思路 60
6.4 實(shí)驗(yàn)實(shí)施（跟我做） 62
6.4.1 步驟一：引入Bootstrap樣式
文件 62
6.4.2 步驟二：制作頁(yè)頭導(dǎo)航欄 62
6.4.3 步驟三：制作提問(wèn)欄 63
6.4.4 步驟四：運(yùn)行效果 66
第7章 Bootstrap：民宿網(wǎng) 67
7.1 實(shí)驗(yàn)?zāi)繕?biāo) 67
7.2 實(shí)驗(yàn)任務(wù) 67
7.3 設(shè)計(jì)思路 69
7.4 實(shí)驗(yàn)實(shí)施（跟我做） 75
7.4.1 步驟一：引入Bootstrap文件和
布局視口 75
7.4.2 步驟二：制作頁(yè)頭 75
7.4.3 步驟三：制作“輪播圖和區(qū)域
選擇”板塊 77
7.4.4 步驟四：制作“特色民宿”
板塊和“親子民宿”板塊 79
7.4.5 步驟五：制作頁(yè)腳 84
第8章 Bootstrap：電影網(wǎng)站 86
8.1 實(shí)驗(yàn)?zāi)繕?biāo) 86
8.2 實(shí)驗(yàn)任務(wù) 87
8.3 設(shè)計(jì)思路 87
8.4 實(shí)驗(yàn)實(shí)施（跟我做） 88
8.4.1 步驟一：項(xiàng)目準(zhǔn)備 88
8.4.2 步驟二：制作頁(yè)頭 89
8.4.3 步驟三：布局頁(yè)面主體 90
8.4.4 步驟四：制作“輪播圖”板塊 90
8.4.5 步驟五：制作“電影分類”
板塊 91
8.4.6 步驟六：制作“電影列表”
板塊 93
8.4.7 步驟七：制作“VIP影院”
板塊 95
8.4.8 步驟八：制作“點(diǎn)播排行榜”
板塊 96
8.4.9 步驟九：制作頁(yè)腳 97
第9章 Bootstrap：后臺(tái)管理系統(tǒng) 99
9.1 實(shí)驗(yàn)?zāi)繕?biāo) 99
9.2 實(shí)驗(yàn)任務(wù) 100
9.3 設(shè)計(jì)思路 100
9.4 實(shí)驗(yàn)實(shí)施（跟我做） 101
9.4.1 步驟一：項(xiàng)目準(zhǔn)備 101
9.4.2 步驟二：制作導(dǎo)航欄 102
9.4.3 步驟三：布局頁(yè)面主體 103
9.4.4 步驟四：制作“警告框”板塊 104
9.4.5 步驟五：制作“網(wǎng)站數(shù)據(jù)統(tǒng)計(jì)”
板塊 104
9.4.6 步驟六：制作“網(wǎng)站熱帖”
板塊 105
9.4.7 步驟七：制作“今日訪客統(tǒng)
計(jì)”板塊 106
9.4.8 步驟八：制作“服務(wù)器狀態(tài)”
板塊 107
9.4.9 步驟九：制作“團(tuán)隊(duì)留言板”
板塊 108
9.4.10 步驟十：添加版權(quán)信息 110
第10章 AJAX+PHP：JavaScript手冊(cè) 111
10.1 實(shí)驗(yàn)?zāi)繕?biāo) 111
10.2 實(shí)驗(yàn)任務(wù) 112
10.3 設(shè)計(jì)思路 112
10.4 實(shí)驗(yàn)實(shí)施（跟我做） 113
10.4.1 步驟一：創(chuàng)建項(xiàng)目和文件 113
10.4.2 步驟二：實(shí)現(xiàn)JSON格式的
數(shù)據(jù)接口 114
10.4.3 步驟三：制作HTML頁(yè)面 115
10.4.4 步驟四：使用AJAX請(qǐng)求
數(shù)據(jù)接口 116
10.4.5 步驟五：構(gòu)建JavaScript
手冊(cè)內(nèi)容 116
第11章 AJAX+PHP：用戶注冊(cè)模塊 120
11.1 實(shí)驗(yàn)?zāi)繕?biāo) 120
11.2 實(shí)驗(yàn)任務(wù) 121
11.3 設(shè)計(jì)思路 121
11.4 實(shí)驗(yàn)實(shí)施（跟我做） 121
11.4.1 步驟一：創(chuàng)建后臺(tái)數(shù)據(jù)庫(kù) 121
11.4.2 步驟二：創(chuàng)建用戶注冊(cè)頁(yè)面 122
11.4.3 步驟三：通過(guò)PHP代碼檢查
用戶 125
第12章 RESTful API：RSS訂閱 127
12.1 實(shí)驗(yàn)?zāi)繕?biāo) 127
12.2 實(shí)驗(yàn)任務(wù) 128
12.3 設(shè)計(jì)思路 129
12.4 實(shí)驗(yàn)實(shí)施（跟我做） 132
12.4.1 步驟一：創(chuàng)建項(xiàng)目 132
12.4.2 步驟二：實(shí)現(xiàn)訂閱源列表 135
12.4.3 步驟三：實(shí)現(xiàn)添加訂閱源 139
12.4.4 步驟四：實(shí)現(xiàn)添加/取消訂閱 142
第13章 MySQL：駕考寶典 144
13.1 實(shí)驗(yàn)?zāi)繕?biāo) 144
13.2 實(shí)驗(yàn)任務(wù) 145
13.3 設(shè)計(jì)思路 145
13.4 實(shí)驗(yàn)實(shí)施（跟我做） 146
13.4.1 步驟一：下載XAMPP和啟動(dòng)MySQL 146
13.4.2 步驟二：登錄MySQL 147
13.4.3 步驟三：創(chuàng)建數(shù)據(jù)庫(kù) 148
13.4.4 步驟四：創(chuàng)建表 148
13.4.5 步驟五：表的操作 150
13.4.6 步驟六：管理表數(shù)據(jù) 151
13.4.7 步驟七：備份與恢復(fù)數(shù)據(jù)庫(kù) 153
第14章 PHP：我的卡包 154
14.1 實(shí)驗(yàn)?zāi)繕?biāo) 154
14.2 實(shí)驗(yàn)任務(wù) 154
14.3 設(shè)計(jì)思路 156
14.4 實(shí)驗(yàn)實(shí)施（跟我做） 157
14.4.1 步驟一：創(chuàng)建項(xiàng)目和文件 157
14.4.2 步驟二：創(chuàng)建銀行卡抽象類 158
14.4.3 步驟三：創(chuàng)建儲(chǔ)蓄卡類 159
14.4.4 步驟四：創(chuàng)建信用卡類 160
14.4.5 步驟五：創(chuàng)建腳本文件 162
14.4.6 步驟六：運(yùn)行腳本文件 165
第15章 PHP：在線購(gòu)票 168
15.1 實(shí)驗(yàn)?zāi)繕?biāo) 168
15.2 實(shí)驗(yàn)任務(wù) 169
15.3 設(shè)計(jì)思路 170
15.4 實(shí)驗(yàn)實(shí)施（跟我做） 172
15.4.1 步驟一：制作“車次列表”
頁(yè)面 172
15.4.2 步驟二：制作“添加乘客”
頁(yè)面 175
15.4.3 步驟三：制作“訂單生成
處理”頁(yè)面 177
15.4.4 步驟四：制作“訂單信息”
頁(yè)面 178
15.4.5 步驟五：添加乘客錯(cuò)誤提示 180
第16章 PHP：駕校考試系統(tǒng) 182
16.1 實(shí)驗(yàn)?zāi)繕?biāo) 182
16.2 實(shí)驗(yàn)任務(wù) 183
16.3 設(shè)計(jì)思路 184
16.4 實(shí)驗(yàn)實(shí)施（跟我做） 187
16.4.1 步驟一：創(chuàng)建項(xiàng)目和文件 187
16.4.2 步驟二：創(chuàng)建數(shù)據(jù)庫(kù) 187
16.4.3 步驟三：制作用戶登錄頁(yè)面 189
16.4.4 步驟四：制作“題目列表”
頁(yè)面 192
16.4.5 步驟五：制作“做題記錄”
頁(yè)面 196
第17章 Laravel框架：醫(yī)院掛號(hào)系統(tǒng) 198
17.1 實(shí)驗(yàn)?zāi)繕?biāo) 198
17.2 實(shí)驗(yàn)任務(wù) 199
17.3 設(shè)計(jì)思路 199
17.4 實(shí)驗(yàn)實(shí)施（跟我做） 201
17.4.1 步驟一：創(chuàng)建Laravel項(xiàng)目 201
17.4.2 步驟二：配置路由 202
17.4.3 步驟三：創(chuàng)建控制器類DoctorController 203
17.4.4 步驟四：編寫(xiě)模板文件doctor.blade.php 203
17.4.5 步驟五：編寫(xiě)模板文件next.blade.php 206
17.4.6 步驟六：編寫(xiě)模板文件start.blade.php 207
17.4.7 步驟七：編寫(xiě)模板文件index.blade.php 208
第18章 Laravel框架：智能記賬本 210
18.1 實(shí)驗(yàn)?zāi)繕?biāo) 210
18.2 實(shí)驗(yàn)任務(wù) 211
18.3 設(shè)計(jì)思路 212
18.4 實(shí)驗(yàn)實(shí)施（跟我做） 215
18.4.1 步驟一：創(chuàng)建Laravel項(xiàng)目 215
18.4.2 步驟二：配置路由 216
18.4.3 步驟三：創(chuàng)建控制器類 216
18.4.4 步驟四：實(shí)現(xiàn)記賬頁(yè)面的
功能 217
18.4.5 步驟五：創(chuàng)建模型類 218
18.4.6 步驟六：顯示記賬列表 218
18.4.7 步驟七：添加賬單 220
18.4.8 步驟八：修改和刪除賬單 220
第19章 ThinkPHP框架：醫(yī)院掛號(hào)
系統(tǒng) 222
19.1 實(shí)驗(yàn)?zāi)繕?biāo) 222
19.2 實(shí)驗(yàn)任務(wù) 223
19.3 設(shè)計(jì)思路 223
19.4 實(shí)驗(yàn)實(shí)施（跟我做） 225
19.4.1 步驟一：創(chuàng)建ThinkPHP
項(xiàng)目 225
19.4.2 步驟二：配置路由 226
19.4.3 步驟三：創(chuàng)建控制器類 226
19.4.4 步驟四：編寫(xiě)模板文件departments.html 227
19.4.5 步驟五：編寫(xiě)模板文件
next.html 230
19.4.6 步驟六：編寫(xiě)模板文件
start.html 232
19.4.7 步驟七：編寫(xiě)模板文件
index.html 233
第20章 ThinkPHP框架：智能記賬本 235
20.1 實(shí)驗(yàn)?zāi)繕?biāo) 235
20.2 實(shí)驗(yàn)任務(wù) 236
20.3 設(shè)計(jì)思路 237
20.4 實(shí)驗(yàn)實(shí)施（跟我做） 240
20.4.1 步驟一：創(chuàng)建ThinkPHP
項(xiàng)目 240
20.4.2 步驟二：配置路由 241
20.4.3 步驟三：創(chuàng)建控制器類 241
20.4.4 步驟四：實(shí)現(xiàn)記賬頁(yè)面功能 242
20.4.5 步驟五：創(chuàng)建模型類 243
20.4.6 步驟六：顯示記賬列表 243
20.4.7 步驟七：添加賬單 245
20.4.8 步驟八：修改和刪除賬單 245
第21章 ThinkPHP框架：圖書(shū)App 247
21.1 實(shí)驗(yàn)?zāi)繕?biāo) 247
21.2 實(shí)驗(yàn)任務(wù) 247
21.3 設(shè)計(jì)思路 248
21.4 實(shí)驗(yàn)實(shí)施（跟我做） 250
21.4.1 步驟一：創(chuàng)建ThinkPHP
項(xiàng)目 250
21.4.2 步驟二：配置路由和控制器 250
21.4.3 步驟三：安裝模板引擎和
設(shè)計(jì)靜態(tài)頁(yè)面 252
21.4.4 步驟四：配置數(shù)據(jù)庫(kù)和創(chuàng)建
模型 261
21.4.5 步驟五：在index.html文件
中發(fā)送AJAX請(qǐng)求 262
21.4.6 步驟六：在info.html文件中
接收參數(shù)并發(fā)送AJAX請(qǐng)求 263
第22章 ThinkPHP框架：數(shù)據(jù)統(tǒng)計(jì)
系統(tǒng) 264
22.1 實(shí)驗(yàn)?zāi)繕?biāo) 264
22.2 實(shí)驗(yàn)任務(wù) 265
22.3 設(shè)計(jì)思路 265
22.4 實(shí)驗(yàn)實(shí)施（跟我做） 267
22.4.1 步驟一：創(chuàng)建ThinkPHP
項(xiàng)目