tableをdivタグで囲って、以下のように、overflow:auto;とwhite-space:nowrap;を設定します。
html
<div id="id_name"> <table> </table> </div>
css
#id_name{
overflow: auto;
white-space: nowrap;
}
すると、他のコンテンツは崩れず、tableだけ横にスクロールできます。

knocks its down!

随机应变 ABCD: Always Be Coding and … : хороший
tableをdivタグで囲って、以下のように、overflow:auto;とwhite-space:nowrap;を設定します。
html
<div id="id_name"> <table> </table> </div>
css
#id_name{
overflow: auto;
white-space: nowrap;
}
すると、他のコンテンツは崩れず、tableだけ横にスクロールできます。

knocks its down!

html
<div class="confirm"> <table> <tr><td>お名前</td><td>hogehogehoge様</td></tr> <tr><td>メールアドレス</td><td>hogehogehoge</td></tr> <tr><td>ご予約日付</td><td>hogehogehoge</td></tr> <tr><td>時間</td><td>hogehogehoge</td></tr> <tr><td>コース</td><td>hogehoge</td></tr> <tr><td>担当</td><td>hogehogoehogehoge</td></tr> </table><br> </div>
tr tdが左側、td+tdが右側になります。
.confirm table,.confirm td,.confirm th {
border-collapse: collapse;
border: 1px solid #CCCCCC;
}
.confirm tr td{
width:180px;
padding-left:15px;
background-color:#BAD3FF;
}
.confirm td+td{
width:600px;
background-color:#fff;
}

divタグの横並びで、border-collapse: separateを使った際に、囲ったエリアにborder-spacingを使うと、左右に余白ができてしまいます。
.class_areaname{
border-collapse: separate;
border-spacing: 5px 0;
}
.class_name{
display: table-cell;
}

そのため、各cell(divタグ)の方に、padding-right:;を設定すれば、左揃えになります。
.class_areaname{
border-collapse: separate;
}
.class_name{
display: table-cell;
padding-right:5px;
}
右だけ余白ができました。

nowrapを加えます
<td nowrap>hogehoge</td>
nowrap追加前

nowrap追加後

2~3日、ずっと悩んでました。。
1.table tdのcssは
td {
write something;
}
2. table td にclassを付けた場合
例
<td class="selected">hoge</td>
cssは、
td.selected {
write something;
}
3.table tdの中にlink(aタグ)のcss
td a{
write something;
}
4.table classを付けたtdの中のlink(aタグ)のcss
<td class="selected"><a href="?param=hoge">foo</a></td>
cssは
td.selected a{
write something;
}
下のキャプチャのように、classをつけているtdの中のaタグのcolorを#fffにできました。

php側
1.DBから取得した予約データで、時間は+=,予約数は++で連想配列をつくる
2.array_multisortで時間の多い順に連想配列をソート
3.jsに値を渡す
$i = 0;
while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
if($year == substr($result['day'], 0, 4) && $month == substr($result['day'], 7, 2)){
$charge = $result['charge'];
$book[$charge]['course'] += $result['course'];
$book[$charge]['count']++;
$total += $result['course'];
$i++;
}
}
foreach($book as $key => $value){
$time[$key]["course"] = $value["course"];
}
array_multisort($time, SORT_DESC, $book);
foreach($book as $key => $value){
$name_list[] = $key;
$time_list[] = $value["course"];
$count_list[] = $value["count"];
}
chart.js
オプションで、左右の軸を指定する
tickのmaxは配列の中の最も大きい数 x N とする
Math.max.apply(null, array)*N
ただし、javascriptの IEEE 754の計算だと、誤差が生じることがある
例 Math.max.apply(null, array)*1.1 = 90.00000000000001(!?)
IEEE 754は、2進法計算だかららしい。※wikipediaを読んだが、何故二進法だと誤差が出るのかは私の頭では理解不能

そのため、 Math.floor(Math.max.apply(null, array)*N) として、小数点以下切り捨て
var name_arr = JSON.parse('<?php echo $name_l; ?>');
var time_arr = JSON.parse('<?php echo $time_l; ?>');
var count_arr = JSON.parse('<?php echo $count_l; ?>');
var ctx = document.getElementById("BarChart");
var BarChart = new Chart(ctx, {
type: 'bar',
data:{
labels:name_arr,
datasets:[{
label:'予約時間',
data: time_arr,
backgroundColor: "rgba(255,136,86,0.8)",
yAxisID: "y-axis-1",
},{
label:'予約数',
data: count_arr,
backgroundColor: "rgba(54,264,235,0.4)",
yAxisID: "y-axis-2",
}]
},
options:{
responsive: true,
scales:{
yAxes:[{
id: "y-axis-1",
type: "linear",
position: "left",
ticks:{
max: Math.floor(Math.max.apply(null, time_arr)*1.1),
min:0,
stepSize: 30
}
},{
id: "y-axis-2",
type: "linear",
position: "right",
ticks:{
max: Math.max.apply(null, count_arr)+1,
min:0,
stepSize: 1
}
}],
}
}
});
結果:今月

翌月

