网页设计与制作项目教程（第四版） 模块10实现与用户交互的动态网页

网页设计与制作项目教程（第四版）模块10实现与用户交互的动态网页教学课件教学目标：学习目标掌握网站服务器配置的基本步骤。学会创建数据库、数据库表及字段设置。掌握Dreamweaver连接数据库的方法。实现动态网页的数据添加与查询交互。重点导读动态网页是现代互联网的核心。本模块将带领学生跨越“纯表现”阶段，进入“数据驱动”的实质开发领域。教学目标：能力与素养能力：独立配置Wampserver运行环境；利用服务器行为实现CRUD交互。素养：培养严谨、细致的工作态度，识别技术资源的信息素养，强化创新意识。职业素质在项目开发中能够与团队成员协作，灵活运用所学知识解决本地服务器与数据库连接的实际问题。任务引领1：本地开发环境架设任务说明：下载并安装Wampserver软件包，配置本地Web服务器环境。通过浏览器输入成功显示自定义网页内容。核心逻辑动态网页需要中间件（PHP）和数据库（MySQL）支持，Wampserver是集成了这些组件的整合包。步骤1：下载与初始安装访问官网：根据系统选择64位或32位版本下载。双击安装程序，点击Next直至安装路径确认。为什么要选整合包？免去手动配置Apache、PHP、MySQL之间繁琐的关联步骤，让初学者专注开发本身。步骤2：浏览器与编辑器关联推荐浏览器及其默认路径Chrome默认路径一般为：

Chrome具有更强的调试功能，更适合动态网页开发。浏览器选择：询问是否使用IE时，建议选“是”并定位到Chrome路径。编辑器选择：询问是否使用记事本时，建议选“否”以保持默认或指向DW。步骤3：运行服务器与三色图标状态诊断绿色代表Apache和MySQL服务均已占领端口并成功运行。如果是棕色，通常是端口80或3306被占用。双击桌面图标启动。观察系统栏图标颜色转换：红(未启动)→棕(部分启动)→绿(成功)。步骤4：在WWW主目录部署网页默认文档逻辑Web服务器会自动识别名为或的文件作为首页，无需手动输入文件名即可访问。定位主目录：。删除该目录下所有默认文件。将制作好的放入其中。浏览器访问：。专家提示：Localhost与物理路径的关系理解虚拟路径映射：在地址栏输入的实际上映射到了本机的物理磁盘路径。易错点：学生常误用“文件双击”打开php文件（协议显示为file:///），这样PHP代码无法被解析，只能显示源码。必须通过localhost协议访问。任务引领2：建立通讯录数据库任务说明：使用PhpMyAdmin管理工具创建数据库，并在其中建立数据表，存储“孙悟空”和“猪八戒”的信息。数据库概念数据库就像一个“电子仓库”，按照数据结构组织数据。本案例使用全球最流行的开源数据库MySQL。步骤1：登录数据库管理后台账户提示root是MySQL的超级管理员账户。在本地开发环境下，默认无密码以简化调试，但在生产环境中必须设置强密码。点击Wamp图标->PhpMyAdmin。默认用户名：。默认密码：留空。点击“执行”登录。步骤2：创建数据库与字符集设定编码关键UTF-8具有极佳的兼容性，能确保中文数据不出现乱码。这是动态网页开发的行业标准。点击左侧“新建”按钮。数据库名填写：。字符集选择：。点击“创建”。步骤3：设计西游通讯录表结构在users库内新建数据表，字段设置如下：字段名数据类型长度特殊设置(AI)逻辑意义idINT-勾选AI主键，唯一自增IDuserVARCHAR10-用户名addressVARCHAR50-联系地址create_timeTIMESTAMP-CURRENT_TIMESTAMP自动记录入库时间专家提示：主键ID与AI属性AI(AUTO_INCREMENT)：设置该属性后，ID字段无需手动输入，系统会自动从1开始递增，确保每条记录都有唯一的“门牌号”。注意：即使某条记录被删除，该ID也不会被回收重复使用，这保证了数据的唯一引用性。任务引领3：网页与数据库联动任务说明：编写。前端表单输入姓名地址，点击“添加”后数据实时写入MySQL数据库，并刷新显示在网页下方。开发要点1.安装DW服务器行为插件。

