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

最新推荐文章于 2023-12-27 17:41:31 发布

biyezuopinvip

最新推荐文章于 2023-12-27 17:41:31 发布

阅读量2.2k

点赞数 5

文章标签： html javascript php 会议室预约管理系统毕业设计

本文链接：https://blog.csdn.net/newlw/article/details/127086028

版权

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

在这里插入图片描述

biyezuopinvip

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
基于HTML和JavaScript的会议室预约管理系统

会议室管理与预约系统：设计与开发一个会议室预订与管理系统，功能包括但不限于：支持管理员登录功能、支持对会议室资源进行管理，会议室资源包括会议室名称、容纳人数等；通过本课程，进一步复习、巩固所学的数据结构与算法、计算机系统基础、密码学基础、社会科学中的计算思维方法等课程的基本概念、技术原理、软件设计的方法与技术等，初步掌握软件设计的流程与基本方法，能够运用C/C++、Java、Python等至少一种编程语言进行软件开发。实验环境：Windows10、LINUX:apache、msql、php。
复制链接

扫一扫