网站程序设计

网站程序设计
题目名称：一个关于NBA 球员和纪录的简单网站设计
院系名称：中原工学院计算机学院网络工程系
班 级：网络工程082
学 号：200800824219
学生姓名：秦海虹
指导教师：底恒
2011年6
月
网站程序设计-网络082-200800824219-秦海虹
目录
目录 (I)
第1章设计分析和开发环境..................... 错误！未定义书签。

1.1 页面设计分析 (2)
1.2 数据库设计分析 (4)
1.3 开发环境 (6)
第2章设计和调试过程 (8)
2.1 建立工程 (8)
2.2 主页面设计 (8)
2.3 球星页面设计 (9)
2.4 数据页面设计 (11)
2.5 在IIS下建立虚拟目录并通过浏览器访问............. 错误！未定义书签。

第3章心得体会.. (14)
一个关于NBA球星和纪录的简单网站设计
第一章设计分析和开发环境
本学期学习了网站程序设计。

因为平时对NBA比较感兴趣，所以决定设计一个简单的关于NBA球星和纪录的简单网站。

1.1 页面设计分析
基本目标：
●设计3个页面：主页面（MyHomePage），球星页面（Star），数据页面（Data）。

其中主页面是登录的默认页面，可转到球星和数据页面；球星页面显示球星的资料
信息，数据页面显示相关的数据信息。

●主页面：作为默认登录页面。

通过HyperLink 控件可转到球星页面和数据页面。

●球星页面：加载该页面是通过Page_Load（）方法动态地将球星基本信息绑定到
DropDownList控件。

通过DropDownList控件的SelectedIndexChanged（）事件动态地把球星的具体信息和GridView控件绑定在一起。

●数据页面：加载该页面是通过Page_Load（）方法动态地将数据纪录基本信息绑定
到DropDownList控件。

通过DropDownList控件的SelectedIndexChanged（）事件动态地把数据纪录的具体信息和GridView控件绑定在一起。

完成后的效果图如下：
网站程序设计-网络082-200800824219-秦海虹
图 1 主页面完成效果
图 2 球星页面完成效果
一个关于NBA球星和纪录的简单网站设计
图 3 数据页面完成效果
1.2 数据库设计分析
基本目标：
●总目标：通过SQL SERVER 2008 一个名为NBA的数据库；该数据库中有两个数据表：
star表和record表。

●Star 表：该表记录球星的相关信息。

共有如下数据项：id、name、birthday、height、
weights、club、skills、awards，其中id作为该表主键，其余各项分别记录该球星的姓
名、生日、身高、体重，所在球队、技术评价和所获奖项。

●Record 表：该表记录相关纪录数据信息。

共有如下表项：id、recordname、createby、
createtime、descprition。

其中id作为该表主键，其余各项分别记录该NBA纪录的名称、创造者、创造时间和详细信息。

数据库设计好之后的效果图如下：
网站程序设计-网络082-200800824219-秦海虹
图 4 设计好的NBA数据库和star表、record表
一个关于NBA球星和纪录的简单网站设计
图 5 star 表
图 6 record 表
1.3 开发环境
操作系统：Windows 7。

网站程序设计-网络082-200800824219-秦海虹
●编程平台：Microsoft Visual Studio 2008（.Net FrameWork 3.5）。

●数据库平台：SQL SERVER 2008 Express Edition。

●IIS：IIS 7.5。

一个关于NBA球星和纪录的简单网站设计
第二章设计和调试过程
2.1 建立工程
打开Microsoft Visual Studion 2008 ，建立新网站，如下图：
图7 Microsoft Visual Studion 2008 图标
图8 建立名为E:\MyWebSite_WangLuo082_200800824219_QinHaihong的新网站
2.2 主页面设计
首先在web.config 中添加connectionStrings 字段，方便进行数据库的连接：
<add name ="ConnectionString" connectionString ="data source=(local);database = NBA;integrated security=true" providerName ="System.Data.SqlClient"/>
在解决方案管理器中添加Web 窗体，并命名为MyHomePage。

在页面中添加Label、Image、HyperLink控件，并设置控件的相关属性和内容，完成后的效果图如下：
图9 MyHomePage 主页面设计
很简单，主页面设计完毕！
2.3 球星页面设计
在解决方案管理器中添加Web 窗体，并命名为Star。

在页面中添加Label、Image、HyperLink、DropDownList、GridView控件，并设置相关属性和内容。

在页面的Page_Load（）方法中，进行数据库连接和控件的初始化工作，相关代码如下：
protected string strConn = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//读取web.config 中的连接字符串
protected config conf = new config(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);//引用老师提供的config类库，并进行初始化工作
protected string strSearch;//查询字符串
protected void Page_Load(object sender, EventArgs e)//页面初始化过程，进行数据库连接和数据绑定
{
if (!IsPostBack)
{
strSearch = "select * from star";
conf.BindDropDownList("id", "name", strSearch, DropDownList2);//把star表中的
数据绑定到dropdownlist控件
strSearch = "select name as '姓名',birthday as '出生年月',height as '身高',weights as '体重',club as '俱乐部',skills as '技术特点',awards as '所获奖项' from star where id = " + DropDownList2.SelectedValue;
conf.BindGridView(strSearch, GridView1);//把record表中的数据绑定到gridview 控件
}
}
响应DropDownList的SelectedIndexChanged（）方法，添加如下代码：
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
strSearch = "select name as '姓名',birthday as '出生年月',height as '身高',weights as '体重',club as '俱乐部',skills as '技术特点',awards as '所获奖项' from star where id = " + DropDownList2.SelectedValue;
conf.BindGridView(strSearch, GridView1);
}
完成后的球星页面效果如下图所示：
图10 完成后的球星页面
球星页面设计完毕！
2.4 数据页面设计
数据页面设计基本与球星页面设计相同，不再赘述。

完成后的数据页面效果如下图所示：
图11 完成后的数据页面效果图
2.5 在IIS下建立虚拟目录并通过浏览器访问
打开IIS 7.5，建立名为MyNBA的虚拟目录，如下图所示：
图12 在IIS 建立虚拟目录
建立好虚拟目录后，修改物理文件的IIS访问权限，在浏览器中输入：
http://183.170.137.109/MyNBA/MyHomePage.aspx（183.170.137.109是我的IP地址），可以看到主页面：
图13 在浏览器中通过本机IP访问MyHomePage页面
基本可以访问，但因为图片的相对路径问题，导致图片不可显示。

修改相对路径后即可正常访问。

第三章心得体会
在本学期的网站程序设计学习中，我对ASP. NET有了初步的认识，加深了对网站运行机制的理解，提高了自己的编程知识。

在此次网站程序设计的过程中，增强了自己的动手实践能力，针对出现的相关问题，能独立解决完成，感到收获很大。

同时也发现自己对某些细节理解不到位，仍需要不断学习和实践。

最后，要感谢底恒老师精彩而富有感染力的授课，使我受益匪浅；感谢老师提供的config.cs文件（我对它进行了修改并编译成了dll库），确实很好用。

谢谢！。