Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan yang berbahagia kali ini saya akan berbagi tutorial cara membuat aplikasi jadwal sederhana menggunakan library fullcalendar, dengan bahasa pemrograman php dan database mysql. Penasaran?, ayo ikuti tutorial selengkpanya berikut ini.

Apa yang Akan Dibuat?

Tutorial kali ini sangat sederhana, dimana kita akan membuat sebuah aplikasi yang nantinya akan menampilkan kalender beserta jadwal di setiap tanggalnya. Lalu kita juga akan membuat form input data jadwal, yang mana jadwal ini akan otomatis menjadi marker atau label di setiap tanggalnya. Untuk mempercantik tampilan, disini saya menggunakan bootstrap. Untuk hasil akhir aplikasinya bisa kalian lihat pada gambar terakhir artikel tutorial ini.

Baca Artikel Lain ✨

📰 1. 5 Alasan Kenapa Anda Wajib Menggunakan Wordpress untuk Mengembangkan Website yang Berhasil read more

📰 2. Cara Proteksi Halaman Login Wordpress dengan Captcha Moodle read more

📰 3. Apa itu Brute Force Attack dan Berikut Tips Manjur Untuk Mencegahnya Komputer read more

Karena kita menggunakan php dan mysql, disarankan kalian sudah paham dasar-dasar CRUD aplikasi dengan menggunakan bahasa php dan database mysql. Jika belum belajar atau belum paham, saya sarankan untuk melihat tutorial yang saya buat di link berikut ini. https://www.sahretech.com/2018/12/part-1-cara-membuat-halaman-input-data.html Lalu siapkan juga tools pendukung lainnya seperti xampp dan web editor seperti visual studio code.

1. Membuat Database dan Tabel

Bukalah phpmyadmin, lalu buat database dengan nama latihan dan buat tabel dengan nama jadwal di dalamnya. Buatlah struktur tabelnya dengan mengacu pada gambar di bawah ini.

Struktur tabel jadwal

2. Membuat Folder dan File index.php

Buatlah sebuah folder baru di dalam folder htdocs dengan nama apk_jadwal. Lalu buatlah sebuah file index.php di dalam folder apk_jadwal. Kemudian copy script di bawah ini dan pastekan ke dalam file index.php

    

 <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- bootstrap cdn  -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <!-- fullcalendar css  -->
        <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.css' rel='stylesheet' />
    </head>
    
    <body>
        <div class="container mt-4">
            <div class="row">
                <div class="col-lg-4">
                    <div class="alert alert-warning" role="alert">
                        <h4>Form Kegiatan</h4>
                    </div>
                    <div class="card">
                        <form action="proses.php" method="POST">
                            <div class="card-body">
                                <div class="form-group">
                                    <div class="form-label">Keterangan Kegiatan</div>
                                    <textarea name="kegiatan" class="form-control" id="kegiatan" cols="30"
                                        rows="2"></textarea>
                                </div>
                                <div class="form-group mt-4">
                                    <div class="form-label">Tgl Mulai</div>
                                    <input type="datetime-local" class="form-control" name="mulai" id="mulai">
                                </div>
                                <div class="form-group mt-4">
                                    <div class="form-label">Tgl Selesai</div>
                                    <input type="datetime-local" class="form-control" name="selesai" id="selesai">
                                </div>
                                <div class="form-group mt-4">
                                    <button type="submit" class="btn btn-success">Simpan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.js'></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
            integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    events: [ ],
                    selectOverlap: function (event) {
                        return event.rendering === 'background';
                    }
                });
    
                calendar.render();
            });
        </script>
    </body>
    
    </html>

Jika kalian jalankan di browser. Maka tampilannya akan tampak seperti gambar di bawah ini. terdapat form di sebelah kiri dan terdapat kalender di sebelah kanan.

tampilan project aplikasi jadwal sahretech

Tampilan project aplikasi kalender

Perhatikan script events: [ ] yang ada pada bagian javascript. Di dalam kurung siku tersebut kita akan isi dengan data yang ada di dalam database. Saat data-datanya di tampilkan, maka akan terlihat marker atau label yang ada di dalam kalender tersebut.

Kali ini kita menggunakan model kelander dayGridMonth. Tapi kalian punya pilihan lain untuk mengubah bentuk dari model kalender tersebut seperti yang telah dijelaskan pada web resmi fullcalendar. Selain itu terdapat juga fungsi lain yang bisa kalian gunakan untuk memberi gaya dan mengkustomisasi kalender yang ada, seperti fungsi clickevent, merubah warna marker, merubah bentuk kalender, membatasi jumlah event. Memblok jadwal dan sebagainya.

3. Membuat File proses.php

Selanjutnya buatlah sebuah file baru dengan nama proses.php di dalam folder apk_jadwal. Lalu copy script di bawah ini dan pasteken ke dalam file proses.php.

    

 <?php

    //mengambil data dari form input
    $kegiatan   = $_POST['kegiatan'];
    $mulai      = $_POST['mulai'];
    $selesai    = $_POST['selesai'];

    //membuat koneksi ke database
    $koneksi = mysqli_connect('localhost', 'root', '', 'latihan');

    //insert data ke dalam database
    mysqli_query($koneksi, "insert into jadwal set kegiatan='$kegiatan', mulai='$mulai', selesai='$selesai' ");
    

    //kembali ke halaman index.php
    header("location: index.php");

