半岛权威十大直营(官方)网站

日程安排控件dhtmlxScheduler的使用教程:如何使用PHP 实现调度程序

翻译|使用教程|编辑:董玉霞|2022-02-28 10:49:23.643|阅读 241 次

概述:在dhtmlxScheduler的使用教程中,您将找到有关如何在没有任何框架的情况下使用PHP创建调度程序的具体操作过程。我们将使用MySQL作为数据存储和数据访问的PDO接口,创建调度程序的先决条件是启用PDO_MYSQL扩展的PHP5.4或更高版本以及MySQL或MariaDB。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

dhtmlxScheduler的使用教程中,您将找到有关如何在没有任何框架的情况下使用PHP创建调度程序的具体操作过程。我们将使用MySQL作为数据存储和数据访问的PDO接口,创建调度程序的先决条件是启用PDO_MYSQL扩展的PHP5.4或更高版本以及MySQL或MariaDB。

下面,我们将分布介绍具体操作方法:

步骤一:创建项目

我们从在应用程序准备一个新目录开始,让我们创建一个空的项目文件夹并命名它scheduler-howto-php-plain。

步骤二:将调度程序添加到页面

现在我们需要用我们的调度器创建一个页面,在文件夹中创建一个index.html文件,scheduler-howto-php-plain并用以下内容填充它:

<!doctype html>
<html>
    <head>
      <title> Getting started with dhtmlxScheduler</title>
      <meta charset="utf-8">
      <script src="//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
      <link href="//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material.css" 
              rel="stylesheet" type="text/css" charset="utf-8">
        <style>
            html, body{
                margin:0px;
                padding:0px;
                height:100%;
                overflow:hidden;
            }

        </style> 
    </head> 
    <body> 
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'> 
        <div class="dhx_cal_navline"> 
            <div class="dhx_cal_prev_button"> </div> 
            <div class="dhx_cal_next_button"> </div> 
            <div class="dhx_cal_today_button"></div> 
            <div class="dhx_cal_date"></div> 
            <div class="dhx_cal_tab" name="day_tab"></div> 
            <div class="dhx_cal_tab" name="week_tab"></div> 
            <div class="dhx_cal_tab" name="month_tab"></div> 
    </div> 
    <div class="dhx_cal_header"></div> 
    <div class="dhx_cal_data"></div> 
    </div> 
    <script>
        scheduler.init('scheduler_here', new Date(2019,0,20), "week");
        scheduler.load("data/api.php");
 
        var dp = new dataProcessor("data/api.php");
        dp.init(scheduler);
        dp.setTransactionMode("JSON"); // use to transfer data with JSON
    </script> 
    </body> 
</html>

现在您可以运行应用程序以查看调度程序在页面上呈现:

dhtmlxScheduler,JavaScript,日程安排,React JS

步骤三:准备数据库

通过以上步骤我们就拥有一个空的调度程序,是时候创建一个数据库并将其连接到我们的应用程序了。

您可以从您最喜欢的mysql客户端(例如 phpMyAdmin)或通过控制台创建数据库,这是用于创建带有日历事件表的新数据库:

CREATE DATABASE  IF NOT EXISTS `scheduler_howto_php`;
USE `scheduler_howto_php`;
 
DROP TABLE IF EXISTS `events`;
CREATE TABLE `events` (
  `id` int(11) AUTO_INCREMENT,
  `start_date` datetime NOT NULL,
  `end_date` datetime NOT NULL,
  `text` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) DEFAULT CHARSET=utf8;

要通过mysql控制台导入,请使用上面的代码创建一个dump.sql文件,并在shell中执行以下命令:

$ mysql -uuser -ppass scheduler < mysql_dump.sql
步骤四:加载数据

创建数据库后,我们需要用实际数据填充调度程序,我们在项目文件夹中创建一个名为data的新文件夹。

首先,在配置data/config.php文件中定义数据库连接参数:

<?php
$dsn = "mysql:host=localhost;dbname=scheduler_howto_php";
$username = "root";
$password = "";
 
$options = array(
    PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'",
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
);

添加一个php脚本,该脚本将从客户端调用以从数据库加载数据或将调度程序更改保存回数据库。

api.php在文件夹中创建一个名为的新文件data并添加以下代码以创建和打开连接:

<?php
require_once("config.php");
$db = new PDO($dsn, $username, $password, $options);

然后,我们可以实现一个函数来获取连接并从数据库中读取调度程序数据:

function read($db, $requestParams){
    $queryParams = [];
    $queryText = "SELECT * FROM `events`";
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
    $events = $query->fetchAll();
    return $events;
}

