Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
PHPとSqliteとJavaScriptを使ってランキング機能を実装してみる1 - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

PHPとSqliteとJavaScriptを使ってランキング機能を実装してみる1

サンプルのソースコードはgithubにあります。

スポンサーリンク

概要

過去に制作したゲームの一部に上位3位までを表示するランキング機能を実装してみました。↓のゲームは3秒間にクリックした回数を競うゲームです。 3位までに入るとランキングに登録することが出来ます。クリックするとゲームが開始されます。

ランキング機能実装した過去のゲーム↓

Visual Studio Codeの拡張機能SQliteを使用してデータベースを作成する

データベースの作成にはVisual Studio Codeの拡張機能SQliteを使用しました。

テーブル名はtestにしました。テーブルの中には二つのカラムがあり、一つ目のnameカラムには名前を保持して二つ目のscoreカラムには得点や記録などを保持します。テーブルには最下位になるデータを一件追加しています。

PHPのPDOを使ってデータベースに接続してデータを取得する

PDOクラスをインスタンス化する。

PDOクラスの引数にデータベースファイルが置いてあるパスを指定します。これでデータベースの接続は完了です。必要に応じてsetAttributeメソッドで属性をセットします。今回は3つ属性をセットしました。

queryメソッドを使用して必要なデータを取得する。

相関サブクエリを使い順位を付けて並べ替え上位3位までをfetchAllメソッドでデータを取得しています。取得したデータはjson_encodeメソッドでjson形式にエンコードしています。

JavaScriptのFetch APIを使ってサーバーにリクエストする

先ほどPHPで作成したjsonをJavaScriptのFetchAPIを使用して取得します。

変数lastScoreに取得した上位3位までのデータ中一番低いスコアを保持して、ゲーム終了時のスコア比較に使用します。

ランキング入賞時の処理

スコアを比較して上位3位に入っていた時のみサーバーへリクエストするようにしました。

PHPのPDOを使ってデータを追加する

JavaScriptからリクエストされたデータをprepareメソッドを使いクエリを送信して追加します。

クライアント側でスコアを保持している為の不具合

この記事のランキング実装方法ではブラウザの開発者ツール等を使いランキングに入賞できてしまうことが解かりました。続きは↓の記事になります。

最後までお読みいただきありがとうございました。
サンプルのソースコードはgithubにあります。

モバイルバージョンを終了