PHP

Buat Sistem Manajemen Acara PHP Berbasis AJAX dengan Bootstrap

Posted on by administrator
31
May
0
(0)

oleh Vincy. Terakhir diubah pada 18 Mei 2021.

Mari kita telusuri dan bangun sistem manajemen acara PHP, ini adalah salah satu komponen perangkat lunak yang paling diinginkan dan Anda mungkin akan senang membuatnya.

Aplikasi manajemen yang merata ini akan memberikan antarmuka kepada pengguna untuk membuat dan mengelola acara. Kami akan memiliki dua jenis pengguna, penyelenggara acara dan peserta acara.

Ada berbagai jenis aplikasi manajemen acara seperti, manajemen acara berbasis kalender, peta atau manajemen acara berbasis lokasi.

Dalam tutorial ini, saya akan menunjukkan kode untuk membuat sistem manajemen acara berbasis kalender. Saya telah menggunakan Bootstrap untuk menampilkan acara di kalender. Juga pembuatan dan manajemen acara dikodekan dengan jQuery AJAX.

Output Sistem Manajemen Peristiwa Berbasis AJAX

Apa isinya?

  1. Tujuan dari sistem manajemen acara
  2. Pustaka manajemen Peristiwa PHP yang ada
  3. Tentang contoh sistem manajemen acara
  4. Buat antarmuka kalender menggunakan PHP
  5. Tambahkan acara baru atau muat acara yang ada ke kalender
  6. Kode PHP untuk membuat dan mengambil acara
  7. Struktur File
  8. Skrip database
  9. Output contoh sistem manajemen acara PHP

Tujuan dari sistem manajemen acara

Tujuan utama dari sistem manajemen acara adalah menyemprotkan pembuatan dan pengelolaan data acara melalui perangkat lunak. Ini akan meningkatkan konsistensi proses manajemen acara dengan aliran kontrol yang sempurna.

Sistem manajemen acara memungkinkan untuk memisahkan acara berdasarkan berbagai parameter. Misalnya, acara dapat dilihat berdasarkan penyelenggara, lokasi, waktu, dan faktor lainnya.

Fitur dan fungsi aplikasi direncanakan dan dikemas dengan sistem untuk memfasilitasi pengguna utamanya yaitu penyelenggara dan peserta.

Pustaka manajemen Peristiwa PHP yang ada

Sudah ada banyak pustaka manajemen acara dalam PHP yang tersedia di pasaran. API Google Kalender memberikan dukungan terbaik untuk membuat sistem manajemen acara dengan menggunakan pustaka klien PHP.

Menghadiri adalah sistem manajemen acara lain yang tersedia di PHP. Ini akan menjadi solusi yang cocok untuk membuat penjualan tiket online dan sistem manajemen acara dengan PHP. Ini menyediakan fitur-fitur canggih untuk mengatur acara dan mengelola peserta.

Mengintegrasikan API pihak ketiga untuk mengimplementasikan sistem manajemen acara merupakan proses yang sedikit rumit pada tahap awal. Jadi, saya lebih suka memulai dengan memahami konsep manajemen acara untuk dibangun dengan pengembangan khusus. Artikel ini akan sangat membantu dalam hal ini.

Tentang contoh sistem manajemen acara

Kode contoh ini memungkinkan pengguna untuk menambahkan acara secara dinamis melalui antarmuka kalender. Peristiwa disimpan dalam database dan dimuat ke kalender sesuai tanggal yang sesuai.

Saat pengguna mengklik kotak tanggal di antarmuka kalender, prompt JavaScript akan ditampilkan untuk memasuki acara. Setelah dikonfirmasi, data dikirim melalui AJAX dan diproses dalam PHP.

Pustaka FullCalendar berbasis jQuery Bootstrap digunakan untuk membuat sistem manajemen acara kalender ini. Dan arahan perpustakaan yang sesuai digunakan untuk mengaktifkan navigasi kalender dan membuatnya dapat diedit.