最后,我们可以创建我们的请求处理程序:

switch ($_SERVER["REQUEST_METHOD"]) {
    case "GET":
        $result = read($db, $_GET);
        break;
    case "POST":
        // we'll implement this later
    break;
    default: 
        throw new Exception("Unexpected Method"); 
    break;
}
header("Content-Type: application/json");
echo json_encode($result);

现在,如果您将一些事件添加到数据库中,它们将出现在您的调度程序中。

步骤五:保存更改
实现后端处理程序

目前,调度程序可以从后端读取数据。我们把它将更改写回数据库。 客户端将以JSON模式工作,这意味着它将发送事件操作的POST请求,检查请求的格式以及调度程序将使用的所有路由。

现在是时候添加“创建”、“更新”和“删除”函数来执行诸如创建新事件、更新现有事件以及从数据库中删除事件等操作了。

返回data/api.php并将以下代码添加到文件中:

// create a new event
function create($db, $event){
    $queryText = "INSERT INTO `events` SET
        `start_date`=?,
        `end_date`=?,
        `text`=?";
    $queryParams = [
        $event["start_date"],
        $event["end_date"],
        $event["text"]
    ];
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
    return $db->lastInsertId();
}
// update an event
function update($db, $event, $id){
    $queryText = "UPDATE `events` SET
        `start_date`=?,
        `end_date`=?,
        `text`=?
        WHERE `id`=?";
    $queryParams = [
        $event["start_date"],
        $event["end_date"],
        $event["text"],
        $id
    ];
    $query = $db->prepare($queryText);
    $query->execute($queryParams);
}
// delete an event
function delete($db, $id){
    $queryText = "DELETE FROM `events` WHERE `id`=? ;";
    $query = $db->prepare($queryText);
    $query->execute([$id]);
}

之后,我们可以调用这个函数来处理一个POST请求:

$db = new PDO($dsn, $username, $password, $options);
switch ($_SERVER["REQUEST_METHOD"]) {
    case "GET":
        $result = read($db, $_GET);
        break;
    case "POST": 
        $requestPayload = json_decode(file_get_contents("php://input")); 
        $id = $requestPayload->id; 
        $action = $requestPayload->action; 
        $body = (array) $requestPayload->data; 
        $result = [ 
            "action" => $action 
        ]; 
        if ($action == "inserted") {; 
            $databaseId = create($db, $body); 
            $result["tid"] = $databaseId; 
        } elseif($action == "updated") { 
            update($db, $body, $id); 
        } elseif($action == "deleted") { 
            delete($db, $id); 
        } 
    break; 
    default: 
        throw new Exception("Unexpected Method"); 
    break;
}
 
header("Content-Type: application/json");
echo json_encode($result);
在客户端启用数据保存

最后,我们将配置客户端以利用我们刚刚实现的API:

scheduler.init("scheduler_here", new Date(2019, 0, 20), "week");
scheduler.setLoadMode("day");
 
// load data from the backend
scheduler.load("data/api.php"); 
 
// send updates to the backend
var dp = new dataProcessor("data/api.php"); 
dp.init(scheduler);  
// set data exchange mode
dp.setTransactionMode("JSON");

如果您现在重新启动应用程序,您应该能够在调度程序中创建删除和修改事件,所有更改都将在您重新加载页面后出现。

dhtmlxScheduler,JavaScript,日程安排,React JS

现在你有了一个基本的调度器,它将其事件存储在 mysql 数据库中。

应用安全

dhtmlxScheduler是一个客户端组件,出于灵活性考虑,它没有内置的安全保护措施。此外,仅客户端无法提供可靠的安全措施。

这意味着应用程序的安全性由后端开发人员负责,需要注意的最明显的方面如下:

  • SQL注入:此示例中完成的所有操作都使用参数化的SQL查询,这在SQL注入方面是安全的。
  • XSS攻击。客户端在将用户输入发送到后端之前不会对其进行清理,也不会在将其显示在页面上之前对服务器数据进行清理。此示例不包含任何xss过滤,如果您想将此示例用于您的应用程序,您必须考虑添加它。
故障排除

如果您已完成上述步骤以实现调度程序与PHP的集成,但调度程序未在页面上呈现事件,请查看解决后端集成问题的文章,它具体描述了识别问题根源的方法。

以上就是关于在使用dhtmlxScheduler 时如何在没有任何框架的情况下使用PHP创建调度程序的具体内容。

dhtmlxScheduler 是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间。事件可以按天,周,月三个种视图显示。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@wqylolg.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP