北京工业大学 web开发技术基础 实验报告
Web开发(本)形考实训任务1结果

Web开发(本)形考实训任务1结果本文档旨在总结和介绍Web开发形考实训任务1的结果。
任务概述
实训过程
实训任务1的过程包括以下几个步骤:
1. 熟悉任务要求:学员首先需要仔细阅读任务要求,了解任务
的背景和目标。
2. 设计网页结构:学员需要根据任务要求设计网页的整体结构,确定网页所包含的主要元素和功能。
4. 样式设计:学员需要使用CSS样式来美化网页的外观,包括颜色、字体、布局等。
5. JavaScript交互:学员可以选择性地使用JavaScript来增加网
页的交互性和动态效果,例如表单验证、轮播图等。
6. 测试和优化:学员完成网页设计和开发后,需要进行测试来
确保网页在不同浏览器和设备上的兼容性,并对可能存在的问题进
行优化和修复。
结果总结
通过Web开发形考实训任务1,学员可以获得以下收获和成果:
2. 掌握网页设计和开发的基本流程和步骤,能够按照任务要求
进行系统的设计和实施。
3. 培养对网页设计和开发的兴趣和认识,为进一步深入研究和
实践打下基础。
总的来说,Web开发形考实训任务1为学员提供了一个初步的
实践机会,帮助他们掌握基本的网页设计和开发技能,并为日后的
研究和实践奠定了基础。
以上是Web开发形考实训任务1的结果总结,希望对您有所帮助。
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技术》实验指导书北京工商大学计算机与信息工程学院2011年3月目录实验一使用Dreamweaver制作HTML页面 (3)实验二CSS及JavaScript实验 (3)实验三MyEclipse使用 (4)实验四JSP技术应用实验 (4)实验五JSP动作 (5)实验六JSP的<jsp:useBean>动作使用 (5)实验七JSP内置对象——request对象和response对象 (6)实验八JSP内置对象——out对象和session对象 (6)实验九JSP使用技巧 (6)实验十MySQL数据库使用 (7)实验十一JSP数据库应用开发(4学时) (7)实验一使用Dreamweaver制作HTML页面【实验目的】掌握使用Dreamweaver制作HTML页面的方法【实验内容】1.使用HTML制作一个页面,要有背景颜色,页面显示内容及格式如下图所示。
2.制作一个页面,上有文字、图像和朋友的E.mail地址,在文字和图像上创建超级链接,单击链接时,页面跳转到其他页面,单击E.mail地址时,打开信箱,发送邮件。
3.制作一个计算器界面,界面如下图所示。
4.用Top: 显示logo图片和页面的标题。
Left: 登录模块Body: 当前页面的主要显示区域。
Bottom: 显示版权信息。
【实验报告】将实验文件发送到老师的电子信箱。
实验二CSS及JavaScript实验【实验目的】掌握CSS及JavaScript的使用方法【实验内容】1.定义一个main.css文件,在其中设置超链接的颜色、访问过的超链接的颜色,颜色自定。
另外,设计两个HTML页面,在其中创建超链接,并链接main.css文件,观察超链接的颜色。
2. 使用JavaScript脚本来验证用户输入的用户名是否为空,并要求密码的长度必须大于6,根据用户的输入给出相应的提示。
3. 页面上有一幅图像,在状态栏显示有关图像的说明。
单击图像时,换成另一幅图像,同时状态栏的内容也做相应的变更。
web开发实习报告

