当前位置：信函范文网>范文大全 > 公文范文 >

WEB个人主页课程设计

时间：2021-10-12 08:37:05  来源：网友投稿

　 Web 应用开发技术 实验报告

　专业：计算机科学与技术 班级：

　学号：

　 姓名：

　一、设计题目

　个人网站 二、目的

　１、本次设计是学生在学完 ASP 动态网站开发课程后的一次实践性很强的课程设计，是对 ASP 进行动态网站开发所学知识的综合运用。

　2、掌握使用 ASP 技术进行网站开发设计。

　3、通过本次实习，使学生加深所学知识内容的理解，并能积极地调动学生的学习兴趣，结合实际应用操作环境，真正做到理论与实际相结合。

　三、功能需求描述

　此网站可以对主人留言，来发表自己的心情，也可以把自己的联系方式写入其中，达到和睦相处、心灵的驿站的目的等。

　四、总体设计

　 主页 留言板 通讯录 添加 查看留言 添加留言 删除

　 五、详细设计

　（ 一）

　）

　、我的主页

　 此页面为网站的主页 ，通过发布新心情，点击通讯录可以查看通讯录好友信息，点击留言板可以查看好友留言。

　主要代码：<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人空间</title> <meta name="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" 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"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head>

　<body>

　 <!--header start-->

　 <div id="header">

　 <h1>个人空间</h1>

　 <p>念念不忘，必有回响。</p>

　 </div>

　<!--header end-->

　 <!--nav-->

　<div id="nav">

　 <ul>

　<li><a href="index.html">首页</a></li>

　<li><a href="riji.html">通讯录 </a></li>

　<li><a href="guestbook.html">留言板</a></li>

　<div class="clear"></div>

　 </ul>

　 </div>

　<!--nav end-->

　 <!--content start--> <div id="content">

　<!--left-->

　<div class="left" id="c_left"> <div class="content_text">

　 <!--wz-->

　 <div class="wz">

　 <dl>

　 <dt><img src="images/s.jpg" width="200"

　height="279" alt=""></dt>

　<dd>

　<p class="dd_text_1"><strong style="font-size: 24px; color: #B71E1E;">心情：</strong>藏起来的目的就是为了被找到。</p>

　<p class="dd_text_1"><strong style="color: #B71E1E; font-size: 24px;">心情：

　</strong>待人友善是修养，独来独往是性格。</p>

　<p class="dd_text_1"><strong style="color: #B71E1E">心情：</strong>何以致契阔，绕腕双跳脱。</p>

　<table width="500" height="108" border="5">

　<tbody>

　<tr>

　<td> </td>

　</tr>

　</tbody>

　</table>

　<p class="dd_text_1">

　<input type="button" name="button2" id="button2" value="发布">

　</p>

　</dd>

　<div class="clear"></div>

　 </dl>

　 </div>

　<!--left end-->

　<!--right-->

　<div class="right" id="c_right">

　 <div class="s_about">

　 <h2>我</h2>

　<img src="images/my.jpg" width="249" height="303" alt="主人"/>

　<p>姓名：薛皓</p>

　<p>班级：2015 级计科一班</p>

　<p>学号：201513030112</p>

　<div class="clear"></div>

　<div class="clear"></div>

　 </div>

　 <!--content end-->

　 <!--footer start-->

　 <div id="footer">

　 <p>Design by：15 级计科一班薛皓 201513030112</p>

　 </div>

　 <!--footer end-->

　 <script type="text/javascript">jQuery(".lanmubox").slide({easing:"easeOutBounce",delayTime:400});</script>

　 <script

　type="text/javascript" src="js/nav.js"></script> </body> </html> （二）、留言板

　1 1 、我 的留言板

　 点击留言板标后直接进入留言板详细页面，从而看见很多朋友在此留言来吸引游客的好奇心，此页面主要应用以下知识点：

　1）Session 、application。

　 2) 数据库连接 主要代码：

　以下为数据库连接建立一个 Connection 对象实例 db 代码 留言：

　<% set conn=server.createobject("adodb.connection") connstr="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,conn,1,3

　rs.AddNew %> Connection 对象与数据库建立连接，并对数据库执行添加、删除、等相关操作。AddNew 是添加操作。

　当表单内容通过 post 方法提交时，asp 的 request 对象的 form 方法可以取得提交数据并进行相应的操作。如留言板中的添加操作：

　提交数据：

　<%

　<form method="post" action="add-mess.asp">

　 <div class="tit2"></div> <div id="five"><font color="#9933CC">高级编辑器</font></div> <div><textarea id="area" cols="141" rows="15" name="ly">在这里输入你的信息</textarea></div>

