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

第1章概述

（1）掌握HBuilder+XAMPP工具的安装和使用。（2）掌握Bootstrap栅格系统、基本样式、组件、插件的使用方法，能开发响应式页面。（3）掌握PHP程序设计，能使用PHP制作动态网页。掌握PHP的基本语法、控制语句、数组、函数、面向对象编程、Session和Cookie编程等。（4）掌握Laravel框架构建动态网站，熟悉MVC架构，掌握路由、控制器、模型等。（5）掌握MySQL数据库的基本操作，能使用PHP进行MySQL数据库编程。（6）理解XML和JSON数据格式，掌握使用AJAX技术实现异步刷新、异步获取数据的方法。（7）遵循企业标准开发过程，培养良好的工程能力，能进行企业动态网站开发，提高动态网站开发实践能力。1.1实践目标

1.2技术专题设计编号类型专题名称1开发环境HBuilder+XAMPP2BootStrap框架响应式网站首页3PHP编程基础折扣计算、日期计算（程序结构）、学生成绩排序（数组）、简单计算器(函数)4PHP类和对象工资计算(类和对象）、面积计算（继承）、商品信息管理（接口）5PHPWeb应用开发用户登录6PHP数据库编程学生信息查询、学生信息新增/删除、学生信息修改7Laravel框架创建Laravel工程、在线答题系统8Web前后端交互书籍目录页面（AJAX）

1.3案例设计项目选取“在线音乐平台”，为PHP动态网站程序，采用HBuilder和XAMPP工具开发，技术选型为“Bootstrap+PHP+PHPWeb+mysqli数据库编程+Laravel框架+MySQL”。案例按企业标准进行建设，结合瀑布模型、RUP模型、增量开发思想，内容包括项目目标、需求分析、系统设计、每个功能迭代开发，在迭代开发过程中，按功能、技能和知识进行组织。整个项目分为5大阶段，分别为Bootstrap编程、PHPWeb基础、PHP+MySQL数据库、PHP三层结构、Laravel框架。

第2章开发环境HBuilder+XAMPP

2.1技能和知识点

1、搭建Web开发环境，并掌握相关软件的使用。（1）下载安装GoogleChrome浏览器。（2）下载安装HBuilder，网页及PHP脚本文件编辑工具。（3）服务器端集成环境安装，下载安装XAMPP，配置并启动Apache和MySQL。2、测试开发环境。（1）创建Web项目“test”，编写index.php文件。（2）启动Apache服务器，使用浏览器访问index.php页面，在页面中显示“HelloWorld！”字符串。2.2需求简介

2.3设计思路

（1）下载安装Chrome（2）下载安装HBuilder（3）下载安装XAMPP（4）配置MySQL2.4实现

（5）创建Web项目并运2.4实现

（5）创建Web项目并运2.4实现!DOCTYPEhtmlhtmlheadmetachars=utf-8/title/title/headbody?phpechoHelloWorld！;?/body/html

（5）创建Web项目并运2.4实现

（6）Apache配置虚拟域名在XAMPP控制面板中点击“Explorer”按钮，进入XAMPP根目录打开\xampp\apache\conf\httpd.conf文件找到“Listen80”行，在其下面新增监听端口（如：8080）配置虚拟域名2.4实现VirtualHost*:8080DocumentRootD:/MusicProjectServerNamelocalhostDirectoryD:/MusicProjectOptionsIndexesFollowSymLinksMultiViewsAllowOverrideallRequireallgranted/Directory/VirtualHost

（6）Apache配置虚拟域名重启Apache服务器，点击“stop”按钮后再点击“start”按钮创建Web项目2.4实现

（6）Apache配置虚拟域名在“项目管理器”中删除css、img、js文件夹，修改index.html文件名为index.php在body/body标签之间添加一段php代码打开Chrome浏览器，输入http://localhost:8080/index.php2.4实现!DOCTYPEhtmlhtmlheadmetachars=utf-8/title/title/headbody?p