课程编号 :B Web 技术与应用实验报告姓名薛旗学号班级软信指导教师杨巍实验名称 Web 技术与应用实验报告开设学期第一学期开设时间第 15 周第 16 周报告日期

Size: px

Start display at page:

Download "课程编号 :B Web 技术与应用实验报告姓名薛旗学号班级软信指导教师杨巍实验名称 Web 技术与应用实验报告开设学期第一学期开设时间第 15 周第 16 周报告日期"

坊推宓
4 years ago
Views:

课程编号 :B080206050 Web 技术与应用实验报告姓名薛旗学号 20155362 班级软信 -1503 指导教师杨巍实验名称 Web

1 课程编号 :B Web 技术与应用实验报告姓名薛旗学号班级软信指导教师杨巍实验名称 Web 技术与应用实验报告开设学期第一学期开设时间第 15 周第 16 周报告日期评定成绩评定人评定日期东北大学软件学院

实验 1:Web 程序运行环境配置 (2 学时 ) 实验目的 : 掌握 Web 开发环境的基本配置过程 ; 掌握使用 sublime text 开发前台页面 ; 掌握 wampserver 集成开发环境的配置和使用实验内容 : 完成 Web 集成开发环境的配置, 在 wampserver 集成开发环境上能够实现

2 实验 1:Web 程序运行环境配置 (2 学时 ) 实验目的 : 掌握 Web 开发环境的基本配置过程 ; 掌握使用 sublime text 开发前台页面 ; 掌握 wampserver 集成开发环境的配置和使用实验内容 : 完成 Web 集成开发环境的配置, 在 wampserver 集成开发环境上能够实现 Web 服务器的配置和运行 ;web 项目的部署 ; 各种 Web 页面的开发实验步骤 : 一 sublime text 相关 1. 下载并安装 Sublime Text 2. 安装 Package Control 插件 3. 安装 Emmet ConvertToUTF8 BrackerHighlighter 等插件

4 4. 安装 SublimeServer 并设置 a. 安装 b. 设置 c. 启动服务并测试

5 二 WampServer 相关 1. 下载 WampServer 并安装 2. 将 PHP 程序设置到环境变量中, 在任意目录下都可执行 PHP

6 3. 创建 PHP 编译系统 4. 使用 Ctrl+B 编译.php 文件 5. 启动 WampServer 服务, 为后续实验做准备

8 实验 : 实现注册和登录功能 (8 学时 ) 实验目的 : 掌握页面设计的基本技巧 ; 掌握使用 HTML 语言制作静态页面的技术 ; 掌握页面加载 CSS 的三种方式 ; 掌握 CSS 美化页面的技巧 ; 了解运用 CSS 统一站点风格的技巧 ; 熟悉 JavaScript 脚本语言的语法 ; 理解事件浏览器对象层次和 DOM 模型学会用 CSS+DIV 对页面进行布局掌握 PHP 数据库编程技术 ; 实验内容 : (1) 自己设计页面风格 (2) 实现用户注册功能 (3) 实现用户登录功能 (4) 注意对表单的验证和用户的会话跟踪实验结果 : (1) 请给出页面的跳转流程共有四个页面 : 登陆页面 (login.php), 注册页面 (register.php), 欢迎页面 (success.php), 注销页面 (loginout,php) 登陆页面 : 点击注册进入注册页面, 点击登陆按钮, 若登陆成功跳转至欢迎页面注册页面 : 点击登陆, 返回登陆页面, 点击注册按钮, 若注册成功, 跳转至登陆页面欢迎页面 : 点击注销, 跳转至注销页面注销页面 : 点击登陆, 跳转至登陆页面 ( 流程图见下页 )

9 登陆系统注册否是否注册是登陆是跳转至注册页面填写注册信息用户名是否已被注册否必要注册信息是否填写正确注册成功是返回登陆界面否 (2) 请给出数据库的设计数据库类型 :MySQL 保持首页保持注销页面否否否是输入账号密码账号密码是否输入正确进入首页是否注销是显示注销信息是否重新登陆数据库名 :test 数据表 :user 表设计结构 : 字段类型长度说明是 id int 20 主键 username varchar 100 用户名 password varchar 100 密码

10 phone varchar 100 联系电话 address varchar 100 邮箱地址 sex varchar 10 性别 (3) 请给出设计的页面风格 a. 初始登陆界面 (login.php) b. 初始注册界面 (register.php)

11 c. 必要注册信息未填写, 提示错误信息 d. 填写正确的注册信息

12 e. 注册成功, 提示注册成功, 确定后完成自动跳转

