网页设计与制作 第14章 电子商务网站制作实例.ppt

《网页设计与制作 第14章 电子商务网站制作实例.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第14章 电子商务网站制作实例.ppt（122页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 第第14章章 l 电子商务网站制作实例 l随着互联网技术的发展，网上书店已成为传统书籍销售的重要补充。目前，网上书店在国际互联网上可以实现的商务已经多样化，可以完成从最基本的信息展示、信息发布功能到在线交易、在线客户服务、在线网站管理功能等，可以说，传统书店所具备的功能几乎都可以在互联网上进行电子化的高效动作。本章所制作的网上书店系统具备的功能有：l（1）用户注册、登陆、以及用户信息修改；l（2）图书展示、图书购买、图书结账；l（3）管理图书，包括添加图书、修改、删除等。14.1 网站结构和数据库设计网站结构和数据库设计l1.网上书店网站主要页面：l（1）首页（index.asp）：首页分成

2、几个模块，包括用户登陆和注册模块；书籍分类列表；以及新书推介和特价优惠书；l（2）书籍浏览页（main.asp）：此页面主要是通过分类浏览所有书籍，点击每一本书可以查看该书的详细信息；l（3）按出版社浏览（press.asp）：在此页面是通过按出版社浏览书籍，点击每一本书可以查看该书的详细信息；l（4）购书页面（shop.asp）：在此页面进行购书、付款、结账等操作；l（5）后台管理首页（Alllist.asp）：用户登录后进入此页，该页列出了数据库所有的书籍，并可对每一本书的信息进行修改和删除；l（6）编辑页面（Editbook.asp）：此页面对书籍的信息进行修改；l（7）删除页面（Del

3、etebook.asp）：从数据库删除选中的书籍信息；l（8）添加页面（Addtype.asp/Addpress.asp/Addbook.asp）：在此页面添加新的书籍种类、新的出版社以及新的书籍。l2.数据库的设计l数据库的支持是网上书店实现功能的关键，本系统的数据库bookshop采用SQL Server2000设计，主要包括几个数据表。l（1）数据表admin用于存储管理员的信息，包括用户名和密码，只有管理员才有权限对后台数据进行管理，如图1所示。图图1:l（2）数据表customer用于存储注册顾客的信息，包括顾客的姓名、密码、性别、邮件、地址等信息，如图2所示。图图2:l（3）数据表

4、book存储书籍的相关信息，如图3所示。图图3:l（4）数据库表press用于存储出版社的信息，包括出版社ID，名称以及出版社简介，如图4所示。图图4:l（5）数据表type用于存储书籍分类信息，包括分类ID，分类名称和分类简介，如图5所示。图图5:l（6）数据表sell用于存储顾客购书的订单信息，包括顾客名称、书籍ID、购书数量、购书时间等，如图6所示。图图6:14.2 网站前台功能设计与实现网站前台功能设计与实现l14.2.1 网站主页设计l在Dreamweaver 8中新建一个站点XWSD，然后新建一个主页文件，保存为index.asp。l（1）首先在页面插入一个1行3列的表格，在每个单

5、元格分别插入Logo、banner和辅助信息，如图7所示。图图7:l（2）在表格下方插入两个表格，分别设置不同的背景颜色，第二个表格输入文本作为导航条，如图8所示。图图8:l（3）在导航栏下方插入1行2列的表格，在左边单元格制作用户登陆和注册的模块，以及书籍分类显示，右边单元格显示两项内容，包括新书推介和特价优惠书，如图9所示。图图9:14.2.2 注册登录模块设计注册登录模块设计l下面具体介绍注册和登陆模块的制作方法：l（1）注册模块：根据数据库的设计，制作注册表单如图10所示。图图10:l然后选中表单，在服务器行为中选择插入纪录，弹出所示的对话框，并进行设置，如图11。图图11:l（2）登

6、陆模块，根据数据库的设计，制作登陆表单如图12所示。图图12:l然后选中表单，在服务器行为中选择“用户身份验证登陆用户”，弹出对话框，并进行相应的设置，如图13所示。图图13:14.2.3 商品展示功能设计商品展示功能设计l书籍展示包括2个方面，一是按书籍的类型进行浏览，二是按出版社类别进行浏览，首先介绍按书籍类型浏览页的制作。l顾客登陆后会自动转向main.asp页面，该页面提供了2种浏览方式，找到想要的图书后，点击就可以查看该书的详细信息，此页面的设计如图14所示。图图14:l页面的左边是书籍分类的导航，而右边则会显示相应类型的书籍列表，所以我们在此页面要创建2个记录集，其中一个为查询书籍

