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

目 錄




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