将JavaScript调度程序与PHP和MySQL集成用于动态CRUD操作
#javascript #网络开发人员 #scheduler #php

介绍

此博客文章将提供有关使用PHP和MySQL数据库集成SyncFusion的JavaScript Scheduler控件(创建,读取,更新,更新和删除)应用程序的分步指南。

先决条件

确保以下环境的全局安装:

XAMPP服务器入门

XAMPP代表跨平台Apache,MySQL,PHP和Perl,是一个软件捆绑包,允许开发人员在本地计算机上创建和测试动态Web应用程序,无论他们具有Windows,Linux或Mac。通过安装XAMPP,开发人员可以轻松地设置本地Web服务器并在无需实时Internet连接的情况下脱机工作。

安装:

1.安装系统上的XAMPP服务器。
2.一旦安装完成,导航到指定的路径: c:\ xampp \ htdocs
3.在此目录中,创建一个带有所需名称的新文件夹(例如,EJ2-Php-crud-Serviceâ)。

  • 这个新创建的文件夹将用作项目所需的数据库配置和CRUD Action PHP文件的存储库。
  • 此目录中这些文件的正确创建和配置对于项目的平稳功能至关重要。

创建MySQL数据库和表格

在此示例中,我创建了一个名为 schedulerdb的数据库。我在名为约会的数据库中创建了一个表格,并使用以下字段: id,主题,主题,,启动时间,末日,开始时区,末日区,位置,描述,isallday,recurrenceId,sustalid,recurrencerule,recurrenceException,isReadonly,isBlock,iSblock,roomid。

以下代码中提供了创建表的查询。

CREATE TABLE `appointments` (
  `Id` int(11) NOT NULL,
  `Subject` varchar(200) DEFAULT NULL,
  `StartTime` datetime NOT NULL,
  `EndTime` datetime NOT NULL,
  `StartTimezone` varchar(200) DEFAULT NULL,
  `EndTimezone` varchar(200) DEFAULT NULL,
  `Location` varchar(200) DEFAULT NULL,
  `Description` varchar(200) DEFAULT NULL,
  `IsAllDay` bit(1) NOT NULL,
  `RecurrenceID` int(11) DEFAULT NULL,
  `FollowingID` int(11) DEFAULT NULL,
  `RecurrenceRule` varchar(200) DEFAULT NULL,
  `RecurrenceException` varchar(200) DEFAULT NULL,
  `IsReadonly` bit(1) DEFAULT NULL,
  `IsBlock` bit(1) DEFAULT NULL,
  `RoomID` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

设置数据库配置

导航到 c:\ xampp \ htdocs \ ej2-php-crud-service ,创建一个名为 server.php 的PHP文件,并添加以下代码。 br>

<?php
   $servername = "localhost";
   $username = "root";
   $password = "Sync@09121997";
   $dbname = " SchedulerDB ";

   $conn = new mysqli($servername, $username, $password, $dbname);
   if($conn->connect_error) {        
     die("Connection failed" . $conn->connect_error);
   }
?>

以前的PHP代码段展示了使用 mysqli 库来创建与MySQL数据库的连接的过程。第一步是设置连接参数,例如服务器的名称,用户名,密码和数据库名称。这些值存储在变量, $ servername,$ username,$ password, $ dbname,中。

$ servername 变量设置为 localhost,,这意味着数据库与PHP脚本在同一服务器上。 $ username 变量设置为 root, mySQL Server的默认用户名。 $ password 此示例的变量设置为 sync@1997。 $ dbname 变量设置为 schedulerdb。

设置了连接参数后,脚本将通过调用 mysqli 构造函数并将连接参数作为参数传递,然后将其分配给变量 $ conn。 然后,脚本使用 connect_error 方法来检查连接是否成功。如果连接不成功,则脚本显示错误消息连接失败和退出。

设置CRUD配置

在同一文件中, server.php ,添加代码以执行CRUD操作。这将是处理这些动作的主要位置。

以下代码设置标题并使用PHP在服务器端处理JSON请求。它将内容类型和字符编码设置为JSON和UTF-8。这允许使用CORS标头的请求中的任何来源,方法和标头;如果请求方法为选项,请退出脚本;发送HTTP状态200 OK;从客户端读取原始帖子数据;将JSON字符串转换为PHP数组;并将该数组分配到变量。此代码是处理JSON请求并确保客户端和服务器之间正确通信的好习惯。

header("Content-type:application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: *");
header("Access-Control-Allow-Headers: *");
header('Access-Control-Allow-Origin: *', false);
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
   header( "HTTP/1.1 200 OK" );
   exit;
}
$json_param = file_get_contents('php://input');
$param = json_decode($json_param,true);