php側
1.今日の年・月を取得する
2.Getパラメーターで先月・翌月の場合は、$monthを変更する
3.今月が1月の場合は前月の年、12月の場合は翌月の年を変更
4.年と月が一致するデータをDBから取得して、名前と営業成績を連想配列にする
5.array_multisortで、成績順にソートする
6.chart.jsにラベルとデータを渡すため、keyとvalueを配列にしてデコードする
$year = date("Y");
$month = date("m");
if(!empty($_GET["m"])){
$month = date("m", strtotime("".$_GET["m"]." month"));
if($_GET["m"] == -1 && $month == 12){
$year= date("Y", strtotime("-1 year"));
}elseif($_GET["m"] == 1 && $month == 1){
$year= date("Y", strtotime("+1 year"));
}
}
$i = 0;
while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
if($year == substr($result['day'], 0, 4) && $month == substr($result['day'], 7, 2)){
$charge = $result['charge'];
$book[$charge] += $result['course'];
$total += $result['course'];
$i++;
}
}
foreach($book as $key => $value){
$time[$value] = $value;
}
array_multisort($time, SORT_DESC, $book);
foreach($book as $key => $value){
$name_list[] = $key;
$time_list[] = $value;
}
$name_l =json_encode($name_list);
$time_l = json_encode($time_list);
js側
普通のchart.js棒グラフ
var name_arr = JSON.parse('<?php echo $name_l; ?>');
var time_arr = JSON.parse('<?php echo $time_l; ?>');
var ctx = document.getElementById("BarChart");
var BarChart = new Chart(ctx, {
type : 'bar',
data: {
labels: name_arr,
datasets:[{
label: "予約時間(分)",
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor:"rgba(75, 192, 192, 1)",
data: time_arr
}]
},
options: {
scales: {
yAxes: [{
ticks : {
beginAtZero:true,
}
}]
}
}
});
view側
1. switch文で、今月・先月・翌月を表示を出し分ける(if elseの方が良かったかも。。。)
2. canvasはdiv wrapperで囲ってサイズ調整
<?php
switch($_GET["m"]){
case -1:
echo "先月の総予約数: ".$i."件<br>";
echo "先月の総予約時間: ".$total."分<br>";
break;
case 1:
echo "来月の総予約数: ".$i."件<br>";
echo "来月の総予約時間: ".$total."分<br>";
break;
default:
echo "今月の総予約数: ".$i."件<br>";
echo "今月の総予約時間: ".$total."分<br>";
break;
}
?>
<div class="wrapper">
<canvas id="BarChart"></canvas><br>
<center><a href="?m=-1">先月</a> | <a href="analytics.php">今月</a> | <a href="?m=1">翌月</a></center>
</div>
結果:今月

翌月

あ、getパラメータは、date(“Ym”, strtotime(+-1 month));で良かったですね。。。
HolidayDateTimeを使います。
https://qiita.com/chiyoyo/items/539dc2840a1b70a8e2c3
require_once("holiday.php");
$datetime = new HolidayDateTime('2018-05-03');
echo $datetime->holiday();
すごいっすね。。頭いいっすね。

ifに書き方を変えると、平日・祝日の判定ができます。
require_once("holiday.php");
$date = '2018-04-29';
$datetime = new HolidayDateTime($date);
if($datetime->holiday()){
echo $datetime->holiday();
}else {
echo "平日";
}

応用すると、
$y = substr($today, 0, 4);
$m = substr($today, 7, 2);
$d = substr($today, 12, 2);
$target_day = $y."-".$m."-".$d;
require_once("holiday.php");
$datetime = new HolidayDateTime($target_day);
if($datetime->holiday()){
echo "<b>".$today. "(".$datetime->holiday().") 予約状況</b><hr>";
$holiday = 1;
}else {
echo "<b>".$today. " 予約状況</b><hr>";
$holiday = 0;
}
祝日判定をして、祝日の場合は予約できないようにします。

<?php elseif($validation == 4): ?> <h1>ご予約内容の確認</h1> <p>ご希望いただいた<?php echo $day; ?>は、<?php echo $holiday; ?>でお休みの為、ご予約できません。<br> 前のページに戻り、異なる日程にてご入力くださいませ。</p> <hr> <b>お名前</b><br> <?php echo $name; ?>様<br> <b>メールアドレス</b><br> <?php echo $mail; ?><br> <b>ご予約日付</b><br> <?php echo $day; ?><br> <b>時間</b><br> <?php echo $stime; ?>~<?php echo $etime; ?><br> <b>コース</b><br> <?php echo $course; ?>分<br> <b>担当</b><br> <?php echo $charge; ?><br><br> <input type="button" value="内容を修正する" onclick="history.back(-1)"> </form>
うわー

git hubからdownloadします。
https://github.com/dapphp/securimage
git clone https://github.com/dapphp/securimage.git
早速使ってみます。
<img id="captcha" src="securimage/securimage_show.php">
なにこれ?

つかっていきます。
<?php
if($_POST["captcha_code"]){
require_once "securimage/securimage.php";
$securimage = new Securimage();
if($securimage->check($_POST['captcha_code'])==false){
echo "error";
} else {
echo "success";
}
}
?>
<form method="POST" name="form" action="">
<img id="captcha" src="securimage/securimage_show.php"><br>
<input type="text" name="captcha_code"><br>
<input type="submit" value="送信" class="submit">
</form>
おおおお

初期
.htaccess
192.168.33.11と192.168.33.12をアクセスdenyしています。

.htaccessの行数をカウントし、2行目から、最終行の前までをfgetsで1行ずつ取得し、新たに制限するipを追加して、file_put_contentsします。
$count = count(file(".htaccess"));
$file = fopen(".htaccess", "r");
$body = "<Files ~ \"^form\.php$\">\n";
$i = 0;
if($file){
while ($line = fgets($file)) {
$i++;
if($i < $count and $i !== 1){
$body .= $line;
}
}
}
$ip = "192.168.33.13";
$body .= "deny from ".$ip."\n";
$body .= "</Files>";
file_put_contents('.htaccess', $body);
.htaccessに、新たにdeny fromが追加されました。
