当前位置：文档之家 › 实验报告模板(Web技术及应用)

实验报告模板(Web技术及应用)

  • 格式：doc
  • 大小：494.50 KB
  • 文档页数：17

华北电力大学实验报告||实验名称基于Web的招聘网的设计与实现课程名称 Web技术及应用||专业班级：计科1103 学生姓名：高新星学号：201109010303 成绩：指导教师：王蓝婧实验日期：2014-5（实验报告如打印，纸张用A4，左装订；页边距：上下2.5cm,左2.9cm, 右2.1cm；字体：宋体小四号，1.25倍行距。

）验证性、综合性实验报告应含的主要内容：一、实验目的及要求二、所用仪器、设备三、实验原理四、实验方法与步骤五、实验结果与数据处理六、讨论与结论（对实验现象、实验故障及处理方法、实验中存在的问题等进行分析和讨论，对实验的进一步想法或改进意见）七、所附实验输出的结果或数据设计性实验报告应含的主要内容：一、设计要求二、选择的方案三、所用仪器、设备四、实验方法与步骤五、实验结果与数据处理六、结论（依据“设计要求”）七、所附实验输出的结果或数据* 封面左侧印痕处装订一、实验目的和要求1．掌握WEB编程技术，熟悉网站开发知识1．1 简单掌握页面布局(1) 利用css调整页面布局(a) 学会css布局基本语法(b) 实际利用其进行布局(2)验证问题（利用控件及JS进行验证）1．2 数据库连接表1-1 category表属性值类型说明允许空值id Int Id值否主键，自增profession Varchar（20）类别名称否表2-1 people表属性值类型说明允许空值id int Id否name Varchar（20)姓名否address Varchar（50) 目标城市否school Varchar（50) 毕业学校否major Varchar（50) 所学专业否phnumber Varchar（11) 联系方式否salary Varchar（20) 年薪范围caid int 类别ID 外键creaetime datetime 提交时间图2-1 图题二、系统分析与设计程序1功能：人才招聘系统。

包括前台与后台部分。

前台主要是人员的查看，筛选。

后台主要是对类别的增加、删除、修改，以及对人员的增删改，还有查询与筛选功能。

程序2功能：一个简单的登陆以及注册网站。

登陆部分包括验证问题以及与数据库的链接，判断用户是否已经存在于数据库；注册部分包括必要的验证（判空、密码相等、邮箱格式），与数据库连接时查询用户名是否已经被这侧，若不存在，则添加到数据库。

进入系统后，同样是对数据的删除以及修改、增加，统一由程序1详细说明。

