Cara membuat kalender jadwal dengan PHP MySQL - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Cara membuat kalender jadwal dengan PHP MySQL, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Artikel, Artikel jquery, Artikel json, Artikel mysqli, Artikel php, Artikel Source Code, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat kalender jadwal dengan PHP MySQL
link : Cara membuat kalender jadwal dengan PHP MySQL

Cara membuat kalender jadwal dengan PHP MySQL

Mau bikin kalender jadwal sendiri atau bikin aplikasi jadwal sekolah ? anda beruntung bisa ke blog ini. Sekarang saya akan membahas cara membuat kalender jadwal dengan PHP MySQL.

Untuk membuat kalender jadwal ini, kita membutuhkan plugin fullcalendar ,jquery dan jquery-ui.
Tapi semuanya udah saya paketkan pada download di bawah artikel ini.

Buat database jadwal lalu tambahkan tabel jadwalku :

CREATE TABLE IF NOT EXISTS `jadwalku` (
  `jadwal_id` int(10) NOT NULL AUTO_INCREMENT,
  `tgl1` datetime NOT NULL,
  `tgl2` datetime NOT NULL,
  `judul` text NOT NULL,
  PRIMARY KEY (`jadwal_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Berikut juga saya akan kasih contoh datanya :

INSERT INTO `jadwalku` (`jadwal_id`, `tgl1`, `tgl2`, `judul`) VALUES
(1, '2014-11-08 09:00:00', '2014-11-08 11:00:00', 'Bersihkan kamar'),
(2, '2014-11-08 13:00:00', '2014-11-08 13:30:00', 'Makan Siang'),
(3, '2014-11-08 15:00:00', '2014-11-08 17:00:00', 'Jalan Bareng Pacar'),
(4, '2014-11-19 09:00:00', '2014-11-19 11:00:00', 'Lomba Makan'),
(5, '2014-11-12 10:00:00', '2014-11-18 10:00:00', 'Touring Sumbar');

Oke, sekarang kita bikin kodenya. bikin index.php

<title>FULL CALENDAR</title>
<link href="fullcalender/lib/cupertino/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.print.css" rel="stylesheet" type="text/css" media="print" />
<script src="fullcalender/lib/moment.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalender/fullcalendar.min.js" type="text/javascript"></script>
<?php
function tanggal_sekarang($time=FALSE)
{
date_default_timezone_set('Asia/Jakarta');
$str_format='';
if($time==FALSE)
{
$str_format= date("Y-m-d");
}else{
$str_format= date("Y-m-d H:i:s");
}
return $str_format;
}
?>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=tanggal_sekarang();?>',
editable: true,
eventLimit: true,
events: {
url: 'data.php', },
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
#calendar {
max-width: 700px;
margin: 0 auto;
}
</style>
<div id='loading'>loading...</div>
<div id='calendar'></div>

Wuih, cukup panjang juga ya hahaha :D . Include kan dulu css dan js file nya ke dalam index.php :

<link href="fullcalender/lib/cupertino/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="fullcalender/fullcalendar.print.css" rel="stylesheet" type="text/css" media="print" />
<script src="fullcalender/lib/moment.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery.min.js" type="text/javascript"></script>
<script src="fullcalender/lib/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalender/fullcalendar.min.js" type="text/javascript"></script>

Lalu ada handle javascript :

<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme:true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=tanggal_sekarang();?>',
editable: true,
eventLimit: true,
events: {
url: 'data.php', },
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>

Saat event, saya memanggil output dari data.php lalu data yang didapatkan akan masuk ke div calendar.

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

Sekarang mari bikin kode data.php

<?php
require_once("mysqlminang.php");
$p=new Mysqlminang("jadwal","localhost","root","");
$sql="Select * from jadwalku";
$data=array();
foreach($p->GetAllRows($sql) as $row)
{
$data[]=array(
'title'=>$row->judul,
'start'=>$row->tgl1,
'end'=>$row->tgl2,
);
}
echo json_encode($data);
?>

Masih ingat dengan kode-kode sebelumnya? ada fungsi mysqli libray yg saya bikin sendiri mysqlminang , ini untuk memudahkan pengambilan data mysql saja :)
Outputnya disini adalah json, setelah di array kan datanya, ada 3 parameter yg dibutuhkan oleh fullcalendar , yaitu title , start , end

Ok, selesai. Sekarang anda improvisasikan artikel dan source code ini untuk pekerjaan anda. Terima Kasih :)

Demikianlah Artikel Cara membuat kalender jadwal dengan PHP MySQL

Sekianlah artikel Cara membuat kalender jadwal dengan PHP MySQL kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat kalender jadwal dengan PHP MySQL dengan alamat link https://tipstopmarketing.blogspot.com/2014/11/cara-membuat-kalender-jadwal-dengan-php.html

Tweet