Data dinamis dari database diminta melalui AJAX dan dibaca sebagai objek JSON untuk dipetakan pada tampilan kalender halaman arahan.

Buat antarmuka kalender menggunakan PHP

Sebuah antarmuka kalender dibuat untuk contoh manajemen acara PHP ini untuk menambah dan mengelola acara. Saya membuat HTML dengan wadah target untuk merender kalender dengan memuat FullCalendar.

Dalam contoh ini, saya telah menggunakan jQuery AJAX, Bootstrap dan pustaka FullCalendar. Kode di bawah ini menunjukkan HTML dengan dependensi perpustakaan yang disertakan.

Dengan menginisialisasi pustaka FullCalendar, antarmuka kalender akan ditampilkan dalam HTML target. Dalam tutorial sebelumnya, kita telah melihat bagaimana menampilkan kalender dan memuat data menggunakan pustaka FullCalendar.

<!DOCTYPE html>
<html>
<head>
<title>AJAX-Based Event Management System with Bootstrap</title>
<link rel="stylesheet" href="https://phppot.com/php/create-ajax-based-event-management-system-with-bootstrap/fullcalendar/fullcalendar.min.css" />
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
<style>
body {
    font-family: Arial;
}
h1#demo-title {
    margin: 30px 0px 80px 0px;
    text-align: center;
}

#event-action-response {
    background-color: #5ce4c6;
    border: #57d4b8 1px solid;
    padding: 10px 20px;
    border-radius: 3px;
    margin-bottom: 15px;
    color: #333;
    display: none;
}

.fc-day-grid-event .fc-content {
    background: #586e75;
    color: #FFF;
}

.fc-event, .fc-event-dot {
    background-color: #586e75;
}

.fc-event {
    border: 1px solid #485b61;
}
</style>
</head>
<body>
    <div class="container">
        <h1 id="demo-title">AJAX-Based Event Management System with
            Bootstrap</h1>
        <div id="event-action-response"></div>
        <div id="calendar"></div>
    </div>
</body>
</html>

Tambahkan acara baru atau muat acara yang ada ke kalender

Setelah menampilkan antarmuka kalender di halaman arahan, acara yang ada akan disusun pada sel hari yang sesuai.

Dengan memilih setiap hari kotak prompt JavaScript akan ditampilkan kepada pengguna untuk memasukkan judul acara. Setelah pengguna mengklik OK, acara tersebut akan ditambahkan ke database untuk tanggal yang dipilih. Untuk itu, harus kita atur dipilih: benar untuk mengaktifkan pilihan hari kalender bagi pengguna. Secara default ini akan menjadi Salah.

Skrip di bawah ini menunjukkan cara menginisialisasi pustaka FullCalendar dan memanggil tindakan ambil, buat, edit melalui AJAX. Dalam skrip ini, instance kalender dibuat dan digunakan untuk memuat ulang data acara pada setiap pembaruan.

Acara kalender yang ditambahkan dapat diedit dengan pengaturan dapat diedit: benar saat menginisialisasi pustaka FullCalendar. Karena arahan ini disetel dalam contoh ini, acara yang ditambahkan dapat dipindahkan dari satu tanggal ke tanggal lain dengan menggunakan seret dan lepas.

FullCalendar memungkinkan untuk menyesuaikan tajuknya untuk mengaktifkan kontrol untuk melihat berdasarkan Bulan, Minggu dan Hari. Standarnya adalah tampilan Bulan. Penyesuaian eksplisit ini akan membantu menemukan posisi kiri kanan dari elemen tajuk kalender.