现在,让我们编写CRUD动作的代码。

<!-- This block performs the Create action on appointments data in a database. -->
if(isset($param['action'])) {
  if ($param['action'] == "insert" || ($param['action'] == "batch" && !empty($param['added']))) {
     error_log("This is an error message");
     if ($param['action'] == "insert") {
        $id = isset($param['value']['Id']) ? $param['value']['Id'] : null;
        $subject = isset($param['value']['Subject']) ? $param['value']['Subject'] : null;
        $startTime = isset($param['value']['StartTime']) ? $param['value']['StartTime'] : null;
        $endTime = isset($param['value']['EndTime']) ? $param['value']['EndTime'] : null;
        $location = isset($param['value']['Location']) ? $param['value']['Location'] : null;
        $description = isset($param['value']['Description']) ? $param['value']['Description'] : null;
        $isAllDay = isset($param['value']['IsAllDay']) ? $param['value']['IsAllDay'] : null;
        $recurrenceId = isset($param['value']['RecurrenceID']) && $param['value']['RecurrenceID'] > 0 ? $param['value']['RecurrenceID'] : null;
        $recurrenceRule = isset($param['value']['RecurrenceRule']) ? $param['value']['RecurrenceRule'] : null;
        $recurrenceException = isset($param['value']['RecurrenceException']) && !empty($param['value']['RecurrenceException']) ? $param['value']['RecurrenceException'] : null;
        $roomId = isset($param['value']['RoomID']) && !empty($param['value']['RoomID']) ? $param['value']['RoomID'] : null;

        $startTime = clone new DateTime($startTime);
        $timezone = new DateTimeZone('Asia/Calcutta');
        $startTime->setTimezone($timezone);
        $startTime = $startTime->format('Y-m-d H:i:s');
        $endTime = clone new DateTime($endTime);
        $timezone = new DateTimeZone('Asia/Calcutta');
        $endTime->setTimezone($timezone);
        $endTime = $endTime->format('Y-m-d H:i:s');

        if($recurrenceRule == null) {
           $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$roomId')";
         } else {
            if($recurrenceId == null) {
              $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RecurrenceRule`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$recurrenceRule', '$roomId')";
         } else {
             $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RecurrenceID`, `RecurrenceRule`, `RecurrenceException`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$recurrenceId', '$recurrenceRule', '$recurrenceException', '$roomId')";
         }
      }
      $result = $conn->query($sql);
    }
    else if ($param['action'] == "batch" && !empty($param['added'])) {
       foreach($param['added'] as $add) {
          $id =isset($add['Id']) ? $add['Id'] : null;
          $subject = isset($add['Subject']) ? $add['Subject'] : null;
          $startTime = isset($add['StartTime']) ? $add['StartTime'] : null;
          $endTime = isset($add['EndTime']) ? $add['EndTime'] : null;
          $location = isset($add['Location']) ? $add['Location'] : null;
          $description = isset($add['Description']) ? $add['Description'] : null;
          $isAllDay = isset($add['IsAllDay']) ? $add['IsAllDay'] : null;
          $recurrenceId = isset($add['RecurrenceID']) && $add['RecurrenceID'] > 0 ? $add['RecurrenceID'] : null;
          $recurrenceRule = isset($add['RecurrenceRule']) ? $add['RecurrenceRule'] : null;
          $recurrenceException = isset($add['RecurrenceException']) && !empty($add['RecurrenceException']) ? $add['RecurrenceException'] : null;
          $roomId = isset($add['RoomID']) && !empty($add['RoomID']) ? $add['RoomID'] : null;
          $startTime = clone new DateTime($startTime);
          $timezone = new DateTimeZone('Asia/Calcutta');
          $startTime->setTimezone($timezone);
          $startTime = $startTime->format('Y-m-d H:i:s');
          $endTime = clone new DateTime($endTime);
          $timezone = new DateTimeZone('Asia/Calcutta');
          $endTime->setTimezone($timezone);
          $endTime = $endTime->format('Y-m-d H:i:s');

          if($recurrenceRule == null) {
            $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$roomId')";
           } else {
             if($recurrenceId == null) {
                $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RecurrenceRule`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$recurrenceRule', '$roomId')";
            } else {
                $sql = "INSERT INTO `appointments` (`Id`, `Subject`, `StartTime`, `EndTime`, `Location`, `Description`, `IsAllDay`, `RecurrenceID`, `RecurrenceRule`, `RecurrenceException`, `RoomID`) VALUES ('$id', '$subject', '$startTime', '$endTime', '$location','$description', '$isAllDay', '$recurrenceId', '$recurrenceRule', '$recurrenceException', '$roomId')";
            }
          }
          $result = $conn->query($sql);
       }
     }
   }
}

此PHP代码块用于将约会详细信息插入数据库。我们首先检查是否设置了 Action 参数,它是 insert 还是 batch ,以及是否有添加值。如果满足这些条件,则代码块通过检查 value> param 变量(例如主题,启动时间,结束)中是否存在特定值来设置几个变量时间,等等。然后,它将起始时间和结束时间转换为特定时区,并将其格式化为 Y-M​​-D H:I:S 格式中的字符串。最后,它创建一个SQL查询以将数据插入约会表中,其中包括不同的列,具体取决于 recurrencerule 还是 recurrenceId 变量为无效。然后使用MySQLI查询函数执行SQL查询。

<!-- This block performs the Update action on appointments data in a database. -->
if ($param['action'] == "update" || ($param['action'] == "batch" && !empty($param['changed']))) {
    if ($param['action'] == "update") {
       $id = isset($param['value']['Id']) ? $param['value']['Id'] : null;
       $subject = isset($param['value']['Subject']) ? $param['value']['Subject'] : null;
       $startTime = isset($param['value']['StartTime']) ? $param['value']['StartTime'] : null;
       $endTime = isset($param['value']['EndTime']) ? $param['value']['EndTime'] : null;
       $location = isset($param['value']['Location']) ? $param['value']['Location'] : null;
       $description = isset($param['value']['Description']) ? $param['value']['Description'] : null;
       $isAllDay = isset($param['value']['IsAllDay']) ? $param['value']['IsAllDay'] : false;
       $recurrenceId = isset($param['value']['RecurrenceID']) && $param['value']['RecurrenceID'] > 0 ? $param['value']['RecurrenceID'] : null;
       $recurrenceRule = isset($param['value']['RecurrenceRule']) ? $param['value']['RecurrenceRule'] : null;
       $recurrenceException = isset($param['value']['RecurrenceException']) && !empty($param['RecurrenceException']) ? $param['value']['RecurrenceException'] : null;
       $roomId = isset($param['value']['RoomID']) && !empty($param['RoomID']) ? $param['value']['RoomID'] : null;

       $startTime = clone new DateTime($startTime);
       $timezone = new DateTimeZone('Asia/Calcutta');
       $startTime->setTimezone($timezone);
       $startTime = $startTime->format('Y-m-d H:i:s');
       $endTime = clone new DateTime($endTime);
       $timezone = new DateTimeZone('Asia/Calcutta');
       $endTime->setTimezone($timezone);
       $endTime = $endTime->format('Y-m-d H:i:s');

       if($recurrenceRule == null){
          $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = '$isAllDay', `RoomID` = '$roomId' WHERE `appointments`.`Id` = '$id'";
       }
       else {
           $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = $isAllDay, `RecurrenceID` = $recurrenceId,`RecurrenceRule` = $recurrenceRule,`RecurrenceException` = $recurrenceException, `RoomID` = '$roomId' WHERE `appointments`.`Id` = '$id'";
       }
       $result = $conn->query($sql);
   }
   else if ($param['action'] == "batch" && !empty($param['changed'])) {
     foreach($param['changed'] as $update) {
        $id = isset($update['Id']) ? $update['Id'] : null;
        $subject = isset($update['Subject']) ? $update['Subject'] : null; 
        $startTime = isset($update['StartTime']) ? $update['StartTime'] : null; 
        $endTime = isset($update['EndTime']) ? $update['EndTime'] : null; 
        $location = isset($update['Location']) ? $update['Location'] : null;
        $description = isset($update['Description']) ? $update['Description'] : null;
        $isAllDay = isset($update['IsAllDay']) ? $update['IsAllDay'] : false;
        $recurrenceId = isset($update['RecurrenceID']) && $update['RecurrenceID'] > 0 ? $update['RecurrenceID'] : null;
        $recurrenceRule = isset($update['RecurrenceRule']) ? $update['RecurrenceRule'] : null;
        $recurrenceException = isset($update['RecurrenceException']) && !empty($update['RecurrenceException']) ? $update['RecurrenceException'] : null;
        $roomId = isset($update['RoomID']) && !empty($update['RoomID']) ? $update['RoomID'] : null;

         $startTime = clone new DateTime($startTime);
         $timezone = new DateTimeZone('Asia/Calcutta');
         $startTime->setTimezone($timezone);
         $startTime = $startTime->format('Y-m-d H:i:s');
         $endTime = clone new DateTime($endTime);
         $timezone = new DateTimeZone('Asia/Calcutta');
         $endTime->setTimezone($timezone);
         $endTime = $endTime->format('Y-m-d H:i:s');

         if($recurrenceRule == null){
            $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = '$isAllDay', `RoomID` = '$roomId' WHERE `appointments`.`Id` = $id";
         }
         else {
           if($recurrenceId == null) {
             if($recurrenceException == null) {
                $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = '$isAllDay', `RecurrenceRule` = '$recurrenceRule', `RoomID` = '$roomId' WHERE `appointments`.`Id` = '$id'";
             } else {
                $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = '$isAllDay', `RecurrenceRule` = '$recurrenceRule', `RecurrenceException` = '$recurrenceException', `RoomID` = '$roomId' WHERE `appointments`.`Id` = '$id'";
             }
            } else {
              $sql = "UPDATE `appointments` SET `Subject` = '$subject', `StartTime` = '$startTime', `EndTime` = '$endTime', `Location` = '$location', `Description` = '$description', `IsAllDay` = '$isAllDay', `RecurrenceID` = '$recurrenceId', `RecurrenceRule` = '$recurrenceRule', `RecurrenceException` = '$recurrenceException', `RoomID` = '$roomId' WHERE `appointments`.`Id` = '$id'";
            }
         }
         $result = $conn->query($sql);
      }
   }
}

以前的代码块用于更新数据库中的约会详细信息。它首先检查 Action 参数是否设置为更新 batch ,以及是否有更改的值。如果满足这些条件,它将通过检查 value> param param 变量(例如主题,开始时间,结束时间,结束时间,等等。然后,它将起始时间和结束时间转换为特定时区,并将其格式化为 y-m-d H:i:i:s 的字符串。最后,它创建了一个SQL查询,以使用新值更新约会表中的数据,其中包括不同的列,具体取决于 recurrencerule 是无效的。然后使用MySQLI查询函数执行SQL查询。如果该动作是批次,它将通过所有更改的约会进行迭代,并一一更新。

<!-- This block performs the Delete action on appointments data in a database. -->
if ($param['action'] == "remove" || ($param['action'] == "batch" && !empty($param['deleted']))) {
   if ($param['action'] == "remove") {
       $id = $param['key'];
       $sql = "DELETE FROM `appointments` WHERE `Id`='$id'";   
       $result = $conn->query($sql);
   }
   else if ($param['action'] == "batch" && !empty($param['deleted'])) {
     foreach($param['deleted'] as $delete) {                
       if($delete['Id'] != null)
       {
          $id = $delete['Id'];
          $sql = "DELETE FROM `appointments` WHERE `Id`='$id'";
          $result = $conn->query($sql);
       }             
     }
   }
}

以前的代码块用于从数据库中删除约会详细信息。它首先检查 Action 参数是否设置为删除 batch 以及是否有删除值。如果操作是删除,它将变量 $ id 设置为参数的值,并创建一个SQL查询以使用约会表中的特定ID。如果该动作是批次,它将通过所有已删除的约会进行迭代,并通过其特定ID删除它们。然后使用MySQLI查询函数执行SQL查询。

<!-- This block performs the Read (Get) action on appointments data in a database. -->
$json = array();
if (isset($param["StartDate"]) && isset($param["EndDate"])) {
   $sql = "SELECT * FROM `appointments`";
   $appointmentList = $conn->query($sql);
   $json = $appointmentList->fetch_all(MYSQLI_ASSOC);
}
echo json_encode($json, JSON_NUMERIC_CHECK);

最后,此代码块从数据库中检索约会详细信息,并将其返回为JSON编码的字符串。它首先检查是否设置了 startDate eNddate 参数。如果是,它将创建一个SQL查询来从约会表中选择所有数据。查询使用MySQLI查询函数执行,结果保存在 $ umpermentList 变量中。然后将结果获取并保存在 $ JSON 变量中,并使用 json_encode()函数编码为JSON字符串。传递 JSON_NUMERIC_CHECK 标志,以确保数字值编码为数字而不是字符串。最后,打印编码的JSON字符串。

设置调度程序UI

现在,我们将使用Syncfusion JavaScript Scheduler组件设计一个用户友好的前端接口,并将其与先前建立的服务器集成。

首先,我们在位于 c:\ xampp \ htdocs \ ej2-php-crud-service的应用程序中创建 index.php 文件。该文件将作为我们应用程序的主要前端接口。

要在应用程序中使用SyncFusion的调整器组件,我们在代码的Head Tag中包括必要的CDN链接。这使我们能够在应用程序中访问和实现组件。

<head>
  <title>Essential Studio for JavaScript : Detail Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-schedule/styles/material.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

我们现在将开始为HTML主体制定代码。身体内容很简单,简单,添加了一个DIV元素,其ID为 supched 。该Div将作为我们调度程序组件的容器,该组件将通过脚本附加。

<body>    
 <?php
  // initialize Scheduler element.
  echo '
   <div id="Schedule"></div>  
  ';
 ?>
</body>

我们现在将把重点转移到应用程序的脚本端。由于这是一个基本的时间表应用程序,因此必要的脚本可以包含在主体标签末端的脚本标签中。

//Initialize Scheduler in JavaScript.
var scheduleObj = new ej.schedule.Schedule({
   height: "550px",
   selectedDate: new Date(2020, 9, 20),
   views: ["TimelineDay", "TimelineWeek"],
   allowDragAndDrop: true,
   eventSettings: { dataSource: dataManager },
   group: {
      resources: ["MeetingRoom"]
   },
   resources: [{
     field: "RoomID", title: "Room Type",
     name: "MeetingRoom", allowMultiple: true,
     dataSource: [
        { text: "Jammy", id: 1, color: "#ea7a57", capacity: 20, type: "Conference" },
        { text: "Tweety", id: 2, color: "#7fa900", capacity: 7, type: "Cabin" },
        { text: "Nestle", id: 3, color: "#5978ee", capacity: 5, type: "Cabin" },
        { text: "Phoenix", id: 4, color: "#fec200", capacity: 15, type: "Conference" },
        { text: "Mission", id: 5, color: "#df5286", capacity: 25, type: "Conference" },
        { text: "Hangout", id: 6, color: "#00bdae", capacity: 10, type: "Cabin" },
        { text: "Rick Roll", id: 7, color: "#865fcf", capacity: 20, type: "Conference" },
        { text: "Rainbow", id: 8, color: "#1aaa55", capacity: 8, type: "Cabin" },
        { text: "Swarm", id: 9, color: "#df5286", capacity: 30, type: "Conference" },
        { text: "Photogenic", id: 10, color: "#710193", capacity: 25, type: "Conference" }
     ],
     textField: "text", idField: "id", colorField: "color"
   }],
});
scheduleObj.appendTo("#Schedule");

此代码块用于使用SyncFusion Scheduler库在JavaScript中创建计划组件的新实例:

  • 调度程序组件具有特定的高度,选定的日期和特定视图。
  • 该组件允许您拖放事件,并将事件的数据源设置为DataManager变量。
  • 调度程序组件可以分组资源;资源定义为会议室。会议室的数据源是一系列具有特定属性的对象,例如文本,ID,颜色,容量和类型。
  • 然后将调度程序组件附加到HTML元素上,其ID为 schedule

这将提供一个空的调度程序,使约会的创建,更新和删除以及执行拖放的能力并在约会上调整操作大小。

接下来,让我们使用数据管理器将我们的调度程序应用程序与服务器联系起来。将以下代码恰好放在调度程序实例的创建上方。

// data manager initialization.
var dataManager = new ej.data.DataManager({
  url: "http://localhost/ ej2-php-crud-service /server.php",
  crudUrl: "http://localhost/ ej2-php-crud-service /server.php",
  adaptor: new ej.data.UrlAdaptor(),
  crossDomain: true
});

此代码块创建了 dataManager 类的新实例,该实例可以在调度程序应用程序中处理诸如插入,检索,更新和删除约会之类的数据操作。已经设置了数据管理器,以通过 url crudurl 属性连接到特定服务器,这两者都设置为 http://localhost/ej2-php-crud-service/server.php urladaptor 处理应用程序和服务器之间的通信。 crossdomain 属性设置为 true ,表明该应用程序将向其他域上的服务器提出请求。此代码块设置了调度程序应用程序和服务器之间的连接,并配置了如何交换数据。

启动应用程序

创建必要的 index.php server.php 文件中的文件中的文件,启动应用程序。通过在显示隐藏图标面板上找到图标并选择显示/hide 来启动XAMPP服务器。这将打开XAMPP控制面板对话框。要启动Apache模块,请在对话框中选择开始按钮。如果不可见图标,请搜索XAMPP控制面板并启动开始过程。这将启动服务器并准备好使用。

运行XAMPP服务器,打开Web浏览器并导航到URL localhost/ej2-php-crud-service 。这将显示我们的调度程序应用程序。然后,我们可以在调度程序上执行CRUD操作,这将反映在MySQL数据库中。对约会进行的更新,包括拖动和调整大小,将立即在数据库中实时反映。

以下GIF映像说明了使用调度程序组件执行CRUD操作。

Creating appointments in JavaScript Scheduler

Updating appointments in JavaScript Scheduler

Deleting appointments in JavaScript Scheduler

在JavaScript调度程序中执行CRUD操作

GitHub参考

您可以查看此GitHub存储库React Scheduler CRUD application以获取更多演示。

概括

本文旨在对使用PHP和MySQL数据库构建具有CRUD功能的调度程序应用程序有更清晰的了解。试一试,让我们在评论部分中知道您的想法。

对于我们的客户,可以从License and Downloads页面下载最新版本的Essential Studio。如果您尚未成为一名综合客户,请利用我们30天的free trial体验我们提供的所有功能。

如果您有疑问,请不要犹豫,通过我们的support forumsupport portalfeedback portal与我们联系。我们总是在这里提供帮助!

相关链接