Membuat Aplikasi Jadwal dengan Full Calendar Js, PHP dan MySQL

Share:

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 sahretech
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 fullcalendar
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:

  1. 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

    ReplyDelete
    Replies
    1. buat database latihan, dan buat tabel jadwal di dalamnya.

      Delete
    2. sudah, tapi tetap seperti itu..

      Delete
    3. Harusnya bisa, masnya pake php versi berapa?

      Delete
    4. sudah saya coba kembali dan berhasil mas, masnya coba diliat-liat lagi apa yang salah. kalo dilihat dari errornya tabel jadwal tidak ada

      Delete
  2. Bisa tolong diperlihatkan isi file index.php setelah event : [] diisi seperti apa?
    Saya coba malah kalendernya hilang🙏

    ReplyDelete
    Replies
    1. diisi dengan script yg ke-4. paste di dalam kurung [ ]. jangan dipaste setelahnya.

      Delete
    2. Alhamdulillah sudah berhasil
      Untuk cara menambahkan fitur edit dan hapus data bagaimana ya?
      Bisa tolong di pandu seperti apa script nya.. terima kasih...

      Delete
    3. Alhamdulillah, untuk penhjelasannya terlalu panjang kalo saya tulis disini. Dan saya belum tulis artikel mengenai itu. Jadi masnya cari-cari dulu di internet ya :)

      Delete
  3. Sudah pak, setelah saya copy ke dalam kurung, kalendernya hilang

    ReplyDelete
    Replies
    1. database latihan, dan tabel jadwal apakah sudah dibuat?. saya sudah coba kembali bisa pak.

      Delete
  4. Alhamdulillah sudah bisa pak
    Kalo cara untuk menambahkan edit dan hapus bagaimana ya pak?🙏

    ReplyDelete
  5. Halo pak, misal ada project di dalam jangka waktu yang sama, itu gimana caranya biar warnanya ga biru semua ya pak?

    ReplyDelete
    Replies
    1. tambah color seperti ini mas

      title: .....
      start: .....
      end: .....
      color: 'purple'

      Delete
    2. kalau begitu jadi purple semua pak, maksud saya misal project di tanggal yang sama itu warna nya bisa macam macam entah itu biru dan ungu atau warna warna lainnya

      Delete
    3. iya itu tinggal disesuaikan saja saat looping. Untuk warna tugas tertentu bisa dikasih warna tertentu dengan menggunakan if(). atau warnanya bisa disimpan di database, jadi tinggal ditampilkan saja

      Delete
    4. baik sudah bisa pak, terima kasih

      Delete
  6. Bisa nggak pak, kalo dalam jangka waktu itu ada pelatihan jadi ada peringatan di range itu ada kegiatan, bagaimana y pak?

    ReplyDelete
  7. terima kasih tutorialnya. sangat bermanfaat sekali.

    ReplyDelete
  8. Saya sudah berhasil pak, tetapi untuk tampilannya di kalender tidak muncul seperti contoh diatas
    mohon arahannya

    ReplyDelete
  9. Terimakasih tutorialnya sangat bermanfaat, kalo mau nambah edit dan hapus bagaimana ya? adakah yang bisa bantu 🙏

    ReplyDelete

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