,.
实 验 报 告
实验课程： WEB编程设计
学生姓名：
学 号：
专业班级：
2015年 6月
目录
实验一 Web编程环境 2
实验二 HTML和CSS编程技术 10
实验三 JavaScript编程技术 14
实验四 Servlet编程技术 18
实验五 JSP编程技术 24
实验六 JavaBean编程技术 29
实验七 JDBC数据库编程技术 35
实验八 基于MVC模式的新闻发布平台 41
南昌大学实验报告
学生姓名： xxx 学 号： xxx 专业班级： xxx
实验类型： □ 验证 □ 综合 ■ 设计 □ 创新 实验日期： 2015-4-29 实验成绩：
一、 实验项目
Web编程环境
二、 实验目的
1. 搭建Web编程环境，能正确安装配置java运行环境、WEB服务器和数据库服务器
2. 熟悉WEB编程集成环境MYEclipse.
3. 熟练掌握WEB工程的创建、发布、运行流程。
三、 实验内容
1. 安装并配置java运行环境JDK和JRE
2. 安装Web服务器tomcat, 配置Tomcat服务器
3. 安装并配置数据库MySQL.
4. 安装MyEclispe，熟悉各项菜单项
5. 为MyEclispe集成配置JDK和Tomcat
6. 创建、发布、运行一个WEB工程。
四、 实验仪器及耗材
计算机，JDK，TOMCAT, MySQL, MyEclipse等软件。
五、 实验步骤
（1） 安装并配置java运行JDK和JRE
1、 下载该软件，运行安装软件，安装目录这里选为D:\Program Files\Java， 其它步骤采用默认值。安装完成，
2、 设置JAVA环境变量，步骤如下：右击“计算机”，选择“属性”菜单，在弹出的“系统属性”对话框中选择“高级系统设置”选项卡，然后单击“环境变量”按钮，弹出“环境变量”对话框框。如图1-2
3、首先，点击“新建”，变量名为JAVA_HOME，变量值为java的安装路径，即“D:\Program Files\Java\ Java\jdk1.5.0_12”。如图1-3所示
4、 其次，在系统变量里面找到path(没有就新建)，然后点编辑，则变量值为直接写上“D:\Program Files\Java\ jdk1.5.0_12\bin”。
5、 最后，再点“新建”，然后在变量名上写classpath,该变量的含义是为java加载类(class或lib)路径，只有类在classpath中，java命令才能识别。其值为“.;%JAVA_HOME%\lib
6、验证是否配置成功
（二）安装Web服务器tomcat, 配置Tomcat服务器
1、下载apache-tomcat 6.0。双击“apache-tomcat-6.0.29.exe”，出现安装向导，单击Next按钮，出现“授权”界面，接受授权协议后，选择“Nomal”安装模式，
2、单击Next按钮，默认安装于D：\Program Files\Apache Sofiware Foundation\Tomcat 6.0，单击Next按钮，默认HTTP服务端口号8080、登录用户名为“admin”、密码为空，然后选择默认Java的JRE安装目录。
3、单击Install按钮，开始Tomcat的安装。安装完成后，在“开始”→“程序”菜单中会出现安装程序创建的Apache Tomcat 7.0 Tomcat7菜单组， 选择“Apache Tomcat 7.0 Tomcat7”菜单中的 Monitor Tomcat命令，在任务栏中会出现Apache Tomcat系统托盘，右击托盘，在弹出的快捷菜单中选择Start Service命令，即可启动Tomcat 7.0服务器。
4、Tomcat正常启动后会在系统栏加载图标。(如果启动失败，请检查端口是否被占用。如果已经有程序在使用8080端口，解决办法是停止正在运行的程序或者更改TOMCAT的使用端口。)
5、打开IE浏览器，在浏览器地址栏中输入“http：//localhost:8080”并回车，显示如图
（三）安装并配置数据库MySQL
1、下载MYSQL 5 5.0.67.zip，然后解压为Setup.exe，双击Setup.exe文件，开始mysql5.0的安装，如图3-1所示
2、默认是Typical，点击Next开始下一步安装。点击Install进行安装，如图3-2所示。
3、安装结束，选择现在开始配置MySql服务器（以后可进行配置修改），点击Finish继续。选择Detailed Configuration，点Next继续。如图33所示
4、全部选择默认设置，直到图3-4所示界面。这一步是设置mysql服务端口号，默认端口号是3306，采用默认值。
5、点击下一步进入的默认字符集设置界面, 如图3-5，原来的标准字符集是Latin1，不支持汉字，更改为默认字符集为utf-8或BGK等能支持汉字的字符集。
6、点击下一步，进入超级用户密码设置界面如图3-6，对mysql拥有全部的权限，，有个复选框是选择是否允许远程机器用root用户连接到你的MySql服务器上面，如果有这个需求，勾选。输入两次密码后（本书程序数据库访问密码为root），点击下一步，完成安装。
（四）安装MyEclispe，熟悉各项菜单项
（五）为MyEclispe集成配置JDK和Tomcat
1、为MyEclipse配置JRE
启动MyEclipse 9.0后，选择主菜单中的【Windows】→【Preferences】（首选项）命令，弹出如图5-1所示的首选项窗口。在左侧树形控件中选择【Java】→【Installed JREs】，在窗口的右侧编辑区选择用户计算机上的JRE安装目录，配置好JDK环境。如右侧编辑区没有列出JRE，则可按Add按钮进行添加，在新对话框中根据提示选择JRE的安装目录即可。
2、为MyEclipse集成Tomcat 7.0
在Eclipse的集成开发环境中选择【Windows】→【Preferces】命令，在左边的菜单按【MyEclipse】→【Servers】→【Tomcat】→【Tomcat7.x】，找到Tomcat 7.x ，设置为“Enable”, 然后选择好Tomcat 的基本路径，如图5-2所示。
（6） 创建、发布、运行一个WEB工程。
1、从MyEclipse菜单【File】→【New】→【Web Project】来新建一个Web Project项目，如图6-1所示。
2、点击“Finish”，如图6-2所示。
3、下面建立一个jsp文件，右击“Webroot”，在快捷菜单选【New】→【JSP】创建一个jsp文件，出现jsp文件对话框，如图6-3所示。
4、在下面的Servers面板中或在上面的工具栏里，单击部署命令按钮，出现工程部署对话框，如图6-4所示。单击“add”按钮，添加一个发布项。
5、选择Tomcat 7.x，点击“完成”可以看出，将工程发布到Tomcat 的安装目录上去了，如图6-5所示。
6、添加完毕，就显示工程的发布信息。如果工程中java文件内容变化了，则需要重新发布，发布前需要将web服务器停止。重新发布单击“redeploy”按钮，如图6-6所示。
7、在上图点击“Browse”可以转到Tomcat文件夹查看发布的工程，如图6-7所示。
8、下面启动Tomcat。从工具栏里的选择向下箭头，选择Tomcat 9启动。或在下面的Servers面板中的选择按钮，选择Tomcat 9启动。 如图6-8所示。
9、在Eclipse的Console窗口中会显示启动信息，成功启动以后，通过浏览器访问刚才创建的jsp文件，地址和结果如图6-9所示，注意区分大小写。
六、 实验结果
新建系统变量
编辑系统变量Path
编辑系统变量ClassPath
环境变量配置成功
选择安装方式
Tomcat的基本配置
启动Tomcat
自动运行设置
Tomcat的欢迎界面
选择安装类型
准备SQL安装
MySql配置向导
设置MySql服务的端口号
,.
设置默认字符集 设置用户名和密码
为MyEclipse配置JRE
为MyEclipse集成Tomcat
新建Web工程
新建Web工程结果图
新建JSP页面对话框
添加发布的工程 选择Web服务器
部署管理界面
发布到Tomcat中的目录结构
启动Tomcat服务器
浏览网页
七、 实验心得
刚开始觉得特别简单就是下载安装而已，结果却是各种出错，连原因都找不到，自己不够细心，好多细节和注意的没留心，也有对这些软件应用的部首系。觉得做什么都应该先虔诚虚心的学习再动手。
8、 参考资料
《 Java WEB编程技术》郭路生编
南昌大学实验报告二
学生姓名： xxx 学 号： xxx 专业班级：xxx
实验类型： □ 验证 □ 综合 ■ 设计 □ 创新 实验日期： 实验成绩：
一、 实验项目 HTML和CSS编程技术
二、 实验目的
1. 熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记
2. 熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型
3. 掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程
4. 熟悉Dreamweaver的CSS设计器
三、 实验内容
1. 构思一个新闻发布网站，主题自选，设计好新闻类别
2. 制作主页PSD图
3. 用DIV+CSS布局主页框架。（如可分成top, mid, foot, 其中mid再分两大块left和main）
4. 分别细化设计每一大块。
5. 要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。
四、 实验仪器及耗材
计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。
五、 实验步骤
1， 1. 选择好自己制作新闻发布网站的主题，及其新闻类别
2， 将构思好的导航条用Photoshop制作好，
3， 在Dreamweaver 8中通过css布局把页面整体框架做好。
4， 在左边框架中设计登录表单，
5， 完善网页各个部分，运行观看效果。
六、 实验结果
网页源代码：
web2
制作效果图：
七、 实验心得
理想的设计比较好，可是能力有限做不出来，css布局是关键和难点，党在更改布局时经常出现页面出界等问题，还要一个比较重要的体会是：不是WEB太难，而是自己做的少，学的太少，如果从基础学起做起，也是会有收获的
南昌大学实验报告
学生姓名： xxx 学 号： xxx 专业班级：xxx
实验类型： □ 验证 □ 综合 ■ 设计 □ 创新 实验日期： 实验成绩：
一、 实验项目 JavaScript编程技术
二、 实验目的
1. 熟悉JavaScript语法
2. 掌握JavaScript函数的创建和调用
3. 熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问方法。
4. 会用JavaScript来对表单进行验证。
三、 实验内容
1. 用JavaScript完成对登录表单的验证
2. 设计一个新闻发布的页面，并用JavaScript对新闻发布表单进行验证。
四、 实验仪器及耗材
计算机，Dreamweaver 8，Photoshop，MyEclipse等软件。
五、 实验步骤
1， 在实验二做好的网页的基础上，在原有表单的基础上进行表单验证的制作。通过用JavaScript来编写实习表单验证，通过引入外部.js文件来进行数据验证。
2， 在完成表单验证之后，通过编写新闻发布的HTML文档，并实现与浏览器的交互，完成新闻发布页面的实现。
六、 实验结果
一．利用onsubmit事件进行表单验证
引用外部的.js文件：
function checkform()
{
if(document.userlogin.username.value==""){
alert ("提示:\n\n请输入用户名！");
document.userlogin.username.focus();
return false;
}
if (document.userlogin.username.value.length<6){
alert ("提示:\n\n用户名6位");
document.userlogin.username.focus();
return false;
}
if (document.userlogin.pwd.value==""){
alert ("提示:\n\n请输入密码！");
document.userlogin.pwd.foucs();
return false;
}
if (document.userlogin.pwd1.value==""){
alert ("提示:\n\n请输入用户名！");
document.userlogin.pwd1.focus();
return false;
}
}
二：新闻发布：
1新闻发布代码：
新闻发布