php ajax로 달력만들기 예제 1

php ajax로 달력만들기 예제 1

php 공부를 시작한지 3주 정도 된것 같다. 시간날 때마다 예제들을 만들어 보고 있다. 추석이 지나면 php도 완전히 감을 잡을 것 같다. 3주간의 공부로 php를 딱 정의하긴 힘들지만 javascript와 java 를 합쳐 놓은 것 같다. javascript기반의 node js 처럼 쉽게 웹서버를 만들수 있고 바로 웹상에 결과물을 띄울 수 있다. 또 배열 선언, if문, for문, 함수형 프로그래밍 같은 개념들이 js와 많이 닮았다. 그리고 자바처럼 객체,캡슐화, 상속, 접근제어자 등의 개념도 있어서 뭔가 견고한 프로그램을 빠르게 많들 수 있지 않을까라는 생각이 든다. 다양한 api도 존재하니 생각했던 것들을 빠르게 구현 가능 할 것 같다. 구체적인건 조금 더 공부를 해봐야 알것 같다.

#화면

(디자인은 좀 허접하다... 지난달을 클릭하면 지난달 달력이 출력되고, 다음달 버튼을 누르면 다음달 달력이 출력되게 해놓았다. 데이터는 ajax로 가져온다.)

#index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>calendar</title>


<style>

#main{
    border: black 1px solid;
}
#calendar{
    border: black 1px solid;
}

table{
width:800px;
height:400px;
text-align:center;
}

th,tr,td{
    border: black 1px solid;
}


#b1{
    
    border:1px solid green;
     float: left; width: 33%;
}

#a1{
    border:1px solid green;
   float: left; width: 33%;
}

#m1{
    border:1px solid green;
   float: left; width: 33%;
}

#box:after{
border:1px solid pink; line-height: 200px; content:""; display:block; clear:both;
}

#before{

width:200px;
height:100px;
}



#after{
width:200px;
height:100px;
}
</style>
</head>



<body>


<div id="result">;  
</div>


</body>
</html>

<script>

$(document).ready(function(){

        
        //이번달
load();
        
        function load(){

                    $.ajax({
                    url:"now.php",
                    method:"POST",
                    success:function(data){
                        
                        $('#result').html(data);
                    }

                });

        }




 $(document).on('click', '#before', function(){

                var mon = parseInt($('#month').text());  
                var mon= mon -1;

                $.ajax({
                    url:"before.php",
                    method:"POST",
                    data:{mon:mon},
                    success:function(data){
                        
                        $('#result').html(data);
                    }

                });

 });

 $(document).on('click', '#after', function(){

               var mon = parseInt($('#month').text());  
                var mon= mon +1;

                   $.ajax({
                    url:"after.php",
                    method:"POST",
                    data:{mon:mon},
                    success:function(data){
                        
                        $('#result').html(data);
                    }

                });

 });





});


</script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

#now.php

(페이지가 로드될때 now.php 를 호출해서 이번달 날짜 데이터를 가져온다.)

<?php
$now_time = time();

$month=date("n",$now_time);
$daily = array('일','월','화','수','목','금','토');
$sec = mktime(0, 0, 0, $month, 1, 2017);
$firstday=date("j",$sec);   //1 
$lastday=date("t",$sec);    //30
$firstyoil=date("w",$sec);  //5 //


$output = '';

$output .= '<div id="box">
            <div id="b1"><center><input type="button" name="before" id="before" value="지난달"></center></div>
            <div id="m1"><h1 align="center" id="month">'.$month.'</h1></div>
            <div id="a1"><center><input type="button" name="after" id="after" value="다음달"></center></div>
            </div>';

$output .='<table align="center">';
$num = 1;

$output .= '<tr>';

//일 - 토
 for($i=0;$i<7;$i++){
        $output .= '<td>'.$daily[$i].'</td>';
 }

$output .= '</tr>';


