web程序设计课程报告

MyPetShop商城系统分析报告

1、课程作业概述

1.1课程实习的目的

《WEB开发技术》是一门实用性、综合性较强的课程。学生在学完本门课程后,不仅要了解WEB设计的方法和技术,更重要的是能综合应用所学的数据库、高级编程语言及网页设计的知识,具有实际开发动态网站的能力。本课程设计旨在使学生通过完成一个小型的模拟命题,实现从网站规划、设计和编码的全过程,将理论知识和实践知识相结合,提高学生实际开发网站的动手能力。

1.2课程实习的要求

(1)、分析课程设计题目的要求。

(2)、写出详细设计说明。

(3)、编写程序代码,调试程序使其能正确运行。

(4)、设计完成的软件要便于操作和使用。

(5)、设计完成后提交课程设计报告,课程设计报告内容包括:课程设计目的、设计任务与要求、设计说明书、设计成果和设计心得五个部分,具体要求见设计报告模板。

1.3课程设计任务内容

本课程设计要求学生用asp.net数据库访问技术开发一个动态网站,利用B/S结构,能将客户端的用户请求提交给服务器端的程序处理。服务器端程序能完成数据的插入、删除、更新以及将用户请求的查询数据返回客户端。

Mypetshop网站主要用于网上购物,同时系统还要便于管理员对前台的商品信息等等进行有效管理。

该网站具有以下基本功能:

(1)、在前台进行相关商品浏览。

(2)、用户注册登录,登录后就享有会员的相关权利。

(3)、把喜欢的商品放入购物车,以便继续查看更多喜欢的商品。

(4)、网站上还有对全国各城市天气的预报功能,方便你了解天气。

(5)、能进行相关订单的处理。

(6)、具有后台对前台商品信息进行相关管理的功能。

2、详细设计与实现

2.1宠物店网站流程图

按照电子商务网站的一般规划和人们使用电子商务网站的习惯,前台商品浏览模块主要实现按照各种条件显示、查看商品的前台显示功能。用户使用前台的商品浏览模块的流程如图:

    

                                                

系统功能模块设计图

本网站主要是按照上面的系统功能模块设计图所示的方法进行展开的,每个功能之间有相互的合理连接,有顺序地展开。本网站是在ASP.NET和IIS5.0环境中设计的,数据库用SQL实现。以下就各个功能进行介绍:

(1)、购物车商品浏览功能:该功能主要是为用户提供对商品的浏览和对商品信息的展示,让用户在购物的过程中找到自己合适的商品并且进行下订单、订购。

(2)、在本网站进行购物必须要先注册成为会员,然后才能进行购物,本模块主要是获取用户的信息,然后进行登录、注册成为会员。如果不先注册,就只能在网站首页浏览商品不能进行订购商品。

 

                                           否

 

               是           注册成功

 

用户登录注册模块使用流程图

(3)、购物车模块,这个模块是每个电子商务站点的基本元素。本系统应用Profile个性化用户配置技术实现购物车模块,允许匿名用户访问购物车。购物车中包括了用户决定购买的所有商品的信息,包括商品编号、商品名称、商品价格、购买数量以及用户的应付总价等。主要功能包括商品浏览、商品删除、清空购物车、重新计算、结算和继续购物等功能。

 

 

购物车模版使用流程图

(4)、订单结算模块:主要是商品的结算和提交订单、填写送货地址、和邮编或者可以选择继续购物等。

 


订单结算模块使用流程图

2.2用户控件设计

   用户控件设计有商品类别列表用户控件,用户状态用户控件,站点导航用户控件,最新商品列表用户控件,商品类别及商品导航用户控件以及天气预报用户控件。

2.1.1商品类别列表用户控件

商品类别列表用户控件由Category.ascx实现,包括一个GridView控件,用于显示商品类别及该类别所有的商品数量,其中商品类别显示为超链接,通过单击商品类别可进入该类别的商品列表页面。

   其运行效果如下;

2.1.2用户状态用户控件

包括LoginView、LoginName和 LoginStatus控件,实现根据不同角色用户的不同状态显示不同的用户状态信息和可操作菜单。 

   执行效果如下;

  

2.1.3站点导航用户控件

包括一个SiteMapPath控件,实现站点导航功能。

下面就是一个当用户访问产品详细信息页面时,站点导航用户控件的效果的例子;

2.1.4最新商品列表用户控件

包括一个GridView控件,用于显示最新商品信息,包括商品名称和商品价格信息,单击商品名称将进入商品详细信息页面。

运行后的效果如下;

2.1.5商品类别及商品导航用户控件

2.1.6天启预报用户控件

通过调用Web服务,显示全国所有省、直辖市的主要城市最近3天的天气情况。

效果如下;

2.2前台显示页面设计

   前台显示页面设计包括母页面的设计,应用程序首页Default.aspx,商品详细信息浏览页面,商品搜索页面。

2.2.1母页面的设计

在设计母版页面时有四个关键步骤:

(1)  创建母版页是选择“AJAX母版面”,以便能使用ASP.NET.AJAX技术。