<script>
$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        editable:true,
        events: 'getEvent.php',
        selectable:true,
        selectHelper:true,
        select: function(start,allDay)
        {
             var Event = prompt("Add Event");
             if(Event)
             {
                  var Date = $.fullCalendar.formatDate(start, "Y-MM-DD");
                  $("#event-action-response").hide();
                  $.ajax({
                       url:"addEvent.php",
                       type:"POST",
                       data:{title:Event, start:Date},
                       success:function()
                       {
                        calendar.fullCalendar('refetchEvents');
                        $("#event-action-response").html("Event added Successfully");
                        $("#event-action-response").show();
                       }
                  })
             }
        },
        eventDrop: function(event, delta, revertFunc) {
            if (!confirm("Are you sure about to move this event?")) {
                 revertFunc();
            } else {
                var editedDate = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
                $("#event-action-response").hide();
                $.ajax({
                    url:"editevent.php",
                    type:"POST",
                    data:{event_id:event.id, start:editedDate},
                    success:function(resource)
                    {
                     calendar.fullCalendar('refetchEvents');
                     $("#event-action-response").html("Event moved Successfully");
                     $("#event-action-response").show();
                    }
                })
            }
        },        
    });
});  
</script>

Tentang opsi pustaka FullCalendar yang digunakan dalam contoh ini

Perpustakaan FullCalendar dibuat dengan beberapa default untuk opsi arahannya. Ini memungkinkan untuk mengganti default tersebut dengan menyetel opsi eksplisit selama inisialisasi.

Saya telah menyetel opsi berikut saat menginisialisasi FullCalendar untuk contoh manajemen acara PHP ini. Tabel ini menjelaskan bagaimana opsi digunakan dalam contoh ini.

Pilihan Deskripsi
dapat dipilih Untuk mengizinkan pengguna memilih sel kalender dengan mengklik atau menyeret.
acara Sumber data acara kalender. Ini dapat diatur sebagai larik nilai statis. Dalam contoh ini, saya telah memanggil kode sisi server melalui AJAX untuk mengatur data dinamis untuk sumber acara.
selectHelper Ini adalah Boolean dan nilai defaultnya adalah Salah. Jika benar, acara placeholder akan ditarik saat menyeret acara.
Pilih Opsi ini untuk menentukan atau mendefinisikan fungsi panggilan balik. Fungsi ini akan dipanggil saat memilih sel kalender
dapat diedit Ini adalah Boolean dan nilai defaultnya adalah Salah. Opsi ini menentukan apakah acara kalender dapat diedit atau tidak.
eventDrop Ini adalah panggilan balik yang akan dipanggil ketika pengguna meletakkan acara ke dalam sel kalender.

Kode PHP untuk membuat dan mengambil acara

Kode PHP yang ditunjukkan di bawah ini digunakan untuk membaca atau menyimpan data acara dengan mengakses database. Itu db.php file yang termasuk dalam kedua potongan kode di bawah ini digunakan untuk membuat objek koneksi MySQL.

Dalam contoh ini, saya telah menggunakan pernyataan yang disiapkan untuk menangani eksekusi query database. Menggunakan pernyataan yang disiapkan adalah praktik dasar yang terutama membantu melindungi aplikasi dari injeksi SQL.

Kode PHP untuk menyimpan acara

Kode PHP ini dipanggil melalui AJAX dengan mengonfirmasi acara yang ditambahkan untuk disimpan ke database. Judul acara dan tanggal mulai diteruskan melalui panggilan AJAX dan ditangani dalam file PHP ini.

Kueri dibuat menggunakan PDO dan parameter terikat dengan pernyataan kueri.

<?php
require_once "db.php";
if (isset($_POST["title"])) {
    $query = "INSERT INTO events (title, event_date) VALUES (:title, :event_date)";
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':title' => $_POST['title'],
        ':event_date' => $_POST['start']
    ));
}
?>

Kode PHP untuk mengambil acara

Kode ini akan dipanggil setelah memuat kalender di halaman arahan.

Kueri SQL digunakan untuk membaca data peristiwa yang akan disimpan ke dalam array. Larik acara ini akan dienkode ke dalam format JSON.

Dengan mencetak data JSON acara ini di akhir skrip ini, ini akan menjadi respons terhadap panggilan AJAX. Data tanggapan akan ditetapkan sebagai sumber acara untuk dirender ke dalam sel kalender.