//줄
for($i=0; $i<count($daily)-2; $i++)
{

    $output.= '<tr id="'.$i.'">';
    
    //칸
    for($ii=0; $ii<count($daily);$ii++)
    {

        if($i==0 && $ii<$firstyoil){
            $output .= '<td></td>';
        }else{

            if($num > $lastday){
                 $output .= '<td></td>';
                 
            }else{
                $output .= '<td id="'.$ii.'">'.$num.'</td>';
                $num++;
            }
        }
    }

    $output .= '</tr>';
}
$output .= '</table>';

echo $output;
?>

#before.php

(지난달 달력 출력)

<?php


$daily = array('일','월','화','수','목','금','토');
$sec = mktime(0, 0, 0, $_POST['mon'], 1, 2017);
$month=date("n",$sec);      //달
$firstday=date("j",$sec);   //첫째날
$lastday=date("t",$sec);    //마지막째날
$firstyoil=date("w",$sec);  //첫째날 요일 // 5

           

$output = '';

$output .='<div id="box"><div id="b1"><center><input type="button" name="before" id="before" value="지난달"></center></div>
            <div id="m1"><h1 align="center" id="month">'.$month.'</h1></div>
            <div id="a1"><center><input type="button" name="after" id="after" value="다음달"></center></div></div>';
$output .='<table align="center">';
$num = 1;

$output .= '<tr>';
 for($i=0;$i<7;$i++){
        $output .= '<td>'.$daily[$i].'</td>';
 }

$output .= '</tr>';

for($i=0; $i<count($daily)-2; $i++)
{

    $output.= '<tr id="'.$i.'">';
    
    for($ii=0; $ii<count($daily);$ii++)
    {

        if($i==0 && $ii<$firstyoil){
            $output .= '<td></td>';
        }else{
        
            if($num > $lastday){
                 $output .= '<td></td>';
                 
            }else{
                $output .= '<td id="'.$ii.'">'.$num.'</td>';
                $num++;
            }
        }
    }

    $output .= '</tr>';
}
$output .= '</table>';

echo $output;

?>

#after.php

(다음달 달력 출력)

<?php


$daily = array('일','월','화','수','목','금','토');
$sec = mktime(0, 0, 0, $_POST['mon'], 1, 2017);
$month=date("n",$sec);      //달
$firstday=date("j",$sec);   //첫째날
$lastday=date("t",$sec);    //마지막째날
$firstyoil=date("w",$sec);  //첫째날 요일 //


$output = '';

$output .='<div id="box"><div id="b1"><center><input type="button" name="before" id="before" value="지난달"></center></div>
            <div id="m1"><h1 align="center" id="month">'.$month.'</h1></div>
            <div id="a1"><center><input type="button" name="after" id="after" value="다음달"></center></div></div>';
$output .='<table align="center">';
$num = 1;

$output .= '<tr>';
 for($i=0;$i<7;$i++){
        $output .= '<td>'.$daily[$i].'</td>';
 }

$output .= '</tr>';

for($i=0; $i<count($daily)-2; $i++)
{

    $output.= '<tr id="'.$i.'">';
    
    for($ii=0; $ii<count($daily);$ii++)
    {

        if($i==0 && $ii<$firstyoil){
            $output .= '<td></td>';
        }else{
       
            if($num > $lastday){
                 $output .= '<td></td>';
                 
            }else{
                $output .= '<td id="'.$ii.'">'.$num.'</td>';
                $num++;
            }

        
        }
    }

    $output .= '</tr>';
}
$output .= '</table>';

echo $output;

?>

저작자표시

'PHP 박살내기 > php ajax json' 카테고리의 다른 글

php mysql로 facebook 좋아요 구현 단순 핵심소스만! (0)	2017.09.28
php 좋아요 기능& 알림기능 구현 4 (알림 부분) (6)	2017.09.27
php session을 이용한 간단한 쇼핑 장바구니 구현 (1)	2017.09.22
php login session 예제 (1)	2017.09.21
php ajax bootstrap datepicker 예제 (0)	2017.09.21

길위의 개발자

php ajax로 달력만들기 예제 1

'PHP 박살내기 > php ajax json' 카테고리의 다른 글

댓글

티스토리툴바

php ajax로 달력만들기 예제 1

'PHP 박살내기 > php ajax json' 카테고리의 다른 글

관련글

댓글

티스토리툴바