PHPでカレンダーを表示するWebアプリを作ってみよう！今回はPHP7~での実行を想定している。
URLを考える
今回はWebアプリケーションなのでURLを考えていこう。どういったURL設定にしたら使いやすいアプリができるか？基本的な動きが実現できるようになったらそういったことも吟味していく必要がある。
今回は
http://ホスト名/calendar/index.php
というurlで実行日時のカレンダー
http://ホスト名/calendar/index.php?year=1980&month=5
とyearとmonthをクエリパラメータで渡すとその年月のカレンダーを表示する仕様とする。
こういうURL設計にしておくとそのカレンダーをブックマークしておくことができるし、自分が生まれた日は何曜日だったかとかもすぐに調べることができる。
完成イメージ
その月のカレンダーと前月と翌月のリンクボタンがある。背景を黄色にすることで当日をわかりやすくしている。なお、このHTMLとCSSは別記事にしてあるのでそちらを参照してもらいたい。
作成
index.php
index.phpを以下のように作成しよう。
○index.php
<?php
//クエリパラメータが来ていたらその年月、そうでなければ実行日の年月とする。
//date("Y")は2021など4桁,date("y")は21と二桁
//date("n")は1~12,date("m")は01~12と0埋めされる
$year=isset($_GET['year'])?(int)$_GET['year']:date("Y");
$month=isset($_GET['month'])?(int)$_GET['month']:date("n");
//2020/13と来た場合は2021/1に変換
if($month===13){
$year++;
$month=1;
}
//2021/0と来たら2020/12と変換
if($month===0){
$year--;
$month=12;
}
//2021を令和3に変換
if($year> 2018) {
$gengou="令和".($year-2018);
}elseif($year>1988){
$gengou="平成".($year-1988);
}elseif($year>1925){
$gengou="昭和".($year-1925);
}elseif($year>1911){
$gengou="大正".($year-1911);
}else{
$gengou=$year;
}
//1日の曜日の戻り値(0:日曜,1:月...6:土)から最初の空白の数を計算(日なら0)
$before=date("w",mktime(0,0,0,$month,1,$year));
//date("t")でその月の日数
$dayCount=date("t",mktime(0,0,0,$month,1,$year));
//最後の日以降の空白の数
$after=6-date("w",mktime(0,0,0,$month,$dayCount,$year));
$total=$before+$dayCount+$after;
//幅が7の表にしたときの行数
$row=$total/7;
//空の配列を作成（最終的に2次元配列になる)
$data=[];
for($i=0;$i<$row;$i++){
//空の配列を作成
$temp=[];
for($j=0;$j<7;$j++){
if($i===0 && $j<$before || $i===$row-1 && $j>=7-$after){
//空白の部分は空文字を入れる
$temp[]="";
}else{
$date=$i*7+$j+1-$before;
//年月日が一致すればdate("j")は1~31 date("d")は01~31
if(date('Y-m-j')===date('Y-m-j',mktime(0,0,0,$month,$date,$year))){
$date="*".$date;
}
//そうでなければ日付を入れる(今日には先頭に*がつく)
$temp[]=$date;
}
}
//data配列に追加
$data[]=$temp;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?=$gengou?>年<?=$month?>月カレンダー</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<h1><?=$gengou?>年<?=$month?>月のカレンダー</h1>
<p>
<a href="?year=<?=$year?>&month=<?=$month-1?>">前月</a>
<a href="?year=<?=$year?>&month=<?=$month+1?>">翌月</a>
</p>
<table border="1">
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<?php foreach($data as $row): ?>
<tr>
<?php foreach($row as $col):?>
<?php if(substr($col,0,1)==="*"): ?>
<td class="today"><?=substr($col,1)?></td>
<?php else: ?>
<td><?=$col ?></td>
<?php endif;?>
<?php endforeach;?>
</tr>
<?php endforeach;?>
</table>
</div><!-- end container-->
</body>
</html>
date関数を使ってカレンダーを作成している。date関数は第1引数で取得したい情報を、第2引数でUnixタイムを指定する。(第2引数省略で現在）
指定日時のUnixタイムを生成する方法はいくつかあるがまずはmktimeを覚えるとよいだろう。
mktime(hour,minute,second,month,day,year)
例えば
mktime(0,0,0,1,1,2021);//2021-1-1のUnixタイムが返る
この引数の並びがまた独特なので[HISはムーディ]と覚えておくとよい。
なのでdate関数で以下のように記述すると
date("Y-m-d",mktime(0,0,0,1,1,2021));//2021-01-01
2021-01-01
という文字列が取得できる。この書式指定文字列もいろいろあるので以下の記事を参考にするとよい。
https://www.flatflag.nir87.com/date-473#date-3
またdate関数は引数を1つで行うと現在をもとに処理を行う。
date("Y"); //->2021
css
cssフォルダを作り以下のようにmain.cssを作成する
○main.cssの作成
@charset "UTF-8";
body{
background:#7ce2d9;
}
#container{
width:1000px;
min-height:100vh;
margin:0 auto;
font-family: "M PLUS Rounded 1c";
padding:20px 0 40px;
}
#container > p{
display:flex;
width:90%;
margin:0 auto 20px;
justify-content:space-between;
align-items:center;
}
#container > p > a{
display:block;
width:70px;
height:70px;
text-align:center;
line-height:70px;
border-radius:50%;
background:#fefefe;
font-size:20px;
text-decoration:none;
}
h1{
width:800px;
margin:0 auto 20px;
text-align:center;
font-size:64px;
border:5px solid #fff00f;
border-radius: 20px;
padding:0 10px;
background-color:#00ff76;
color:#ff69b4;
text-shadow: 1px 1px 0 #333;
}
table{
width:90%;
margin:20px auto 0;
border-collapse: collapse;
border-spacing: 0;
}
td,th{
border:5px solid #fff00f;
text-align: center;
background-color:#ffffff;
font-size:50px;
padding:5px 0;
}
th{
color:white;
background-color:#00ff76;
text-shadow: 1px 1px 0 #333;
}
tr *:first-child{
color:#ff69b4;
}
tr *:last-child{
color:#0ba9ea;
}
td.today{
background:#ffff80;
}
カレンダーをデザインしている。繰り返しになるがこのマークアップとCSSに関しては別記事にまとめてあるので詳しく知りたい方はそちらを参照すること
完成
以上で完成だ。クエリパラメーターで自分が何曜日に生まれたのかを調べてみてもらいたい。今回、元デザインにあった画像の部分は削除してしまったが12ヶ月分画像を用意して月によって画像が切り替わるようにしても面白いだろう。是非チャレンジしてもらいたい。
関連記事
html,cssなどの見た目に関して
コメント