Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP

Hallo sahabat Dumenity berjumpa lagi dalam tutorialÂ kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP. Membuat antarmuka kalender mudah dalam PHP. Ada banyak fungsi tanggal yang tersedia di core PHP, saya telah menggunakannya untuk membuat UI kalender dalam aplikasi web. Fungsi untuk menghitung hari / minggu, nama hari kerja, tanggal bulan sebelumnya / berikutnya berguna dalam membuat tampilan kalender.

Nama-nama hari kerja ditampilkan di header kalender. Saya telah menampilkan tampilan bulan dengan mengulangi hitungan minggu dan hitungan hari bulan / tahun saat ini melaluiÂ nested loop. Dalam contoh ini, saya memiliki kelas kalender yang berisi fungsi untuk menghitung data kalender dengan menggunakan fungsi tanggal PHP. Selain itu, fungsi kelas kalender menyiapkan HTML untuk tajuk kalender dengan tautan navigasi, nama minggu, dan sel tanggal.

Kelas PHP untuk Mendapatkan Kalender HTML

Kode berikut menunjukkan file class.calendar.php yang berisi fungsi untuk menghitung data kalender dan mengembalikan HTML. Pada halaman pemuatan, saya membuat sebuah instance untuk kelas ini untuk mendapatkan HTML kalender bulan saat ini dengan menggunakan fungsi kelas ini. Selanjutnya, saya menggunakan skrip jQuery untuk mengirim permintaan AJAX untuk mendapatkan data kalender ketika menavigasi antara bulan-bulan sebelumnya dan berikutnya.

<?php
class PHPCalendar {
	private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");
	private $currentDay = 0;
	private $currentMonth = 0;
	private $currentYear = 0;
	private $currentMonthStart = null;
	private $currentMonthDaysLength = null;	
	
	function __construct() {
		$this->currentYear = date ( "Y", time () );
		$this->currentMonth = date ( "m", time () );
		
		if (! empty ( $_POST ['year'] )) {
			$this->currentYear = $_POST ['year'];
		}
		if (! empty ( $_POST ['month'] )) {
			$this->currentMonth = $_POST ['month'];
		}
		$this->currentMonthStart = $this->currentYear . '-' . $this->currentMonth . '-01';
		$this->currentMonthDaysLength = date ( 't', strtotime ( $this->currentMonthStart ) );
	}
	
	function getCalendarHTML() {
		$calendarHTML = '<div id="calendar-outer">'; 
		$calendarHTML .= '<div class="calendar-nav">' . $this->getCalendarNavigation() . '</div>'; 
		$calendarHTML .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';
		$calendarHTML .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';		
		$calendarHTML .= '</div>';
		return $calendarHTML;
	}
	
	function getCalendarNavigation() {
		$prevMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month'  ) );
		$prevMonthYearArray = explode(",",$prevMonthYear);
		
		$nextMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart . ' +1 Month'  ) );
		$nextMonthYearArray = explode(",",$nextMonthYear);
		
		$navigationHTML = '<div class="prev" data-prev-month="' . $prevMonthYearArray[0] . '" data-prev-year = "' . $prevMonthYearArray[1]. '"><</div>'; 
		$navigationHTML .= '<span id="currentMonth">' . date ( 'M ', strtotime ( $this->currentMonthStart ) ) . '</span>';
		$navigationHTML .= '<span contenteditable="true" id="currentYear">'.	date ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>';
		$navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>';
		return $navigationHTML;
	}
	
	function getWeekDayName() {
		$WeekDayName= '';		
		foreach ( $this->weekDayName as $dayname ) {			
			$WeekDayName.= '<li>' . $dayname . '</li>';
		}		
		return $WeekDayName;
	}
	
	function getWeekDays() {
		$weekLength = $this->getWeekLengthByMonth ();
		$firstDayOfTheWeek = date ( 'N', strtotime ( $this->currentMonthStart ) );
		$weekDays = "";
		for($i = 0; $i < $weekLength; $i ++) {
			for($j = 1; $j <= 7; $j ++) {
				$cellIndex = $i * 7 + $j;
				$cellValue = null;
				if ($cellIndex == $firstDayOfTheWeek) {
					$this->currentDay = 1;
				}
				if (! empty ( $this->currentDay ) && $this->currentDay <= $this->currentMonthDaysLength) {
					$cellValue = $this->currentDay;
					$this->currentDay ++;
				}
				$weekDays .= '<li>' . $cellValue . '</li>';
			}
		}
		return $weekDays;
	}
	
	function getWeekLengthByMonth() {
		$weekLength =  intval ( $this->currentMonthDaysLength / 7 );	
		if($this->currentMonthDaysLength % 7 > 0) {
			$weekLength++;
		}
		$monthStartDay= date ( 'N', strtotime ( $this->currentMonthStart) );		
		$monthEndingDay= date ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) );
		if ($monthEndingDay < $monthStartDay) {			
			$weekLength++;
		}
		
		return $weekLength;
	}
}
?>

<?php

