tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Membuat Kalender Event Menggunakan FullCalendar dan MySQL



Apakah anda pernah melihat aplikasi hotel atau aplikasi restoran? pasti aplikasi tersebut mempunyai sistem kalender event atau sejenisnya yang menggunakan kalender pada aplikasi mereka sebgaai pengingat bahwa kamar atau restoran tersebut telah dibook pada tanggal dan hari tertentu.

Pada artikel sebelumnya kami telah mengatakan bahwa kami akan membahas artikel yang sama tetapi kami akan menggunakan fullcalendar.

Read More: Membuat calender event menggunakan Jquery dan Ajax

Nah pada kesempatan kali ini kami akan share bagaimana membuat kalender event menggunakan FullCalendar dan MySQL.
kalender event menggunakan fullcalendar dan mysql


Aplikasi ini memungkinkan user untuk menambahkan, menghapus dan mengedit atau sejenis CRUD event calender lah, tapi aplikasi seperti ini sangat cocok di implementasikan pada aplikasi yang membutuhkan calender seperti ini.

Langsung saja mari kita kepembahasan intinya, yang pertama buat database dengan nama calender kemudian masukkan struktur database dibawah ini.

 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `color` varchar(7) DEFAULT NULL,
  `start` datetime NOT NULL,
  `end` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
 

Berikutny abuat file dengan nama bdd.php file ini berfungsi sebagai koneksi kedatabase.

 <?php
try
{
 $bdd = new PDO('mysql:host=localhost;dbname=calender;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
 

Kemudian buat file dengan nama addEvent.php file ini mempunyai fungsi addevent atau menambahkan event kedalam database.

 <?php

// Connexion à la base de données
require_once('bdd.php');
//echo $_POST['title'];
if (isset($_POST['title']) && isset($_POST['start']) && isset($_POST['end']) && isset($_POST['color'])){
 
 $title = $_POST['title'];
 $start = $_POST['start'];
 $end = $_POST['end'];
 $color = $_POST['color'];

 $sql = "INSERT INTO events(title, start, end, color) values ('$title', '$start', '$end', '$color')";
 //$req = $bdd->prepare($sql);
 //$req->execute();
 
 echo $sql;
 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }

}
header('Location: '.$_SERVER['HTTP_REFERER']);

 
?>
 

Berikutnya buat file dengan nama editEventDate.php file ini berfungsi ketika pengguna sistem ingin memperbaharui tanggal event.

 <?php

// Connexion à la base de données
require_once('bdd.php');

if (isset($_POST['Event'][0]) && isset($_POST['Event'][1]) && isset($_POST['Event'][2])){
 
 
 $id = $_POST['Event'][0];
 $start = $_POST['Event'][1];
 $end = $_POST['Event'][2];

 $sql = "UPDATE events SET  start = '$start', end = '$end' WHERE id = $id ";

 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }else{
  die ('OK');
 }

}
//header('Location: '.$_SERVER['HTTP_REFERER']);

 
?>
 

Berikutnya buat file dengan nama editEventTitle.php file berfungsi sebagai untu memperbaharui judul dari event yang telah ditambahkan kedalam database.

 <?php

require_once('bdd.php');
if (isset($_POST['delete']) && isset($_POST['id'])){
 
 
 $id = $_POST['id'];
 
 $sql = "DELETE FROM events WHERE id = $id";
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $res = $query->execute();
 if ($res == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }
 
}elseif (isset($_POST['title']) && isset($_POST['color']) && isset($_POST['id'])){
 
 $id = $_POST['id'];
 $title = $_POST['title'];
 $color = $_POST['color'];
 
 $sql = "UPDATE events SET  title = '$title', color = '$color' WHERE id = $id ";

 
 $query = $bdd->prepare( $sql );
 if ($query == false) {
  print_r($bdd->errorInfo());
  die ('Erreur prepare');
 }
 $sth = $query->execute();
 if ($sth == false) {
  print_r($query->errorInfo());
  die ('Erreur execute');
 }

}
header('Location: index.php');

 
?>
 

Yang terakhir buat file dengan nama index.php file berfungsi sebagai form, dan semua proses di atas dipenggil dan di eksekusi dalam file ini.


 <?php
