본문 바로가기
PHP 박살내기/php ajax json

php ajax로 달력만들기 예제 1

by 인생여희 2017. 9. 25.
반응형

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;

?>


반응형

댓글