7、类别的“typere”，如图15所示。图图15:l另一个记录集是“rsbook”，该记录集的功能是根据“typere”选中的书籍类别，从数据库中取出相应的书籍和出版社，并显示在页面上，其设置如图16所示。图图16:l打开绑定面板，将记录集的相应字段绑定到网页中并设置重复区域，如图14-14所示。l选中动态文本“rsbook.name”，在服务器行为中选择“转到详细页面”选项，在弹出的对话框中进行设置，目的是为了把“book.id”参数传递至shophelp.asp页面，以实现详细信息的浏览，如图17所示。图图17:l选中动态文本“typere.type”，并在服务器行为版面中选择“转到详细页面

8、”，在弹出的对话框中进行设置，把参数“type_id”传递至main.asp，如图18所示。图图18:l接下来介绍按出版社浏览页面的制作，此页面的布局设计如图19所示。图图19:l首先创建2个记录集，分别是出版社信息记录集“rs_press”和书籍信息记录集“pressre”l如图20和21所示。图图20:图图21:l打开绑定面板，将记录集的相应字段绑定到网页中并设置重复区域，如图19所示。l选中动态文本“pressre.name”，在服务器行为面板中选择“转到详细页面”，传递参数“book_id”到详细信息页“shophelp.asp”。l选中动态文本“rs_press.press”，在服务

9、器行为面板中选择“转到详细页面”，传递参数“press_id”到详细信息页“press.asp”。14.2.4 购书页面设计购书页面设计l因为要从“main.asp”或“press.asp”传递的参数“book_id”至“shophelp.asp”页面，所以在“shophelp.asp”页面中创建记录集“Getdatil”，根据URL参数“book_id”选出指定的书籍记录，然后显示该书籍的详细记录。在记录集对话框中输入一下SQL语句，如图22所示。图图22:l再打开绑定面板，将记录集的字段绑定到相应的位置，如图23所示。图图23:l为了在此页面实现购买书籍的功能，我们需要建立表单来实现，表单

10、包括3个隐藏域，分别为“customer”、“sid”、“book”。其中“customer”用于保存顾客的用户名；“sid”用于保存顾客的会话变量，“book”用于保存书籍编号，这些隐藏域需要设置动态值才可以实现我们所需的功能，具体的实现如下：l（1）在绑定面板中单击“+”按钮，在弹出的下拉菜单中选中“请求变量”，打开“请求变量”对话框，在名称中输入“book_id”，如图24所示。图图24:l（2）单击【确定】按钮，在绑定面板中出现变量book_id，该变量可以像记录集字段一样插入或绑定到网页中。l（3）在隐藏域“book”面板中单击“绑定到动态源”按钮，在打开的“动态数据”对话框中选择r

11、equest变量“book_id”。单击【确定】按钮，就可以将变量book_id绑定到隐藏域book，如图25所示。图图25:l（4）单击“阶段变量”按钮，打开“阶段变量”对话框，在“名称”中输入“MM_Username”l获得一个阶段变量，使用第（3）步的方法将该变量绑定到隐藏域“customer”，如图26所示。图图26:l（5）对于隐藏域“sid”，它是用于保存顾客会话变量的“id”，可以采用session.Sessionid()函数获取其“id”值，如图27所示。图图27:l（6）在隐藏域的值绑定完毕后，选中表单，对该表单添加服务器行为“插入记录”，将表单信息插入到数据库sell中，如

12、图28所示。图图28:l（7）在页面中添加文本“查看购物车”，并设置链接属性为“shop.asp？sid=”，此链接是为了让顾客查看自己已经购买的书籍信息。至此，shophelp.asp页面就制作完毕了，效果如图29所示。图图29:l下面开始制作结账页面，它用于显示顾客购书的情况，该页面主要是从sell表中读取与顾客会话变量“id”一致的记录。该“id”值不会重复，所以可以代表一次购书的情况。l（8）首先创建一个记录集“rs_shop”，它的作用是从数据库中选择书籍的价格、名称、数量以及编号，并按照购书时间降序排列。如图30所示。图图30:l（9）继续创建记录集“rs_sum”，用于计算顾客当

13、前的购书总金额，如图31所示。图图31:l（10）打开绑定面板，将各字段绑定到相应的位置并设置重复区域，至此就完成了购物车的功能设计，如图32所示。图图32:14.3 网站后台功能设计与实现网站后台功能设计与实现l14.3.1 管理主页设计l管理员在进入后台管理页面之前，首先经过管理员验证页面Login.asp，如果验证通过，则直接转向管理首页，否则就转向出错页面。l添加一个新的页面，并另存为Login.asp，设置管理员登陆表单如图33所示。图图33:l选中登陆表单，在服务器行为面板中选中【用户身份验证】登陆用户】选项，打开如图34所示的对话框，并进行相应的设置。图图34:l在【登陆用户】对

