南昌大学web实验汇总.docx
《南昌大学web实验汇总.docx》由会员分享,可在线阅读,更多相关《南昌大学web实验汇总.docx(63页珍藏版)》请在冰点文库上搜索。
南昌大学web实验汇总
实验报告
实验课程:
WEB编程设计
学生姓名:
学号:
专业班级:
2015年6月
南昌大学实验报告
学生姓名:
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等软件。
五、实验步骤
(一)安装并配置java运行JDK和JRE
1、下载该软件,运行安装软件,安装目录这里选为D:
\ProgramFiles\Java,其它步骤采用默认值。
安装完成,
2、设置JAVA环境变量,步骤如下:
右击“计算机”,选择“属性”菜单,在弹出的“系统属性”对话框中选择“高级系统设置”选项卡,然后单击“环境变量”按钮,弹出“环境变量”对话框框。
如图1-2
3、首先,点击“新建”,变量名为JAVA_HOME,变量值为java的安装路径,即“D:
\ProgramFiles\Java\Java\jdk1.5.0_12”。
如图1-3所示
4、其次,在系统变量里面找到path(没有就新建),然后点编辑,则变量值为直接写上“D:
\ProgramFiles\Java\jdk1.5.0_12\bin”。
5、最后,再点“新建”,然后在变量名上写classpath,该变量的含义是为java加载类(class或lib)路径,只有类在classpath中,java命令才能识别。
其值为“.;%JAVA_HOME%\lib
6、验证是否配置成功
(二)安装Web服务器tomcat,配置Tomcat服务器
1、下载apache-tomcat6.0。
双击“apache-tomcat-6.0.29.exe”,出现安装向导,单击Next按钮,出现“授权”界面,接受授权协议后,选择“Nomal”安装模式,
2、单击Next按钮,默认安装于D:
\ProgramFiles\ApacheSofiwareFoundation\Tomcat6.0,单击Next按钮,默认HTTP服务端口号8080、登录用户名为“admin”、密码为空,然后选择默认Java的JRE安装目录。
3、单击Install按钮,开始Tomcat的安装。
安装完成后,在“开始”→“程序”菜单中会出现安装程序创建的ApacheTomcat7.0Tomcat7菜单组,选择“ApacheTomcat7.0Tomcat7”菜单中的MonitorTomcat命令,在任务栏中会出现ApacheTomcat系统托盘
,右击托盘,在弹出的快捷菜单中选择StartService命令,即可启动Tomcat7.0服务器。
4、Tomcat正常启动后会在系统栏加载图标
。
(如果启动失败,请检查端口是否被占用。
如果已经有程序在使用8080端口,解决办法是停止正在运行的程序或者更改TOMCAT的使用端口。
)
5、打开IE浏览器,在浏览器地址栏中输入“http:
//localhost:
8080”并回车,显示如图
(三)安装并配置数据库MySQL
1、下载MYSQL55.0.67.zip,然后解压为Setup.exe,双击Setup.exe文件,开始mysql5.0的安装,如图3-1所示
2、默认是Typical,点击Next开始下一步安装。
点击Install进行安装,如图3-2所示。
3、安装结束,选择现在开始配置MySql服务器(以后可进行配置修改),点击Finish继续。
选择DetailedConfiguration,点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
启动MyEclipse9.0后,选择主菜单中的【Windows】→【Preferences】(首选项)命令,弹出如图5-1所示的首选项窗口。
在左侧树形控件中选择【Java】→【InstalledJREs】,在窗口的右侧编辑区选择用户计算机上的JRE安装目录,配置好JDK环境。
如右侧编辑区没有列出JRE,则可按Add按钮进行添加,在新对话框中根据提示选择JRE的安装目录即可。
2、为MyEclipse集成Tomcat7.0
在Eclipse的集成开发环境中选择【Windows】→【Preferces】命令,在左边的菜单按【MyEclipse】→【Servers】→【Tomcat】→【Tomcat7.x】,找到Tomcat7.x,设置为“Enable”,然后选择好Tomcat的基本路径,如图5-2所示。
(六)创建、发布、运行一个WEB工程。
1、从MyEclipse菜单【File】→【New】→【WebProject】来新建一个WebProject项目,如图6-1所示。
2、点击“Finish”,如图6-2所示。
3、下面建立一个jsp文件,右击“Webroot”,在快捷菜单选【New】→【JSP】创建一个jsp文件,出现jsp文件对话框,如图6-3所示。
4、在下面的Servers面板中或在上面的工具栏里,单击部署命令按钮
,出现工程部署对话框,如图6-4所示。
单击“add”按钮,添加一个发布项。
5、选择Tomcat7.x,点击“完成”可以看出,将工程发布到Tomcat的安装目录上去了,如图6-5所示。
6、添加完毕,就显示工程的发布信息。
如果工程中java文件内容变化了,则需要重新发布,发布前需要将web服务器停止。
重新发布单击“redeploy”按钮,如图6-6所示。
7、在上图点击“Browse”可以转到Tomcat文件夹查看发布的工程,如图6-7所示。
8、下面启动Tomcat。
从工具栏里的
选择向下箭头,选择Tomcat9启动。
或在下面的Servers面板中的选择
按钮,选择Tomcat9启动。
如图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服务器
浏览网页
七、实验心得
刚开始觉得特别简单就是下载安装而已,结果却是各种出错,连原因都找不到,自己不够细心,好多细节和注意的没留心,也有对这些软件应用的部首系。
觉得做什么都应该先虔诚虚心的学习再动手。
八、参考资料
《JavaWEB编程技术》郭路生编
南昌大学实验报告二
学生姓名:
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美化。
四、实验仪器及耗材
计算机,Dreamweaver8,Photoshop,MyEclipse等软件。
五、实验步骤
1,1.选择好自己制作新闻发布网站的主题,及其新闻类别
2,将构思好的导航条用Photoshop制作好,
3,在Dreamweaver8中通过css布局把页面整体框架做好。
4,在左边框架中设计登录表单,
5,完善网页各个部分,运行观看效果。
六、实验结果
网页源代码:
web2
--
.STYLE2{
color:
#003399;
font-weight:
bold;
}
.STYLE4{color:
#FFFFFF}
-->