97影院3,二区国产在线,立花结衣

日程安排控件dhtmlxScheduler的使用教程：如何使用PHP 實(shí)現(xiàn)調(diào)度程序

翻譯|使用教程|編輯：董玉霞|2022-02-28 10:49:23.643|閱讀 307 次

概述：在dhtmlxScheduler的使用教程中，您將找到有關(guān)如何在沒(méi)有任何框架的情況下使用PHP創(chuàng)建調(diào)度程序的具體操作過(guò)程。我們將使用MySQL作為數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)訪問(wèn)的PDO接口，創(chuàng)建調(diào)度程序的先決條件是啟用PDO_MYSQL擴(kuò)展的PHP5.4或更高版本以及MySQL或MariaDB。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

在dhtmlxScheduler的使用教程中，您將找到有關(guān)如何在沒(méi)有任何框架的情況下使用PHP創(chuàng)建調(diào)度程序的具體操作過(guò)程。我們將使用MySQL作為數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)訪問(wèn)的PDO接口，創(chuàng)建調(diào)度程序的先決條件是啟用PDO_MYSQL擴(kuò)展的PHP5.4或更高版本以及MySQL或MariaDB。

下面，我們將分布介紹具體操作方法：

點(diǎn)擊獲取dhtmlxScheduler官方正式版

步驟一：創(chuàng)建項(xiàng)目

我們從在應(yīng)用程序準(zhǔn)備一個(gè)新目錄開(kāi)始，讓我們創(chuàng)建一個(gè)空的項(xiàng)目文件夾并命名它scheduler-howto-php-plain。

步驟二：將調(diào)度程序添加到頁(yè)面

現(xiàn)在我們需要用我們的調(diào)度器創(chuàng)建一個(gè)頁(yè)面，在文件夾中創(chuàng)建一個(gè)index.html文件，scheduler-howto-php-plain并用以下內(nèi)容填充它：

<!doctype html>
<html>
    <head>
      <title> Getting started with dhtmlxScheduler</title>
      <meta charset="utf-8">
      <script src="http://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js"></script>
      <link  
              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>

現(xiàn)在您可以運(yùn)行應(yīng)用程序以查看調(diào)度程序在頁(yè)面上呈現(xiàn)：

dhtmlxScheduler,JavaScript,日程安排,React JS

步驟三：準(zhǔn)備數(shù)據(jù)庫(kù)

通過(guò)以上步驟我們就擁有一個(gè)空的調(diào)度程序，是時(shí)候創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)并將其連接到我們的應(yīng)用程序了。

您可以從您最喜歡的mysql客戶端（例如 phpMyAdmin）或通過(guò)控制臺(tái)創(chuàng)建數(shù)據(jù)庫(kù)，這是用于創(chuàng)建帶有日歷事件表的新數(shù)據(jù)庫(kù)：

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;

要通過(guò)mysql控制臺(tái)導(dǎo)入，請(qǐng)使用上面的代碼創(chuàng)建一個(gè)dump.sql文件，并在shell中執(zhí)行以下命令：

$ mysql -uuser -ppass scheduler < mysql_dump.sql

步驟四:加載數(shù)據(jù)

創(chuàng)建數(shù)據(jù)庫(kù)后，我們需要用實(shí)際數(shù)據(jù)填充調(diào)度程序,我們?cè)陧?xiàng)目文件夾中創(chuàng)建一個(gè)名為data的新文件夾。

首先，在配置data/config.php文件中定義數(shù)據(jù)庫(kù)連接參數(shù)：

<?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,
);

添加一個(gè)php腳本，該腳本將從客戶端調(diào)用以從數(shù)據(jù)庫(kù)加載數(shù)據(jù)或?qū)⒄{(diào)度程序更改保存回?cái)?shù)據(jù)庫(kù)。

api.php在文件夾中創(chuàng)建一個(gè)名為的新文件data并添加以下代碼以創(chuàng)建和打開(kāi)連接：

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

然后，我們可以實(shí)現(xiàn)一個(gè)函數(shù)來(lái)獲取連接并從數(shù)據(jù)庫(kù)中讀取調(diào)度程序數(shù)據(jù)：

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

最后，我們可以創(chuàng)建我們的請(qǐng)求處理程序：

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);

現(xiàn)在，如果您將一些事件添加到數(shù)據(jù)庫(kù)中，它們將出現(xiàn)在您的調(diào)度程序中。

步驟五：保存更改

實(shí)現(xiàn)后端處理程序

目前，調(diào)度程序可以從后端讀取數(shù)據(jù)。我們把它將更改寫(xiě)回?cái)?shù)據(jù)庫(kù)。客戶端將以JSON模式工作，這意味著它將發(fā)送事件操作的POST請(qǐng)求，檢查請(qǐng)求的格式以及調(diào)度程序?qū)⑹褂玫乃新酚伞?/span>

現(xiàn)在是時(shí)候添加“創(chuàng)建”、“更新”和“刪除”函數(shù)來(lái)執(zhí)行諸如創(chuàng)建新事件、更新現(xiàn)有事件以及從數(shù)據(jù)庫(kù)中刪除事件等操作了。

返回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]);
}

之后，我們可以調(diào)用這個(gè)函數(shù)來(lái)處理一個(gè)POST請(qǐng)求：

$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);

在客戶端啟用數(shù)據(jù)保存

最后，我們將配置客戶端以利用我們剛剛實(shí)現(xiàn)的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");

如果您現(xiàn)在重新啟動(dòng)應(yīng)用程序，您應(yīng)該能夠在調(diào)度程序中創(chuàng)建刪除和修改事件，所有更改都將在您重新加載頁(yè)面后出現(xiàn)。

dhtmlxScheduler,JavaScript,日程安排,React JS

現(xiàn)在你有了一個(gè)基本的調(diào)度器，它將其事件存儲(chǔ)在 mysql 數(shù)據(jù)庫(kù)中。

應(yīng)用安全

dhtmlxScheduler是一個(gè)客戶端組件，出于靈活性考慮，它沒(méi)有內(nèi)置的安全保護(hù)措施。此外，僅客戶端無(wú)法提供可靠的安全措施。

這意味著應(yīng)用程序的安全性由后端開(kāi)發(fā)人員負(fù)責(zé)，需要注意的最明顯的方面如下：

SQL注入：此示例中完成的所有操作都使用參數(shù)化的SQL查詢，這在SQL注入方面是安全的。
XSS攻擊。客戶端在將用戶輸入發(fā)送到后端之前不會(huì)對(duì)其進(jìn)行清理，也不會(huì)在將其顯示在頁(yè)面上之前對(duì)服務(wù)器數(shù)據(jù)進(jìn)行清理。此示例不包含任何xss過(guò)濾，如果您想將此示例用于您的應(yīng)用程序，您必須考慮添加它。