?>

Tidak ada yang baru atau terlalu sulit untuk dipahami pada php script di atas. Kita hanya menangkap data yang dikirimkan dari form lalu menyimpannya ke dalam database. Lalu setelah pengiriman data ke database berhasil selanjutnya kita akan diarahkan ke halaman index.php dengan menggunakan perintah header.

4. Menambahkan Script di index.php

Tahap terakhir dari tutorial kali ini adalah menambahkan php script yang ada di dalam events: [ ... ], silahkan buka file index.php lalu copy script di bawah ini dan pastekan di dalam events: [ ... ].

    

<?php 

    //melakukan koneksi ke database
    $koneksi    = mysqli_connect('localhost', 'root', '', 'latihan');
    //mengambil data dari tabel jadwal
    $data       = mysqli_query($koneksi,'select * from jadwal');
    //melakukan looping
    while($d = mysqli_fetch_array($data)){     
?>
{
    title: '<?php echo $d['kegiatan']; ?>', //menampilkan title dari tabel
    start: '<?php echo $d['mulai']; ?>', //menampilkan tgl mulai dari tabel
    end: '<?php echo $d['selesai']; ?>' //menampilkan tgl selesai dari tabel
},
<?php } ?>

Kita melakukan looping jadwal. Awalnya kita membuat koneksi ke database dengan perintah mysqli_connect. Lalu mengambil datanya dengan perintah mysqli_query. Lalu melooping datanya dengan menggunakan while(){ .. }. Lalu isi title: dengan jadwal. Isi start: dengan waktu mulai. Dan isi end: dengan waktu selesai.

Jika semua tahapan di atas telah kalian jalankan dengan benar, sekarang tiba saatnya kita melakukan testing terhadap aplikasi yang telah dibuat. Buka browser dan jalankan localhost/apk_jadwal. Jika berhasil maka tampilan dan prosesnya akan tampak seperti gambar di bawah ini.

Demo aplikasi jadwal dengan fullcalendar

Gimana?, tutorialnya menarik dan mudah dimengerti kan?. Saatnya kalian melakukan explorasi lebih dalam tentang library ini. Kalian bisa menambahkan fitur edit dan hapus data agar list jadwal yang ada dapat dimanipulasi dengan lebih dinamis.

Sekian tutorial keren tentang cara membuat aplikasi jadwal dengan full calendar js, php dan mysql. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan silahkan tinggalkan pesan kalian di kolom komentar di bawah postingan ini. Terima kasih dan sampai jumpa di tutorial menarik lainnya.

25 comments:

UnknownMarch 21, 2022 at 1:41 AM
Saya coba muncul eror :

Fatal error: Uncaught mysqli_sql_exception: Table 'latihan.jadwal' doesn't exist in C:\xampp\htdocs\apk_jadwal\proses.php:14 Stack trace: #0 C:\xampp\htdocs\apk_jadwal\proses.php(14): mysqli_query(Object(mysqli), 'insert into jad...') #1 {main} thrown in C:\xampp\htdocs\apk_jadwal\proses.php on line 14

Mohon bantuan
Kak_DhenyMarch 21, 2022 at 3:41 AM
Bisa tolong diperlihatkan isi file index.php setelah event : [] diisi seperti apa?
Saya coba malah kalendernya hilang🙏
Kak_DhenyMarch 21, 2022 at 8:34 AM
Sudah pak, setelah saya copy ke dalam kurung, kalendernya hilang
Kak_DhenyMarch 21, 2022 at 7:31 PM
Alhamdulillah sudah bisa pak
Kalo cara untuk menambahkan edit dan hapus bagaimana ya pak?🙏
Rayhan RanggaMay 9, 2022 at 8:49 PM
Halo pak, misal ada project di dalam jangka waktu yang sama, itu gimana caranya biar warnanya ga biru semua ya pak?
ibnu&tiaraJuly 29, 2022 at 5:22 PM
Bisa nggak pak, kalo dalam jangka waktu itu ada pelatihan jadi ada peringatan di range itu ada kegiatan, bagaimana y pak?
wiSeptember 16, 2022 at 12:46 AM
biar diklik caranya gmn mas
Syahidzul HafidzJanuary 3, 2023 at 7:13 PM
terima kasih tutorialnya. sangat bermanfaat sekali.
AnonymousJanuary 15, 2024 at 1:30 AM
Saya sudah berhasil pak, tetapi untuk tampilannya di kalender tidak muncul seperti contoh diatas
mohon arahannya
AnonymousMarch 8, 2024 at 1:07 AM
Terimakasih tutorialnya sangat bermanfaat, kalo mau nambah edit dan hapus bagaimana ya? adakah yang bisa bantu 🙏

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi