カテゴリー: ホームページ製作

カテゴリー
ホームページ製作

phpで画面遷移なしにフォーム入力からDBのデータを取ってくるプログラム

phpで画面遷移なしにフォーム入力からDBのデータを取ってくるプログラムの表示側。

$op = filter_input(INPUT_POST, 'select_league');

if ($op === '---') {
  echo 'エリアが選択されていません。<br>';
} else {
  echo 'エリアid：' . $op . '';
}

echo "
<form method='post' action=''>
<select name='select_league'>
<option value='---'  selected>エリア選択</option>
<option value='1'>選択肢のサンプル1</option>
<option value='2'>選択肢のサンプル2</option>
<option value='3'>選択肢のサンプル3</option>
<option value='4'>選択肢のサンプル4</option>
<option value='5'>選択肢のサンプル5</option>
<option value='6'>選択肢のサンプル6</option>
<option value='7'>選択肢のサンプル7</option>
</select>
<input type='submit' value='検索'>
</form>";

actionで、空にすると自分に遷移する。filter_input()は、PHP8から出るエラーを防ぐために必要。filter_input()の戻り値は、初回はNULLが入る。二回目からは、選択されたものが入る。

カテゴリー
ホームページ製作

botを除く

アクセスカウンタでbotを除きたいので、いろいろ試行錯誤してみた。

botを除いた人間のアクセスをカウントする方法 – 正しいアクセス数の把握を目指す

上記リンク先のようにすればいいけど、今はstr_contains()を使ったほうがいいということなので、少し変えてみた。

$_SERVER[‘HTTP_USER_AGENT’];に変わって、gethostbyaddr($_SERVER[‘REMOTE_ADDR’]);でIPアドレスをホスト名にして、ボットかどうか判別。ボットだと思われるものはarray関数に追加する形にしました。ボットならtrue,ボットではないならfalseが返る。

function isBot(){
  $ua = gethostbyaddr($_SERVER['REMOTE_ADDR']);
  $bot_arr = array(
     "applebot"
    ,"ahrefs.com"
    ,"googlebot"
    ,"msnbot"
    ,"rate-limited-proxy"
  );
  foreach ($bot_arr as $bot_value) {
    if (str_contains($ua, $bot_value)) {
      return true;
    }
  }
  return false;
}

とりあえず、これで運用してみます。

カテゴリー
ホームページ製作

アクセスカウンタのフローチャート

  • ボットかどうか判別する。
  • ボットでないなら、DBからカウント数、ipアドレス、日付を取ってくる。
  • 日付をチェック。違えば、カウント更新、ipアドレス更新、日付更新。終了。
  • ipアドレスをチェック。違えば、カウント更新、ipアドレス更新。終了。
  • 日付、ipアドレスが同じなら、カウント数そのまま。終了。
カテゴリー
ホームページ製作

font awesome6をSCSSで使うときの注意点

font awesome6をscssで使ってみたら、正しく理解してないところがあった。とりあえずダウンロード。今日現在は、6.4.0だった。

下記のサイトの通りであるが、分かりにくかったところ。

https://qiita.com/sota_shimizu/items/8746aaf0c2d29bcba6e2

ポイント

  • $fa-font-pathは、cssファイルから、webfontsまでのパスを書くこと。
  • webfontsファイルも一緒にサーバーにアップロードすること。

$fa-font-path:”../webfonts”;と書かれているが、実際にcssファイルが置かれているところからwebfontのパスが違えば変更すること。_variables.scssに書く必要もない。

index.htmlファイルはこんな感じ。

scssファイルはこんな感じ。cssファイルからwebfontsへのパスを正しく書く。疑似要素の書き方は、以前とさほど変わらず。

index.htmlのフォルダ構成はこんな感じ。cssファイルも同じフォルダに置いた。webfontsファイルは、ダウンロードしたfontawesomeファイルにあるので、コピーした。

index.htmlファイルを開いてみます。

無事、font awesome6のアイコンが反映されてました。unicodeを使っても、アイコンが反映されてました。

それから、_variables.scssの不要なところを削除すると、作られるcssファイルが軽くなります。

カテゴリー
ホームページ製作

アクセスカウンタが2ずつ増える

アクセスカウンタを作ってみたら、2ずつ増え、その原因が分かりました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>

</head>
<body>

<?php
$counter_file = 'counter.txt';
$counter_lenght = 8;

$counter = NULL;

$fp = fopen($counter_file, 'r+');

if ($fp){
    if (flock($fp, LOCK_EX)){
        $counter = fgets($fp, $counter_lenght);

        print('count:'.$counter);

        $counter++;

        print('count:'.$counter);

        rewind($fp);

        if (fwrite($fp, $counter) === FALSE){
            print('ファイル書き込みに失敗しました');
        }

        flock($fp, LOCK_UN);
    }
}

fclose($fp);

print('count:'.$counter);
?>

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

<script>
$.ajax({
  type: 'GET'
}).done(function(data, status, xhr) {
  var serverDate = new Date(xhr.getResponseHeader('Date'));

  $('#server').text(serverDate);
});
</script>

<p>サーバーの設定時刻<br><span id="server"></span></p>

</body>
</html>

至って普通のアクセスカウンタを設置し、jqueryを読み込ませ、ajaxを読み込ませるだけ。そうすると、アクセスカウンタが2ずつ増加した。

分かったこと

  • アクセスカウンタは、読み込み時は増えない。+1足した時と書き込み時+1増える。
  • jqueryとajaxの場所を移動させても、アクセスカウンタは2ずつ増える。
  • ajaxを失くすと、アクセスカウンタは1ずつ増える。
  • jqueryを失くすと、アクセスカウンタは1ずつ増えるが、ajaxは動かない。
  • jqueryにdefer,asyncを加えると、アクセスカウンタは1ずつ増えるが、ajaxが動かない。
  • jqueryにdefer,asyncを加え、ajaxをonloadイベントで呼び出すと、アクセスカウンタは2ずつ増え、ajaxは動く。

【jqueryとajaxの関係が書かれたブログ】

defer属性で読み込んだjQueryプラグインの関数をインラインで呼び出す際の注意点

アクセスカウンタが2ずつ増える原因と、jqueryとajaxの関係が分かりましたが、問題の解決はできませんでした。