require_once('bdd.php');
$sql = "SELECT id, title, start, end, color FROM events ";
$req = $bdd->prepare($sql);
$req->execute();
$events = $req->fetchAll();
?>

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Full Calender</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- FullCalendar -->
 <link href='css/fullcalendar.css' rel='stylesheet' />
    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }
 #calendar {
  max-width: 800px;
 }
 .col-centered{
  float: none;
  margin: 0 auto;
 }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Celender Event From Full Calender - MySQL</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <h3>FullCalendar PHP MySQL</h3>
                <div id="calendar" class="col-centered">
                </div>
            </div>
   
        </div>
        <!-- /.row -->
  
  <!-- Modal -->
  <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
   <div class="modal-content">
   <form class="form-horizontal" method="POST" action="addEvent.php">
   
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Add Event</h4>
     </div>
     <div class="modal-body">
    
      <div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
       <input type="text" name="title" class="form-control" id="title" placeholder="Title">
     </div>
      </div>
      <div class="form-group">
     <label for="color" class="col-sm-2 control-label">Color</label>
     <div class="col-sm-10">
       <select name="color" class="form-control" id="color">
        <option value="">Choose</option>
        <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
        <option style="color:#008000;" value="#008000">&#9724; Green</option>        
        <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
        <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
        <option style="color:#000;" value="#000">&#9724; Black</option>
        
      </select>
     </div>
      </div>
      <div class="form-group">
     <label for="start" class="col-sm-2 control-label">Start date</label>
     <div class="col-sm-10">
       <input type="text" name="start" class="form-control" id="start" readonly>
     </div>
      </div>
      <div class="form-group">
     <label for="end" class="col-sm-2 control-label">End date</label>
     <div class="col-sm-10">
       <input type="text" name="end" class="form-control" id="end" readonly>
     </div>
      </div>
    
     </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
   </div>
    </div>
  </div>
  
  
  
  <!-- Modal -->
  <div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
   <div class="modal-content">
   <form class="form-horizontal" method="POST" action="editEventTitle.php">
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Edit Event</h4>
     </div>
     <div class="modal-body">
    
      <div class="form-group">
     <label for="title" class="col-sm-2 control-label">Title</label>
     <div class="col-sm-10">
       <input type="text" name="title" class="form-control" id="title" placeholder="Title">
     </div>
      </div>
      <div class="form-group">
     <label for="color" class="col-sm-2 control-label">Color</label>
     <div class="col-sm-10">
       <select name="color" class="form-control" id="color">
        <option value="">Choose</option>
        <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
        <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
        <option style="color:#008000;" value="#008000">&#9724; Green</option>        
        <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
        <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
        <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
        <option style="color:#000;" value="#000">&#9724; Black</option>
        
      </select>
     </div>
      </div>
        <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
       <label class="text-danger"><input type="checkbox"  name="delete"> Delete event</label>
        </div>
      </div>
     </div>
      
      <input type="hidden" name="id" class="form-control" id="id">
    
    
     </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
   </div>
    </div>
  </div>

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
 <!-- FullCalendar -->
 <script src='js/moment.min.js'></script>
 <script src='js/fullcalendar.min.js'></script>
 
 <script>

 $(document).ready(function() {
  
  $('#calendar').fullCalendar({
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
   },
   defaultDate: '2018-01-01',
   editable: true,
   eventLimit: true, // allow "more" link when too many events
   selectable: true,
   selectHelper: true,
   select: function(start, end) {
    
    $('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
    $('#ModalAdd').modal('show');
   },
   eventRender: function(event, element) {
    element.bind('dblclick', function() {
     $('#ModalEdit #id').val(event.id);
     $('#ModalEdit #title').val(event.title);
     $('#ModalEdit #color').val(event.color);
     $('#ModalEdit').modal('show');
    });
   },
   eventDrop: function(event, delta, revertFunc) { // si changement de position

    edit(event);

   },
   eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

    edit(event);

   },
   events: [
   <?php foreach($events as $event): 
   
    $start = explode(" ", $event['start']);
    $end = explode(" ", $event['end']);
    if($start[1] == '00:00:00'){
     $start = $start[0];
    }else{
     $start = $event['start'];
    }
    if($end[1] == '00:00:00'){
     $end = $end[0];
    }else{
     $end = $event['end'];
    }
   ?>
    {
     id: '<?php echo $event['id']; ?>',
     title: '<?php echo $event['title']; ?>',
     start: '<?php echo $start; ?>',
     end: '<?php echo $end; ?>',
     color: '<?php echo $event['color']; ?>',
    },
   <?php endforeach; ?>
   ]
  });
  
  function edit(event){
   start = event.start.format('YYYY-MM-DD HH:mm:ss');
   if(event.end){
    end = event.end.format('YYYY-MM-DD HH:mm:ss');
   }else{
    end = start;
   }
   
   id =  event.id;
   
   Event = [];
   Event[0] = id;
   Event[1] = start;
   Event[2] = end;
   
   $.ajax({
    url: 'editEventDate.php',
    type: "POST",
    data: {Event:Event},
    success: function(rep) {
     if(rep == 'OK'){
      alert('Saved');
     }else{
      alert('Could not be saved. try again.'); 
     }
    }
   });
  }
  
 });

</script>

</body>

</html>
 

Jika kalian malas atau mengikuti satu pesatu tutorial di atas silahakn download filenya langsung dibawah in.


Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, kalian bisa meninggalkan keomentar dibawah jika kalian menginginkan kami membahas pembahasan yang beda, pada artikel berikutnya kami akan membahas hal yang sama tapi kami akan mencoba menggunakan framework CodeIgniter.



Baca Juga

closed