web开发实习报告一、引言在这篇实习报告中,我将详细介绍我的Web开发实习经历。
本次实习是我在某互联网公司的全栈开发团队中进行的,我将会分享我在设计、开发和测试方面的经验,以及从中所学到的技能和知识。
二、实习背景我实习的公司是一家专注于Web开发的创业公司,主要提供网站和应用程序的开发和维护服务。
实习期为三个月,目的是让我们学生能够实践学到的理论知识,并且在实际的开发项目中提升我们的技能。
三、实习内容1. 项目介绍我参与了一个名为“Online Shop”的项目。
这是一个电子商务平台,旨在为用户提供购物、下单和支付等功能。
作为全栈开发实习生,我负责设计和开发前后端的功能模块,并与团队成员合作解决bug和优化代码。
2. 设计阶段在项目开始之前,我们与产品经理和设计师进行了详细讨论,明确了项目的需求和目标。
然后,我们使用了UML图来设计整个系统的架构和数据流程。
这让我明白了一个良好的设计对于一个项目的重要性。
3. 前端开发我在项目中负责了前端开发的工作。
我使用HTML、CSS和JavaScript等技术来创建网页的结构、样式和交互功能。
我学会了使用Bootstrap框架来加速我的开发速度,并通过响应式设计使网站在不同设备上都有良好的展示效果。
4. 后端开发在后端开发方面,我们使用了Python作为主要开发语言,并使用了Django框架来搭建整个Web应用程序。
我负责处理用户的请求、与数据库交互和进行数据验证等工作。
我学到了如何优化数据库的查询性能,以及如何防止常见的安全漏洞。
5. 测试与部署在完成开发之后,我与团队成员一起进行了全面的测试,包括功能测试、性能测试和安全性测试等。
我们使用了版本控制工具来管理代码,并将应用程序部署到云服务器上,确保了网站的可用性和稳定性。
四、实习成果通过这次实习,我不仅获得了丰富的Web开发经验,还学到了许多与团队合作和项目管理相关的技能。
我不再把Web开发视为一种技术,而是把它作为实现商业目标的工具。
web实验报告实验总结

web实验报告实验总结前言本文是对web实验报告实验的总结文稿,旨在回顾实验过程和收获,同时提出改进建议。
本次实验是为了检验对web开发的掌握程度,并运用所学知识完成实验报告的编写。
正文实验目标•熟悉实验报告撰写的格式和内容要求•运用HTML、CSS等技术完成实验报告的实现实验过程1.学习实验报告撰写的格式和内容要求,了解实验任务及评分标准。
2.创建文件夹结构,确保实验报告主体在统一文件内,并引入相关素材(如样式表及图片)。
3.编写HTML结构,使用合适的标签和属性对实验报告进行语义化的构建。
4.运用CSS设置样式表,确保实验报告的美观呈现,同时保持整体风格的一致性。
5.完成实验报告的内容编写。
参考实验报告的要求,依次填写实验相关信息、背景介绍、实验过程、实验结果等内容。
6.对实验报告进行自查和校对,确保格式规范,避免拼写、语法等错误。
7.完成实验报告的文件命名,保存并备份。
实验收获•充分掌握了实验报告撰写的流程和要求,提高了自身的写作能力和交流表达能力。
•熟悉运用HTML和CSS技术完成实验报告的实现,加深了对web 开发的理解。
•锻炼了团队协作能力,与同学们相互交流,解决问题,共同完成实验任务。
改进建议•加强对实验报告撰写格式的讲解,提供更多实例,帮助学生更好地掌握实验报告的写作技巧。
•建议在实验过程中增加更多与web开发相关的实践环节,加深学生对web开发的理解和实践能力。
结尾通过本次web实验报告实验,我不仅进一步掌握了实验报告撰写的流程和要求,同时提高了自己的web开发能力。
通过实践与团队合作,我收获了宝贵的经验和知识。
期待今后能够运用所学知识,不断提升自己的创作水平。
实验报告模板(Web技术及应用)

华北电力大学实验报告||实验名称基于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功能:人才招聘系统。
WEB开发技术实验报告

