{"id":132369,"date":"2023-03-10T08:18:05","date_gmt":"2023-03-10T08:18:05","guid":{"rendered":"https:\/\/phppot.com\/?p=20461"},"modified":"2023-03-10T08:18:05","modified_gmt":"2023-03-10T08:18:05","slug":"event-management-system-project-in-php","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/03\/10\/event-management-system-project-in-php\/","title":{"rendered":"Event Management System Project in PHP"},"content":{"rendered":"
by Vincy<\/a>. Last modified on March 10th, 2023.<\/div>\n

When managing events, the date and time come into the picture. So, the calendar component is the best to render events in a viewport. It is convenient compared to other views like card-view or list-view.<\/p>\n

This example uses the JavaScript library FullCalendar<\/strong> to render and manage events. The events are from the database by using PHP and MySQL.<\/p>\n

The following script gives you a simple event management system in PHP with AJAX. The AJAX handlers connect the PHP endpoint to manage events with the database.<\/p>\n

In a previous tutorial, we have seen how to create a PHP event management system with Bootstrap<\/a>.<\/p>\n

\"create<\/p>\n

Step 1: Create an HTML base with the FullCalendar library<\/h2>\n

The client-side script has the HTML with the required dependencies. This HTML uses CDN to import the JS and CSS. It uses the following libraries<\/p>\n

    \n
  1. FullCalendar.<\/li>\n
  2. MomentJS.<\/li>\n
  3. jQuery and jQuery UI.<\/li>\n<\/ol>\n

    It has an empty DIV target that will display the calendar UI after initiating the FullCalendar JavaScript library class.<\/p>\n

    index.php<\/p>\n

    <!DOCTYPE html>\n<html>\n<head>\n<title>Event management in php<\/title> <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.22.2\/moment.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullcalendar\/3.9.0\/fullcalendar.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullcalendar\/3.9.0\/locale-all.js\"><\/script>\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullcalendar\/3.9.0\/fullcalendar.min.css\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\n<link rel=\"stylesheet\" href=\"assets\/css\/style.css\">\n<link rel=\"stylesheet\" href=\"assets\/css\/form.css\">\n<script src=\"assets\/js\/event.js\"><\/script>\n<style>\n.btn-event-delete { font-size: 0.85em; margin: 0px 10px 0px 5px; font-weight: bold; color: #959595;\n}\n<\/style>\n<\/head> <body> <div class=\"phppot-container\"> <h2>Event management in php<\/h2> <div class=\"response\"><\/div> <div class=\"row\"> <input type=\"text\" name=\"filter\" id=\"filter\" placeholder=\"Choose date\" \/> <button type=\"button\" id=\"button-filter\" onClick=\"filterEvent();\">Filter<\/button> <\/div> <div class=\"row\"> <div id='calendar'><\/div> <\/div> <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
    Step 2: Create MySQL Structure in phpMyAdmin<\/h2>\n
    This example creates a persistent event management system in PHP. The newly created or modified event data are permanently stored in the database.<\/p>\n
    This script has the CREATE STATEMENT and indexes of the tbl_events database. Do the following steps to set up this database in a development environment.<\/p>\n
      \n
    1. Create a database and import the below SQL script into it.<\/li>\n
    2. Configure the newly created database in config\/db.php of this project.<\/li>\n<\/ol>\n
      Database script<\/h3>\n
      sql\/structure.sql<\/p>\n
      --\n-- Database: `full_calendar`\n-- -- -------------------------------------------------------- --\n-- Table structure for table `tbl_events`\n-- CREATE TABLE `tbl_events` ( `id` int(11) NOT NULL, `title` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin DEFAULT NULL, `start` date DEFAULT NULL, `end` date DEFAULT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=latin1; --\n-- Indexes for dumped tables\n-- --\n-- Indexes for table `tbl_events`\n--\nALTER TABLE `tbl_events` ADD PRIMARY KEY (`id`); --\n-- AUTO_INCREMENT for dumped tables\n-- --\n-- AUTO_INCREMENT for table `tbl_events`\n--\nALTER TABLE `tbl_events` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;\n<\/code><\/pre>\n
      Database configuration<\/h3>\n
      db.php<\/p>\n
      <?php\n$conn = mysqli_connect(\"localhost\", \"root\", \"\", \"full_calendar\"); if (! $conn) { echo \"Failed to connect to MySQL: \" . mysqli_connect_error();\n}\n?>\n<\/code><\/pre>\n
      Step 3: Initiate Fullcalendar and create listeners to manage events<\/h2>\n
      This section initiates the JavaScript calendar library with suitable settings. For example, the below script enables the following directives to allow mouse events to make changes in the calendar.<\/p>\n
        \n
      1. editable \u2013 It will enable event editing on the calendar by switching it on.<\/li>\n
      2. droppable \u2013 It supports event drag and drops<\/a> to change the date.<\/li>\n
      3. eventResize \u2013 It supports inline extending or reducing the event period by resizing.<\/li>\n
      4. eventLimit \u2013 It allows limiting the number of events displayed on a date instance.<\/li>\n
      5. displayEventTime \u2013 It shows event time if added.<\/li>\n<\/ol>\n
        The Fullcalendar property \u201cevents\u201d specifies the array of events rendered download. In this example, it has the PHP endpoint URL to read calendar events dynamically from the database.<\/p>\n
        This script maps the calendar event\u2019s select, drag, drop, and resize with the defined AJAX handlers<\/a>.<\/p>\n
        $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ editable: true, eventLimit: true, droppable: true, eventColor: \"#fee9be\", eventTextColor: \"#232323\", eventBorderColor: \"#CCC\", eventResize: true, header: { right: 'prev, next today', left: 'title', center: 'listMonth, month, basicWeek, basicDay' }, events: \"ajax-endpoint\/fetch-calendar.php\", displayEventTime: false, eventRender: function(event, element) { element.find(\".fc-content\").prepend(\"<span class='btn-event-delete'>X<\/span>\"); element.find(\"span.btn-event-delete\").on(\"click\", function() { if (confirm(\"Are you sure want to delete the event?\")) { deleteEvent(event); } }); }, selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('Event Title:'); if (title) { var start = $.fullCalendar.formatDate(start, \"Y-MM-DD HH:mm:ss\"); var end = $.fullCalendar.formatDate(end, \"Y-MM-DD HH:mm:ss\"); addEvent(title, start, end); calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true ); } calendar.fullCalendar('unselect'); }, eventClick: function(event) { var title = prompt('Event edit Title:', event.title); if (title) { var start = $.fullCalendar.formatDate(event.start, \"Y-MM-DD HH:mm:ss\"); var end = $.fullCalendar.formatDate(event.end, \"Y-MM-DD HH:mm:ss\"); editEvent(title, start, end, event); } }, eventDrop: function(event) { var title = event.title; if (title) { var start = $.fullCalendar.formatDate(event.start, \"Y-MM-DD HH:mm:ss\"); var end = $.fullCalendar.formatDate(event.end, \"Y-MM-DD HH:mm:ss\"); editEvent(title, start, end, event); } }, eventResize: function(event) { var title = event.title; if (title) { var start = $.fullCalendar.formatDate(event.start, \"Y-MM-DD HH:mm:ss\"); var end = $.fullCalendar.formatDate(event.end, \"Y-MM-DD HH:mm:ss\"); editEvent(title, start, end, event); } } }); $(\"#filter\").datepicker();\n});\nfunction addEvent(title, start, end) { $.ajax({ url: 'ajax-endpoint\/add-calendar.php', data: 'title=' + title + '&start=' + start + '&end=' + end, type: \"POST\", success: function(data) { displayMessage(\"Added Successfully\"); } });\n} function editEvent(title, start, end, event) { $.ajax({ url: 'ajax-endpoint\/edit-calendar.php', data: 'title=' + title + '&start=' + start + '&end=' + end + '&id=' + event.id, type: \"POST\", success: function() { displayMessage(\"Updated Successfully\"); } });\n} function deleteEvent(event) { $('#calendar').fullCalendar('removeEvents', event._id); $.ajax({ type: \"POST\", url: \"ajax-endpoint\/delete-calendar.php\", data: \"&id=\" + event.id, success: function(response) { if (parseInt(response) > 0) { $('#calendar').fullCalendar('removeEvents', event.id); displayMessage(\"Deleted Successfully\"); } } });\n}\nfunction displayMessage(message) { $(\".response\").html(\"<div class='success'>\" + message + \"<\/div>\"); setInterval(function() { $(\".success\").fadeOut(); }, 5000);\n} function filterEvent() { var filterVal = $(\"#filter\").val(); if (filterVal) { $('#calendar').fullCalendar('gotoDate', filterVal); $(\"#filter\").val(\"\"); }\n}\n<\/code><\/pre>\n
        Step 4: Create AJAX endpoints to create, render and manage event data<\/h2>\n
        This section shows the PHP code for the AJAX endpoint. The Fullcalendar callback handlers call these endpoints via AJAX.<\/p>\n
        This endpoint receives the event title, start date, and end date. It processes the requested database operation using the received parameters.<\/p>\n
        ajax-endpoint\/fetch-calendar.php<\/p>\n
        <?php\nrequire_once \"..\/config\/db.php\"; $json = array();\n$sql = \"SELECT * FROM tbl_events ORDER BY id\"; $statement = $conn->prepare($sql);\n$statement->execute();\n$dbResult = $statement->get_result(); $eventArray = array();\nwhile ($row = mysqli_fetch_assoc($dbResult)) { array_push($eventArray, $row);\n}\nmysqli_free_result($dbResult); mysqli_close($conn);\necho json_encode($eventArray);\n?>\n<\/code><\/pre>\n
        ajax-endpoint\/add-calendar.php<\/p>\n
        <?php\nrequire_once \"..\/config\/db.php\"; $title = $_POST['title'];\n$start = $_POST['start'];\n$end = $_POST['end'];\n$statement = $conn->prepare('INSERT INTO tbl_events (title,start,end) VALUES (?,?,?)');\n$statement->bind_param('sss', $title, $start, $end);\n$rowResult = $statement->execute();\nif (! $rowResult) { $result = mysqli_error($conn);\n}\n?>\n<\/code><\/pre>\n
        ajax-endpoint\/edit-calendar.php<\/p>\n
        <?php\nrequire_once \"..\/config\/db.php\"; $id = $_POST['id'];\n$title = $_POST['title'];\n$start = $_POST['start'];\n$end = $_POST['end'];\n$statement = $conn->prepare('UPDATE tbl_events SET title = ?, start= ?, end=? WHERE id = ?');\n$statement->bind_param('sssi', $title, $start, $end, $id);\n$rowResult = $statement->execute();\nmysqli_close($conn);\n?>\n<\/code><\/pre>\n
        ajax-endpoint\/delete-calendar.php<\/p>\n
        <?php\nrequire_once \"..\/config\/db.php\"; $id = $_POST['id'];\n$statement = $conn->prepare('DELETE from tbl_events WHERE id= ?');\n$statement->bind_param('i', $id);\n$rowResult = $statement->execute();\necho mysqli_affected_rows($conn);\nmysqli_close($conn);\n?>\n<\/code><\/pre>\n
        Event management calendar output<\/h2>\n
        \"event<\/p>\n
        Download<\/a><\/p>\n
          <\/p>\n
        \n
        Popular Articles<\/h2>\n<\/p><\/div>\n
         \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
        by Vincy. Last modified on March 10th, 2023. When managing events, the date and time come into the picture. So, the calendar component is the best to render events in a viewport. It is convenient compared to other views like card-view or list-view. This example uses the JavaScript library FullCalendar to render and manage events. […]<\/p>\n","protected":false},"author":2,"featured_media":132370,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-132369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/132369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=132369"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/132369\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/132370"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=132369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=132369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=132369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}