目 录
- 前端会议室查看初始化代码(index.html) 5
- 前段会议室查看初始化代码的后端交互代码(init.php) 5
- 初始化后填充已被预定的房间代码(index.html) 7
- 添加房间后端模块代码(add.php) 8
- 退订房间前端代码模块(order.html) 10
- 查询预定记录、退订房间后端代码模块(query.php) 10
- 管理房间的前端模块(admin.html) 11
- 登录窗口 15
- 日期选择 15
- 根据需求选用时间段 15
- 管理界面，实现对数据库会议楼的维护 16
- mysql数据库页面 17
一、实验目的
通过本课程，进一步复习、巩固所学的数据结构与算法、计算机系统基础、密码学基础、社会科学中的计算思维方法等课程的基本概念、技术原理、软件设计的方法与技术等，初步掌握软件设计的流程与基本方法，能够运用C/C++、Java、Python等至少一种编程语言进行软件开发。
二、实验内容
会议室管理与预约系统：设计与开发一个会议室预订与管理系统，功能包括但不限于：支持管理员登录功能、 支持对会议室资源进行管理，会议室资源包括会议室名称、容纳人数等；支持对会议室进行预约管理，本文转载自http://www.biyezuopin.vip/onews.asp?id=14785从满足需求的可用会议室资源中给出预约建议，能够对会议室 进行预约/取消预约
三、实验工具和环境
实验工具：visual studio code、phpstudy、chrome
实验环境：Windows10、LINUX:apache、msql、php
使用语言：HTML、JavaScript、PHP
<!-- --><!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>会议室管理系统</title> <link rel="stylesheet" href="css/dcalendar.picker.css"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <header> <div class="container" id="top"> <div class="jumbotron"> <h1>会议室管理系统</h1> <h4>Conference room management system</h4> <br> <br> <div class="row"> <p><a class="btn btn-primary btn-lg" href="#" role="button" id="welcome_span">Welcome!</a></p> <h4><a class="pull-right" href="order.html" role="button" id="order_to">已预定</a></h4> <h4><a class="pull-right" href="login.html" role="button">登出</a></h4> </div> </div> </div> <div class="container"> <h4> <ol class="breadcrumb"> <li class="active">主界面</li> <li><a href="admin.html?building=please_select_building" target="_blank">管理</a></li> </ol> </h4> </div> </header> <bodyer> <!-- 时间控件 --> <div class="container" > <div class="panel panel-primary" class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>日期<h5> Date</h5></h3> </div> </div> <div class="conatainer"> <div class="row"> <div class="col-md-2"> <div class="input-group"> <input type="text" class="form-control" id="datepicker" name="tmp" placeholder="Search for..." > </div><!-- /input-group --> </div> <div> <button type="button" class="btn btn-info" id="input_btn">开始查询</button> </div> </div> </div> <br> </div> </div> </div><!-- 时间控件 --> <!-- 会议室主要控件--> <div class="container" > <div class="panel panel-primary " class="container-fluid" > <!-- 会议室标题 --> <div class="row"> <div class="container"> <div class="col-md-12"><h3>会议室使用情况<h5>Usage of conference room</h5></h3></div> </div> </div><!-- 会议室标题 --> <!-- 存放会议室属性的所有内容 --> <div id="all_panel" ></div> </div> </div> <!-- 模态框（Modal） 该模态框主要是为了选中合适的房间，选中完之后通过提交按钮通过ajax添加到数据库中--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <!--模态框正文内容 --> <div class="container"><h4><div id="add_room"></div></h4></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" > 关闭 </button> <button type="button" class="btn btn-primary" id="add_room_btn"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </bodyer> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/dcalendar.picker.js"></script> </body></html><script> var select_time;//该变量是选中的日期 var const_add_building_nums='';//该变量是模态框选中的建筑号 var const_add_room_nums='';//该变量是选中的房间号 //该函数是获得当前日期的统一格式 function getDateStr(date) { var month = date.getMonth() + 1; var strDate = date.getFullYear() + '-' + month + '-' + date.getDate(); return strDate; } $(document).ready(function() { //拿到跳转get请求的参数 var paras = location.search; //search获得地址中的参数，内容为'?itemId=12' var result = paras.match(/[^\?&]*=[^&]*/g); //match是字符串中符合的字段一个一个取出来，result中的值为['login=xx','table=admin'] paras = {}; //让paras变成没有内容的json对象 for(i in result){ var temp = result[i].split('='); //split()将一个字符串分解成一个数组,两次遍历result中的值分别为['itemId','xx'] paras[temp[0]] = temp[1]; } //修改欢迎标签 var username = paras.username; //根据参数名"itemId"，获取参数值 $('#welcome_span').html("WELCOME! 用户名："+username+"！"); //将已预定的链接参数修改 $('#order_to').attr('href','order.html?username='+username); $("#top").css({"margin-bottom":"-30px"}); $('#datepicker').dcalendarpicker({format: 'yyyy-mm-dd'}).on('datechanged', function(e){}); $('#input_btn').click(function() { select_time=$('#datepicker').val(); //先判断选择时间是否符合标准 if (select_time=="") { alert("请选择合适的日期！！！"); return; } var d = new Date(); var tmp=new Date(select_time); if (tmp<d) { alert("请选择合适的日期！！！"); return; } //先遍历所有的房间 $.post("init.php", { name:"init", },function(data,status) { //防止重复点清空 $('#all_panel').html(''); var parsedJson = jQuery.parseJSON(data); var building=parsedJson[0].building; var pre_first="+building+" >"+"楼号:"+building+"
"; $('#all_panel').append(pre_first); for(var i =0;i<parsedJson.length;i=i+2) { if(building!=parsedJson[i].building) { building=parsedJson[i].building; var pre_first="+building+" >"+"楼号:"+building+"
"; $('#all_panel').append(pre_first); } //追加教室 first 门牌号 //onclick放在最后面 根据数据库请求过来的数据，将数据分解成各个属性框中 var first="+building+"_room_"+parsedJson[i].ID+"\">"+""+parsedJson[i].ID+"
"; first=first+""+"容量"+parsedJson[i].capacity+"/"+parsedJson[i].attribute; first=first+" 上午空闲 下午空闲 晚上空闲
+building+"_room_"+parsedJson[i+1].ID+"\">"+""+parsedJson[i+1].ID+"
"; first=first=first+""+"容量"+parsedJson[i+1].capacity+"/"+parsedJson[i+1].attribute; first=first+" 上午空闲 下午空闲 晚上空闲
"; $('#'+building).append(first); } //通过请求busy.php脚本将所有数据库中在该时间段出现的时间标签置红 $.post("busy.php", { time:select_time, }, function(data,status) { console.log("busy测试成功"+select_time); var parsedJson = jQuery.parseJSON(data); for(var i =0;i<parsedJson.length;i++) { var id_building='#'+parsedJson[i].building; var id_room=id_building+'_room_'+parsedJson[i].roomnum; var using_time_num=parsedJson[i].usingtime; var sql_username=parsedJson[i].username; var id_using_time; if(using_time_num==1) { id_using_time="#morning"; }else if(using_time_num==2) { id_using_time="#afternoon"; }else { id_using_time="#evening"; } if(sql_username==username) { $(id_room).children().find(id_using_time).html("已订"); $(id_room).children().find(id_using_time).removeClass("label-success").addClass("label-warning"); }else { $(id_room).children().find(id_using_time).html("繁忙"); $(id_room).children().find(id_using_time).removeClass("label-success").addClass("label-danger"); } console.log("id_room:"+id_room+"id_using_time:"+id_using_time); //如果三个标签都为繁忙 那么整个格子变红 并且按钮为禁用 if(($(id_room).children().find('#morning').hasClass("label-danger")||$(id_room).children().find('#morning').hasClass("label-warning"))&&($(id_room).children().find('#afternoon').hasClass("label-danger")||$(id_room).children().find('#afternoon').hasClass("label-warning"))&&($(id_room).children().find('#evening').hasClass("label-danger")||$(id_room).children().find('#evening').hasClass("label-warning"))) { $(id_room).removeClass("panel-success").addClass("panel-danger"); $(id_room).children().find('.btn').removeClass("btn-primary").addClass("btn-danger"); $(id_room).children().find('.btn').html("已满"); } } }); }); }); //模态框选中后 按钮添加到数据库 $('#add_room_btn').click(function() { var checked = []; var checked_str=''; $("input:checkbox:checked").each(function() { checked.push($(this).val()); checked_str+=$(this).val()+","; }); $.post("add.php", { //date是日期 time是时间 username:username, date:select_time, building:const_add_building_nums, room:const_add_room_nums, time:checked_str, }, function(data) { //关闭模态框并且刷新网页 $('#myModal').modal('hide'); $('#input_btn').click(); }); }); }); //选中选用按钮调用的函数 function click_func(elem) { $('#add_room_btn').show(); $('#add_room').html(''); $('#myModalLabel').html(elem.id); //分割选中的字符串数组 var tmp=Array(); var id_room='#'+elem.id; //如果flag=0， 代表这个组已经满了 var flag=0; tmp=elem.id.split("_"); // first room 1 const_add_building_nums=tmp[0]; //fisrt const_add_room_nums=tmp[2] //1 var morning='';var afternoon='';var evening=''; //根据标签的颜色判断该时段的标签是否可选，如果可选，将其添加成复选框添加到模态框中 if($(id_room).children().find('#morning').hasClass("label-success")) { morning=""; flag++; } if($(id_room).children().find('#afternoon').hasClass("label-success")) { afternoon=""; flag++; } if($(id_room).children().find('#evening').hasClass("label-success")) { evening=""; flag++; } var all=morning+afternoon+evening; //flag为0则代表着三个时间段的标签都为红，都不能选 if(flag==0){ $('#add_room').html("所有时间都不可选！"); $('#add_room_btn').hide(); }else{ $('#add_room').append(all); } } </script>