(2)  添加Web部件。

(3)  将用户控件添加到母版页中。

(4)  实现商品搜索功能。

 效果如下;

2.2.2应用程序首页Default.aspx

除了显示母版页中的内容外,还显示最新商品信息、商品分类信息和天气预报信息等。

2.2.3商品详细信息浏览页面

可以按商品类别浏览该类别所有商品的详细信息,也可以按商品编号浏览特点商品详细信息。

部分效果如下;

2.2.4商品搜索页面

实现模糊查找商品并显示商品详细信息的功能。用到了GridView控件,实现了以列表形式显示商品详细信息,并提供分页显示功能和购买商品按钮。

效果如下;

2.3用户注册和登录模块

用户注册和登录模块主要包括注册新用户,用户登录,修改用户密码,找回用户密码已经推出系统。

2.3.1注册新用户

主要涉及及登录系列控件的CreateUserWizard控件,为用户提供注册新用户功能。

界面如下;

2.3.2用户登录

用于会员登录,登录页面时还提供了“我还没注册!”超链接和“忘记密码了?”的提醒。

2.3.3修改用户密码

用于会员进行密码修改,由GetPwd.aspx页面实现。效果如下;

2.3.4退出系统

由Navigation1.ascx用户控件内的LoginStatus控件实现。

2.4购物车模块

   购物车模块有购物车组件设计,添加商品到购物车,查看购物车商品以及修改购物车中的商品。

2.4.1购物车组件设计

实现添加和删除商品、计算购物车内商品总价等功能。通过操作个性化用户配置属性来实现访问、存储和显示购物车数据的功能,同时还实现了允许匿名用户访问和使用购物车的功能。

2.4.2添加商品到购物车

 在浏览商品详细信息页面时,单击“购买”按钮后用户将被重定向到ShopCart.aspx页面,同时该商品的商品编号作为参数也以查询字符串方式传递到了该页面,并在ShopCart.aspx页面的Page_Load事件中完成添加购物车商品和显示购物车商品的功能。 

2.4.3查看购物车商品实现查看到底自己想买啥了。

2.4.4修改购物车中的商品

效果如下;

2.5订单处理

订单处理功能模块主要实现订单管理功能,主要包括创建订单和查看订单功能。订单处理页面只允许登录用户访问,且每个登录用户只能查看自己的订单详细信息。

3、使用说明

确保服务器上安装了IIS和.net framework(win2003系统已经自带.net farmework,不用再安装);把商城文件复制到IIS设的虚拟目录中,并在IIS中建立应用程序;做了上面的工作,那就基本大功告成了!可以访问你自己的网络商城了,本机访问网址为:http://localhost/虚拟目录名称;管理入口:http://localhost/虚拟目录/Admin  默认用户名:Admin ,默认密码:Admin。

4、课程设计心得和体会

学习是个自主的过程,光靠老师是远远不够的,更多的是要看自己的态度,俗话说师傅引进门,修行靠个人。Web是一门非常具有创造性、开放性思维的课程,自主学习就显得更为重要。Web网页需要不断的进行修改、优化。一个好的网站来自不断的尝试,不断的灵感,不可能一下就能做好。一下做好的是没多少涵义的,如同昙花一现,美却不持久,“欲速则不达”。我们更应该去体会web真正的涵义,学习的真正涵义,生活的真正涵义。Mypetshop电子商务网站虽然做好了,也能正常运作,但是很多地方还需要改良。通过这次建立网站,使自己知道了团队的力量之大,对以后的人生有重大影响。在网站的开发设计过程中,遇到一些技术困难,经过努力后还没得到解决,所以有些模块功能不是很理想。希望在以后不断学习下,能够更好地从整体上把握,然后细节上争取做好。在学习的过程中,使我们认识到做网站最重要的是要做好一个系统的总体规划。做好了总体规划就等于成功了一半。

附录:部分程序清单

1、 商品类别列表用户控件的源代码如下;

<asp:Panel ID="pnlCart" runat="server">

        <asp:GridView ID="gvCart" runat="server" Width="100%" AutoGenerateColumns="false">

            <Columns>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:CheckBox ID="chkProduct" runat="server" />

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField DataField="ProId" HeaderText="商品ID" />

                <asp:BoundField DataField="ProName" HeaderText="商品名称" />

                <asp:BoundField DataField="ListPrice" HeaderText="商品价格" DataFormatString="{0:c}" />

                <asp:TemplateField HeaderText="购买数量">

                    <ItemTemplate>

                        <asp:TextBox ID="txtQty" runat="server" Text='<%# Bind("Qty") %>' Width="30"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

        <br />

        <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label><br />

        <asp:Label ID="lblHint" runat="server" ForeColor="Green"></asp:Label><br />

        总价:<asp:Label ID="lblTotalPrice" runat="server"></asp:Label>

        &nbsp;&nbsp;

        <asp:Button ID="btnDelete" runat="server" Text="删除商品" OnClick="btnDelete_Click" />

        &nbsp;&nbsp;&nbsp;&nbsp;

        <asp:Button ID="btnClear" runat="server" Text="清空购物车" OnClick="btnClear_Click" />

        &nbsp;&nbsp;&nbsp;<asp:Button ID="btnComputeAgain" runat="server" Text="重新计算" OnClick="btnComputeAgain_Click" />

        &nbsp;

        <asp:Button ID="btnSettle" runat="server" Text="结算" OnClick="btnSettle_Click" />

    </asp:Panel>

