PHP

Proyek Sistem Manajemen Acara di PHP

Posted on by administrator
11
Mar
0
(0)

oleh Vincy. Terakhir diubah pada 10 Maret 2023.

Saat mengelola acara, tanggal dan waktu masuk ke dalam gambar. Jadi, komponen kalender adalah yang terbaik untuk merender acara di viewport. Lebih nyaman dibandingkan dengan tampilan lain seperti tampilan kartu atau tampilan daftar.

Contoh ini menggunakan pustaka JavaScript Kalender Penuh untuk merender dan mengelola acara. Event-event tersebut berasal dari database dengan menggunakan PHP dan MySQL.

Skrip berikut memberi Anda sistem manajemen acara sederhana di PHP dengan AJAX. Penangan AJAX menghubungkan titik akhir PHP untuk mengelola acara dengan database.

Pada tutorial sebelumnya, kita telah melihat cara membuat sistem manajemen acara PHP dengan Bootstrap.

buat edit hapus acara di php

Langkah 1: Buat basis HTML dengan pustaka FullCalendar

Skrip sisi klien memiliki HTML dengan dependensi yang diperlukan. HTML ini menggunakan CDN untuk mengimpor JS dan CSS. Ini menggunakan perpustakaan berikut

  1. Kalender Penuh.
  2. MomenJS.
  3. jQuery dan jQuery UI.

Ini memiliki target DIV kosong yang akan menampilkan UI kalender setelah memulai kelas pustaka JavaScript FullCalendar.

index.php

<!DOCTYPE html>
<html>
<head>
<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>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    type="text/javascript"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale-all.js"></script>
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"
    rel="stylesheet">
<link rel="stylesheet"
    href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/form.css">
<script src="assets/js/event.js"></script>
<style>
.btn-event-delete {
    font-size: 0.85em;
    margin: 0px 10px 0px 5px;
    font-weight: bold;
    color: #959595;
}
</style>
</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>
</body>
</html>

Langkah 2: Buat Struktur MySQL di phpMyAdmin

Contoh ini membuat sistem manajemen acara yang persisten di PHP. Data acara yang baru dibuat atau diubah disimpan secara permanen di database.

Skrip ini memiliki CREATE STATEMENT dan indeks dari database tbl_events. Lakukan langkah-langkah berikut untuk menyiapkan database ini di lingkungan pengembangan.

  1. Buat database dan impor skrip SQL di bawah ini ke dalamnya.
  2. Konfigurasi database yang baru dibuat di config/db.php proyek ini.

skrip basis data

sql/struktur.sql

--
-- Database: `full_calendar`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_events`
--

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
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_events`
--
ALTER TABLE `tbl_events`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_events`
--
ALTER TABLE `tbl_events`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Konfigurasi basis data

db.php

<?php
$conn = mysqli_connect("localhost", "root", "", "full_calendar");

if (! $conn) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

Langkah 3: Mulai Fullcalendar dan buat pendengar untuk mengelola acara

Bagian ini memulai perpustakaan kalender JavaScript dengan pengaturan yang sesuai. Misalnya, skrip di bawah ini mengaktifkan arahan berikut untuk memungkinkan aktivitas mouse membuat perubahan di kalender.

  1. dapat diedit – Ini akan mengaktifkan pengeditan acara di kalender dengan mengaktifkannya.
  2. droppable – Ini mendukung seret dan lepas acara untuk mengubah tanggal.
  3. eventResize – Ini mendukung perpanjangan sebaris atau pengurangan periode acara dengan mengubah ukuran.
  4. eventLimit – Ini memungkinkan membatasi jumlah acara yang ditampilkan pada contoh tanggal.
  5. displayEventTime – Menampilkan waktu acara jika ditambahkan.

Properti Fullcalendar “events” menentukan rangkaian acara yang di-download. Dalam contoh ini, ia memiliki URL endpoint PHP untuk membaca acara kalender secara dinamis dari database.

Skrip ini memetakan pemilihan, seret, jatuhkan, dan ubah ukuran acara kalender dengan penangan AJAX yang ditentukan.

$(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();
});
function 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");
		}
	});
}

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

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");
			}
		}
	});
}
function displayMessage(message) {
	$(".response").html("<div class="success">" + message + "</div>");
	setInterval(function() { $(".success").fadeOut(); }, 5000);
}

function filterEvent() {
	var filterVal = $("#filter").val();
	if (filterVal) {
		$('#calendar').fullCalendar('gotoDate', filterVal);
		$("#filter").val("");
	}
}

Langkah 4: Buat titik akhir AJAX untuk membuat, merender, dan mengelola data peristiwa

Bagian ini menampilkan kode PHP untuk endpoint AJAX. Penangan panggilan balik Fullcalendar memanggil titik akhir ini melalui AJAX.

Titik akhir ini menerima judul acara, tanggal mulai, dan tanggal akhir. Ini memproses operasi database yang diminta menggunakan parameter yang diterima.

ajax-endpoint/fetch-calendar.php

<?php
require_once "../config/db.php";

$json = array();
$sql = "SELECT * FROM tbl_events ORDER BY id";

$statement = $conn->prepare($sql);
$statement->execute();
$dbResult = $statement->get_result();

$eventArray = array();
while ($row = mysqli_fetch_assoc($dbResult)) {
    array_push($eventArray, $row);
}
mysqli_free_result($dbResult);

mysqli_close($conn);
echo json_encode($eventArray);
?>

ajax-endpoint/add-calendar.php

<?php
require_once "../config/db.php";

$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$statement = $conn->prepare('INSERT INTO tbl_events (title,start,end) VALUES (?,?,?)');
$statement->bind_param('sss', $title, $start, $end);
$rowResult = $statement->execute();
if (! $rowResult) {
    $result = mysqli_error($conn);
}
?>

ajax-endpoint/edit-calendar.php

<?php
require_once "../config/db.php";

$id = $_POST['id'];
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
$statement = $conn->prepare('UPDATE tbl_events SET title = ?, start= ?, end=? WHERE id = ?');
$statement->bind_param('sssi', $title, $start, $end, $id);
$rowResult = $statement->execute();
mysqli_close($conn);
?>

ajax-endpoint/delete-calendar.php

<?php
require_once "../config/db.php";

$id = $_POST['id'];
$statement = $conn->prepare('DELETE from tbl_events WHERE id= ?');
$statement->bind_param('i', $id);
$rowResult = $statement->execute();
echo mysqli_affected_rows($conn);
mysqli_close($conn);
?>

Keluaran kalender manajemen acara

manajemen acara di php

Unduh

↑ Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator