Cara Membuat WEB Kalender Menggunakan jQuery AJAX dan PHP

Hallo sobat Dumenity berjumpa lagi pada tutorialÂ kursuswebprogramming, di panduan kali ini kita akan belajar mengenai Cara Merancang WEB Kalender Menggunakan jQuery AJAX dan PHP. Merancang antarmuka kalender gampang pada PHP. Ada banyak guna tanggal yang terdapat di core PHP, saya telah menggunakannya bagi merancang UI kalender pada program web. Manfaat bagi menghitung hari / minggu, nama hari kerja, tanggal bulan sebelumnya / berikutnya bermanfaat pada merancang tampilan kalender.

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

Kelas PHP bagi Memperoleh Kalender HTML

Kode berikut menunjukkan file class.calendar.php yang berisi guna bagi menghitung data kalender dan mengembalikan HTML. Di halaman pemuatan, saya merancang sebuah instance bagi kelas ini bagi memperoleh HTML kalender bulan ketika ini dengan menggunakan guna kelas ini. Berikutnya, saya menggunakan skrip jQuery bagi mengirim permintaan AJAX bagi memperoleh data kalender ketika menavigasi antara bulan-bulan sebelumnya dan berikutnya.

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

<?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

(Visited 20 times, 1 visits today)

Leave a Reply Cancel reply