13 f. 数据库表中多了一条注册信息 g. 进入登陆界面, 若没有输入账号或密码, 提示用户输入信息 h. 若输入错误的账号密码, 提示账号密码错误 i. 更正密码, 重新输入, 则自动跳转至首页

14 j. 登陆成功, 进入欢迎页面 (success.php) 在欢迎页面点击注销, 则会进入注销页面页面 k. 点击注销, 进入注销页面 (loginout.php) 注销页面点击登陆, 则会进入登陆

15 l. 注册界面, 若注册相同的用户, 则提示用户名已存在 m. 只需要填写必要的注册信息即可完成注册以下是数据库表中多条注册信息 (4) 源代码 login.php 1 <?php 2 session_start(); 3?>

16 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="utf-8"> 8 <title>document</title> 9 <style> 10.button{ 11 background-color:#00a2ff; 12 color:#ffffff; 13 } 14 </style> 15 <style type="text/css"> 16 form{ 17 width:250px; 18 background-color:#eeeeee; 19 margin-left:470px; 20 margin-top:30px; 21 padding:30px; 22 } 23 </style> 24 </head> 25 <body background="neu.jpg" style="text-align:center"> 26 <form action = "login.php" method = "post" style="text-align:left"> 27 用户名 :<input type = "text" name = "username" /><br/> 28 密码 :<input type = "password" name = "password" /><br/><br/> <input type = "submit" value = " 登陆 " class = "button"/> <input type = "reset" value = " 重置 " class = "button"><br/><br/> 33 没有账户? 34 <a href = "register.php"> 注册 </a> 35 </form> 36 <?php 37 if(isset($_post["username"])&&isset($_post["password"])){ 38 $user = $_POST["username"]; 39 $psw=$_post["password"]; 40 if($user == "" $psw == ""){ 41 echo "<script>alert(' 请输入用户名或密码!'); history.go(-1);</script>"; 42 }else{ 43 $link = mysqli_connect("localhost","root",""); 44 mysqli_select_db($link,"test"); 45 mysqli_query($link,"set names 'gbk'"); 46 $sql = "select username,password from user where username = '$_POST[username]' and password = '$_POST[password]'";

17 47 $result = mysqli_query($link, $sql); 48 $num = mysqli_num_rows($result); 49 if($num) 50 { 51 $row = mysqli_fetch_array($result); // 将数据以索引方式储存在数组中 52 echo $row[0]; 53 $_SESSION["userid"]=$user; 54 echo "<meta http-equiv='refresh' content='2;url=success.php'>"; 55 echo "<h3> 用户登录成功, 两秒后跳转到欢迎页面!</h3>"; 56 echo "<h3> 如果没有跳转, 请按 <a href = 'success.php'> 这里 </a></h3>"; 57 }else{ 58 echo "<h3> 错误的用户名或密码!</h3>"; 59 } 60 } 61 } 62?> 63 </body> 64 </html> register.php 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>document</title> 6 <style> 7.error{color:#FF0000;} 8 </style> 9 <style> 10.button{ 11 background-color:#00a2ff; 12 color:#ffffff; 13 } 14 </style> 15 <style type="text/css"> 16 form{ 17 width:250px; 18 background-color:#eeeeee; 19 margin-left:470px; 20 margin-top:30px; 21 padding:30px; 22 }

18 23 </style> 24 </head> 25 <body background="star.jpg" style="text-align:center"> 26 <form action="register.php" method="post" style="text-align:left"> 27 <p><span class = "error">* 必填项 </span></p> 28 用户名 : <input type="text" name="username"/><span class = "error">*</span><br/><br/> 29 密码 : <input type="password" name="password"/><span class = "error">*</span><br/><br/> 30 确认密码 : <input type="password" name="confirm"/><span class = "error">*</span><br/><br/> 31 联系方式 : <input type="text" name="phone"/><br/><br/> 32 邮箱地址 : <input type="text" name="address"/><br/><br/> 33 性别 : <input type = "radio" name = "gender" value = "male" checked> 男 34 <input type = "radio" name = "gender" value = "female"> 女 <span class = "error">*</span><br/><br/> <input type="submit" name="submit" value=" 注册 " class = "button"/> <input type = "reset" value = " 重置 " class = "button"><br/><br/> 39 已有账户? 40 <a href = "login.php"> 登陆 </a> 41 </form> 42 <?php 43 if(isset($_post["submit"]) && $_POST["Submit"] == " 注册 "){ 44 $user = $_POST["username"]; 45 $psw = $_POST["password"]; 46 $psw_confirm = $_POST["confirm"]; 47 if($user == "" $psw == "" $psw_confirm == ""){ 48 echo "<script>alert(' 请确认必填信息完整性!'); history.go(-1);</script>"; 49 } 50 else{ 51 if($psw == $psw_confirm) { 52 $link = mysqli_connect("localhost","root",""); 53 mysqli_select_db($link,"test"); 54 mysqli_query($link, "set names 'gdk'"); 55 $sql = "select username from user where username = '$_POST[username]'"; 56 $result = mysqli_query($link, $sql); 57 $num = mysqli_num_rows($result); 58 if($num){ 59 echo "<script>alert(' 用户名已存在 '); history.go(-1);</script>"; 60 } 61 else{ 62 $sql_insert = "insert into user (username,password,sex,phone,address) values('$_post[username]','$_post[password]','$_post[gender]','$_post[phone]','$_post[address]')"; 63 $res_insert = mysqli_query($link,$sql_insert);

19 64 if($res_insert){ 65 echo "<script>alert(' 注册成功!');</script>"; 66 echo "<meta http-equiv='refresh' content='2;url=login.php'>"; 67 echo "<h3> 用户注册成功, 两秒后跳转到登陆页面!</h3>"; 68 echo "<h3> 如果没有跳转, 请按 <a href = 'login.php'> 这里 </a></h3>"; 69 } 70 else{ 71 echo "<script>alert(' 系统繁忙, 请稍候!'); history.go(-1);</script>"; 72 } 73 } 74 } 75 else{ 76 echo "<script>alert(' 密码不一致!'); history.go(-1);</script>"; 77 } 78 } 79 } 80?> 81 </body> 82 </html> 1 <?php success.php 2 session_start(); 3?> 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="utf-8"> 8 <title>document</title> 9 </head> 10 <body background="night.jpg" style="text-align:center"> 11 <?php 12 if(isset($_session["userid"])){ 13 $userid = $_SESSION["userid"]; 14 echo "<h3> 欢迎 ".$userid; 15 echo " 光临本系统,<a href = 'loginout.php'> 注销 </a>! </h3>"; 16 }else{ 17 echo "<h3> 请先进行系统的 <a href = 'login.php'> 登陆 </a>! </h3>"; 18 } 19?> 20 </body> 21 </html>

20 loginout.php 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>document</title> 6 </head> 7 <body background="timg.jpg" style="text-align:center"> 8 <?php 9 if(isset($_session["userid"])){ 10 session_unset(); 11 session_destroy(); 12 echo "<meta http-equiv='refresh' content='10;url=login.php'>"; 13 echo "<h3> 您已经成功退出本系统, 两秒后跳回首页!</h3>"; 14 echo "<h3> 如果没有跳转, 请按 <a href='login.php'> 这里 </a></h3>"; 15 }else{ 16 echo "<h3> 请先进行系统的 <a href = 'login.php'> 登陆 </a>!</h3>"; 17 } 18?> 19 </body> 20 </html> 实验总结 : 通过本次实验课程, 加深了我对课堂知识的理解, 提高了自己的实践能力, 培养了极大的兴趣, 总的来说获益匪浅在实验过程中, 自主独立的不断的发现问题, 解决问题, 或者通过书籍查询资料, 或者去网上寻找解决方案, 都在实践项目中锻炼了自己的信息获取能力及解决问题的能力在本次实践中, 我掌握了页面设计的基本技巧, 掌握了 HTML 语言制作静态页面的技术和 CSS 美化页面的技巧, 熟悉了 JavaScript 脚本语言的语法, 还学会了 PHP 数据库编程技术, 对数据库知识有了直观深入的了解在本次实验的同时, 我租借了一台云服务器, 结合课堂知识, 通过 Apache+PHP+MySQL+WordPress, 架构了我的个人博客 ( 在野程序猿 : 在实践中真正体会到了学习的乐趣, 将理论应用于实践, 收获颇丰实践出真知, 希望这样的实验课能够越来越多, 丰富自己的知识储备, 提高自己的综合能力素养, 为以后的发展铺路

21 教师评价表格 : 考核标准得分 (1) 认真记录实验数据, 原理及实验结果分析准确 (40%); (2) 实验过程中, 具有严谨的学习态度和认真踏实一丝不苟的科学作风, 出勤效果好 (40%); (3) 所做实验总结完整 (10%); (4) 实验报告规范 (10%) 总分

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

课程编号 :B Web 技术与应用 实验报告 姓名薛旗学号 班级软信 指导教师杨巍 实验名称 Web 技术与应用实验报告 开设学期 第一学期 开设时间第 15 周 第 16 周 报告日期

课程编号 :B Web 技术与应用实验报告姓名薛旗学号班级软信指导教师杨巍实验名称 Web 技术与应用实验报告开设学期第一学期开设时间第 15 周第 16 周报告日期