Membuat Kalender Jadwal Dengan PHP, Mysql, dan Fullcalendar.js

Membuat Kalender Jadwal Dengan PHP, Mysql, dan Fullcalendar.js Oleh: Dimas Agung Noviyanto

Mau bikin kalender jadwal sendiri atau aplikasi jadwal lainnya ?Anda beruntung dapat menemukan tutorial ini. Sekarang saya akan membahas cara membuat kalender jadwal dengan PHP MySQL. Pada tutorial ini anda akan belajar membuat event calendar dengan fungsi-fungsi CREATE, READ, UPDATE, dan DELETE.Untuk m...

Mau bikin kalender jadwal sendiri atau aplikasi jadwal lainnya ?Anda beruntung dapat menemukan tutorial ini. Sekarang saya akan membahas cara membuat kalender jadwal dengan PHP MySQL. Jadwal tersebut berupa event calendar yang akan menampilkan calendar event atau jadwal .Pada tutorial ini anda akan belajar membuat event calendar dengan fungsi-fungsi CREATE, READ, UPDATE, dan DELETE. Untuk membuat kalender jadwal ini, kita membutuhkan plugin fullcalendar ,jquery.min, jquery-ui.min, dan moment.min. Sebelum mulai melakukan koding, kita buat databasenya terlebih dahulu Buat database calendar lalu tambahkan tabel event :

-- Dumping structure for table calendar.event CREATE TABLE IF NOT EXISTS `event` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `startdate` varchar(48) NOT NULL, `enddate` varchar(48) NOT NULL, `allDay` varchar(5) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `id` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

Contoh datanya sebagai berikut:

-- Dumping data for table calendar.event: ~5 rows (approximately) INSERT INTO `calendar` (`id`, `title`, `startdate`, `enddate`, `allDay`) VALUES (1, 'Jadwal 1', '2015-06-08T00:06:00', '2015-06-08T00:06:00', 'false'), (3, 'Jadwal 2', '2015-06-09T00:06:00+', '2015-06-09T00:06:00+', 'false'), (4, 'Jadwal 3', '2015-06-15T00:06:00+America/Chicago', '2015-06-15T00:06:00+America/Chicago', 'false'), (5, 'Jadwal 4', '2015-06-03T00:06:00+07:00', '2015-06-03T00:06:00+07:00', 'false'), (6, 'Jadwal 5', '2015-06-29T00:06:00+07:00', '2015-06-29T00:06:00+07:00', 'false');

Setelah database siap, let's start coding... Buat file index.php dengan papran kode sebagai berikut: 1. Include kode css dan js terlebih dahulu... <script src='assets/js/moment.min.js'> <script src='assets/js/jquery.min.js'> <script src='assets/js/jquery-ui.min.js'> 2. Buat event handling jquerinya...

-Untuk input jadwal baru ke database eventReceive: function(event){ var title = event.title; var start = event.start.format("YYYY-MM-DD[T]HH:MM:SS"); $.ajax({ url: 'process.php', data: 'type=new&title='+title+'&startdate='+start+'&zone='+zone, type: 'POST', dataType: 'json', success: function(response){ event.id = response.eventid; $('#calendar').fullCalendar('updateEvent',event); }, error: function(e){ console.log(e.responseText); } }); $('#calendar').fullCalendar('updateEvent',event); console.log(event); }, Pada tutorial ini kita dapat menambahkan jadwal baru dengan cara drag and drop event ke dalam tampilan kalender yang dibuat nantinya. -Untuk update jadwal eventClick: function(event, jsEvent, view) { console.log(event.id); var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} }); if (title){ event.title = title; console.log('type=changetitle&title='+title+'&eventid='+event.id); $.ajax({ url: 'process.php', data: 'type=changetitle&title='+title+'&eventid='+event.id, type: 'POST', dataType: 'json', success: function(response){ if(response.status == 'success') $('#calendar').fullCalendar('updateEvent',event); }, error: function(e){ alert('Error processing your request: '+e.responseText); }

}); } }, -Untuk menghapus jadwal eventDragStop: function (event, jsEvent, ui, view) { if (isElemOverDiv()) { var con = confirm('Are you sure to delete this event permanently?'); if(con == true) { $.ajax({ url: 'process.php', data: 'type=remove&eventid='+event.id, type: 'POST', dataType: 'json', success: function(response){ console.log(response); if(response.status == 'success') jQuery('#calendar').fullCalendar('removeEvents', event.id); }, error: function(e){ alert('Error processing your request: '+e.responseText); } }); } } } function isElemOverDiv() { var trashEl = jQuery('#trash'); var ofs = trashEl.offset(); var var var var

x1 x2 y1 y2

= = = =

ofs.left; ofs.left + trashEl.outerWidth(true); ofs.top; ofs.top + trashEl.outerHeight(true);

if (currentMousePos.x >= x1 && currentMousePos.x <= x2 && currentMousePos.y >= y1 && currentMousePos.y <= y2) { return true; } return false; } 3. Buat view untuk menampilkan event calendar...



Buat file process.php Saat event, untuk memproses data kita memanggil fungsi dari process.php. Nantinya hasil output kalender akan ditampilkan pada id calendar. Adapun fungsi-fungsi dalam process.php adalah sebagai berikut: -Untuk insert data ke database $type = $_POST['type']; if($type == 'new') { $startdate = $_POST['startdate'].'+'.$_POST['zone']; $title = $_POST['title']; $insert = mysqli_query($con,"INSERT INTO calendar(`title`, `startdate`, `enddate`, `allDay`) VALUES('$title','$startdate','$startdate','false')"); $lastid = mysqli_insert_id($con); echo json_encode(array('status'=>'success','eventid'=>$lastid)); } -Untuk update jadwal if($type == 'changetitle') { $eventid = $_POST['eventid']; $title = $_POST['title']; $update = mysqli_query($con,"UPDATE calendar SET title='$title'

where id='$eventid'"); if($update) echo json_encode(array('status'=>'success')); else echo json_encode(array('status'=>'failed')); } -Untuk reset tanggal if($type == 'resetdate') { $title = $_POST['title']; $startdate = $_POST['start']; $enddate = $_POST['end']; $eventid = $_POST['eventid']; $update = mysqli_query($con,"UPDATE calendar SET title='$title', startdate = '$startdate', enddate = '$enddate' where id='$eventid'"); if($update) echo json_encode(array('status'=>'success')); else echo json_encode(array('status'=>'failed')); } -Untuk menghapus jadwal if($type == 'remove') { $eventid = $_POST['eventid']; $delete = mysqli_query($con,"DELETE FROM calendar where id='$eventid'"); if($delete) echo json_encode(array('status'=>'success')); else echo json_encode(array('status'=>'failed')); } -Untuk menampilkan data jadwal if($type == 'fetch') { $events = array(); $query = mysqli_query($con, "SELECT * FROM calendar"); while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) { $e = array(); $e['id'] = $fetch['id']; $e['title'] = $fetch['title']; $e['start'] = $fetch['startdate'];

$e['end'] = $fetch['enddate']; $allday = ($fetch['allDay'] == "true") ? true : false; $e['allDay'] = $allday; array_push($events, $e); } echo json_encode($events); } Output datanya berupa json, ada 3 parameter yg dibutuhkan oleh fullcalendar , yaitu title , start dan end. Sekian, semoga bermanfaat... Untuk kode lengkapnya silahkan download disini

Tentang Penulis Dimas Agung Noviyanto