Php ile Event Calendar ( Etkinlik Takvimi Uygulaması )

Bu dersimizde fullcalendar sisteminin nasıl php ve mysql ile iletişime geçtiğini ve ufak çaplı bir takvim hazırlayacağız..

Arkadaşlar ilk olarak söylemeliyim ki bunu bayadır arıyordum ama birtürlü halledememiştim sonra biraz kurcalıyınca çözdüm tek bir sıkıntım var o da etkinlik silme ve mysql den SESSION ile veriyi çekemedim aslında local de çalışıyor ama hosting firmasına attığımda versiyon dan kaynaklı çalışmıyor yapan olursa bildirirse bizde faydalanalım :)

Örnek Demo : Buraya Tıklayın

Örnek js ve css dosyaları : ajanda.zip

ilk olarak zip dosyamızın içindekileri localhost unuzda bir ajanda klasörü açıp içine kopyalayın daha sonra aşağıdaki işlemleri teker teker yapınız. 

evenement adında bir tablo oluşturuyoruz. 
 

CREATE TABLE `evenement` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_bin NOT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  `allDay` varchar(255) COLLATE utf8_bin NOT NULL DEFAULT 'false',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

daha sonra 

events.php dosyası oluşturuyoruz ve içine kodları kopyalayıp yapıştırıyoruz. 

<?php

// List of events
 $json = array();  

 // Query that retrieves events
 $requete = "SELECT * FROM evenement ORDER BY id";

 // connection to the database
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 $bdd->query("SET NAMES utf8"); 
 $bdd->query("SET CHARACTER SET utf8"); 
 $bdd->query("SET COLLATION_CONNECTION = 'utf8_turkish_ci'");
 $bdd->exec("SET NAMES 'utf8'; SET CHARSET 'utf8'");
 } catch(Exception $e) {
  exit('Unable to connect to database.');
 }
 // Execute the query
 $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));

 // sending the encoded result to success page
 echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));

?>

burada mysql den gelen kayıtları çekiyoruz.  

Şimdide Yeni etkinlik ekleme sayfasını yapıyoruz.. 

add_events.php dosyası oluşturup içine kopyalayın.

<?php

$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];
 


// connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 $bdd->query("SET NAMES utf8"); 
 $bdd->query("SET CHARACTER SET utf8"); 
 $bdd->query("SET COLLATION_CONNECTION = 'utf8_turkish_ci'");
 $bdd->exec("SET NAMES 'utf8'; SET CHARSET 'utf8'");
 } catch(Exception $e) {
 exit('Bağlantı Başarısız');
 }

$sql = "INSERT INTO evenement (title, start, end) VALUES (:title, :start, :end)";
$q = $bdd->prepare($sql);
$q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end));
?>

son olarak da update_events.php dosyasını oluşturup içerisine aşağıdaki kodları kopyalayın.

 

<?php

/* VALUES */
$id=$_POST['id'];
$title=$_POST['title'];
$start=$_POST['start'];
$end=$_POST['end'];

// connexion à la base de données
 try {
 $bdd = new PDO('mysql:host=localhost;dbname=fullcalendar', 'root', '');
 $bdd->query("SET NAMES utf8"); 
 $bdd->query("SET CHARACTER SET utf8"); 
 $bdd->query("SET COLLATION_CONNECTION = 'utf8_turkish_ci'");
 $bdd->exec("SET NAMES 'utf8'; SET CHARSET 'utf8'");
 } catch(Exception $e) {
 exit('Impossible de se connecter à la base de données.');
 }

$sql = "UPDATE evenement SET title=?, start=?, end=? WHERE id=?";
$q = $bdd->prepare($sql);
$q->execute(array($title,$start,$end,$id));

?>

Php ile olan kısımlarımız bitti şimdide dosya içerisinde olan default.html dosyamızı hazırlıyoruz arkadaşlar . default.html dosyaı oluşturunuz ve aşağıdaki kodları kopyalayın işlem tamamdır. 

 

<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/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,
			events:"http://localhost/ajanda/events.php",
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			 var title = prompt('Etkinlik Adını Giriniz:');
			 if (title) {
			 start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
			 end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
			 $.ajax({
			 url: 'http://localhost/ajanda/add_events.php',
			 data: 'title='+ title+'&start='+ start +'&end='+ end ,
			 type: "POST",
			 success: function(json) {
			 alert('Etkinlik Girme Başarılı');
			 }
			 });
			 calendar.fullCalendar('renderEvent',
			 {
			 title: title,
			 start: start,
			 end: end,
			 allDay: allDay
			 },
			 true // make the event "stick"
			 );
			 }
			 calendar.fullCalendar('unselect');
			},
			editable: true,
			eventDrop: function(event, delta) {
			 start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
			 end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
			 $.ajax({
			 url: 'http://localhost/ajanda/update_events.php',
			 data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
			 type: "POST",
			 success: function(json) {
			 alert("Düzenlendi");
			 }
			 });
			},
			eventResize: function(event) {
			 start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
			 end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
			 $.ajax({
			 url: 'http://localhost/ajanda/update_events.php',
			 data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
			 type: "POST",
			 success: function(json) {
			 alert("Tamamdır.");
			 }
			 });

			}
			
		});
		
	});

</script>
<style>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

Takılan arkadaşlar olursa yardımcı olurum . eğer tüm söylediklerimi yaparsanız çalışmaması imkansız . süslendirmeyi kendiniz yapabilirsiniz. 

 

Yusuf yalçın Köken
ASP.NET / C# Yazılım uzmanlığını bitirmiş ama PHP de Projeler Geliştiren Egzantirik Biri
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git