Web前端开发实训案例教程（中级）

目 录




第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 1
1.3 实施安排 8
第2章 开发环境：开发工具 10
2.1 实验目标 10
2.2 实验任务 10
2.3 设计思路 10
2.4 实验实施（跟我做） 11
2.4.1 步骤一：下载并安装HBuilder 11
2.4.2 步骤二：HBuilder的主界面 12
2.4.3 步骤三：在HBuilder中安装
PHP插件 12
2.4.4 步骤四：创建Web项目 13
2.4.5 步骤五：创建HTML文件 14
2.4.6 步骤六：编辑HTML文件 15
2.4.7 步骤七：运行HTML文件 15
第3章 HTML5+CSS3：直播平台 17
3.1 实验目标 17
3.2 实验任务 17
3.3 设计思路 19
3.4 实验实施（跟我做） 22
3.4.1 步骤一：创建项目 22
3.4.2 步骤二：制作首页 23
3.4.3 步骤三：添加样式美化首页 31
第4章 JavaScript：动态验证码 38
4.1 实验目标 38
4.2 实验任务 38
4.3 设计思路 39
4.4 实验实施（跟我做） 42
4.4.1 步骤一：创建项目 42
4.4.2 步骤二：使用HTML文件
布局页面 42
4.4.3 步骤三：使用CSS文件美化
页面 43
4.4.4 步骤四：创建JavaScript文件 44
第5章 jQuery：电影选座 47
5.1 实验目标 47
5.2 实验任务 48
5.3 设计思路 49
5.4 实验实施（跟我做） 51
5.4.1 步骤一：创建项目 51
5.4.2 步骤二：使用HTML代码编写
页面 51
5.4.3 步骤三：使用CSS文件美化
页面 52
5.4.4 步骤四：实现选择座位功能 54
5.4.5 步骤五：实现切换场次功能 56
第6章 Bootstrap：互动问答页面 59
6.1 实验目标 59
6.2 实验任务 60
6.3 设计思路 60
6.4 实验实施（跟我做） 62
6.4.1 步骤一：引入Bootstrap样式
文件 62
6.4.2 步骤二：制作页头导航栏 62
6.4.3 步骤三：制作提问栏 63
6.4.4 步骤四：运行效果 66
第7章 Bootstrap：民宿网 67
7.1 实验目标 67
7.2 实验任务 67
7.3 设计思路 69
7.4 实验实施（跟我做） 75
7.4.1 步骤一：引入Bootstrap文件和
布局视口 75
7.4.2 步骤二：制作页头 75
7.4.3 步骤三：制作“轮播图和区域
选择”板块 77
7.4.4 步骤四：制作“特色民宿”
板块和“亲子民宿”板块 79
7.4.5 步骤五：制作页脚 84
第8章 Bootstrap：电影网站 86
8.1 实验目标 86
8.2 实验任务 87
8.3 设计思路 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：后台管理系统 99
9.1 实验目标 99
9.2 实验任务 100
9.3 设计思路 100
9.4 实验实施（跟我做） 101
9.4.1 步骤一：项目准备 101
9.4.2 步骤二：制作导航栏 102
9.4.3 步骤三：布局页面主体 103
9.4.4 步骤四：制作“警告框”板块 104
9.4.5 步骤五：制作“网站数据统计”
板块 104
9.4.6 步骤六：制作“网站热帖”
板块 105
9.4.7 步骤七：制作“今日访客统
计”板块 106
9.4.8 步骤八：制作“服务器状态”
板块 107
9.4.9 步骤九：制作“团队留言板”
板块 108
9.4.10 步骤十：添加版权信息 110
第10章 AJAX+PHP：JavaScript手册 111
10.1 实验目标 111
10.2 实验任务 112
10.3 设计思路 112
10.4 实验实施（跟我做） 113
10.4.1 步骤一：创建项目和文件 113
10.4.2 步骤二：实现JSON格式的
数据接口 114
10.4.3 步骤三：制作HTML页面 115
10.4.4 步骤四：使用AJAX请求
数据接口 116
10.4.5 步骤五：构建JavaScript
手册内容 116
第11章 AJAX+PHP：用户注册模块 120
11.1 实验目标 120
11.2 实验任务 121
11.3 设计思路 121
11.4 实验实施（跟我做） 121
11.4.1 步骤一：创建后台数据库 121
11.4.2 步骤二：创建用户注册页面 122
11.4.3 步骤三：通过PHP代码检查
用户 125
第12章 RESTful API：RSS订阅 127
12.1 实验目标 127
12.2 实验任务 128
12.3 设计思路 129
12.4 实验实施（跟我做） 132
12.4.1 步骤一：创建项目 132
12.4.2 步骤二：实现订阅源列表 135
12.4.3 步骤三：实现添加订阅源 139
12.4.4 步骤四：实现添加/取消订阅 142
第13章 MySQL：驾考宝典 144
13.1 实验目标 144
13.2 实验任务 145
13.3 设计思路 145
13.4 实验实施（跟我做） 146
13.4.1 步骤一：下载XAMPP和启动MySQL 146
13.4.2 步骤二：登录MySQL 147
13.4.3 步骤三：创建数据库 148
13.4.4 步骤四：创建表 148
13.4.5 步骤五：表的操作 150
13.4.6 步骤六：管理表数据 151
13.4.7 步骤七：备份与恢复数据库 153
第14章 PHP：我的卡包 154
14.1 实验目标 154
14.2 实验任务 154
14.3 设计思路 156
14.4 实验实施（跟我做） 157
14.4.1 步骤一：创建项目和文件 157
14.4.2 步骤二：创建银行卡抽象类 158
14.4.3 步骤三：创建储蓄卡类 159
14.4.4 步骤四：创建信用卡类 160
14.4.5 步骤五：创建脚本文件 162
14.4.6 步骤六：运行脚本文件 165
第15章 PHP：在线购票 168
15.1 实验目标 168
15.2 实验任务 169
15.3 设计思路 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：驾校考试系统 182
16.1 实验目标 182
16.2 实验任务 183
16.3 设计思路 184
16.4 实验实施（跟我做） 187
16.4.1 步骤一：创建项目和文件 187
16.4.2 步骤二：创建数据库 187
16.4.3 步骤三：制作用户登录页面 189
16.4.4 步骤四：制作“题目列表”
页面 192
16.4.5 步骤五：制作“做题记录”
页面 196
第17章 Laravel框架：医院挂号系统 198
17.1 实验目标 198
17.2 实验任务 199
17.3 设计思路 199
17.4 实验实施（跟我做） 201
17.4.1 步骤一：创建Laravel项目 201
17.4.2 步骤二：配置路由 202
17.4.3 步骤三：创建控制器类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 实验目标 210
18.2 实验任务 211
18.3 设计思路 212
18.4 实验实施（跟我做） 215
18.4.1 步骤一：创建Laravel项目 215
18.4.2 步骤二：配置路由 216
18.4.3 步骤三：创建控制器类 216
18.4.4 步骤四：实现记账页面的
功能 217
18.4.5 步骤五：创建模型类 218
18.4.6 步骤六：显示记账列表 218
18.4.7 步骤七：添加账单 220
18.4.8 步骤八：修改和删除账单 220
第19章 ThinkPHP框架：医院挂号
系统 222
19.1 实验目标 222
19.2 实验任务 223
19.3 设计思路 223
19.4 实验实施（跟我做） 225
19.4.1 步骤一：创建ThinkPHP
项目 225
19.4.2 步骤二：配置路由 226
19.4.3 步骤三：创建控制器类 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 实验目标 235
20.2 实验任务 236
20.3 设计思路 237
20.4 实验实施（跟我做） 240
20.4.1 步骤一：创建ThinkPHP
项目 240
20.4.2 步骤二：配置路由 241
20.4.3 步骤三：创建控制器类 241
20.4.4 步骤四：实现记账页面功能 242
20.4.5 步骤五：创建模型类 243
20.4.6 步骤六：显示记账列表 243
20.4.7 步骤七：添加账单 245
20.4.8 步骤八：修改和删除账单 245
第21章 ThinkPHP框架：图书App 247
21.1 实验目标 247
21.2 实验任务 247
21.3 设计思路 248
21.4 实验实施（跟我做） 250
21.4.1 步骤一：创建ThinkPHP
项目 250
21.4.2 步骤二：配置路由和控制器 250
21.4.3 步骤三：安装模板引擎和
设计静态页面 252
21.4.4 步骤四：配置数据库和创建
模型 261
21.4.5 步骤五：在index.html文件
中发送AJAX请求 262
21.4.6 步骤六：在info.html文件中
接收参数并发送AJAX请求 263
第22章 ThinkPHP框架：数据统计
系统 264
22.1 实验目标 264
22.2 实验任务 265
22.3 设计思路 265
22.4 实验实施（跟我做） 267
22.4.1 步骤一：创建ThinkPHP
项目