实验一 JSP开发环境构建实验目的:了解动态页面技术及B/S系统掌握开发环境的构建理解Eclipse开发WEB应用实验内容:实训项目一:安装JDK并配置环境变量请阐述配置环境变量的方法:实训项目二:安装TOMCAT并配置修改端口号为8090问题一:如何测试TOMCAT是否已经成功启动?问题二:在浏览器地址栏输入什么地址可以访问到TOMCAT的测试页?请阐述配置修改端口号为8090基本实验步骤:实训项目三:应用Eclipse建立项目并浏览一个JSP页面请阐述应用Eclipse建立项目并浏览一个JSP页面基本实验步骤:实验心得:(遇到了哪些问题,如何解决的,有那些体会)实验二 JSP语法实验目的:了解JSP程序的组成元素掌握JSP中使用JAVA程序片段的方法实验内容:实训项目一:编写一个JSP页面输出26个小写英文字母表实训项目二:编写页面实现九九乘法表实训项目三:利用成员变量被所有客户共享这一性质,实现一个简单的计数器实训项目四:使用JAVA表达式输出系统当前时间实训项目五:编写程序和两个页面,在第一个页面中使用include动作标记动态包含文件,并向它传递一个矩形的长和宽,收到参数后,计算矩形的面积,并显示结果。
实训项目六:编写3个JSP页面:,和,将3个JSP文件保存在同一个WEB工程中,使用include动作标记加载和页面。
页面可以画一张表格,页面可以计算两个正整数的最大公约数。
当被加载时,获取页面include动作标记的param子标记提供的表格行数和列数,当被加载时,获取页面include动作标记的param子标记提供的两个正整数的值。
要求:上机编程完成上述实训项目,上机演示给教师检查,从中挑选三个程序的核心代码写在实训报告上实验核心代码:核心代码一:核心代码二:核心代码三:实验步骤:建立工程—编写程序—编译程序—调试、运行程序实验心得:实验三 JSP内置对象实验目的:了解JSP内置对象使用方法掌握JSP中常用内置对象的方法实验内容:实训项目一:编写一个登陆的表单页面实训项目二:编写页面实现九九乘法表实训项目三:利用成员变量被所有客户共享这一性质,实现一个简单的计数器实训项目四:使用JAVA表达式输出系统当前时间要求:编程完成上述实训项目,上机演示给教师检查,从中挑选两个程序的核心代码写在实训报告上实验核心代码:核心代码一:核心代码二:核心代码三:实验步骤:建立工程—编写程序—编译程序—调试、运行程序实验心得:。
网页开发实验报告册(3篇)

第1篇一、实验目的1. 熟悉网页开发的基本流程和工具。
2. 掌握HTML、CSS、JavaScript等网页开发技术。
3. 能够独立完成简单的网页设计、制作和调试。
4. 培养团队协作和项目管理的意识。
二、实验环境1. 操作系统:Windows 10/11 或 macOS2. 浏览器:Chrome、Firefox、Safari 或 Edge3. 开发工具:Sublime Text、Visual Studio Code 或其他文本编辑器4. 版本控制:Git三、实验内容1. HTML基础2. CSS样式表3. JavaScript编程4. 网页布局与样式5. 响应式网页设计6. 常用网页特效7. 网页表单验证8. 网页安全与性能优化9. 网页框架与库的使用四、实验步骤1. HTML基础- 创建一个简单的HTML页面- 标签的嵌套与属性的使用- 文本格式化、图片、链接、列表等标签的使用2. CSS样式表- 创建内部样式表和外部样式表- 选择器、属性、值、单位的使用- 布局、定位、盒子模型等样式3. JavaScript编程- 基本语法和变量、数据类型、运算符- 控制结构、函数、数组、对象等概念- 事件处理、DOM操作、表单验证等应用4. 网页布局与样式- 布局方式:浮动、定位、Flexbox、Grid等- 响应式布局:媒体查询、百分比、视口单位等- 伪元素、伪类、动画等样式效果5. 常用网页特效- 弹窗、滚动条、轮播图、下拉菜单等特效- 框架与库的使用:jQuery、Bootstrap等6. 网页表单验证- HTML5表单验证属性:type、pattern等- JavaScript验证:正则表达式、自定义验证函数等7. 网页安全与性能优化- 常见安全问题:跨站脚本攻击(XSS)、跨站请求伪造(CSRF)等- 代码优化:压缩、合并、懒加载等- 图片优化:压缩、懒加载、CDN加速等8. 网页框架与库的使用- 框架:Vue、React、Angular等- 库:jQuery、Bootstrap、Font Awesome等五、实验成果1. 完成实验报告册,包括实验目的、环境、内容、步骤、成果等。
wed实训报告

