《WEB个人主页课程设计.docx》由会员分享,可在线阅读,更多相关《WEB个人主页课程设计.docx(26页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、WEB个人主页课程设计 Web 应用开发技术 试验报告专业:计算机科学与技术 班级:学号: 姓名:一、设计题目个人网站 二、目的、本次设计是学生在学完 ASP 动态网站开发课程后的一次实践性很强的课程设计,是对 ASP 进行动态网站开发所学学问的综合运用。2、驾驭运用 ASP 技术进行网站开发设计。3、通过本次实习,使学生加深所学学问内容的理解,并能主动地调动学生的学习爱好,结合实际应用操作环境,真正做到理论与实际相结合。三、功能需求描述此网站可以对主子留言,来发表自己的心情,也可以把自己的联系方式写入其中,达到和谐相处、心灵的驿站的目的等。四、总体设计 主页 留言板 通讯录 添加 查看留言
2、添加留言 删除 五、具体设计( 一)、我的主页 此页面为网站的主页 ,通过发布新心情,点击通讯录可以查看通讯录好友信息,点击留言板可以查看好友留言。主要代码:<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人空间</title> <meta na
3、me="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet&am
4、p;quot; href="css/style.css"/> <script type="text/javascript" src="js/jquery1.42.min.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"&am
5、p;gt;</script> <!-if lt IE 9> <script src="js/html5.js"></script> <!endif-> </head><body> <!-header start-> <div id="header"> <h1&a
6、mp;gt;个人空间</h1> <p>记忆犹新,必有回响。</p> </div><!-header end-> <!-nav-><div id="nav"> <ul><li><a href="index.html">首页</a&
7、;gt;</li><li><a href="riji.html">通讯录&nbsp;</a></li><li><a href="guestbook.html">留言板</a></li><div class="clear&
8、quot;></div> </ul> </div><!-nav end-> <!-content start-> <div id="content"><!-left-><div class="left" id="c_left"> <div
9、class="content_text"> <!-wz-> <div class="wz"> <dl> <dt><img src="images/s.jpg" width="200"height="279" alt="">&
10、;lt;/dt><dd><p class="dd_text_1"><strong style="font-size: 24px; color: #B71E1E;">心情:</strong>藏起来的目的就是为了被找到。</p><p class="dd_text_1"><strong style=&
11、amp;quot;color: #B71E1E; font-size: 24px;">心情:</strong>待人友善是修养,独来独往是性格。</p><p class="dd_text_1"><strong style="color: #B71E1E">心情:</strong>何以致契阔,绕腕双跳脱。</p><t
12、able width="500" height="108" border="5"><tbody><tr><td>&nbsp;</td></tr></tbody></table><p class="dd_text_1"
13、><input type="button" name="button2" id="button2" value="发布"></p></dd><div class="clear"></div> </dl> </div&
14、gt;<!-left end-><!-right-><div class="right" id="c_right"> <div class="s_about"> <h2>我</h2><img src="images/my.jpg" width="249&a
15、mp;quot; height="303" alt="主子"/><p>姓名:薛皓</p><p>班级:2022 级计科一班</p><p>学号:202213030112</p><div class="clear"></div><div clas
16、s="clear"></div> </div> <!-content end-> <!-footer start-> <div id="footer"> <p>Design by:15 级计科一班薛皓 202213030112</p> </div> <!-footer end
17、-> <script type="text/javascript">jQuery(".lanmubox").slide(easing:"easeOutBounce",delayTime:400);</script> <scripttype="text/javascript" src="js/nav.js"><
18、;/script> </body> </html> (二)、留言板1 1 、我 的留言板 点击留言板标后干脆进入留言板具体页面,从而望见许多挚友在此留言来吸引游客的新奇心,此页面主要应用以下学问点:1)Session 、application。 2) 数据库连接 主要代码:以下为数据库连接建立一个 Connection 对象实例 db 代码 留言:<% set conn=server.createobject("adodb.connection") connstr=&
19、quot;Provider=Microsoft.jet.oledb.4.0;data source="&server.mappath("db1.mdb") conn.open connstr %><% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject("ADODB.Recordset") sql="select bh,xm,ly,rq from lyb" rs.Open sql,co
20、nn,1,3rs.AddNew %> Connection 对象与数据库建立连接,并对数据库执行添加、删除、等相关操作。AddNew 是添加操作。当表单内容通过 post 方法提交时,asp 的 request 对象的 form 方法可以取得提交数据并进行相应的操作。如留言板中的添加操作:提交数据:<%<form method="post" action="add-mess.asp"> <div class="tit2"
21、;></div> <div id="five"><font color="#9933CC">高级编辑器</font></div> <div><textarea id="area" cols="141" rows="15" n
22、ame="ly">在这里输入你的信息</textarea></div> <div id="six"><input type="submit" value=" 提 交 留 言 " ></div></form> %> 接受数据:<% Dim sql,
23、bh,xm,ly,rq Set rs=Server.CreateObject("ADODB.Recordset") sql="select bh,xm,ly,rq from lyb" rs.Open sql,conn,1,3rs.AddNew bh=Request.Form("bh") xm=Request.Form("xm") ly=Request.Form("ly") rs("xm&qu
24、ot;)=xmrs("ly")=lyrs.Update rs.CloseSet rs=Nothing conn.CloseSet Conn=Nothing %> 2 2 、我的留言界面 此界面为静态页,主要应用而文本框、多行文本框等学问点,将 Method的属性设置为 POST。主要代码:<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset=&q
25、uot;UTF-8"> <title>留言板-个人空间</title> <meta name="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet&
26、;quot; href="css/index.css"/> <link rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/jquery1.42.min.js"></script> <script ty
27、pe="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script> <!-if lt IE 9> <script src="js/html5.js"></script> <!endif-> </head><body>
28、 <!-header start-> <div id="header"> <h1>个人空间</h1> <p>记忆犹新,必有回响。</p> </div><!-header end-> <!-nav-><div id="nav"><ul&
29、amp;gt;<li><a href="index.html">首页</a></li><li>通讯录 </li><li><a href="guestbook.html">留言板</a></li><div class="
30、;clear"></div> </ul> </div><!-nav end-> <!-content start-> <div id="content"><!-left-> <div class="left" id="guestbook"&g
31、t; <div class="weizi"><div class="wz_text">当前位置:<h1>留言板</h1></div> <table width="725" border="5"><tbody><tr><
32、td width="54">姓名 </td><td width="555">内容 </td><td width="86">时间 </td><p>提交新留言</p><table width="721" border="
33、;5"><tbody><tr><th width="50" scope="row">姓名</th><td width="558">留言内容</td><td width="83">时间</td>&
34、;lt;/tr><tr><th scope="row">&nbsp;</th><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table><p>&
35、;lt;input type="button" name="button" id="button" value="提交"></p> </div> </div><!-end left -><!-right-> <div class="right" id=
36、"c_right"> <div class="s_about"> <h2>我</h2> <img src="images/my.jpg" width="230" height="280" alt="博主"/><p>姓名:薛皓&am
37、p;lt;/p><p>班级:2022 级计科一班</p><p>学号:202213030112</p><p><a href="#" title="联系博主"></a><a href="#" title="加入 QQ 群,一起学习!"&
38、amp;gt;</a><div class="clear"></div></p> </div> <!-栏目分类-> <!-end-> </div><!-endright-><div class="clear"></div>
39、; </div> <!-content end-> <!-footer-> <div id="footer"> <p>Design by:15 计科一班薛皓 202213030112</p> </div> <!-footer end-> <script type="text/javascript&q
40、uot;>jQuery(".lanmubox").slide(easing:"easeOutBounce",delayTime:400);</script> <scripttype="text/javascript" src="js/nav.js"></script> </body> </html>(
41、三)、通讯录1 1 、我的通讯录 主要代码:1)数据库的连接2)循环的输出。<% Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %><!DOCTYPE html> <html xmlns="http:/www.w3.org/1999/
42、xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .au
43、to-style1 text-align: right; font-weight: bold; font-size: larger; .auto-style4 border-style: outset; </style> </head> <body style="background-image:url(image/back.png);background-size:cover;"> <form id="form1" runa
44、t="server"> <div class="auto-style4"> <div class="auto-style1"> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns=&am
45、p;quot;False" BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1" DataSourceID="SqlDataSource1" GridLines=&am
46、p;quot;None" Height="410px" Width="100%" style="text-align: center"> <Columns> <asp:BoundField DataField=" 姓 名 " HeaderText="姓名" SortExpression="姓名" /&
47、gt; <asp:BoundField DataField=" 性 别 " HeaderText="性别" SortExpression="性别" /> <asp:BoundField DataField=" 电 话 " HeaderText="电话" SortExpression="电话" /> <asp:BoundField DataField=" 邮 箱 " HeaderText="邮箱" SortExpression="邮箱" />