14、话框中，从表单获取输入的用户名和密码，然后与数据库中的信息相比较，如果一致则转向管理首页，否则转向出错页面。14.3.2 图书信息管理图书信息管理l新建管理首页（Alllist.asp），在此页面可以查看每一本书的信息，并可以修改和删除、添加新类别、出版社、新书的连接，其设计如图35所示。图图35:l在此页面中创建一个记录集“Recordset1”，该记录集从数据库中取出书名、编号、作者、出版时间、分类、出版社、价格、入库时间，设置如图36所示。图图36:l打开绑定面板，把记录集字段绑定到相应的位置，并设置重复区域，然后在文本“首页”、“上一页”、“下一页”、“最后页”分别添加记录集分页功能，

15、如图37所示。图图37:l选中文本“修改”，在服务器行为版面中选中“转到详细页面”，打开对话框，参数设置如图38所示。图图38:l选中文本“删除”，在服务器行为面板上选中“转到详细页面”，打开对话框，设置参数如图39所示。图图39:l通过上面2个操作，实现了对选中的书籍进行信息的修改或者删除书籍的功能。l下面接着介绍信息修改和删除页面的制作：l从前面几个操作可以看到，从Alllist.asp页面传递过来的参数“book_id”到“editbook.asp”页面和“deletebook.asp”页面，所以在这两个页面中分别创建记录集，根据传递过来的参数“book_id”，从数据库中选出特定的书籍

16、信息进行修改和删除。l首先打开“editbook.asp”页面，创建记录集“Recordset1”，设置如图40所示。图图40:l然后打开绑定面板，把记录字段绑定到相应的位置，由于书籍分类和出版社分类需要从列表中进行选择，因此还需要在网页中插入2个动态下拉列表。但在创建列表之前，首先要创建2个记录集以供作下拉列表的数据源所用，一个是表示书籍类别的，另一个是表示出版社的，如图41和42所示。图图41:图图42:l在网页中插入2个下拉列表，对于书籍分类，把它的值绑定到“type_id”，将其标签绑定到type，如图43所示。图图43:l对于出版社，把它的值绑定到“press_id”，将其标签绑定到

17、press，如图44所示。图图44:l所有的字段都绑定完成后的效果如图45所示。图图45:l然后选中表单，在服务器行为面板中选择“更新记录”选项，在弹出的对话框中进行设置，如图46所示。图图46:l删除书籍记录页面的制作过程与编辑页面类似，因此把“editbook.asp”页面另存为“deletebook.asp”，但在网页中添加的服务器行为是“删除记录”而不是“更新记录”，如图47所示。图图47:l制作好的删除页面如图48所示。图图48:l下面介绍添加图书类别、出版社以及新书的页面制作。l首先制作“Addtype.asp”页面用于添加图书类别，页面设计如图49所示。图图49:l为避免管理员添

18、加重复的图书类别，在页面列出了已经存在的书籍类别，然后再提供管理员添加的新书分类和简介的文本框。首先创建一个记录集“Add”，以显示已有的图书类别，如图50所示。图图50:l然后将网页中“已存在的分类”处的下拉列表绑定成动态列表，参数设置如图51所示。图图51:l选中页面的表单，在服务器行为面板中选中“插入记录”，在弹出的对话框中进行设置，如图52所示，注意要把已存在的表单值忽略，不能把它插入数据库，否则会出错。图图52:l添加图书类别的页面已经制作完毕，添加出版社的页面制作与之类似，首先创建一个记录集“Addpress”，如图53所示。图图53:l将网页中“已存在的出版社”的下拉列表绑定成动

19、态列表，参数设置如图54所示。图图54:l然后在服务器行为面板中单击“插入记录”选项，设置参数如图55所示。图图55:l注意已存在的表单值不能插入数据库，应该选择忽略。l下面开始制作插入新图书的页面“Addbook.asp”，它通过向数据库写入新的数据而实现，插入的数据包括书名、作者、出版时间、分类、出版社、价格、书籍简介等，设计效果如图56所示。图图56:l为了动态的显示书籍分类和出版社信息，要对其下拉列表进行绑定，所以首先要创建2个记录集，2个记录集分别从数据表type和press中选出需要的字段type，type_id和press，press_id，如图57和58所示。图图57:图图58:l把创建好的记录集字段分别绑定到相应的表单中，然后单击服务器行为面板中“插入记录”选项，在弹出的对话框中进行设置，如图59所示。图图59:l完成后保存文件，即可完成添加页面的制作。至此五邑书城网站的制作就基本完成了。本本 章章 小小 结结l通过综合运用前面所讲的知识，本章制作了一个小型的电子商务网站，具备信息浏览、信息管理以及网上购物等基本功能，如果读者想制作出更复杂的电子商务网站，还需要更多的实践和学习。我们不仅要弄清楚网页的外观如何设计，还要理解内部的源代码是如何实现交互功能的，这样才能制作出既美观又又使用价值的网站。l