Cara Mengintergrasikan jQuery Fullcalendar dengan PHP and MySQL
Jurnalcode.com

Cara Mengintergrasikan jQuery Fullcalendar dengan PHP and MySQL


Jurnalcode: Fullcalendar adalah Library jquery yang digunakan untuk  membuat kalender atau agenda lainya didalam website anda . Fullcalendar menyediakan kalender tahun, bulan, minggu dan hari untuk ditampilkan.  mungkin sebagian dari kita ketika membuat agenda diwebsite hanya menggunakan list dari database . nah sekarang kita coba menggunaka jquery FullCalender yang kita kombinasikan dengan phpmysql.

Dalam contoh ini kita akan membuat tabel "events" di database mysql dan membuat crud operation menggunakan ajax jquery seperti di bawah ini. baiklah langsung saja pada topik permasalahan nya .

Langkah Pertama silahkan buat sebuah database dan buat table di dalamnya

CREATE TABLE 'tb_agenda' (

  'id' int(11) NOT NULL,

  'judul_agenda' varchar(255) COLLATE utf8_bin NOT NULL,

  'tgl_mulai' datetime NOT NULL,

  'tgl_selesai' datetime DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;


Selanjutnya buat sebuah file php untuk mengkoneksikan ke database .

<?php
$JurnalConnect= new PDO('mysql:host=localhost;dbname=agenda', 'root', '');
?>

Kemudian silahkan buat file index.php dan isikan code berikut :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script>

 $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
   editable: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'

   },

   events: "agenda.php",
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },

   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
   var judul_agenda= prompt('Judul Agenda:');
   if (judul_agenda) {
    var tgl_mulai = $.fullCalendar.formatDate(event.tgl_mulai, "Y-MM-DD HH:mm:ss");
   var tgl_selesai= $.fullCalendar.formatDate(event.tgl_selesai, "Y-MM-DD HH:mm:ss");
   $.ajax({
	   url: 'tambah_agenda.php',
	   data: 'judul_agenda='+ title+'&tgl_mulai='+ start +'&tgl_selesai='+ end,
	   type: "POST",
	   success: function(json) {
	   alert('Berhasil Menmbahkan Agenda');

	   }

   });
   calendar.fullCalendar('renderEvent',
   {
	   judul_agenda: judul_agenda,
	   tgl_mulai: tgl_mulai,
	   tgl_selesai: tgl_selesai,
	   allDay: allDay
   },

   true

   );
   }
   calendar.fullCalendar('unselect');
   },

   editable: true,
   eventDrop: function(event, delta) {
   var tgl_mulai = $.fullCalendar.formatDate(event.tgl_mulai, "Y-MM-DD HH:mm:ss");
   var tgl_selesai= $.fullCalendar.formatDate(event.tgl_selesai, "Y-MM-DD HH:mm:ss");

   $.ajax({

	   url: 'update_agenda.php',
	   data: 'judul_agenda='+ event.title+'&tgl_mulai='+ start +'&tgl_selesai='+ end +'&id='+ event.id ,
	   type: "POST",
	   success: function(json) {
	    alert("Updated Agenda Sukses");
	   }
   });
   },

   eventClick: function(event) {
	var decision = confirm("Apakan Anda Yakin ? "); 
	if (decision) {
	$.ajax({
		type: "POST",
		url: "delete_agenda.php",
		data: "&id=" + event.id,
		 success: function(json) {
			 $('#calendar').fullCalendar('removeEvents', event.id);
			  alert("Updated Sukses");}
	});
	}
  	},

   eventResize: function(event) {
	var tgl_mulai = $.fullCalendar.formatDate(event.tgl_mulai, "Y-MM-DD HH:mm:ss");
   	var tgl_selesai= $.fullCalendar.formatDate(event.tgl_selesai, "Y-MM-DD HH:mm:ss");
	   $.ajax({
	    url: 'update_agenda.php',
	    data: 'judul_agenda='+ event.title+'&tgl_mulai='+ start +'&tgl_selesai='+ end +'&id='+ event.id ,
	    type: "POST",
	    success: function(json) {
	     alert("Updated sukses");
	    }
	   });
	}
  });
 });
</script>
<style>

 body {

  margin-top: 40px;

  text-align: center;

  font-size: 14px;

  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

  }

 #calendar {

  width: 650px;

  margin: 0 auto;

  }

</style>

</head>


<body>

 <h2>Agenda Jurnalcode</h2>

 <br/>

 <div id='calendar'></div>

</body>


</html>

 

Kemudian Buat file agenda.php dan isi dengan code berikut :

<?php
$judul_agenda= $_POST['judul_agenda'];
$tgl_mulai= $_POST['tgl_mulai'];
$tgl_selesai= $_POST['tgl_selesai'];

try {
require "db_config.php";
} catch(Exception $e) {
	exit('Unable to connect to database.');
}

$sql = "INSERT INTO tb_agenda(judul_agenda, tgl_mulai, tgl_selesai) VALUES (:judul_agenda, :tgl_mulai, :tgl_selesai)";
$q = $bdd->prepare($sql);
$q->execute(array(':judul_agenda'=>$judul_agenda, ':tgl_mulai'=>$tgl_mulai, ':tgl_selesai'=>$tgl_selesai));

?>

 Kemudian Buat file delete_agenda.php dan isikan code berikut :

<?php
$id = $_POST['id'];

try {
require "db_config.php";
} catch(Exception $e) {
	exit('Unable to connect to database.');
}
$sql = "DELETE from tb_agenda WHERE id=".$id;
$q = $bdd->prepare($sql);
$q->execute();

?>

Selanjutnya Buat file update_agenda.php dan isi code berikut :

<?php
$id = $_POST['id'];
$judul_agenda= $_POST['judul_agenda'];
$tgl_mulai= $_POST['tgl_mulai'];
$tgl_selesai= $_POST['tgl_selesa'];

try {
require "db_config.php";
} catch(Exception $e) {
	exit('Unable to connect to database.');
}
$sql = "UPDATE tb_agenda SET judul_agenda =?, tgl_mulai=?, tgl_selesai=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));

?>

 Nah Selesai.. silahkan jalan kan applikasi yang baru saja dibuat.. semoga bermanfaat . terimakasih .

 

.

Ayo Komentar