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

小咪咪 2024-04-06 13:57 56阅读 0赞

目 录

1.  前端会议室查看初始化代码(index.html) 5
2.  前段会议室查看初始化代码的后端交互代码(init.php) 5
3.  初始化后填充已被预定的房间代码(index.html) 7
4.  添加房间后端模块代码(add.php) 8
5.  退订房间前端代码模块(order.html) 10
6.  查询预定记录、退订房间后端代码模块(query.php) 10
7.  管理房间的前端模块(admin.html) 11

1.  登录窗口 15
2.  日期选择 15
3.  根据需求选用时间段 15
4.  管理界面，实现对数据库会议楼的维护 16
5.  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>
                        </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>
          
          <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>
            </div>
          </div>
        </bodyer>
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        
        <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 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="<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>

![在这里插入图片描述][ab7a21d777bd40668aec8f0be9d62e44.png_pic_center]  
![在这里插入图片描述][fb492f3c814744819947836a25a275bd.png_pic_center]  
![在这里插入图片描述][d7e5abfb397b47a8b209f98e6708577b.png_pic_center]  
![在这里插入图片描述][7378cf312be642bbbfce67e2df52dcc8.png_pic_center]  
![在这里插入图片描述][5eca877e9a0042f78757e43328a94783.png_pic_center]  
![在这里插入图片描述][a3c77dc161ba41d587e44ddee20c921b.png_pic_center]  
![在这里插入图片描述][a3cdd6036102400e81a71e58a4cef4b1.png_pic_center]  
![在这里插入图片描述][fed14cc2706a4b7881c62f1e9bf43576.png_pic_center]  
![在这里插入图片描述][0a7cbea94ea4465981f445e8bbed7181.png_pic_center]  
![在这里插入图片描述][21d852c0e80f4801b0ff0f10dd174de5.png_pic_center]  
![在这里插入图片描述][830762a313b74681b1f17a9c43acd2e5.png_pic_center]  
![在这里插入图片描述][49f3f3b7ffbb40b79f2aebbf709cc149.png_pic_center]  
![在这里插入图片描述][606b239f1773455eb37387238bc1dc37.png_pic_center]  
![在这里插入图片描述][7cf94801ab8848328f92aca030b829bb.png_pic_center]  
![在这里插入图片描述][1737af80a8a948e39501b44cf3ef10c7.png_pic_center]  
![在这里插入图片描述][31b35eb473ec4bed9ba6288d13672dca.png_pic_center]  
![在这里插入图片描述][6161745bb2004720b0fe549278373e43.png_pic_center]  
![在这里插入图片描述][f01127c2c9a74a3da14c43c29ff31e64.png_pic_center]  
![在这里插入图片描述][016e1ee43dac4b88aed31fe0f67dbc03.png_pic_center]  
![在这里插入图片描述][747f2af672094bb8b4b38f522fc4f2a9.png_pic_center]  
![在这里插入图片描述][f20474d250fb4e158e2b8a317358162a.png_pic_center]  
![在这里插入图片描述][f731e28d8ac5418a948055aa17057443.png_pic_center]  
![在这里插入图片描述][efd02e4ff52e4c7088485a5334d9a3f4.png_pic_center]  
![在这里插入图片描述][5335b2885f024c0b867aa67e69f1f38e.png_pic_center]  
![在这里插入图片描述][fff13d0b7d6844bb88c3fbcc2f3c91f3.png_pic_center]  
![在这里插入图片描述][20a4aa0cbc7248458a816e0e7aa3dc94.png_pic_center]  
![在这里插入图片描述][fec582b6368d4dd68de6f7c47187160d.png_pic_center]  
![在这里插入图片描述][9d68518eaf334640bfc37ab5f44de5d6.png_pic_center]  
![在这里插入图片描述][8e212e196dcb46d0bec82417fe73bd54.png_pic_center]  
![在这里插入图片描述][edc7ba16a3174b4686f622a60c7671a7.png_pic_center]  
![在这里插入图片描述][44e1d00ed00a46f5819f6b01c12a6e95.png_pic_center]  
![在这里插入图片描述][f3bc5a7273e046b393a76486c0b0e7d5.png_pic_center]