2、商品类别及商品导航用户控件

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

            <asp:WebPartZone ID="WebPartZone1" runat="server" Width="227" HeaderText="模块1" WebPartVerbRenderMode="TitleBar">

                <ZoneTemplate>

                    <uc1:NewProduct ID="NewProduct1" runat="server" title="最新商品" />

                </ZoneTemplate>

            </asp:WebPartZone>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

           <asp:WebPartZone ID="WebPartZone2" runat="server" Width="100%" HeaderText="模块2" WebPartVerbRenderMode="TitleBar">

                <ZoneTemplate>

                    <uc2:Weather ID="Weather1" runat="server" title="天气预报(中国气象局提供数据)" />

                </ZoneTemplate>

            </asp:WebPartZone>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

            <asp:WebPartZone ID="WebPartZone3" runat="server" Width="227" HeaderText="模块3" WebPartVerbRenderMode="TitleBar">

                <ZoneTemplate>

                    <uc3:Bodyuc2 ID="Bodyuc21" runat="server" title="商品分类" />

                </ZoneTemplate>

            </asp:WebPartZone>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

            <asp:WebPartZone ID="WebPartZone4" runat="server" Width="275" HeaderText="模块4" WebPartVerbRenderMode="TitleBar">

                <ZoneTemplate>

                    <uc4:Bodyuc3 ID="Bodyuc31" runat="server" />

                </ZoneTemplate>

            </asp:WebPartZone>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder5" runat="Server">

    <asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

            <asp:WebPartZone ID="WebPartZone5" runat="server" Width="252" HeaderText="模块5" WebPartVerbRenderMode="TitleBar">

                <ZoneTemplate>

                    <uc5:Bodyuc4 ID="Bodyuc41" runat="server" />

                </ZoneTemplate>

            </asp:WebPartZone>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

3、登录代码

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <asp:Login ID="Login1" runat="server" DestinationPageUrl="~/Default.aspx" CreateUserText="我¨°还没注册!"

        CreateUserUrl="~/NewUser.aspx" PasswordRecoveryText="忘记密码了?"

    PasswordRecoveryUrl="~/GetPwd.aspx" >

    </asp:Login>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="Server">

</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder5" runat="Server">

</asp:Content>

4、注册代码

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" ContinueDestinationPageUrl="~/Default.aspx"

        OnCreatedUser="CreateUserWizard1_CreatedUser" MailDefinition-BodyFileName="ThankEmail.txt"

        MailDefinition-From="jxssg@126.com" MailDefinition-IsBodyHtml="True" MailDefinition-Subject="感谢注册"

        InvalidPasswordErrorMessage="密码最短长度为a {0},其中必须包含非字母数字字符。">

        <WizardSteps>

            <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server" />

            <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server" />

        </WizardSteps>

    </asp:CreateUserWizard>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" runat="Server">

</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder5" runat="Server">

</asp:Content>

5、购物车代码

<asp:Panel ID="pnlCart" runat="server">

        <asp:GridView ID="gvCart" runat="server" Width="100%" AutoGenerateColumns="false">

            <Columns>

                <asp:TemplateField>

                    <ItemTemplate>

                        <asp:CheckBox ID="chkProduct" runat="server" />

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:BoundField DataField="ProId" HeaderText="商品ID" />

                <asp:BoundField DataField="ProName" HeaderText="商品名称" />

                <asp:BoundField DataField="ListPrice" HeaderText="商品价格" DataFormatString="{0:c}" />

                <asp:TemplateField HeaderText="购买数量?">

                    <ItemTemplate>

                        <asp:TextBox ID="txtQty" runat="server" Text='<%# Bind("Qty") %>' Width="30"></asp:TextBox>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

        <br />

        <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label><br />

        <asp:Label ID="lblHint" runat="server" ForeColor="Green"></asp:Label><br />

        总价:êo<asp:Label ID="lblTotalPrice" runat="server"></asp:Label>

        &nbsp;&nbsp;

        <asp:Button ID="btnDelete" runat="server" Text="删除商品" OnClick="btnDelete_Click" />

        &nbsp;&nbsp;&nbsp;&nbsp;

        <asp:Button ID="btnClear" runat="server" Text="清空购物车" OnClick="btnClear_Click" />

        &nbsp;&nbsp;&nbsp;<asp:Button ID="btnComputeAgain" runat="server" Text="重新计算" OnClick="btnComputeAgain_Click" />

        &nbsp;

        <asp:Button ID="btnSettle" runat="server" Text="结算" OnClick="btnSettle_Click" />

    </asp:Panel>

    <asp:Label ID="lblCart" runat="server"></asp:Label>

相关推荐