三、系统实现一、人才招聘系统（1）进入登录界面protected void btnchange_Click(object sender, EventArgs e){changcode();}protected void changcode(){string code = "";int codeLength = 6; //验证码的长度Random r = new Random();char[] selectChar = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' }; // 所有候选组成验证码的字符，当然也可以用中文的for (var i = 0; i < codeLength; i++){var charIndex = r.Next(36); //Math.floor(Math.random() * 36);code += selectChar[charIndex];}btncode.Text = code;}//登录按钮protected void btnLogin_Click(object sender, EventArgs e){string code = btncode.Text;string code2 = txtcode.Text.ToLower();if (code == code2){string name = txtName.Text.Trim();string pwd = txtPassword.Text.Trim();bool b = LoginManager.Login(name, pwd);if (b){//登陆成功Session["admin"] = name;Response.Redirect("categorymanager.aspx");}else{if (a == 2){a = 0;Response.Redirect("../Default.aspx");}else{//登陆失败后a = a + 1;Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('用户名或密码输入错误');</script>");}}}else{Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码输入错误！');</script>");}}（2）成功登录—类别管理说明：数据库连接不许多说，类别管理这一块我用到了AJAX异步更新，只要点击类别名，就可以对名称进行修改，失去焦点后完成对数据的提交。

同时，有对同名类别的处理，即重新让用户输入。

$(function () {$(".caname").click(function () {var obid = $(this);var oldText = $.trim($(this).text()); //获取原来地方的文本，并去掉前后空格var input = $("<input type='text' value='" + oldText + " ' />");$(this).html(input); //给文本框赋值//使文本框的点击事件失效input.click(function () {return false;});//文本框的样式input.css("border-width", "0");input.css("text-align", "center");input.height(obid.height()); //文本框高度适应td高度input.width(obid.width());input.trigger("focus").trigger("select"); //点击时全选//文本框失去焦点时的动作input.blur(function () {var newText = $.trim($(this).val()); ////////////////////////这儿快腻歪死我了，还得去掉空格！哎！！！！！！！！！！！var input_blur = $(this);// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作if (oldText != newText) {// 获取该类别名所对应的ID(序号)var caid = $.trim(obid.prev().text());// AJAX异步更改数据库var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();$.get(url, function (data) {if (data == "false") {$("#test").text("类别修改失败,请检查是否类别名称重复!");input_blur.trigger("focus").trigger("select"); // 文本框全选} else {$("#test").text("");obid.html(newText);}});}else {$("#test").text("");// 前后文本一致,把文本框变成标签obid.html(newText);}});//文本框按下某键时显示键值input.keydown(function (event) {var jianzhi = event.keyCode;switch (jianzhi) {case 13:var newText = $.trim($(this).val()); ////////////////////////这儿快腻歪死我了，还得去掉空格！哎！！！！！！！！！！！var input_keydown = $(this);// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作if (oldText != newText) {// 获取该类别名所对应的ID(序号)var caid = $.trim(obid.prev().text());// AJAX异步更改数据库var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();$.get(url, function (data) {if (data == "false") {$("#test").text("类别修改失败,请检查是否类别名称重复!");input_keydown.trigger("focus").trigger("select"); // 文本框全选} else {obid.html(newText);$("#test").text("");}});}else {$("#test").text("");// 前后文本一致,把文本框变成标签obid.html(newText);}break;case 27:$("#test").text("");obid.html(oldText);break;}});});});//屏蔽页面中其他部分Enter键的下$(document).keydown(function (event) {switch (event.keyCode) {case 13: return false;}});（3）人员管理页点击姓名，进入详细信息页（4）添加新人以上是后台部分，下面，给出前台功能及说明（5）首页，点击相应人员姓名，进入详细信息。

合集下载

web开发和应用实验报告

web开发和应用实验报告

Web开发与应用实验报告系别电子信息系专业班级学号姓名指导教师一，相关技术为实现注册和登录功能，首先采用JSP和HTML分别设计regist和login页面，再采用servlet技术实现这两项功能。

为实现上传文件至服务器和下载自己上传的文件，也先JSP和HTML设计页面，再在页面中设计两按钮，点击时用调用JSP实现上传和调用servlet实现下载。

采用JSP和HTML设计result页面。

是各种结果在result页面显示二，系统需求分析为实现登录和注册。

设计一个包，包中包含User类。

User中有账号，密码，昵称三类属性。

设计登录页面，输入账号和密码实现登录。

当输入信息正确时，显示成功，否则失败。

设计注册页面，输入账号，密码，昵称三属性实现注册。

设计上传和下载页面，点击相应按钮实现相应动作。

三，系统设计和实验结果1,显示结果页面核心代码<% String message=(String)request.getAttribute("message"); %> <%= message %>2,注册相关代码A,注册界面核心代码<form method="post"action="Re"><table><p><h2>输入信息<h2></p>账号：<input name="name"type="text"id="name">密码：<input name="pwd"type="password"id="pwd">昵称：<input name="call"type="text"id="call"><input type="submit"value="注册"></table></form>B，实现注册的servlet核心代码driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver";Class.forName(driverName);String name = request.getParameter("name");String pwd = request.getParameter("pwd");String call = request.getParameter("call");Connection con=null;StringdbURL="jdbc:sqlserver://localhost:1433;DatabaseName=student";String userName="sa";String userPwd="a693501";con=DriverManager.getConnection(dbURL,userName,userPwd);PreparedStatement ps = null;String sql = "insert into admin (name,pwd,call)values(?,?,?)";try{ps = con.prepareStatement(sql);ps.setString(1,name);ps.setString(2, pwd);ps.setString(3, call);ps.executeUpdate();C,结果截图3,登录相关代码A,登录界面核心代码请登录<br><form method="post"action="login"><table><p>输入信息</p>账号：<input name="name"type="text"id="name">密码：<input name="pwd"type="password"id="pwd"><input type="submit"value="登录"></table></form>B,实现登录servlet核心代码String driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver"; Class.forName(driverName);Connection con=null;String dbURL="jdbc:sqlserver://localhost:1433;DatabaseName=student"; String userName="sa";String userPwd="a693501";con=DriverManager.getConnection(dbURL,userName,userPwd); PreparedStatement ps = null;ResultSet rs = null;User user=new User();String sql = "select * from admin where name=? and pwd=?";ps = con.prepareStatement(sql);ps.setString(1, name);ps.setString(2, pwd);rs = ps.executeQuery();if (rs.next()) {user.setName(rs.getString("name"));user.setPwd(rs.getString("pwd"));user.setCall(rs.getString("call"));} else{user = null;}if(null==user){request.setAttribute("message", "login fail");request.getRequestDispatcher("/result.jsp").forward(request, response);}else{request.setAttribute("message", "login success");request.getRequestDispatcher("/result.jsp").forward(request, response);}C,结果截图1，成功时2，失败时4,上传下载页面核心代码<form method="post"action="LoadFile"><input type="submit"value="下载"></form><form action="accept.jsp" method="post" enctype="multipart/form-data"> <input type="file"name="file"><input type="submit"name="submit"value="上传"></form>截图5,实现上传功能JSP核心代码String tempFileName=(String)session.getId();File temp=new File("e:/webup",tempFileName);FileOutputStream o=new FileOutputStream(temp);InputStream in=request.getInputStream();byte b[]=new byte[1024];int n;while((n=in.read(b))!=-1){o.write(b,0,n);}o.close();in.close();RandomAccessFile random=new RandomAccessFile(temp,"r");int second=1;String secondLine=null;截图4,实现下载servlet核心代码OutputStream o=response.getOutputStream();byte b[]=new byte[1024];File fileLoad=new File("d:/down","test.rar");response.setHeader("Content-disposition","attachment;filename="+"test.rar");response.setContentType("application/x-rar");long fileLength=fileLoad.length();String length=String.valueOf(fileLength);response.setHeader("Content_Length", length);FileInputStream in=new FileInputStream(fileLoad);int n=0;while((n=in.read(b))!=-1){o.write(b,0,n);}}截图四，心得体会通过web实验，回顾了web设计的内容，并且通过对知识的综合运用，加深jsp，html等等web相关知识的认识；同时熟悉myeclipse的使用，实验期间虽困难重重，但是努力，终于使问题得到解决，通过web实验，让我受益很大，增加了程序设计和调试的实践经验。

web实验报告网页

web实验报告网页

web实验报告网页标题：Web实验报告网页摘要：本实验报告旨在介绍Web实验报告网页的设计与实现过程。

通过对网页的结构、功能和交互体验进行分析，展示了如何利用HTML、CSS和JavaScript等技术实现一个功能完善、美观易用的实验报告网页。

同时，通过本实验报告，读者可以了解到Web开发中常用的技术和方法，为日后的实践工作提供参考。

1. 网页结构设计实验报告网页的结构设计是整个网页开发的基础。

在本实验中，我们采用了HTML5标准，通过语义化标签和合理的结构设计，构建了一个清晰、易读的网页结构。

网页包括导航栏、内容区域和页脚等部分，每个部分都有明确的功能和样式。

2. 网页功能实现在网页功能实现方面，我们使用了JavaScript和jQuery等技术，实现了一些交互功能和动态效果。

例如，通过JavaScript实现了表单验证、图片轮播等功能，通过jQuery实现了页面滚动、菜单展开等交互效果。

这些功能的实现为用户提供了更好的使用体验。

3. 网页样式设计网页样式设计是网页开发中非常重要的一环。

在本实验中，我们采用了CSS3技术，实现了网页的样式设计。

通过CSS样式表，我们为网页添加了美观、统一的样式，包括颜色、字体、布局等方面。

同时，我们也采用了响应式设计，使网页能够在不同设备上都能够良好地显示和使用。

4. 网页性能优化在网页性能优化方面，我们采用了一些技术和方法，提高了网页的加载速度和用户体验。

通过压缩资源、合并文件、使用CDN等手段，我们减少了网页的加载时间，提高了网页的性能表现。

同时，我们也对网页进行了测试和调优，确保网页在不同环境下都能够正常运行。

5. 结语通过本实验报告，我们展示了一个完整的Web实验报告网页的设计与实现过程。

通过对网页的结构、功能和样式进行分析，读者可以了解到Web开发中常用的技术和方法，为日后的实践工作提供参考。

希望本实验报告能够对读者在Web开发领域有所帮助，也欢迎读者提出宝贵的意见和建议。

《Web应用开发实训》实训报告模板

《Web应用开发实训》实训报告模板

《W eb应用‎开发实训》（适用于：软件专业，参考周数：2周）一、实训目的本课程的修‎读对象是软‎件技术专业‎的学生。

本课程的主‎要任务是使‎学生掌握A‎S 编程‎技术及数据‎库相关知识‎、并能熟练使‎用A 环境‎和一种数据‎库管理软件‎进行W eb‎应用程序的‎开发。

二、实训要求1．了解ASP‎.NET的工‎作原理和开‎发工具，掌握其应用‎环境的配置‎。

2．掌握C#或者语言‎，掌握A SP‎内置对象的‎功能，各内置对象‎属性、方法及数据‎集合的使用‎。

3．掌握HTM‎L服务器控‎件和W eb‎服务器控件‎的使用4．熟悉SQL‎S erve‎r数据库管‎理，掌握使用A‎D 访问‎数据库的方‎法。

5．掌握常用W‎e b数据库‎应用程序开‎发的实例。

三、实训内容《学生信息管‎理系统设计‎制作》任务1 系统功能概‎述学生信息管‎理系统是常‎见的一个应‎用系统，能够大大提‎高学生信息‎的管理效率‎，实现数据共‎享、网络查询和‎网络管理等‎便利。

本项目设计‎的学生信息‎管理系统主‎要包括以下‎功能模块：学生信息录‎入模块、学生信息管‎理模块（包括编辑、删除）、学生信息查‎询模块、用户登录模‎块、用户信息管‎理模块、用户权限设‎置模块、学生成绩录‎入模块、学生成绩管‎理模块、专业信息管‎理模块等。

任务2 数据库设计‎2.1 数据库需求‎分析本系统为学‎生信息管理‎系统，数据库中存‎储的信息包‎括：学生信息、用户信息、院系表、管理员信息‎、课程信息、成绩信息等‎。

2.2 数据库结构‎设计存放班级数‎据信息表C‎l a ss存放课程信‎息表C ou‎r se存放课程类‎型信息表C‎o urse‎t ype存放系部信‎息表D ep‎a rtme‎n t存放年纪信‎息表G ra‎d eSpeci‎a l i ty‎表Speci‎a l i ty‎_cour‎s e表stude‎n t表Teach‎e r表users‎表任务3 设计学生信‎息管理系统‎功能模块3.1 项目文件结‎构Web.confi‎g配置文件‎：<appSe‎t ting‎s><add key="SMS_d‎b conn‎"value‎="serve‎r=.;Pooli‎n g=true;Min Pool Size=10;Max Pool Size=200;packe‎t size=4096;data sourc‎e=(local‎);initi‎a l catal‎o g=stude‎n t_Da‎t a;Integ‎r ated‎Secur‎i ty=SSPI;" /><add key="Cryst‎a lIma‎g eCle‎a ner-AutoS‎t art"value‎="true" /><add key="Cryst‎a lIma‎g eCle‎a ner-Sleep‎"value‎="60000‎" /><add key="Cryst‎a lIma‎g eCle‎a ner-Age"value‎="12000‎0" /></appSe‎t ting‎s>3.2 编写基础类‎文件代码在编写各页‎面前，需要在Ap‎p_Cod‎e文件夹中‎添加四个类‎文件，分别是Cl‎a ss.cs、Class‎C o nn.cs、connD‎B.cd和da‎t a.cs。

web实验报告

web实验报告

web实验报告Web 实验报告一、实验背景随着信息技术的飞速发展，Web 应用在各个领域的作用日益显著。

为了深入了解 Web 技术的工作原理和性能特点，进行了本次 Web 实验。

二、实验目的1、熟悉 Web 开发的基本流程和技术。

2、掌握 HTML、CSS 和 JavaScript 等关键技术的应用。

3、了解 Web 服务器的配置和运行机制。

4、探究 Web 应用的性能优化方法。

三、实验环境1、操作系统：Windows 102、开发工具：Visual Studio Code3、浏览器：Google Chrome4、 Web 服务器：Apache四、实验内容1、 HTML 页面设计使用 HTML 标签构建网页结构，包括标题、段落、列表、图像等元素。

注意 HTML 标签的语义化，以提高网页的可读性和可维护性。

2、 CSS 样式美化运用 CSS 选择器为 HTML 元素设置样式，如字体、颜色、背景、布局等。

采用外部 CSS 文件来实现样式的分离，提高代码的可重用性。

3、 JavaScript 交互实现通过JavaScript 实现网页的动态效果，如按钮点击事件、表单验证、页面滚动效果等。

学习 JavaScript 的基本语法和常用函数，提高编程能力。

4、 Web 服务器配置安装和配置 Apache 服务器，设置虚拟主机和目录权限。

了解服务器的运行日志和错误处理机制。

五、实验步骤1、 HTML 页面设计首先，创建一个新的 HTML 文件，命名为“indexhtml”。

在文件中，使用`＜html>｀标签作为根标签，｀＜head>｀标签中设置页面的标题和元信息，｀＜body>｀标签中构建页面的内容。

例如，创建一个简单的网页，包含一个标题“我的 Web 实验”，一个段落“这是一个简单的网页示例”，以及一张图片“imagejpg”。

2、 CSS 样式美化创建一个新的 CSS 文件，命名为“stylescss”。