基于HTML和JavaScript的会议室预约管理系统

前端会议室查看初始化代码(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

<!-- /*
*author:gzhu_ruiop
*date：2021-01-13
*des：会议管理系统···预约会议室显示窗口
*会议室的主要窗口用户可以通过该窗口进行查询、预约
*/ -->
<!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>&nbsp;<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="<div class=\"panel panel-primary\"  class=\"container-fluid\" id="+building+" ><div class=\"col-md-12\"><h3>"+"楼号:"+building+"</h3></div></div> ";$('#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="<div class=\"panel panel-primary\"  class=\"container-fluid\" id="+building+" ><div class=\"col-md-12\"><h3>"+"楼号:"+building+"</h3></div></div> ";$('#all_panel').append(pre_first);}//追加教室 first 门牌号//onclick放在最后面 根据数据库请求过来的数据，将数据分解成各个属性框中var first="<div class=\"row\"><div class=\"col-md-6\"><div class=\"panel  panel-success\" id=\""+building+"_room_"+parsedJson[i].ID+"\"><div class=\"panel-heading\">"+"<div class=\"row\"><div class =\"col-md-6\"><h4>"+parsedJson[i].ID+"</h4></div><div class=\"col-md-6 \"><button id=\""+building+"_room_"+parsedJson[i].ID+"\" type=\"button\"  class=\"btn btn-primary btn-md pull-right\" data-toggle=\"modal\" data-target=\"#myModal\" οnclick='click_func(this)'>选用</button></div></div>";first=first+"</div><div class=\"panel-body\"><div class=\"container\"><div class=\"row\"><h3><span class=\"label label-info\">"+"容量"+parsedJson[i].capacity+"/"+parsedJson[i].attribute;first=first+"</span> <span class=\"label label-info\">上午</span><span id=\"morning\" class=\"label label-success\" class=\"h5\">空闲</span> <span class=\"label label-info\">下午</span><span  id=\"afternoon\" class=\"label label-success\" class=\"h5\">空闲</span> <span class=\"label label-info\">晚上</span><span id=\"evening\" class=\"label label-success\" class=\"h5\">空闲</span></h3></div></div></div></div></div><div class=\"col-md-6\"><div class=\"panel  panel-success\" id=\""+building+"_room_"+parsedJson[i+1].ID+"\"><div class=\"panel-heading\">"+"<div class=\"row\"><div class =\"col-md-6\"><h4>"+parsedJson[i+1].ID+"</h4></div><div class=\"col-md-6 \"><button id=\""+building+"_room_"+parsedJson[i+1].ID+"\" type=\"button\"  class=\"btn btn-primary btn-md pull-right\" data-toggle=\"modal\" data-target=\"#myModal\" οnclick='click_func(this)'>选用</button></div></div>";first=first=first+"</div><div class=\"panel-body\"><div class=\"container\"><div class=\"row\"><h3><span class=\"label label-info\">"+"容量"+parsedJson[i+1].capacity+"/"+parsedJson[i+1].attribute;first=first+"</span> <span class=\"label label-info\">上午</span><span id=\"morning\" class=\"label label-success\" class=\"h5\">空闲</span> <span class=\"label label-info\">下午</span><span   id=\"afternoon\" class=\"label label-success\" class=\"h5\">空闲</span> <span class=\"label label-info\">晚上</span><span  id=\"evening\" class=\"label label-success\" class=\"h5\">空闲</span> </h3></div></div></div></div></div></div>";$('#'+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 1const_add_building_nums=tmp[0]; //fisrtconst_add_room_nums=tmp[2] //1var morning='';var afternoon='';var evening='';//根据标签的颜色判断该时段的标签是否可选，如果可选，将其添加成复选框添加到模态框中if($(id_room).children().find('#morning').hasClass("label-success")){morning="<div class=\"checkbox\"><label><input type=\"checkbox\" value=\"morning\">"+"上午";morning+="</label></div>";flag++;}if($(id_room).children().find('#afternoon').hasClass("label-success")){afternoon="<div class=\"checkbox\"><label><input type=\"checkbox\" value=\"afternoon\">"+"下午";afternoon+="</label></div>";flag++;}if($(id_room).children().find('#evening').hasClass("label-success")){evening="<div class=\"checkbox\"><label><input type=\"checkbox\" value=\"evening\">"+"晚上";evening+="</label></div>";flag++;}var all=morning+afternoon+evening;//flag为0则代表着三个时间段的标签都为红，都不能选if(flag==0){$('#add_room').html("所有时间都不可选！");$('#add_room_btn').hide();}else{$('#add_room').append(all);}       }
</script>

基于HTML和JavaScript的会议室预约管理系统相关推荐

Java毕设项目会议室预约管理系统（java+VUE+Mybatis+Maven+Mysql）
Java毕设项目会议室预约管理系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(We ...
springboot毕设项目会议室预约管理系统kh090（java+VUE+Mybatis+Maven+Mysql）
springboot毕设项目会议室预约管理系统kh090(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + H ...
基于javaweb+mysql的宠物医院预约管理系统(管理员、医生、用户)
基于javaweb+mysql的宠物医院预约管理系统(管理员.医生.用户) 运行环境 Java≥8.MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行适 ...
基于javaweb的自习室图书馆座位预约管理系统(java+ssm+jsp+easyui+mysql)
基于javaweb的自习室图书馆座位预约管理系统(java+ssm+jsp+easyui+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea ...
基于SSM+MYSQL实现在线教材预约管理系统
本项目为基于SSM实现的在线教材预约管理系统,分为教师.学生.管理员等三种角色,管理管理班级信息.年级信息.学生信息.教师信息.课程信息.教材信息等,教师可以查看学生信息,查看个人课程信息,并可以设置 ...
【毕业设计】java ssm会议室预约管理系统
源码交流.毕设帮助.技术指导,见文末一.系统概述随着企业会议室是日常使用紧张的地方,每个企业都希望有效地利用会议室资源.会议室预约管理系统简化了会议室管理,灵活的调度手段可以防止无人会议和迟到会议 ...
课程设计-基于SSM的美容美发造型预约管理系统代码Java理发剪发设计造型系统vue美发店管理系统
课程设计-基于SSM的美容美发造型预约管理系统代码Java理发剪发设计造型系统vue美发店管理系统注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境开发语言:Java 后台框架: ...
基于springboot的会议室预约管理系统
摘要中国经济迅速发展,各方面都取得了值得骄傲的进步,随着互联网的飞速发展,当前网络信息也越来越普及,无论是乡下还是城市,都有许多的人了解或是正在使用互联网.计算机成为了辅助类工具中的最佳.它方便 ...
基于JAVA+SpringMVC+Mybatis+MYSQL的会议室预约管理系统
项目功能: 本系统实现了实验室预约系统,下面简单介绍下该系统的一些主要功能. 普通员工登录后,可以查看会议室信息,可以对某个会议室进行预约,按照时间段,会议室名称进行申请,等待管理员的审核,对于已经申 ...

基于HTML和JavaScript的会议室预约管理系统

基于HTML和JavaScript的会议室预约管理系统相关推荐

最新文章

热门文章