2.建立PHP站点连接。

3.实现“插入记录”与“重复区域”。准备工作：安装服务器行为组件由于DWCC版后移除了内置行为，需下载插件。访问下载ExtensionManager。安装免费插件：

EnableServerBehaviorsandDataBindings。重启DW，确认“窗口”菜单出现“服务器行为”面板。已安装插件浏览可用插件下载队列步骤1：配置Dreamweaver测试服务器为什么要选“测试”？勾选后，DW会在编辑动态网页时，利用本地服务器环境实时预览PHP脚本运行后的结果，而非原始代码。连接方法：本地/网络。服务器文件夹：指向Wamp的WWW目录。WebURL：。关键设置：勾选“测试”复选框。步骤2：建立MySQL数据库连接故障排查若提示“MySQLmodulenotloaded”，请将Wamp的PHP版本切换至5.6.40系列以获得最佳兼容性。打开“数据库”面板，点击+号。MySQL服务器：。用户名：root/密码：留空。选取：指向之前创建的库。步骤3：实现“点击添加”交互功能后端逻辑此操作本质是自动生成了一条INSERTINTOwest...的SQL语句，将表单内容写入物理磁盘。打开“服务器行为”面板->插入记录。映射字段：后续动作：插入成功后返回本页刷新。表字段↔表单文本框表字段↔表单文本区域步骤4：使用重复区域显示所有用户循环原理重复区域相当于PHP中的while循环。只要数据库里有记录，Div就会自动复制自身并填充新数据。1.“绑定”面板创建记录集。2.拖动字段到对应的Div容器中。3.选中Div区域，在服务器行为选择“重复区域”。4.设置为显示“所有记录”。专家提示：彻底根治中文乱码操作规范：在文件中，插入以下核心代码：这确保了网页、PHP传输、MySQL存储三者均在UTF-8编码下同步，避免出现“口口口”或问号乱码。相关知识：拆解PHP网页代码PHP代码被包裹在特定标签内：混合特性PHP是一种嵌入式脚本。它可以在HTML标签中间随意插入，实现网页内容的动态拼接（如显示登录用户名）。启动解析器。echo：输出指令，将内容发送至客户端。数据库管理：备份与导出SQL恢复流程1.新建空数据库。

2.点击“导入”菜单。

3.选中备份文件执行即可还原所有结构与数据。在PhpMyAdmin选中数据库。点击菜单“导出”->“执行”。获得文件。项目渐近：实现“我心飞扬”实时留言板任务说明：将项目移至WWW主目录，通过Bootstrap表单采集留言，并实时展示访客的所有留言历史。关键步骤重命名guestbook.html为.php。配置guestbook数据库及数据表。在表单下方插入记录集循环。专家提示：HTML升级为PHP的风险注意：当你把后缀改为时，Dreamweaver模板引用可能会失效。操作规范：右键重命名后，务必点击“更新链接”对话框中的“是”，以保持模板与动态页面之间的关联不中断。拓展训练：个人私密日记本登录任务要求：日记栏目属于个人隐私。请制作登录界面，通过服务器行为“登录用户”验证账号密码。验证失败需弹出提示并阻止查看。安全逻辑1.查询数据库users表。

2.匹配表单输入的User和Pass。

3.匹配成功设置Session会话。回味思考：客观题检测(1)1.Wampserver整合包中负责执行SQL语句的组件是？答案：MySQL2.在Wamp主目录下，用于放置网站公开访问文件的文件夹是？答案：www3.MySQL中用于存储大段描述文字的可变长数据类型是？答案：VARCHAR回味思考：客观题检测(2)4.动态网页与静态网页最大的工作原理区别在于？答案：服务器端是否有程序代码的处理过程5.PHP脚本中用于将结果发送到浏览器显示的语句是？答案：echo6.实现“多行显示数据库记录”功能通常使用DW的哪个行为？答案：重复区域(RepeatRegion)回味思考：深度分析Q：分析静态网页与动态网