5185092920网页设计课程设计报告—电子商务网站开发与建设.doc
课程设计电子商务网站开发与建设 姓 名： 学 号： 专 业： 指导教师： 联系方式： 2013年06 月 14 日一、书店首页实现代码：<html><head><title>圆圆书店</title></head><body><center><b><font size=7 color=ff0000>欢迎来到圆圆书店！</font></b></center><hr><table border=0 width=100%><tr align=center><td width="8%"><strong><font size="6">首页</font></strong></td><td width="14%"><a href="denglu.asp">用户登录</a></td><td width="13%"><a href="zhuce.asp">用户注册</a></td><td width="12%"><a href="Cart.asp">购物车</a></td><form method="post" action="sousuo.asp" name="sousuo"><td width="53%"><input size=30 value="请输入要搜索的图书的关键字" name= sousuo ><input type="submit" value="查询" onclick=sousuo></td></form></tr></table><table border=0 width=100%> <tr align=left> <td width="8%"> <h3><font size="4"><a href="">自然类</a></font></h3> <h4><font size="4"><a href="">历史类</a></font></h4> <h4><font size="4"><a href="">文学类</a></font></h4> <h4><font size="4"><a href="">艺术类</a></font></h4> <h4><font size="4"><a href="">数学类</a></font></h4> <h4><font size="4"><a href="">政治类</a></font></h4> <h4><font size="4"><a href="">地理类</a></font></h4> <h4><font size="4"><a href="">天文类</a></font></h4> <font size="4"><a href="">漫画类</a></font></td> <td width="30%" align="center" valign="middle"><h3><font size="7" face="Times New Roman, Times, serif">TOP 1</font></h3> <h3><img src="图书图片/2151101b1-0.jpg" width="203" height="299"></h3></td> <td width="31%" align="center"> <font size="7" face="Times New Roman, Times, serif"><strong>TOP2</strong></font> <h3><img src="图书图片/78361284309509369.jpg" width="213" height="297"></h3></td> <td width="31%"><p align="center"><font size="7" face="Times New Roman, Times, serif"><strong>TOP3</strong></font></p> <p align="center"><img src="图书图片/01300000988992128722437661365.jpg" width="211" height="302"></p></td> </tr></table></body></html>实现效果：二、 数据库购物车数据库会员信息数据库图书信息数据库订单信息数据库数据库连接语句<%Set conn=Server.CreateObject("ADODB.Connection")strProvider="Provider=Microsoft.Jet.Oledb.4.0;data source=" & Server.Mappath("liyuanyuan.mdb")conn.Open strProvider%>三、登录页面代码：<html><head><title>用户登录</title></head><body><form method="post" action="dl.asp"><center><b><font size=3 color=ff0000>圆圆书店！亲，先登录吧！</font></b></center><p><table border=1 width=30% align=center><tr align=center><td>用户名：<input size=30></td></tr><tr align=center><td>登录密码：<input type="password" size=30 name="password"></td></tr></table></p><center><input type="submit" value="登 录" size=80></center></form></body></html>实现效果：四、注册界面代码：<script type="text/vbscript" language="vbscript"> sub check dim theForm set theForm=document.MyForm if theForm.username.value="" then MsgBox "用户名不能为空!" exit sub end ifif len(theform.username.value)<6 or len(theform.username.value)>20 then msgbox "用户名必须在6-20个字符和数字之间!" exit sub end ifif len(theform.password.value)<6 or len(theform.password.value)>20 then msgbox "密码必须为6-20个字符和数字之间!" exit subend ifif theform.password.value<>theform.repassword.value then msgbox "再次输入密码必须与以上相同!" exit sub end if if theForm.question.value="" then MsgBox "问题不能为空!" exit sub end if if theForm.answer.value="" then MsgBox "答案不能为空!" exit sub end if if theForm.firstname.value="" then MsgBox "姓名不能为空!" exit sub end if if theForm.phonenumber.value="" then MsgBox "联系方式不能为空!" exit sub end if dim pos,txt,atxt=theForm.email.valuepos=""a=instr(txt,pos)if a=0 then msgbox"电子邮箱地址不正确!" exit sub end iftheForm.submit end sub</script><html><head><title>用户注册</title></head><body><center><b><font size=6 color=ff0000>欢迎光临圆圆书店！先注册吧，成为我们的会员！</font></b></center> <form action="pct.asp" method="post" name="Myform" id="Myform"><table width="735" height="531" border="0"> <tr> <td colspan="3"><span><font color=ff0000> 标注<span>*</span>项为必填选项</span></td> </tr> <tr> <td colspan="2">请输入您的用户名。</td> <td width="420" rowspan="2"><pre><strong>用户名指南</strong> 必须为620个字符</pre></td> </tr> <tr> <td><pre>用户名:<span>*</span></pre></td> <td> <input type="text" name="username"> </td> </tr> <tr> <td colspan="2">请输入您的用户登录密码。</td> <td rowspan="3"><pre><strong>密码指南</strong> 请输入620个字符或数字。</pre></td> </tr> <tr> <td><pre>密码:<span>*</span></pre></td> <td><span> <input type="password" name="password"> </span></td> </tr> <tr> <td><pre>请再次输入密码：<span>*</span> </pre></td> <td><span> <input type="password" name="repassword"> </span></td> </tr> <tr> <td colspan="2"><span>请输入密保问题和密码。</span></td> <td rowspan="3"><pre><strong>密保问题指南</strong> 这些问题将在你忘记用户名或密码的时候对你有所帮助。</pre></td> </tr> <tr> <td><pre>问题:<span>*</span></pre></td> <td><span> <input type="text" name="question"> ?</span></td> </tr> <tr> <td width="171"><pre>答案：<span>*</span></pre></td> <td width="192"><span> <input type="text" name="answer" > </span></td> </tr> <tr> <td colspan="3">请输入您的联系信息。</td> </tr> <tr> <td>姓名：<span>*</span></td> <td colspan="2" > <input type="text" name="firstname" > </td> </tr> <tr> <td>联系方式：<span>*</span></td> <td colspan="2"><input type="text" name="phonenumber"></td> </tr> <tr> <td>电子邮箱:<span>*</span></td> <td colspan=2><input type="text" name="email" size="35" ></td> </tr> <tr> <td height="42"><div align="center"> <input type="submit" name="submit1" value="提 交" onClick="check"> </div></td> <td height="42" colspan="2"> <div align="left"> <input type="reset" name="reset" value="全部重写"> </div></td> </tr></table></form></body></html> 实现效果：输出注册结果代码：<% LANGUAGE="VBScript" %><html> <center> <% dim username dim password dim question dim answer dim name dim phonenumber dim mail username=Request.form("username") password=Request.form("password") question=Request.Form("question") answer=Request.form("answer") name=Request.form("name") phonenumber=Request.form("phonenumber") mail=Request.form("mail") response.write"<table border=2>" response.write"<tr><td> Username:</td>" response.write"<td>"&username&"</td></tr>" response.write"<tr><td> Password:</td>" response.write"<td>"&password&"</td></tr>" response.write"<tr><td> Question:</td>" response.write"<td>"&question&"</td></tr>" response.write"<tr><td> Answer:</td>" response.write"<td>"&answer&"</td></tr>" response.write"<tr><td> Name:</td>" response.write"<td>"&name&"</td></tr>" response.write"<tr><td> PhoneNumber:</td>" response.write"<td>"&phonenumber&"</td></tr>" response.write"<tr><td> E-mail:</td>" response.write"<td>"&mail&"</td></tr>" response.write"</table>" %> </center></htmL>虚拟目录建立步骤(1)在计算机管理建立虚拟目录（2）创建虚拟目录名称、并浏览HTML存放的文件(3)通过虚拟目录浏览文件（4） 注册信息填写并提交用户登录（检查用户登录信息是否正确di.asp）<% set conn=server.createobject("ADODB.connection") strprovider="driver=microsoft access driver (*.mdb);DBQ=" &server.mappath("liyuanyuan.mdb") Set Rs=Server.CreateObject("ADODB.Recordset") username=Request("username") password=Request("password") if len(username)<6 then checkpass=false if len(password)<6 then checkpass=false if checkpass then query="select username from zhuce where usename='"&username&"' and password='"&password&"'" Rs.open query,Con,3,2 Response.write username&"，欢迎光临！" end if Rs.close Set rs=nothing %>五、购物车界面 往购物车里添加商品：当单击商品信息页面中的“加入购物车”按钮后，就会调用“Cart.asp”页面，同时传递当前商品的编号。“Cart.asp”页面接受商品编号以后，把该商品信息添加到购物车信息数据库表中，然后显示当前的购物车商品。添加时使用Insert into语句，用法如下：Sql="Insert into Cartitem(CartID,ProductID,"&_"ProductQuantity) value("&CartID&","&ProductID&_","&ProductQuantity&")" Cart.asp完整代码如下：<%Language=VBScript %><!#include file="conn.inc"><%dim UserID,ProductID,ProductQuantity.ProductPrice,CartIDUserID=session("UserID")If UserID=""thenResponse.write"<center>对不起，你还没有登录，所以不能订购商品。<br>"&_"如果你已经注册，请按<a href=denglu.asp>这里</a>登录。"&_"如果没有，请按<a href=zhuce.asp>这里</a>注册。"Set conn=nothingResponse.endProductID=request.form("ProductID")ProductPrice=request.form("ProductPrice")ProductQuantity=1set rsCart=server.createobject("adodb.recordset")Sql="select*form Carts where UserID="&UserIDrsCart.open sql,conn,3,2If reCart.eof and reCart.bof thenrsCart.addnewrsCart("UserID")=UserIDrsCart.updateEnd ifrsCart.MoveLastCartID=rsCart("CartID")rsCart.closeSet rsCart=nothingSet rsItem=server.createobject("adodb.recordset")If ProductID<>""thenSql="delete from cartitem where cartid="&cartID&_"and ProductID="&ProductIDConn.execute sqlSql="Insert into CartItem(CartID,ProductID,"&_"ProductQuantity,ProductPrice)value("&CartID&","&ProductID&_","&ProductQuantity &","&ProductPrice&")"Conn.execute sqlEnd ifSql="select CartItem.CartID,CartItem.ProductID,CartItem.ProductQuantity,"&_"Products.ProductPrice,Products.ProductName"&_"from CartItem,Products"&_"where CartItem.ProductID=Products.ProductID and"&_"CartItem.CartID="&CartID&_"order by CartItem.ProductID"rsItem.open sql,conn,0,1%><html><head><title>欢迎光临购物车</title></head><body><table border=0 align=center width=50%><form method=post action="UpdateCart.asp"><input type=hidden name=CartID value=<%=CartID%>><tr><td align=center><font color=green>购物车</font></td></tr><tr><td><%Dim i,sum,totali=1Sum=0Total=0%><table border=1 cellspacing=0 align=center width=100%><tr><th width=40>序号</th><th>商品</th><th>数量</th><th>单价</th><th>金额</th></tr><%If rsItem.eof then%><tr><%end if<tr><td colspan=6 align=center></td></tr><%end ifDo while not rsItem.eof sum=rsItem("ProductPrice')*rsItem("ProductQuantity")If i mod 2=0 then%><tr><%else%><tr><%end if%><td align=center><%=i%></td><td align=left><%=rsItem("ProductName")%></td><td align=center><input type=text size=3 name=PQ<%=rsItem("ProductID")%>Value=<%=rsItem("ProductQuantity")%>></td><td align=right><%=FormatCurrency(rsItem("ProductPrice"),2,-1,-1,-1)%></td><td align=center><input type=checkbox name=PD<%=rsItem("ProductID")%> value=1></td></tr><%rsItem.movenextI=i+1Total=sun+totalLooprsItem.closeSet rsItem=nothingSey conn=nothing%><tr><td colspan=4 align=center>合计</td><td align=right><%=FormatCurrency(total,2,-1,-1,-1)%></td></tr></table></td></tr><tr><td><table border=0 align=center width=100%><tr><td align=center><form method=post action="Order1.asp"><input type=hidden name=CartID value=<%=CartID%>.><input type=submit value=提交订单></form></td></tr></table></td></tr></table></body></html>实现效果：点击图书致青春详情表下面的“加入购物车”按钮，出现如下页面（其代码在下面图书详情代码中再详细给出）：数据库如下：六、分类检索-以文学类为例代码：<html><head><title>圆圆书店</title><style type="text/css"><!-.style1 font-family: Geneva, Arial, Helvetica, sans-serif;font-size: xx-large;.style2 font-size: x-large.style3 font-family: Georgia, "Times New Roman", Times, serif;font-size: 24px;.style4 font-size: 24px-></style></head><body><p class="style1"><strong>圆圆书店</strong><span class="style2"> 文学类</span></p><table width="1006" height="474" border="0"> <tr> <td width="332" height="64"><div align="center"><a href="zhiqingchun.html"><span class="style3">致我们终将逝去的青春平版</span></a></div></td> <td width="348"><div align="center"><span class="style4">谁杀了我的牛？</span></div></td> <td width="312"><div align="center"><span class="style4">妙语人生</span></div></td> </tr> <tr> <td height="404"><div align="center"><a href="zhiqingchun.html"><img src="file:/C|/Documents%20and%20Settings/Administrator/桌面/图书图片/zjiqingchun.jpg" width="281" height="372"></a></div></td> <td><div align="center"><img src="file:/C|/Documents%20and%20Settings/Administrator/桌面/图书图片/01300000854803127192474761018.jpg" width="286" height="375"></div></td> <td><div align="center"><img src="file:/C|/Documents%20and%20Settings/Administrator/桌面/图书图片/201206211728001620.jpg" width="280" height="374"></div></td> </tr></table><p class="style1"> </p></body></html>实现结果：点击致青春的书名或图片。其代码及实现页面如下代码：<html><head><title>圆圆书店</title><style type="text/css"><!-.style3 font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: x-large;.style4 font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: xx-large; .style5 font-family: "Times New Roman", Times, serif.style6 font-size: 18px-></style></head><body><p class="style4">圆圆书店</p><table width="1079" height="620" border="0"> <tr> <td width="361" rowspan="5"><img src="图书图片/zjiqingchun.jpg" width="357" height="500"></td> <td width="708" height="71"><H1 class=parseasinTitle><SPAN id=btAsinTitle>致我们终将逝去的青春(附珍藏卡册) <SPAN style="FONT-SIZE: 16px; TEXT-TRANSFORM: capitalize">平装</SPAN></SPAN> </H1></td> </tr> <tr> <td height="45">作者：辛夷坞</td> </tr> <tr> <td height="38"><p>价格：<SPAN id=youSaveValue>￥ </SPAN>15 免运费</p> </td> </tr> <tr> <td height="45">库存数量：2件</td> </tr> <tr> <td height="409"><H2 align="left" class="style6">图书描述</H2> <div id=outer_postBodyPS style="DISPLAY: block; Z-INDEX: 1; OVERFLOW: hidden; HEIGHT: 200px"> <div class="style5" id=postBodyPS style="OVERFLOW: hidden"> <div> <p align="left">郑微，心怀对林静的爱意考上林静所在城市大学，发现林静已出国，后爱上同校陈孝正，一个板正又敏感的男孩。两个人走到一起，陈孝正却选择出国，放弃郑微。几年后，林静陈孝正出现，郑微会倾向于哪边呢？</p> <div align="left"> <ul> <li><b>出版社:</b> 百花洲文艺出版社; 第1版 (2013年5月1日) <li><b>平装:</b> 298页 <li><b>语种：</b> 简体中文<li><b>商品尺寸: </b>23.6 x 16.8 x 2.4 c </ul> </div> <form name="form1" method="post" action=""> <div align="left"> <input name="Submit" type="submit" class="style5" value="加入购物车" onclick="best.asp"> </div> </form> <p><br> </p> </div> </div> </div> <H2 align="left" class=