[ab7a21d777bd40668aec8f0be9d62e44.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ff9c11919bee4a0783907007ba4a021a.png
[fb492f3c814744819947836a25a275bd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/12837840c02049ab91e651769a2e1f1a.png
[d7e5abfb397b47a8b209f98e6708577b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/84d7bd042f504114a64c9a9b6cdcc153.png
[7378cf312be642bbbfce67e2df52dcc8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b36493db9e2c4dbb9e6e18550ebc0495.png
[5eca877e9a0042f78757e43328a94783.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f045b66df06b4081ac175b10f6fd4619.png
[a3c77dc161ba41d587e44ddee20c921b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/30db5095d60a4e3d9d7c4f2cb727fb1a.png
[a3cdd6036102400e81a71e58a4cef4b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bd27d739aff8492689901928be42e9d0.png
[fed14cc2706a4b7881c62f1e9bf43576.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/481d8c78fc0a4fb5a34bea5fd5c0fb06.png
[0a7cbea94ea4465981f445e8bbed7181.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e53e7fbf69d94eccbe1426cc8264a267.png
[21d852c0e80f4801b0ff0f10dd174de5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e31475530e76477aa8afc3c6f0c8d0bd.png
[830762a313b74681b1f17a9c43acd2e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ab9609dbd6104e7e9fefdc3e3d374f63.png
[49f3f3b7ffbb40b79f2aebbf709cc149.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/244035baade048839d7c4d48907d7352.png
[606b239f1773455eb37387238bc1dc37.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fb548582d0b447b18b13fd4adf993d8e.png
[7cf94801ab8848328f92aca030b829bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/41fb7579e16d4628bffde4735f4f926b.png
[1737af80a8a948e39501b44cf3ef10c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a584d04fabea4425adfcbc41b986442e.png
[31b35eb473ec4bed9ba6288d13672dca.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f03de185fddc44b5a554abf533d4d144.png
[6161745bb2004720b0fe549278373e43.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2716de93765b442c8c9d4a1b824f023a.png
[f01127c2c9a74a3da14c43c29ff31e64.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/22896edc54924c2a867a2bfd2b60056a.png
[016e1ee43dac4b88aed31fe0f67dbc03.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/752d16292095465aa96edce74693ca75.png
[747f2af672094bb8b4b38f522fc4f2a9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/377da769eacb49128a37f99ec6ad4176.png
[f20474d250fb4e158e2b8a317358162a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1a8074f1d523423bbdd348129283b318.png
[f731e28d8ac5418a948055aa17057443.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/426a80803269435cae77918495bd367b.png
[efd02e4ff52e4c7088485a5334d9a3f4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0552a6f447154871839d2a52a3212899.png
[5335b2885f024c0b867aa67e69f1f38e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f107d1286a974c0baba83a43fe0514ac.png
[fff13d0b7d6844bb88c3fbcc2f3c91f3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/34e825ee1fd743f19cf1dd2b16013cca.png
[20a4aa0cbc7248458a816e0e7aa3dc94.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/af738a94761347b4b709629fe204d781.png
[fec582b6368d4dd68de6f7c47187160d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e1b8532c030485ba8c0ed779649732f.png
[9d68518eaf334640bfc37ab5f44de5d6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/87a347408a5b4c42938a385b1514de76.png
[8e212e196dcb46d0bec82417fe73bd54.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4d3e92e76d7749bd84098ac70a8023ee.png
[edc7ba16a3174b4686f622a60c7671a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0ea5e63c05fc489286dcfb56d5ac953b.png
[44e1d00ed00a46f5819f6b01c12a6e95.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5081ac511c314756bfa8ae8cd0557931.png
[f3bc5a7273e046b393a76486c0b0e7d5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/09df4e0d9a6c4adeb775fdd9b3eb8bbf.png