网站建设与管理技术实验指导div+css.doc

网站建设与管理技术实验指导以企业网站为教学项目广西职业技术学院计算机技术系林为超 编著2013年2月 课程说明3系统整体设计 (2节课)41.1 需求分析51.2 功能模块设计51.3 概念结构设计61.4 数据库设计7实验一 创建网站数据库和表 （2节课）91.1 实验前准备工作：91.2 附加数据库101.3 创建SQL Server登录10实验二 客户端技术练习 （2节课）132.1 新建网站132.2 基本标记132.3 表格的创建14实验三 .NET及C#语法练习 （2节课）153.1 在页面上显示输入数153.2 计算学生总人数17实验四 使用ADO.NET连接数据库 （6节课）184.1 使用数据源控件访问数据库194.2 使用 ADO.NET对象访问数据库244.3 使用 类的方法访问数据库25项目实战29实验五 创建企业网站 (2节课)295.1 创建企业网站295.2 建立样式表30实验六 创建数据访问层 (2节课)30实验七 创建前台主页页 （4节课）327.1 建立网站地图327.2 head.ascx用户控件337.3 footer.ascx用户控件357.4 前台母版页357.5 创建前台主页面37实验八 创建新闻页面 （4节课）388.1 新闻列表页面388.2 新闻内容页面42实验九 创建产品页面 （4节课）459.1 产品列表页面459.2 产品内容页面49实验十 修改主页面 （2节课）53实验十一 创建用户登录控件 （2节课）55实验十二 创建用户注册页面 (2节课)56实验十三 创建订单页面 （4节课）5913.1 产品订单页面5913.2 查看订单页面61实验十四 创建简介与联系页面 （1节课）6414.1 公司简介页面6414.2 联系我们页面65实验十五 创建修改密码页面 （2节课）66实验十六 创建后台主页面 （2节课）6816.1 admin_head.ascx用户控件6816.2 admin_footer.ascx用户控件6916.3 后台母版页7016.4 创建后台主页面71实验十七 创建管理员登录页面 （2节课）72实验十八 创建新闻维护页面 （4节课）7318.1 添加新闻页面7318.2 新闻维护页面75实验十九 创建订单维护页面 （2节课）80实验二十 创建进货单页面 （4节课）8420.1 进货单录入页面8420.2 进货单查询页面86实验二十一 库存查询页面 （2节课）88实验二十二 创建基础维护页面 （4节课）9022.1 添加产品页面9022.2 产品维护页面9222.3 新闻类别维护页面9722.4 产品类别维护页面101实验二十三 创建用户维护页面 （1节课）102实验二十四 用网站管理工具配置安全（2节课）10724.1 安全配置10724.2 修改管理员登录页面110实验二十五 网站发布与维护 （2节课）11125.1远程发布与管理11125.2 服务器管理与维护111在 Web.config 文件中配置多个站点地图117课程说明本课程（网站建设与管理技术）是一门专业必修课，共72个学时，其中66学时为实验学时，6学时为课外学时。下面将本课程的教学方法和考试方式跟大家说明一下：1、教材与实验指导书教材：中小企业网站建设与管理(动态篇)实验指导书: 实验指导书课程内容关于网站建设，本课程以一个完整的实例网站设计为例，围绕一个网站设计者所需要掌握的基本技术展开介绍，主要内容包括：Visual Studio 2008集成开发环境、网页布局和设计、数据绑定控件在数据库中的应用、ADO.NET访问数据库、网站的各个功能的实现。关于网站管理，本书主要讨论了远程发布与管理，服务器管理与维护。2、课程教学方法与传统的教学方法不同，本课程使用的是项目教学法，什么叫项目教学法？所谓“项目教学法”，就是以一个完整项目的开发流程为主线，贯穿始终，在教学过程中将本课程及相关课程中的知识点(数据库技术：SQL语句；客户端技术；服务端技术：C#程序设计语言、ASP.NET 、ADO.NET)融入到项目中去，将教学内容模块化，以项目模块为教学单元，打破课程间的原有界限，学生以完成项目为主要目的，教师以学生完成项目的质量来评定学生的学习效果。这种项目教学法也称作“以工作过程为向导的教学方法”。通过这种教学方法，学生不仅学到相应的知识和技能，而且了解一个项目完整的开发流程，从而培养一定的项目开发能力。通过本课程的学习，培养学生的自学能力及提出问题、分析问题和解决问题的能力；培养学生团队合作开发Web应用程序的能力。使学生掌握基于ASP.NET 3.5的Web应用程序开发所需要的知识、技能和素质要求。掌握利用ASP.NET 3.5与SQL Server 2008建立动态网站的技术，达到能独立或合作完成中小型网站的建设与开发目的，为学生在未来网络化信息化社会里更好地从事Web应用程序开发与管理打下良好的基础。3、课程的考核方式 本课程采用软件设计，上交作品的考核方式，不考理论知识。课程的考试成绩由平时成绩和实训成绩组成 ,其中平时成绩占(20%) 、实训成绩占(80%)。 4、考核内容：用SQL Server 2008 为后台数据库，用ASP.NET3.5（C#语言）为前台开发工具，用ADO.NET为数据库访问技术，开发一个通用的中小型企业网站。要求完成网站前台和后台的设计，并且采用三层结构体系。系统整体设计 (2节课)根据软件设计的要求，在开发一个项目之前，首先要进行调查研究，弄清楚用户的需求，在此基础上，作出功能模块设计、概念结构设计和数据库设计。1.1 需求分析通过对中小企业的调查分析，开发小组认为，中小企业网站主要的栏目和功能应包括：企业简介，让用户了解企业文化、理念、历史和规模；联系方式，让用户可以及时与企业沟通；企业新闻，让用户了解企业最新活动、发展动态和优惠措施等；产品和服务，介绍产品的图片、规格、型号、单价、功能等信息，介绍企业所提供的各项服务；同时提供网站后台管理功能。本企业网站系统主要包括企业新闻展示、商品展示以及购买功能、公司简介、联系我们、用户管理以及管理员对网站的管理功能。1.2 功能模块设计 1、网站前台功能模块网站前台功能模块包括以下内容：用户登录、用户注册、新闻动态、产品信息、查看订单、修改注册信息、联系我们。2、网站后台功能模块新闻管理、产品管理、订单管理、基础维护、用户管理。企业网站系统后台管理企业简介新闻动态产品信息查看订单修改密码新闻管理产品管理订单管理基础维护用户管理联系我们1.3 数据库设计根据以上的分析，针对系统将要实现的业务功能，数据库中应该具有以下存储信息：新闻信息：新闻编号、新闻标题、新闻内容、新闻类别编号、添加时间、阅读次数。新闻类别：新闻类别编号、新闻类别。产品：产品编号、产品名称、产品单价、进货数量、产品图片、产品类别编号、产品介绍、销售数量、库存数量。产品类别：产品类别编号、产品类别。订单：订单编号、产品编号、产品名称、产品单价、订购数量、用户名、订购日期、处理标志。进货单：进货单编号、产品编号、进货数量、进货日期。用户：用户编号、用户名、密码、真实姓名、电话、邮编、地址、身份标志。下图是系统实体的图。新闻新闻类别产品产品类别用户订单所属所属订购NN111NN1.4 数据库设计数据库名： qywz根据以上图，得出系统应建如下6个表1、新闻类别表列名数据类型是否为空默认值说明新闻类别编号intNOTNULL主键(自增)新闻类别varchar(10)NOTNULL2、新闻表列名 数据类型 是否为空 默认值 说明新闻编号intNOTNULL主键(自增)新闻标题varchar(50)NOTNULL新闻内容text新闻类别编号intNOTNULL外键添加时间datetime阅读次数int03、产品类别表列名 数据类型 是否为空 默认值 说明产品类别编号 int NOT NULL 主键(自增)产品类别 varchar(10) NOT NULL4、产品表列名 数据类型 是否为空 默认值 说明产品编号 int NOT NULL 主键(自增)产品名称 varchar(30) NOT NULL产品单价 decimal(9,2) NOT NULL进货数量 int NOT NULL产品图片 varchar(16) 产品类别编号 int NOT NULL 外键产品介绍 text 销售数量 int库存数量 int5、订单表列名 数据类型 是否为空 默认值 说明订单编号 int NOT NULL 主键(自增)产品编号 int NOT NULL产品名称 varchar(30) NOT NULL产品单价 decimal(9,2) NOT NULL订购数量 int用户名 varchar(20)订购日期 datetime处理标志 bit 6、进货单表列名 数据类型 是否为空 默认值 说明进货单编号 int NOT NULL 主键(自增)产品编号 int NOT NULL 外键进货数量 int NOT NULL 0进货日期 datetime NOT NULL7、用户表列名 数据类型 是否为空 默认值 说明用户编号 int NOT NULL 主键(自增)用户名 varchar(20) NOT NULL密码 varchar(10) NOT NULL真实姓名 varchar(20)电话 varchar(20)邮编 varchar(10)地址 varchar(50)身份标志 char(1) NOT NULL 0实验一 创建网站数据库和表 （2节课） 1.1 实验前准备工作：在F盘上创建如下目录：F:企业网站课堂练习F:企业网站qywz网站数据库是作为素材提供给学生的，这里的创建网站数据库即附加网站数据库。1.2 附加数据库1、把“网站建设与管理技术学生资料”目录下的两个数据库文件qywz.mdf和qywz_log.ldf拷贝到F:企业网站目录下。2、启动SQL Server Management Studio，以“windows身份验证” 连接到服务器，然后右击“数据库”文件夹附加数据库。1.3 创建SQL Server登录1、创建SQL Server登录展开“安全性”文件夹，选择“登录名”节点，单击鼠标右键，选择“新建登录名”，此时弹出“登录名新建”对话框，输入登录名qywz和密码1234，如下图所示。2、给登录账户赋权限选择“服务器角色”选项卡，在“服务器角色”列表框中选择sysadmin复选框。3、 单击“确定”按钮完成新建SQL Server登录的操作。4、 设置SQL Server服务器的属性。右击SQL Server服务器，在弹出菜单中点击属性，出现如下对话框，设置如下:设置完后，按“确定”按钮。6、重新启动SQL Server服务器。实验二 客户端技术练习 （2节课）2.1 新建网站启动 Visual Studio 2008，选择“文件”|“新建”|“网站” 命令，打开“新建网站”对话框。在“位置”下拉列表框中选择 “文件系统”选项，在“语言”下拉列表框中选择“Visual C#”语言, 单击“浏览”按钮，选择网站路径为“F:企业网站课堂练习”。单击确定按钮，生成新网站。2.2 基本标记1) 往网站添加了一个HTML页。右击“F:企业网站课堂练习”，选择 添加新项 菜单命令，选择“HTML页”， 采用默认名称“HTMLPage.htm”，单击添加按纽，便添加了一个HTML页。打开“源” 视图，编写HTML文档。代码如下：基本标记标题标记分段标记换行标记对中标记块标志超链接运行效果图如下：2.3 表格的创建使用THML语言，创建1个列车时刻表，如图所示。 1次特快列车时刻表站名到站时刻开车时刻北京西-16.0石家庄18.569.08郑州0.010.14武昌6.426.54岳阳9.299.35长沙11.20-一张表格由行(row)、列(column)、两部分组成。创建表格实际上就是创建表格的行和列。用HTML语言创建表格的方法如下：创建表格的语句：创建表格的标题：创建行的语句：创建栏名的语句：创建单元格的语句：步骤：往” F:企业网站课堂练习”网站添加了一个HTML页。代码如下：1次特快列车时刻表 站名到站时刻开车时刻北京西 - 16.0石家庄18.569.08郑州0.010.14武昌6.426.54岳阳9.299.35长沙11.20-调试运行实验三 .NET及C#语法练习 （2节课）3.1 在页面上显示输入数v 需求描述n 在页面上输入人数，单击页面上的按钮，页面上显示“共有x几个在等待” 实现思路 分析需要使用哪些控件 怎样从页面上获取用户的输入数字 怎样在页面显示用户的输入数字实验步骤右击“F:企业网站课堂练习”，添加一个web窗体，采用默认名称，往新页面拖入TextBox 、 Button 、Label控件，如上图所示。双击Button 控件，编写后台代码protected void Button1_Click(object sender, EventArgs e) string strNum = TextBox1.Text; /声明变量strNum并把TextBox1的Text属性赋值给strNum string strMessage = 共有 + strNum + 个人在等待; /字符串的拼接 Label1.Text = strMessage; /将strMessage赋值给Label1的Text属性 调试运行3.2 计算学生总人数 需求描述 在页面上提供几个输入区，让用户能输入各个班级的人数，然后提交页面数据并进行计算，最后把结果显示出来 实现思路 第一步分析需要使用哪些控件 第二步分析如何获取输入值 第三步分析计算表达式 第四步分析如何将运算结果显示出来实验步骤右击“F:企业网站课堂练习”，添加一个web窗体，采用默认名称，往新页面添加1个7行2列的表格，将第1、第6、第7行合并单元格，拖入4个TextBox 、 1个Button 和1个Label控件，布局如下图所示。 将4个TextBox控件分别命名为txta、txtb、txtc、txtd双击Button 控件，编写后台代码protected void Button1_Click(object sender, EventArgs e) int numa = Convert.ToInt32(txta.Text);/声明第一个变量并赋值 int numb = Convert.ToInt32(txtb.Text);/声明第二个变量并赋值 int numc = Convert.ToInt32(txtc.Text);/声明第三个变量并赋值 int numd = Convert.ToInt32(txtd.Text);/声明第四个变量并赋值 int total = numa + numb + numc + numd;/计算和 string strMess = 学校共有： + total.ToString() + 个学生;/拼接字符串 Label1.Text = strMess;/将字符串赋值给Label的Text属性 调试运行实验四 使用ADO.NET连接数据库 （6节课）案例1 在 qywz数据库中，有一个名为“产品表” 的表。编写一个程序用来从该表中读取所有产品的数据，并显示出来。(用3种方法访问数据库)访问数据库要经过4个步骤：1、 连接数据库数据访问的第一步是与访问的数据库进行连接。配置数据库连接字符串，指明服务器名、数据库名、用户名、密码。SqlConnection conn=new SqlConnection(server=CHINA-43AF44818;uid=qywz;pwd=1234;database=qywz);2、检索数据库建立数据库连接以后需要操作数据库String strSQL = select * from 产品表;3、填充数据SqlDataAdapter da = new SqlDataAdapter(strSQL, conn);DataTable dt = new DataTable();da.Fill(dt);4、绑定数据GridView1.DataSource= dt; /指定GridView数据源GridView1.DataBind();实验步骤4.1 使用数据源控件访问数据库1）、在解决方案资源管理器中，右击“F:企业网站课堂练习，在弹出的快捷菜单中选择 添加新项 菜单命令，弹出添加新项对话框：在 模板T栏中选择“Web窗体”，并将名称N文本框中的名称改为lx1.aspx ，然后单击添加按纽，便添加一个新窗体。2) 向页面加入一个GridView控件，点击GridView右上角箭头，进入GridView任务栏，自动套用一种格式。如图所示。3) 添加SqlDataSource控件，点击SqlDataSource1右上角箭头 -配置数据源。 配置SqlDataSource控件 配置连接字符串 配置Select语句点击“新建连接”按扭，进入“添加连接”对话框：设计好以上选项后，单击测试连接 按钮，如果设置正确，可以看到连接成功的对话框。单击确定 按钮，进入”配置 select语句”对话框。选择“用户表”，单击下一步按钮，进入“测试查询”对话框，点击“测试查询”按扭，如下图所示。点击“完成”按扭，即完成数据源的配置。4) 绑定数据源。点击GridView右上角箭头，进入GridView任务栏，点击选择数据源- SqlDataSource1.运行网页，得出如下效果图。4.2 使用 ADO.NET对象访问数据库1）右击“F:企业网站课堂练习”，向网站添加一个lx2.aspx页面，向页面加入一个GridView控件, 点击GridView右上角箭头，自动套用一种格式。如图所示。2）、编写事件引用命名空间using System.Data.SqlClient;定义变量SqlConnection conn = new SqlConnection(server= CHINA-9DB4497B8SQLEXPRESS; uid=qywz;pwd=1234;database=qywz); SqlDataAdapter da; string strSQL = ; DataTable dt = new DataTable();编写事件 protected void Page_Load(object sender, EventArgs e) strSQL = select * from 产品表; da = new SqlDataAdapter(this.strSQL, this.conn); da.Fill(this.dt); GridView1.DataSource = this.dt; /指定GridView数据源 GridView1.DataBind(); 3) 运行网页，得出如下效果图。4.3 使用 类的方法访问数据库1) 添加类class1.cs在解决方案资源管理器中，右击“F:企业网站课堂练习”，在弹出的快捷菜单中选择 添加新项 命令打开“添加新项”对话框。在 模板T栏中选择“类”项，采用默认名称“Class1.cs”，单击添加按纽，便添加了一个类。修改Class1.cs文件，代码如下：using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;/ / Class1 的摘要说明/ public class Class1 SqlConnection conn = new SqlConnection(server=CHINA-9DB4497B8SQLEXPRESS; uid=qywz;pwd=1234;database=qywz); SqlDataAdapter da; public Class1() / / TODO: 在此处添加构造函数逻辑 / /执行select语句并返回一个表 public DataTable getdt(string sql) da = new SqlDataAdapter(sql, conn); DataTable dt = new DataTable();/定义数据表对象,用于存放select语句查询结果 da.Fill(dt);/将查询结果填充数据表对象 return dt; 将Class1.cs文件保存在共享目录App_Code下。2）右击“F:企业网站课堂练习”，向网站添加一个lx3.aspx页面，向页面加入一个GridView控件, 点击GridView右上角箭头，自动套用一种格式。如图所示。3）、编写事件定义变量string strSQL = ; Class1 link = new Class1(); DataTable dt = new DataTable();编写事件 protected void Page_Load(object sender, EventArgs e) strSQL = select * from 产品表; dt=link.getdt(strSQL); GridView1.DataSource = dt; GridView1.DataBind();4) 运行网页，得出如下效果图。项目实战 实验五 创建企业网站 (2节课)5.1 创建企业网站1）、启动 Visual Studio 2008，选择“文件”|“新建”|“网站” 命令，打开“新建网站”对话框。在“位置”下拉列表框中，选择 “文件系统”选项，在“语言” 下拉列表框中选择“Visual C#”语言, 单击“浏览”按钮，弹出“选择位置”对话框，在其中选择网站的路径，选择F:企业网站qywz，如下图所示：单击确定按钮，即可生成一个新的网站。5.2 建立样式表把“网站建设与管理技术学生资料”目录下的image文件夹以及ytdh.css文件拷贝到F:企业网站qywz 目录下。实验六 创建数据访问层 (2节课)创建DBHelper.cs文件，方法同上，代码如下：using System;using System.Collections.Generic;using System.Text;using System.Data;using System.Data.SqlClient;using System.Configuration;using System.Web;using System.Web.UI;using System.Web.UI.WebControls; public static class DBHelper private static SqlConnection conn = new SqlConnection(server=CHINA-9DB4497B8SQLEXPRESS; uid=qywz;pwd=1234;database=qywz); private static SqlDataAdapter da; private static SqlCommand cmd; /执行select语句并返回一个表 public static DataTable getdt(string safeSql) da = new SqlDataAdapter(safeSql, conn); DataTable dt = new DataTable(); da.Fill(dt); conn.Close(); return dt; / 执行insert delete update 语句,不返回结果 public static void ExecuteCommand(string safeSql) conn.Open(); cmd = new SqlCommand(safeSql, conn); cmd.ExecuteNonQuery(); conn.Close(); /装载数据到下拉列表框 public static void loadddl(string field_name1, string field_name2, string table_name, DropDownList DropDownList_name) string strSQL = select + field_name1 + , + field_name2 + from + table_name; da = new SqlDataAdapter(strSQL, conn); DataTable dt = new DataTable(); da.Fill(dt); DropDownList_name.DataSource = dt; DropDownList_name.DataValueField = field_name1; DropDownList_name.DataTextField = field_name2; DropDownList_name.DataBind(); 实验七 创建前台主页页 （4节课）7.1 建立网站地图代码如下： 7.2 head.ascx用户控件 1）、打开网站，在解决方案资源管理器中，右击网站，在弹出的快捷菜单中选择 添加新项 菜单命令，弹出添加新项对话框：在 模板T栏中选择“Web用户控件”，名称改为“Head.ascx”，单击添加按纽，便添加一个Web用户控件。2)、向Web用户控件加入1个层，在层中插入一幅图，【源】代码如下： 3）添加一个站点地图数据源SiteMapDataSource1，设置ShowStartingNode属性为False。4)、再加入一个层，在层中加入一个Menu控件，设置Menu的DataSourceID属性为SiteMapDataSource1，Orientation属性为Horizontal。5)、附加样式表 点击样式附加样式表源代码如下： 如图所示：7.3 footer.ascx用户控件 1)、向网站添加一个footer.ascx用户控件，向Web用户控件插入一个层，在层里加入1行文字，源代码如下： Copyright© 2011 版权所有：广西职业技术学院 计算机与电子工程系效果图如下：7.4 前台母版页 1）、打开网站，右击网站，在弹出的快捷菜单中选择 添加新项 菜单命令，弹出添加新项对话框：在 模板T栏中选择“母版页”，采用默认名称，单击添加按纽，便添加一个模板页。2)、剪切模板页中的ContentPlaceHolder1控件，向模板页插入一个1行1列的表格(表格1)，其边框属性为0，align属性为center。单元格属性设置为：align=center valign=top3)、向表格1插入一个2行1列的表格(表格2),向表格2第1行拖入head.ascx；在表格2的下面粘贴ContentPlaceHolder1控件；在表格1的下面拖入footer.ascx用户控件，如图所示。7.5 创建前台主页面 1）、向网站添加一个Default.aspx页面，选择母版页MasterPage.master，布局如图所示。实验八 创建新闻页面 （4节课）8.1 新闻列表页面设计步骤：1、设计newlist.aspx页面。2、在首页打开newlist.aspx页面，同时将参数传给newlist.aspx页面。3、newlist.aspx页面接收首页传来的参数，作为查询条件值。4、编写SQL语句，查询新闻表中新闻类别编号匹配此参数的记录。5、调用类的方法执行SQL语句，并接收执行的结果。6、绑定数据。调试运行，输出结果1、向网站添加一个newlist.aspx页面，选择母版页MasterPage.master，在空白处插入1个2行1列的表格，设置其align属性为center，边框属性为1。2）第1行样式设置为： ：新闻2）往第2行加入一个GridView控件，设置其属性Font-Size=Small GridLines=None ShowHeader=False点击其右上角箭头，进入GridView任务栏，点击”编辑列”,此时进入“字段”对话框，在可用字段列表框中