<?php
require_once "db.php";
$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach ($result as $row) {
    $data[] = array(
        'id' => $row["id"],
        'title' => $row["title"],
        'start' => $row["event_date"]
    );
}
echo json_encode($data);
?>

Kode PHP untuk mengedit acara

Pengeditan acara direncanakan untuk contoh ini untuk memindahkan acara dari satu tanggal ke tanggal lain. Antarmuka FullCalendar memungkinkan seret dan lepas dengan pengaturan dapat diedit: benar.

Saat menyeret acara dari satu sel kalender ke sel kalender lainnya, kode PHP ini akan dipanggil melalui AJAX. Dalam kueri UPDATE, tanggal yang diubah disetel untuk memperbarui tanggal mulai acara dengan referensi id acara.

<?php
require_once "db.php";
if (isset($_POST["event_id"])) {
    $query = "UPDATE events SET event_date =:event_date WHERE id =:event_id";
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':event_id' => $_POST['event_id'],
        ':event_date' => $_POST['start']
    ));
}
?>

Struktur File

Contoh sistem manajemen acara ini dibuat dengan struktur file berikut. File PHP getEvent.php, addEvent.php dan editEvent.php di root proyek digunakan untuk mengambil dan menyimpan acara.

Konfigurasi DB dan pembuatan pegangan koneksi dilakukan dengan file db.sql mengajukan. Dan, file ini akan disertakan di mana pun itu diperlukan untuk menggunakan objek penghubung database.

Pernyataan create database acara dengan dump data ditambahkan dengan events.sql naskah.

Saya telah menyertakan file pustaka FullCalendar dengan versi minified dari jQuery dan file pustaka JS moment. Ini adalah dependensi yang digunakan untuk menjalankan sistem manajemen acara ini dengan antarmuka kalender.

Struktur File Manajemen Acara

Skrip database

Skrip ini menunjukkan pernyataan CREATE dari tabel database acara. Ini berisi informasi acara minimal yaitu judul dan tanggal mulai acara.

Impor skrip ini ke dalam lingkungan PHP Anda tempat Anda menerapkan kode contoh ini. Setelah mengimpor file ini, ubah konfigurasi database di db.php untuk menjalankan contoh manajemen acara ini

--
-- Table structure for table `events`
--

DROP TABLE IF EXISTS `events`;
CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `event_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;

Output contoh sistem manajemen acara PHP

Antarmuka kalender manajemen acara ini menampilkan acara yang dimuat pada sel hari yang sesuai. Peristiwa ini dinamis dari database yang ditampilkan di atas lapisan kalender.

Gambar menunjukkan Sebelumnya/Lanjut kontrol navigasi untuk bolak-balik di kalender. Tombol hari ini akan diaktifkan ketika pengguna menavigasi dari hari ini.

Dengan menyeret kartu acara dari satu sel dan menjatuhkannya ke sel lain, tanggal acara dapat diubah. Pada tindakan drop, kotak konfirmasi JavaScript akan ditampilkan kepada pengguna untuk menyetujui tindakan edit.

Gambar menunjukkan acara edit dengan menggunakan drag and drop dan juga menampilkan kotak konfirmasi untuk menyetujui.

Edit Acara Kalender

Kesimpulan

Semoga artikel ini membantu Anda mendapatkan pengetahuan yang baik yang diperlukan untuk membangun aplikasi manajemen Acara PHP. Tujuan utamanya adalah untuk memandu Anda membangun aplikasi kerangka dasar yang akan berfungsi sebagai titik awal untuk beberapa sistem manajemen acara yang hebat.

Antarmuka kalender interaktif disediakan untuk memudahkan penanganan acara, untuk membuat dan mengelola tindakan. Basis data yang digunakan dalam kode contoh ini sengaja dibuat sesederhana mungkin dengan data yang minimal.

Beri tahu saya jika Anda memiliki pertanyaan atau keraguan dalam membangun aplikasi manajemen acara di komentar di bawah dan saya akan dengan senang hati menjawabnya.

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