wed实训报告一、引言近年来,随着互联网的快速发展,网页开发的需求也越来越大。
为了满足市场的需求,我参加了一次wed实训课程。
在这次实训中,我学到了许多关于网页开发的技巧和知识,并且通过实际操作,提升了自己的实践能力。
本文将详细介绍wed实训的过程与收获。
二、实训过程1. 项目需求分析在实训开始前,我们组织了一次会议,详细讨论了项目的需求和目标。
我们需要开发一个在线学习平台的网页,该网页提供各种课程的在线学习资源,并且具有用户注册、登录、评论等功能。
通过对需求的分析,我们明确了项目的规模和功能要求。
2. 网页设计与布局在完成需求分析后,我们开始进行网页的设计与布局工作。
我们使用了HTML和CSS技术来构建网页的结构和样式。
通过设计美观的界面和合理的布局,我们希望能够吸引更多的用户使用我们的网页。
3. 功能实现与调试在网页的设计与布局完成后,我们开始实现各项功能。
我们采用JavaScript技术来实现用户注册、登录、评论等功能。
通过调试和测试,我们保证了网页的功能完整,能够正常运行。
4. 网页优化与性能测试为了提高网页的加载速度和用户体验,我们对网页进行了优化。
我们优化了网页的代码结构,压缩了图片的大小,并且进行了性能测试,以确保网页在低配置设备上也能够流畅运行。
5. 网页上线与用户反馈在所有工作完成后,我们将网页正式上线。
我们提供了一个用户反馈渠道,希望用户能够给出宝贵的意见和建议。
通过用户的反馈,我们可以得知网页的优点和不足之处,进一步改进网页的功能和界面。
三、实训收获1. 技术能力的提升通过这次wed实训,我学到了许多关于网页开发的技术和知识。
我熟练掌握了HTML、CSS和JavaScript的使用,能够独立完成网页的设计与开发工作。
在实训中,我还学习了一些网页优化和性能测试的技巧,提高了自己的技术水平。
2. 团队合作的经验在实训过程中,我与团队成员紧密合作,共同完成了这个项目。
通过与团队成员的交流与协作,我学会了团队合作的重要性,能够更好地与他人合作,共同解决问题。
Web基础实训报告

Web基础实训报告目录一、实训简介 (2)二、实训内容 (2)1、HTML (2)2、CSS (2)3、JavaScript (3)4、jQuery (3)5、jQuery easyUI (3)6、jQuery easyUI的基本插件 (3)(1)基本插件 (3)(2)布局管理器 (6)(3)菜单和按钮 (6)(4)表单 (6)(5)窗口 (7)(6)数据表格和树形菜单 (7)三、实训过程 (7)1、实训 (7)(1)内容 (7)(2)目的 (7)2、实践 (8)(1)制定网站主题 (8)(2)网站简介 (8)(3)收集素材 (8)(4)网站规划 (8)(5)网站制作 (8)(6)网站测试 (8)3、编写文档 (9)四、实训总结 (9)一、实训简介Web本意是蜘蛛网和网的意思。
在这个遍布网络的世界里,Web网络成为不可或缺并且极其重要的一部分。
Web功能强大,其内容包括存储在世界各地Internet计算机中的大量文档的集合。
Internet将海量的信息以某种关联的文档形式组织在一起,每一个文档将会以主页的形式展现,这些主页是一种超文本信息,通过超链接进行连接。
Web标准并不是一个单一的标准,而是一个系列的标准的集合。
Web标准中具有代表性的几种语言有:XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM 文档对象模型、JavaScript脚本程序设计语言等。
本次实训主要是学习jQurey,它是一个优秀的JavaScript框架,是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery 使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
本次实训的目的是通过对JavaScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML基础上,使用JavaScript开发交互式动态Web网页。
web实验报告要点