class PHPCalendar {

private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");

private $currentDay = 0;

private $currentMonth = 0;

private $currentYear = 0;

private $currentMonthStart = null;

private $currentMonthDaysLength = null;

function __construct() {

$this->currentYear = date ( "Y", time () );

$this->currentMonth = date ( "m", time () );

if (! empty ( $_POST ['year'] )) {

$this->currentYear = $_POST ['year'];

}

if (! empty ( $_POST ['month'] )) {

$this->currentMonth = $_POST ['month'];

}

$this->currentMonthStart = $this->currentYear . '-' . $this->currentMonth . '-01';

$this->currentMonthDaysLength = date ( 't', strtotime ( $this->currentMonthStart ) );

}

function getCalendarHTML() {

$calendarHTML = '<div id="calendar-outer">';

$calendarHTML .= '<div class="calendar-nav">' . $this->getCalendarNavigation() . '</div>';

$calendarHTML .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';

$calendarHTML .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';

$calendarHTML .= '</div>';

return $calendarHTML;

}

function getCalendarNavigation() {

$prevMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month' ) );

$prevMonthYearArray = explode(",",$prevMonthYear);

$nextMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart . ' +1 Month' ) );

$nextMonthYearArray = explode(",",$nextMonthYear);

$navigationHTML = '<div class="prev" data-prev-month="' . $prevMonthYearArray[0] . '" data-prev-year = "' . $prevMonthYearArray[1]. '"><</div>';

$navigationHTML .= '<span id="currentMonth">' . date ( 'M ', strtotime ( $this->currentMonthStart ) ) . '</span>';

$navigationHTML .= '<span contenteditable="true" id="currentYear">'. date ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>';

$navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>';

return $navigationHTML;

}

function getWeekDayName() {

$WeekDayName= '';

foreach ( $this->weekDayName as $dayname ) {

$WeekDayName.= '<li>' . $dayname . '</li>';

}

return $WeekDayName;

}

function getWeekDays() {

$weekLength = $this->getWeekLengthByMonth ();

$firstDayOfTheWeek = date ( 'N', strtotime ( $this->currentMonthStart ) );

$weekDays = "";

for($i = 0; $i < $weekLength; $i ++) {

for($j = 1; $j <= 7; $j ++) {

$cellIndex = $i * 7 + $j;

$cellValue = null;

if ($cellIndex == $firstDayOfTheWeek) {

$this->currentDay = 1;

}

if (! empty ( $this->currentDay ) && $this->currentDay <= $this->currentMonthDaysLength) {

$cellValue = $this->currentDay;

$this->currentDay ++;

}

$weekDays .= '<li>' . $cellValue . '</li>';

}

return $weekDays;

}

function getWeekLengthByMonth() {

$weekLength = intval ( $this->currentMonthDaysLength / 7 );

if($this->currentMonthDaysLength % 7 > 0) {

$weekLength++;

}

$monthStartDay= date ( 'N', strtotime ( $this->currentMonthStart) );

$monthEndingDay= date ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) );

if ($monthEndingDay < $monthStartDay) {

$weekLength++;

}

return $weekLength;

}

jQuery AJAX Panggilan untuk Mendapatkan Kalender Bulan Sebelumnya / Berikutnya

Pada saat mengklik next dan panah ke belakang pada header kalender, permintaan AJAX dikirim ke file PHP kalender-ajax.php dengan mengirimkan data bulan / tahun sebelumnya atau berikutnya. File PHP mengembalikan HTML kalender berdasarkan bulan dan tahun berlalu sebagai respons AJAX. Dalam contoh ini, kita dapat memasukkan tahun dengan mengubah konten elemen tahun yang dapat diedit untuk mendapatkan HTML kalender melalui AJAX.

<script>
$(document).ready(function(){
	$(document).on("click", '.prev', function(event) { 
		var month =  $(this).data("prev-month");
		var year =  $(this).data("prev-year");
		getCalendar(month,year);
	});
	$(document).on("click", '.next', function(event) { 
		var month =  $(this).data("next-month");
		var year =  $(this).data("next-year");
		getCalendar(month,year);
	});
	$(document).on("blur", '#currentYear', function(event) { 
		var month =  $('#currentMonth').text();
		var year = $('#currentYear').text();
		getCalendar(month,year);
	});
});
function getCalendar(month,year){
	var url = "calendar-ajax.php";
	$.ajax({
		url: "calendar-ajax.php",
		type: "POST",
		data:'month='+month+'&year='+year,
		success: function(response){
			$("#calendar-html-output").html(response);	
		},
		error: function(){} 
	});
	
}
</script>

$(document).ready(function(){

$(document).on("click", '.prev', function(event) {

var month = $(this).data("prev-month");

var year = $(this).data("prev-year");

getCalendar(month,year);

});

$(document).on("click", '.next', function(event) {

var month = $(this).data("next-month");

var year = $(this).data("next-year");

getCalendar(month,year);

});

$(document).on("blur", '#currentYear', function(event) {

var month = $('#currentMonth').text();

var year = $('#currentYear').text();

getCalendar(month,year);

});

function getCalendar(month,year){

var url = "calendar-ajax.php";

$.ajax({

url: "calendar-ajax.php",

type: "POST",

data:'month='+month+'&year='+year,

success: function(response){

$("#calendar-html-output").html(response);

error: function(){}

});

}

</script>

berikut contoh hasil dari Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP,

Oke itulah tadi pembahasan saya tentang Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP, semoga bermanfaat.

Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP

Facebook DUMET School

Konsultasi Gratis

Categories