　 <div id="six"><input type="submit" value=" 提 交 留 言

　 " ></div>

　</form> %> 接受数据：

　<% Dim sql,bh,xm,ly,rq Set rs=Server.CreateObject("ADODB.Recordset") sql="select bh,xm,ly,rq from lyb" rs.Open sql,conn,1,3

　rs.AddNew

　 bh=Request.Form("bh")

　 xm=Request.Form("xm")

　 ly=Request.Form("ly") rs("xm")=xm

　rs("ly")=ly

　rs.Update

　 rs.Close

　Set rs=Nothing

　 conn.Close

　Set Conn=Nothing

　 %>

　 2 2 、我的留言界面

　 此界面为静态页，主要应用而文本框、多行文本框等知识点，将 Method的属性设置为 POST。

　主要代码：

　<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>留言板-个人空间</title> <meta name="keywords" content="个人空间" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" 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"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <![endif]--> </head>

　<body>

　 <!--header start-->

　 <div id="header">

　 <h1>个人空间</h1>

　 <p>念念不忘，必有回响。

　</p>

　 </div>

　<!--header end-->

　 <!--nav-->

　<div id="nav">

　<ul>

　<li><a href="index.html">首页</a></li>

　<li>通讯录 </li>

　<li><a href="guestbook.html">留言板</a></li>

　<div class="clear"></div>

　 </ul>

　 </div>

　<!--nav end-->

　 <!--content start-->

　 <div id="content">

　<!--left-->

　 <div class="left" id="guestbook">

　 <div class="weizi">

　<div class="wz_text">当前位置：

　<h1>留言板</h1></div>

　 <table width="725" border="5">

　<tbody>

　<tr>

　<td width="54">姓名 </td>

　<td width="555">内容 </td>

　<td width="86">时间 </td>

　<p>提交新留言</p>

　<table width="721" border="5">

　<tbody>

　<tr>

　<th width="50" scope="row">姓名</th>

　<td width="558">留言内容</td>

　<td width="83">时间</td>

　</tr>

　<tr>

　<th scope="row"> </th>

　<td> </td>

　<td> </td>

　</tr>

　</tbody>

　</table>

　<p>

　<input type="button" name="button" id="button" value="提交">

　</p>

　 </div> </div>

　<!--end left -->

　<!--right-->

　 <div class="right" id="c_right">

　 <div class="s_about">

　 <h2>我</h2>

　 <img src="images/my.jpg" width="230" height="280" alt="博主"/>

　<p>姓名：薛皓</p>

　<p>班级：2015 级计科一班</p>

　<p>学号：201513030112</p>

　<p>

　<a href="#" title="联系博主"></a><a href="#" title="加入 QQ 群，一起学习！"></a>

　<div class="clear"></div>

　</p>

　 </div>

　 <!--栏目分类-->

　 <!--end-->

　 </div>

　<!--end

　right-->

　<div class="clear"></div>

　 </div>

　 <!--content end-->

　 <!--footer-->

　 <div id="footer">

　 <p>Design by:15 计科一班薛皓 201513030112</p>

　 </div>

　 <!--footer end-->

　 <script type="text/javascript">jQuery(".lanmubox").slide({easing:"easeOutBounce",delayTime:400});</script>

　 <script

　type="text/javascript" src="js/nav.js"></script> </body>

　 </html>

　（三）、通讯录

　1 1 、我的通讯录

　 主要代码：

　1）

　）

　数据库的连接

　2)循环的输出。

　<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

　<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html;

　 charset=utf-8"/>

　 <title></title>

　 <style type="text/css">

　 .auto-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" runat="server">

　 <div class="auto-style4">

　 <div class="auto-style1">

　 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1" DataSourceID="SqlDataSource1" GridLines="None" Height="410px" Width="100%" style="text-align: center">

　 <Columns>

　 <asp:BoundField DataField=" 姓 名 " HeaderText="姓名" SortExpression="姓名" />

　 <asp:BoundField DataField=" 性 别 " HeaderText="性别" SortExpression="性别" />

　 <asp:BoundField DataField=" 电 话 " HeaderText="电话" SortExpression="电话" />

　 <asp:BoundField DataField=" 邮 箱 " HeaderText="邮箱" SortExpression="邮箱" />

　 <asp:CommandField ShowDeleteButton="True" />

　 </Columns>

　 <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />

　 <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />

　 <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />

　 <RowStyle BackColor="#DEDFDE" ForeColor="Black" />

　 <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />

　 <SortedAscendingCellStyle BackColor="#F1F1F1" />

　 <SortedAscendingHeaderStyle Bac...

推荐访问:课程设计 个人主页 WEB

[WEB个人主页课程设计]相关文章
热点文章