网络编程技术实验报告Hale Kwok个人网站的设计与实现.docx

网络编程技术实验报告Hale Kwok个人网站的设计与实现.docx

《网络编程技术实验报告Hale Kwok个人网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《网络编程技术实验报告Hale Kwok个人网站的设计与实现.docx（58页珍藏版）》请在冰豆网上搜索。

网络编程技术实验报告HaleKwok个人网站的设计与实现

网络编程技术实验报告

HaleKwok个人网站的设计与实现

1.需求分析

1.1HaleKwok个人网站的目的和意义

个人网站的制作是为今后开发企业网站打下良好的基础，个人网站虽小，但若实现复杂完善的功能，也不是一朝一夕可以实现的，所以通过实现个人网站还是可以学习开发网站的许多东西，如掌握制作网站的最基本的技术，了解开发网站的基本流程等。

HaleKwok个人网站是我实现的小网站，在开发网站的过程中不但自己得到锻炼，而且还从中获得乐趣。

此网站仅供我本人、朋友以及网站开发爱好者使用，通过此网站可以结识做网站开发的朋友，互相交流，发现个人开发网站的缺点和不足，已达到锻炼自己完善功能的目的。

1.2网站功能分析

1）留言板：

网站刚刚建立，功能简单，一定有不尽人意的地方，所以设有留言板。

但需要登录，设置用户名和密码，才能对在网站上留言提出意见。

2）注册登录：

用于真诚用户给我留言，提出制作网站的宝贵意见。

3）个人档案：

简短显示个人信息

4）我的相册：

缩略图浏览，点击缩略图后大图显示，用于图片欣赏。

5）在线音乐：

点击歌曲名，播放歌曲。

2.HaleKwok个人网站的设计

2.1采用技术

Jsp技术、数据库技术

2.2系统框架及功能模块设计

系统框架设计

功能模块设计：

1）注册登录：

以备留言用。

2）留言板：

message.jsp,messagePane.jsp

只有注册的用户登陆后才能留言，留言存入Access数据库，之后从数据库中读出并显示留言，同时显示用户名和时间。

3）公共模块：

个人简介：

从txt文档中调入个人介绍。

我的相册：

点击相册名，进入相片浏览界面，点击缩略图观看大图。

在线音乐：

点击音乐名链接，欣赏音乐。

2.3数据库设计

表0、数据库表汇总

序号

Table名称

说明

1

user

用户注册信息

2

music

音乐信息

3

message

留言信息

表1.用户注册信息user

字段名称

类型

主键

Null

Default

说明

username

文本

Y

Not

用户名

Sname

文本

用户密码

表2.音乐信息music

字段名称

类型

主键

Null

Default

说明

address

文本

Y

Not

歌曲地址

song

文本

歌曲名

表3.留言信息message

字段名称

类型

主键

Null

Default

说明

address

文本

Y

Not

歌曲地址

song

文本

歌曲名

3.HaleKwok个人网站的实现

3.1开发工具及环境配置

3.1.1开发环境

操作系统：

Windowsxp操作系统

数据库服务器：

MicrosoftOfficeAccess2003

Web服务器：

MyEclipseTomcat

开发工具：

MyEclipse7.0，DreamweaverMX（用于框架设计）

开发工具包：

JDK1.6

浏览器：

搜狗浏览器

背景图裁剪设计：

Photoshop7.0

3.1.2安装及配置

JDK1.6的安装，之后为其配置环境变量；

Tomcat：

由于使用的是MyEclipse7.0，其上集成了Tomcat，可以自动配置；

ODBC驱动：

系统自带，关联到Access数据库。

3.2程序设计

本网站设计共有如下程序：

（.jsp）

模块

说明

登陆注册

在testlogin..jsp，myregister.jsp，registerback..jsp，

index.jsp实现

个人简介

show.jsp，调用txt文档实现

在线音乐

在mymusic.jsp,text1.jsp实现，通过歌曲名文字在数据库中找到歌曲地址，在播放器中播放

我的相册

在myphoto.jsp,centerpicture.jsp,photo1.jsp,photo2.jsp,photo3.jsp,

smallpicture1.jsp,smallpicture2.jsp,smallpicture3.jsp实现，通过点击缩略图查看大图

3.2.1数据库连接模块设计

使用<%@pageimport="java.sql.*"%>，包含了sql语句。

载入驱动程序类别：

Class.forName（"sun.jdbc.odbc.JdbcOdbcDriver"）;

建立数据库链接:

Connectioncon=DriverManager.getConnection（"jdbc:

odbc:

myweb"）;

建立Statement对象:

stmt=con.createStatement（）;

执行SQL语句：

ResultSetrs=stmt.executeQuery（"select*fromlyb"）;

rs.close（）;

stmt.close（）;

con.close（）;

3.2.2主页面（index.jsp）设计

index.jsp代码:

<%@pagelanguage="java"import="java.util.*"pageEncoding="GB18030"%>

<%

Stringpath=request.getContextPath（）;

StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";

%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

">

--

-->

--

functionMM_preloadImages（）{//v3.0

vard=document;if（d.images）{if（!

d.MM_p）d.MM_p=newArray（）;

vari,j=d.MM_p.length,a=MM_preloadImages.arguments;for（i=0;i

if（a[i].indexOf（"#"）!

=0）{d.MM_p[j]=newImage;d.MM_p[j++].src=a[i];}}

}

functionMM_findObj（n,d）{//v4.01

varp,i,x;if（!

d）d=document;if（（p=n.indexOf（"?

"））>0&&parent.frames.length）{

d=parent.frames[n.substring（p+1）].document;n=n.substring（0,p）;}

if（!

（x=d[n]）&&d.all）x=d.all[n];for（i=0;!

x&&i

for（i=0;!

x&&d.layers&&i

if（!

x&&d.getElementById）x=d.getElementById（n）;returnx;

}

functionMM_nbGroup（event,grpName）{//v6.0

vari,img,nbArr,args=MM_nbGroup.arguments;

if（event=="init"&&args.length>2）{

if（（img=MM_findObj（args[2]））!

=null&&!

img.MM_init）{

img.MM_init=true;img.MM_up=args[3];img.MM_dn=img.src;

if（（nbArr=document[grpName]）==null）nbArr=document[grpName]=newArray（）;

nbArr[nbArr.length]=img;

for（i=4;i

=null）{

if（!

img.MM_up）img.MM_up=img.src;

img.src=img.MM_dn=args[i+1];

nbArr[nbArr.length]=img;

}}

}elseif（event=="over"）{

document.MM_nbOver=nbArr=newArray（）;

for（i=1;i

=null）{

if（!

img.MM_up）img.MM_up=img.src;

img.src=（img.MM_dn&&args[i+2]）?

args[i+2]:

（（args[i+1]）?

args[i+1]:

img.MM_up）;

nbArr[nbArr.length]=img;

}

}elseif（event=="out"）{

for（i=0;i

img=document.MM_nbOver[i];img.src=（img.MM_dn）?

img.MM_dn:

img.MM_up;}

}elseif（event=="down"）{

nbArr=document[grpName];

if（nbArr）

for（i=0;i

document[grpName]=nbArr=newArray（）;

for（i=2;i

=null）{

if（!

img.MM_up）img.MM_up=img.src;

img.src=img.MM_dn=（args[i+1]）?

args[i+1]:

img.MM_up;

nbArr[nbArr.length]=img;

}}

}

//-->

functioncheck（）{

if（form1.name.value.length==0）{

alert（"用户名不能为空"）;

returnfalse;

}

if（form1.pass.value.length==0）{

alert（"密码不能为空"）;

returnfalse;

}

}

--页头-->