<html >
<meta charset="utf-8">
<head>
<script language="javascript">
function check(){
var show = document.getElementById('username').value;
实验题目
HTML语言
1.实验目的和要求
目的:
1.掌握常用的HTML语言标记;
2.利用文本编辑器建立HTML文档,制作简单网页。
要求:
1.独立完成实验。
2.书写实验报告书。
二.实验内容
1.在文本编辑器“记事本”中输入如下的HTML代码程序,以文件名sy1.html保存,并在浏览器中运行。(请仔细阅读下列程序语句,理解每条语句的作用)
<tr><td>性别:</td>
<td><input id="m" name="sex" type="radio" size="20">男<input id="" name="sex" type="radio" size="20">女</td></tr>
<tr><td>年龄:</td>
<td><select name="age" >
WEB技术开发实验报告

新建一个项目
点击 next,选择模板样式 完成创建后,启动下载需要的组件。所以建议【联网】
最后结果如图,项目文件夹默认有着几个
系统需求分析
为实现登录和注册。设计一个包,包中包含 User 类。User 中有账号,密码, 昵称三类属性。
设计登录页面,输入账号和密码实现登录。当输入信息正确时,显示成功, 否则失败。
public function up() {
Schema::create('users', function($table) {
$table->increments('id'); $table->string('email')->unique(); $table->string('name'); $table->timestamps(); }); } public function down() {
} else {
request.setAttribute("message", "login success"); request.getRequestDispatcher("/result.jsp").forward(request,
response); } C,结果截图 1,成功时
2,失败时
Php 写 laravel 过程
<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>
web开发实习报告

web开发实习报告web开发实习报告web开发实习报告1一、实习目的1、让学生了解网站的制作流程和基本技法、Dreamweaver的使用2、掌握利用IIS完成站点创建,学会站点的规划与创建,能自己创建个人网站和简单的企业网站。
3、掌握利用SQL Server的企业管理器建立数据库和数据库表,巩固数据库基本命令的使用。
4、掌握利用ASP访问与操作数据库的各种常用的功能及实现方法。
了解动态网页的制作技术,掌握与数据库的链接及简单的数据处理。
培训学生的动手能力、综合应用能力和团队合作能力。
二、实习要求1按时、按地参加实习,遵守实习纪律,遵守实习场地的制度;爱护实习场地的所有实习设备,讲究公共卫生;2、做好实习笔记和实习记载,实掌握实习的每项内容;3、认真填写好实习报告、实习总结,实习完成统一交实习老师。
三、实习形式1、前一周完成ASP、SQL Server(或Access)以及DeramweacerMXXX的学习,要及时完成学习任务。
2、后一两周进行网站综合开发实训,可分组进行。
四、实验内容1.网站结构示意图打开我的首页,然后点击zhufu按钮进入按钮界面,所示newyears,进入页面后有一首欢快的背景音乐,在祝福页面里,你可以向你的好友发表你的祝福,你可以对祝福查看和修改,并且还可以看到历史记录,页面右上角可以返回首页。
回到主页再点击留言按钮,进入下一页面,你可以发表留言,不需要审核也能发表。
由于时间仓促,网站暂时到此,网站还在积极开设建设中,敬请期待你的到来五、实训结果实验基本成功。
实训是培养学生综合运用所学知识,发现,提出,分析和解决实际问题,通过上机练习来培养我们自身实践能力,这次网页布局训练就是其中之一。
这次的网页设计与制作让我收获颇丰。
的确,从听老师解说到开始自己制作,从理论到实践,在这几节课的实操时间里,过程中不仅巩固了以前所学过的知识,而且学到了很多在书本上所没有学到过的知识。
使我懂得了理论与实际相结合是很重要的,只有从理论中得出结论,才能真正为掌握技术,从而提高自己的实际动手能力和独立思考的能力。
WEB开发与运行环境的搭建实验报告

课程名称网站设计与WEB编程实验名称 WEB开发与运行环境的搭建一、实验目的1.掌握Visual Studio 2010的安装过程。
2.熟悉.NET集成开发环境。
3.掌握IIS的安装与配置方法。
4.掌握C#语言。
5.掌握B/S程序开发过程。
二、实验设备PC机一台。
三、实验内容1.建立个人主页,命名为Index.html。
内容可参考如下:<html><title>Mypage</title><body>Hello!</br>This is my personal page. </br></body></html>2.IIS的安装与配置,将个人页主页Index.aspx中发布,并在局域网环境中访问。
3.用多种分支结构完成以下算式。
y=x X<500x+10 500≤x<1000 x+20 1000≤x<2000 x+30 2000≤x<5000 x+40 5000≤x4.用循环结构计算n!。
四、实验要求1.掌握网页的基本结构,设计出第一个Web页面。
2.安装IIS。
3.配置IIS。
4.将设计的第一个WEB页面进行发布,并在局域网环境中访问网站。
5.采用C#语言设计完成实验内容3和4。
合理选择输入输出控件和控制按钮,对界面进行布局,使界面美观、操作方便。
对程序进行连续运行、单步运行和设断点运行,熟悉程序调试方法和查错方法。
对输入数据格式错或运算结果超范围的情况要有相应的提示信息。
6.完成实验报告。
五、实验内容1.建立个人主页,使用给出的HTML代码编写个人主页2.IIS的安装3.发布个人主页4.发布后使用局域网访问的结果采用C#语言设计完成多分支运算和阶乘,合理选择输入输出控件和控制按钮,对界面进行布局,使界面美观、操作方便测试结果X<500500<X<1000X>5000计算阶乘n!测试结果。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Web技术导论课程设计报告组长学号 110703xx 姓名 xxx同组学号 110703xx 姓名 xxx同组学号 110703xx 姓名 xxx报告完成日期 2013.12.16一、题目要求实现一个学生信息管理系统,要求功能如下:1.设计注册界面和用户查询界面;2.在注册界面,USER框采用AJAX方式验证,密码框采用JS方式验证,并含有email字段;3.表单数据提交到JSP页面后保存在服务器端的文件或数据库中;4.提供查询输入框和按钮,能够根据用户名查询到以存储的信息并返回显示在查询页面中;提供三种查询方式1.2.3.⎧⎪⎨⎪⎩通配符查询精确匹配显示所有;5.提供删除按钮,并提供复选框批量管理学生信息;6.用session控制查询界面、信息返回页面必须登录后才能使用,否则自动跳转回登陆界面;二、开发环境MyEclipse2013+Tomcat 6.x+Java jdk 1.7三、程序界面1.登录界面:2.注册界面:3.查询界面:4.学生名单界面5.删除界面四、详细设计1.login.html——用户登录页面:功能及其实现:1)登录:用户名密码提交到checkLogin.jsp进行校验;<form method="post" action="checkLogin.jsp" ><input type="submit" value="登录" />2)注册:在本窗口跳转到register.html。
<input type="button" value="注册" onclick="window.open('register.html','_self')" />2.register.html——注册页面:功能及其实现:1)检测用户名是否存在(AJAX方式),调用checkNode(this)函数,信息返回显示在usernameCheckDiv中:<input type="text"name="username"id="username"onblur="Checker.checkNode(this)"/><div id="usernameCheckDiv"class="warning">请输入用户名。
</div>2)提交注册信息到register.jsp处理。
(详见register.jsp):<form method="post" action="register.jsp" ><input type="submit" value="注册" />3.register.jsp——注册信息保存:功能及其实现:1)保存用户信息到D:\student.txt中:if (name!="" && email!="" && password!= "" && password2!= "" && password.equals(password2))//条件下进行写入RandomAccessFile random_access=new RandomAccessFile("D:\\Student.txt","rw");//创建流random_access.seek(random_access.length());random_access.writeBytes(name+" "+password+" "+email+"\r\n");//写入字符串random_access.close();2)注册控制:①、信息不完整不保存,提示返回修改②、密码不一致不保存,提示返回修改:<%else if (name =="" || email =="" || password == "" || password2 == "") {%><center><h1>注册信息不完整!</h1></center><center>请点击后退按钮修改</center><% } else {%><center><h1>两遍密码不一致!</h1></center><center>请点击后退按钮修改</center><% }%>4.checker.js:功能及其实现:1)checkNode(this):①调用creatXmlHttpRequest()函数动态创建XmlHttpRequest对象,用于与服务器进行一步通信;②Send()将onblur的对象名和value传给checker.jsp进行校重;③将onreadystatechange与一个函数绑定,当readyState == 4的时候调用showInfo()函数返回服务器信息到register.html中对应的usernameCheckDiv中2)checkPassword:以js方式判断两密码是否相同。
3)showInfo()与creatXmlHttpRequest()功能略。
5.checker.jsp:功能及其实现:1)与客户端异步通信,获取send过来的参数,建立返回信息头;2)调用hasSameValue参数,按行读取文件,遍历所有用户名字段,与send过来的参数比较判重,建立返回信息尾,以及校验头;BufferedReader br=new BufferedReader(new InputStreamReader(newFileInputStream("D:\\Student.txt"),"UTF-8"));String str = null;while((str =br.readLine()) != null) {String[] str1 = new String[10];//创建一个字符串数组,用来存放分割的字符串str1 = str.split(" ");String me_user=str1[0];String my_email=str1[2];if(name.equals("username")&&value.equals(me_user)) {result=true;break;}3)out.print()返回信息if (hasSameValue(name, value)) {out.print("0该" + info + "已存在,请更换" + info + "。
");} else {out.print("1该" + info + "可正常使用。
");}6.checkLogin.jsp:功能及其实现:1)由login.html的登录触发,按行读取文件,遍历所有用户名字段以及密码字段,寻找用户名和密码是否同时匹配,匹配则将用户名存于session中,用于控制登录状态,并跳转到search.jsp 不匹配则返回登录失败信息:if (hasSameValue(name, p)) {session.setAttribute("username",name);response.sendRedirect("search.jsp");} else {out.println("<center><h1>登录失败!</h1><br/><a href='login.html'>点此返回登陆页面</a></center>");}7.search.jsp功能及其实现:1)取session中username对象,如果值为空,说明未登录,并重定向到login.html中;<%out.clear();String name=(String)session.getAttribute("username");if(name ==null){session.invalidate();response.sendRedirect("login.html");}%>2)不为空则可以以三种方式进行查询:①通配符查询:if(way_of_search_post.equals("1") && me_user.substring(0,1).equals(name_post)){%><tr><td><%=i %></td><td><%=me_user %></td><td><%=my_password %></td><td><%=my_email %></td></tr><%i++;}②精确匹配:if(way_of_search_post.equals("2") && me_user.equals(name_post)){%><tr><td><%=i %></td><td><%=me_user %></td><td><%=my_password %></td><td><%=my_email %></td></tr><%i++;}③显示所有:<input type="button" value="学生名单" onclick="window.open('display.jsp','_self')">8.display.jsp功能及其实现:1)取session中username对象,如果值为空,说明未登录,并重定向到login.html中;<%out.clear();String name=(String)session.getAttribute("username");if(name ==null){session.invalidate();response.sendRedirect("login.html");}%>2)遍历文件并显示所有信息3)提供复选框供批量删除使用,复选框以学生name命名,所以获得的复选框的值即为学生的name,保存在session中,点击批量删除,转入delete.jsp进行删除处理。