• Translate

5/07/2015

Membuat Kalender Sederhana dengan PHP, HTML dan CSS

Tutorial PHP |
Membuat Kalender Sederhana dengan PHP, HTML dan CSS | Tutorial hari ini adalah membuat kalender sederhana, mungkin sobat pernah melihat di web-web portal berita dengan banyaknya artikel-artikel yang ada. namun sobat ingin melihat berita yang ada pada bulan lalu, nah fungsi kalender ini pun ditingkatkan menjadi blog archive seperti yang ada di blog saya. tapi hari ini saya hanya akan membuat tutorial sederhana untuk membuat kalender.

Membuat Kalender Sederhana dengan PHP, HTML dan CSS

Silahkan dipelajari langkah-langkahnya dibawah ini :

► Membuat Fungsi PHP
Pertama sobat harus membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.
<?php
//Membuat Fungsi PHP
//Draw Calendar
function draw_calendar($month,$year){
    // Draw table for Calendar
    $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';
    // Draw Calendar table headings
    $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
    $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';
    //days and weeks variable for now ...
    $running_day = date('w',mktime(0,0,0,$month,2,$year));
    $days_in_month = date('t',mktime(0,0,0,$month,2,$year));
    $days_in_this_week = 1;
    $day_counter = 0;
    $dates_array = array();
    // row for week one
    $calendar.= '<tr class="calendar-row">';
    // Display "blank" days until the first of the current week
    for($x = 0; $x < $running_day; $x++):
        $calendar.= '<td class="calendar-day-np">&nbsp;</td>';
        $days_in_this_week++;
    endfor;
    // Show days....
    for($list_day = 1; $list_day <= $days_in_month; $list_day++):
        if($list_day==date('d') && $month==date('n'))
        {
            $currentday='currentday';
        }else
        {
            $currentday='';
        }
        $calendar.= '<td class="calendar-day '.$currentday.'">';
       
            // Add in the day number
            if($list_day<date('d') && $month==date('n'))
            {
                $showtoday='<strong class="overday">'.$list_day.'</strong>';
            }else
            {
                $showtoday=$list_day;
            }
            $calendar.= '<div class="day-number">'.$showtoday.'</div>';
        // Draw table end
        $calendar.= '</td>';
        if($running_day == 6):
            $calendar.= '</tr>';
            if(($day_counter+1) != $days_in_month):
                $calendar.= '<tr class="calendar-row">';
            endif;
            $running_day = -1;
            $days_in_this_week = 0;
        endif;
        $days_in_this_week++; $running_day++; $day_counter++;
    endfor;
    // Finish the rest of the days in the week
    if($days_in_this_week < 8):
        for($x = 1; $x <= (8 - $days_in_this_week); $x++):
            $calendar.= '<td class="calendar-day-np">&nbsp;</td>';
        endfor;
    endif;
    // Draw table final row
    $calendar.= '</tr>';
    // Draw table end the table
    $calendar.= '</table>';
   
    // Finally all done, return result
    return $calendar;
}
?>

Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.

► Membuat gabungan HTML dan CSS .
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cara Membuat Kalendar dengan PHP, HTML dan CSS</title>
    <style>
        @charset "utf-8";
        /* CSS Document */
        html,body,form{ margin:10px; padding:10px; font-family:Ebrima, Arial, Helvetica,  sans-serif; font-size:12px; color:#666; empty-cells:hide;}
        table.calendar{border-style: solid; border-width: 1px; border-width:1px; border-color:#666; -moz-box-shadow:0px 0px 4px #CCCCCC; -webkit-box-shadow:0px 0px 4px #CCCCCC; box-shadow:0px 0px 4px #CCCCCC; }
       tr.calendar-row  {  }
     td.calendar-day  { min-height:80px; position:relative; } * html div.calendar-day { height:80px; }
      td.calendar-day:hover  { background:#FFF; -moz-box-shadow:0px 0px 20px #eeeeee inset; -webkit-box-shadow:0px 0px 20px #eeeeee inset; box-shadow:0px 0px 20px #eeeeee inset; cursor:pointer;}
    td.calendar-day-np  { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
   td.calendar-day-head {font-weight:bold; text-shadow:0px 1px 0px #FFF;color:#666; text-align:center; width:64px; padding:12px 6px; border-bottom:1px solid #CCC; border-top:1px solid #CCC; border-right:1px solid #CCC; background: #ffffff;
     background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
        background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%);
        background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%);
        background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%);
        background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
        }
        div.day-number{padding:6px; text-align:center; }
        /* shared */
        td.calendar-day, td.calendar-day-np {padding:5px; border-bottom:1px solid #DBDBDB; border-right:1px solid #DBDBDB; font-size:14px;background: #ffffff;
        background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
        background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
        background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
        background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
        }
        .overday{ color:#164b87; text-shadow:0px 1px 0px #FFF;}
        .currentday{background: #6cb7f3 !important;
        background: -moz-linear-gradient(top,  #6cb7f3 0%, #388be8 100%) !important;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cb7f3), color-stop(100%,#388be8)) !important;
        background: -webkit-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
        background: -o-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
        background: -ms-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
        background: linear-gradient(to bottom,  #6cb7f3 0%,#388be8 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cb7f3', endColorstr='#388be8',GradientType=0 ) !important; color:#FFF  !important; font-weight:bold; -moz-box-shadow:0px 0px 18px #1F68BA inset; -webkit-box-shadow:0px 0px 18px #1F68BA inset; box-shadow:0px 0px 18px #1F68BA inset;
        }
        .currentday:hover{-moz-box-shadow:0px 0px 24px #074080 inset !important; -webkit-box-shadow:0px 0px 24px #074080 inset !important; box-shadow:0px 0px 24px #074080 inset !important;}
</style>
</head>
<body>
<h1><center><a href="http://www.alltutorials.info">All About Tutorials</a></center></h1>
<?php
echo '<h2>May 2015</h2>';
echo draw_calendar(5,2015);

?>

</body>
</html>

nah kedua  file tersebut digabungkan menjadi satu halaman ( fungsi dan html) , sobat simpan dan beri saja nama kalender.php, apabila sobat ingin mengubah bulan atau tahun bisa sobat ubah pada tulisan yang saya beri warna. untuk hasil yang lebih bagus dan mempunyai fungsi yang lebih hebat silahkan sobat kembangkan sendiri.

Semoga Bermamfaat,
Loading...

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

2 comments Add Comment

blog yang bagus dan mendidik mas

Reply

Terimakasih mas atas masukannya :-bd

Reply

Comments not appropriate topic will sign SPAM.

Loading...