Halo semuanya, kembali lagi di tulisan saya. 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.fromsunda.eu.org/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 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.
Posting Komentar