Pada tutorial ini saya akan menunjukan cara membuat kalender dengan php . kita akan membuat kalender yang simplen namun keren- juga mudah di modif dengan hanya meakukan perubahan pada css.
Step 1.
awal dari seluruh percobaan untuk mengumpulkan informasi, mana yang penting untuk menampilkan bulan secara aktual dan menandai hari secara aktual. Di samping itu kita juga harus menampilkan bulan dan tahun secara aktual. dan untuk melakukan itu kita membutuhkan 3 informasi penting:
- The actual day
- The first day of the actual month
- The last day of the actual month
Dengan mengetahui informasi yang kita inginkan, maka kita bisa membedakan hari apa pada hari pertama, berapa hari yang terdapat di dalam satu bulan dan tentunya dengan perhitungan yang tepat.
Step 2.
Untuk mendapatkan informasi tentang "Step1" kita akan membuat fungsi PHP : getdate().Tanpa parameters, function ini bisa memberikan informasi waktu seperti array berikut:
Array ( [seconds] => 40 [minutes] => 58 [hours] => 21 [mday] => 17 [wday] => 2 [mon] => 6 [year] => 2003 [yday] => 167 [weekday] => Tuesday [month] => June [0] => 1055901520 )
Untuk mendapatkan hari terakhir dari suatu bulan dengan getdate, kita mencoba untuk mendapatkan nilai default. hari pada bulan selanjutnya. jadi kode untuk mendapatkan informasi adalah seperti berikut:
<?php
$today = getdate();
$firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
$lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
?>
Step 3.
Untuk menampilkan calender, kita membutuhkan table dengan 7 kolom untuk hari dalam 1 minggu. penomoran dan penempatan kolom di sesuaikan dengan tanggal pada bulan tersebut, oh iya kita juga membutuhka header/ catatan kepala kalender untuk menampilkan informasi bulan dan tahun, dan sub header untuk nama hari. codenya adalah sebagai berikut:
<?php
// Create a table with the necessary header informations
echo '<table>';
echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year']."</th></tr>";
echo '<tr class="days">';
echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>';
echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
?>
Step 4.
Ok. sekarang kita sudah mempunya header table, sekarang mari kita coba untuk mengisi baris pertama. ini tidak terlalu mudah seperti hanya menuliskan 1 pada colom pertama, dan 2 pada kolom ke dua. ini hanya bekerja jika hari pertama pada bulan tersebut adalah senin/monday, tapi bagaimana jika bukan? Untuk memutuskan ini kita memerlukan wday item dari firsday array. dengan informasi ini kita bisa mengisi kolom dengan spasi jika di butuhkan. kodenya adalah seperti berikut
<?php
echo '<tr>';
for($i=1;$i<$firstDay['wday'];$i++){
echo '<td> </td>';
}
$actday = 0;
for($i=$firstDay['wday'];$i<=7;$i++){
$actday++;
echo "<td>$actday</td>";
}
echo '</tr>';
?>
Step 5.
Step berikut kita harus mengisi kolom kedalam baris, ini cukup mudah, kita hanya perlu tau berapa banyak minggu yang kita punya dan mengisinya ke dalam table, seperti berikut
<?php
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
echo '<tr>';
for ($j=0;$j<7;$j++){
$actday++;
echo "<td>$actday</td>";
}
echo '</tr>';
}
?>
Step 6.
pada bagian ini kita harus menempatkan rest of the month pada baris terakhir. pada kasus ini cukup mudah. berikut adalah code php nya:
<?php
if ($actday < $lastDay['mday']){
echo '<tr>';
for ($i=0; $i<7;$i++){
$actday++;
if ($actday <= $lastDay['mday']){
echo "<td>$actday</td>";
}
else {
echo '<td> </td>';
}
}
echo '</tr>';
}
?>
Step 7.
untuk membuat tampilan kalender kita menjadi indah untuk dilihat, kita membutuhkan css design. CSS cukup mudah dan simple, berikt adalah sample css untuk kalender yang bausan kita buat, setelah anda membuat code css ini silahkan simpan dengan nama style.css:
table {
width:210px;
border:0px solid #888;
border-collapse:collapse;
}
td {
width:30px;
border-collpase:collpase;
border:1px solid #888;
text-align:right;
padding-right:5px;
}
.days{
background-color: #F1F3F5;
}
th {
border-collpase:collpase;
border:1px solid #888;
background-color: #E9ECEF;
}
.actday{
background-color: #c22;
font-weight:bold;
}
Step 8.
Code lengkap untuk menampilkan kalender yang barusan kita buat dengan menggunakan style css yang baru kita buat juga adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
function showCalendar(){
// Get key day informations.
// We need the first and last day of the month and the actual day
$today = getdate();
$firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
$lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
// Create a table with the necessary header informations
echo '<table>';
echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year']."</th></tr>";
echo '<tr class="days">';
echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>';
echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
// Display the first calendar row with correct positioning
echo '<tr>';
for($i=1;$i<$firstDay['wday'];$i++){
echo '<td> </td>';
}
$actday = 0;
for($i=$firstDay['wday'];$i<=7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
//Get how many complete weeks are in the actual month
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
echo '<tr>';
for ($j=0;$j<7;$j++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
}
//Now display the rest of the month
if ($actday < $lastDay['mday']){
echo '<tr>';
for ($i=0; $i<7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
if ($actday <= $lastDay['mday']){
echo "<td$class>$actday</td>";
}
else {
echo '<td> </td>';
}
}
echo '</tr>';
}
echo '</table>';
}
showCalendar();
?>
</body>
</html>
akhirnya selesai juiga, btw simple khan he he :-p
semoga bermanfaat ya, selamat mencoba