Question

我正在为朋友的度假屋建立一个简单的预订系统，我真的很难实现它。一次只有一个小组可以入住小屋。首先让我来看看预订系统必须要做的事情（我已经完成的事情在括号内）。

接收来自客人的电子邮件，其中包含他们想要入住的日期（已完成但未包括在内，因此不相关）。
然后，管理员可以在Jquery UI datepicker中选择这些日期将fromDate和toDate存储在数据库中（已完成但未完成）确定如果正确）。
然后从数据库中检索fromDate和toDate 在Jquery UI datepicker中禁用（不知道如何执行此操作）。
当fromDate和toDate被禁用之间的所有日期时应该禁用这些日期，其中fromDate和toDate在一个中略有不同的颜色表示签入和签出
次（不知道怎么做）。
管理员应该能够编辑和删除存储在中的日期数据库。无需付款，因为这将被处理脱机。

好的，我将粘贴到目前为止已完成的所有代码。我在我的文件中使用了包含但我会按照它们出现的顺序在这里单独发布每个文件。所有动作发生的最重要的是calendar.php和datepicker-admin.js，但我已经发布了一切用于上下文。我真的很高兴在这里，所以如果有人能指导我解决问题并帮助我了解正在发生的事情，我会非常感激。我接受了这个项目，因为我认为这是学习PHP的好方法，但我有点过头了。

的config.php

<?php

    define("DB_HOST", "localhost");
    define("DB_NAME", "calendar");
    define("DB_PORT", "XXXX"); // Not going to display my port online
    define("DB_USER", "db_user");
    define("DB_PASS", "db_password");

database.php中

<?php  

require('config.php');
try {
    $db = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME . ";port=" . DB_PORT,DB_USER,DB_PASS);
    $db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    $db->exec("SET NAMES 'utf8'");
} catch (Exception $e) {
    echo "Could not connect to the database";
    exit;
}

的header.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

  <title>Sticky Footer Navbar Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/sticky-footer-navbar.css" rel="stylesheet">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="css/style.css">


  <!-- Just for debugging purposes. Don't actually copy this line! -->
  <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    </head>

    <body>

      <!-- Wrap all page content here -->
      <div id="wrap">

        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Muscheltraum</a>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!--container-->
        </div><!--navbar-->

calendar.php

<?php 
    require('inc/header.php');
    require('database.php');

// a request method of post indicates that
// we are receiving a form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $fromDate = trim($_POST["fromDate"]);
    $toDate = trim($_POST["toDate"]);

    if  ($fromDate == "") {
        $error_message = "You must select a from date";
    }

    if  ($toDate == "") {
        $error_message = "You must select a to date";
    }
    else { 

        try { 

            $results = $db->prepare("INSERT INTO availability (fromDate, toDate) VALUES (?, ?)");
            $results->bindParam(1, $fromDate);
            $results->bindParam(2, $toDate);
            $results->execute();

        } catch (Exception $e) {
            echo "Data could not be inserted.";
            exit;
        }


        header("Location: " . "calendar.php/?status=thanks");

    }

}

        try { 
                $results = $db->prepare("SELECT fromDate, toDate FROM availability");
                $results->execute();

                } catch (Exception $e) {
                    echo "Data could not be retrieved.";
                    exit;
                }

                $disablethese = $results->fetch(PDO::FETCH_ASSOC);



?>

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
                 <p class="alert alert-success">Successful!</p>
                 <?php } else { ?>

                <?php
                if (isset($error_message)) {
                    echo '<p class="alert alert-danger">' . $error_message . '</p>';
                }

                } ?>

                <form action="calendar.php" method="post">
                    <div class="form-group">
                        <label for="fromDate">From</label>
                        <input type="text" id="fromDate" name="fromDate" data-disablethese="<?=json_encode($disablethese)?>">
                        <?php echo '<pre>';
                              var_dump($disablethese);
                              ?>
                    </div>
                    <div class="form-group">
                        <label for="toDate">To</label>
                        <input type="text" id="toDate" name="toDate"></input>
                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>

                </form>

            </div>
        </div>
    </div>

<?php require('inc/footer.php');?>

footer.php

</div><!--endwrap-->
  <div id="footer">
      <div class="container">
        <p class="text-muted credit">Place sticky footer content here.</p>
      </div>
  </div>



    <!-- Bootstrap core Javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="js/jquery.ui.datepicker-de.js"></script>
    <script src="js/datepicker.js"></script>
    <script src="js/datepicker-admin.js"></script>


</body>
</html>

日期选择器-admin.js

var disablethese = $("#fromDate").data("disablethese");
console.log(disablethese);
$('#fromDate').datepicker({
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [disablethese.indexOf(string) == -1];
    }
});

这就是我的桌子目前的样子。它目前只有一排。 id：10 fromDate：2014-02-28 toDate：2014-02-23

database table

使用Jquery UI datepicker创建一个简单的预订系统

0 个答案: