Aggressive Style 5

読者です 読者をやめる 読者になる 読者になる

Aggressive Style 5

昨今はコミケ関係を中心に書いています。同人やニコニコ動画方面で活躍される方の相互リンクをお待ちしています。

Webを目指す全ての皆様に送るクリスマスプレゼント 〜PHPでタイムレコーダーを作る〜

始めに

皆さんいよいよクリスマスイブですね。クリスマスと言えばプレゼントですが、私の方からはいつもブログを読んでいる皆様へ、自分の作ったアプリケーションの各種設計図とソースコードをプレゼント致します。一昔の仕様で書いているのですが、皆さんの制作や勉強の参考になれば幸いです。

目次

  1. 背景
  2. サイトURLとソースコード
  3. データーベースを用いたアプリケーションとは?
  4. 労働時間の計算方法
  5. データーベースのテーブル図を作成する
  6. サイトのフォルダー構造とその説明
  7. DBと接続する
  8. サイトのデザインをする上での工夫

1.背景

今回の記事では一月間の残業時間を計算していくアプリケーションを作成した。通常仕事とは「10時〜19時」のように開始時刻〜終了時刻まで働けばよいものだ。ここであらかじめ定めた終了時刻を定時などと言うが、これがあってないものだからこそ過労死も多い。さてはてなブックマークの書き込みに、


反復継続して労働時間を記録しておくと、退職時に今までの残業代をまとめて請求できたり、万が一過労死に近いことになった場合の証拠になったりします(id:yahihiさん)

と言う書き込みがあった。これが切っ掛けとなって、スマートフォンで残業時間の証拠を簡単に残しておけるような、シングルユーザー向けのアプリケーションの作成をしたいと思った。

2.サイトURLとソースコード

残業時間を表示するPHPアプリケーション
ソースコード(GitHub)


主な仕様

  • 携帯電話、PCのどちらからでもアクセス可能です。
  • 上のバーで年月を選択し「表示」を押すと、残業記録が表示されます。
  • 月合計残業時間が60時間を超える場合、残業時間が赤文字で表示されます。
  • たまに「[502]Bad GateWay」となる事がありますが、お手数ですが何度もトライしてみて下さい。
  • どれくらい来てくれているのかを確認するため、アクセスログを設置しています。
  • ソースコードの転用や改変は、どうぞご自由に。

尚今回はあらかじめMySQL(データーベース)内に格納されている、残業時間の情報のみ参照できるようになっております。残業時間を入力する部分に関しては、ボタンを押せないようにしてありますのでご了承下さい。

制作環境

3.データーベースを用いたアプリケーションとは?



基本的に掲示板やCMS、お店の在庫状況などのアプリケーションは、クライアント側の管理画面のフォームの情報をサーバーに送信し、サーバー側のデーターベースにデーターを格納して行く。今度はサーバー側のデーターベースに格納された情報をクライアント側のブラウザに引っ張って来る事で初めてユーザーは情報を確認できる。このときサーバーとやり取りする言語は複数あり、自分の知る限りでJavaPHPPerlruby on railspython等がある。今回は自分が得意と言う意味でPHPを用いて作成した。

4.労働時間の計算方法

今回鍵となるのは一月間の残業時間だ。まず一月間の残業時間は、1日おきに残業時間を記録していき、その合計を取れば良い。ここで1日の残業時間は以下のように計算できる。「○月△日の残業時間(時) = (○月△日の終了時間-○月△日の開始時間) -(労働契約上の終了時間 - 労働契約上の開始時間)」。この事からデーターベースに入れるべき情報は以下の4項目となる。

  • 労働契約上の開始時間
  • 労働契約上の終了時間
  • ○月×日の開始時間
  • ○月×に値の終了時間

5.データーベースのテーブル図を作成する

今度はデーターベースのテーブル図を作成しよう。今回は労働契約上の開始時間と終了時間は不変と言う条件下で設計を行う。そこで労働契約上の開始時間と終了時間を格納したテーブルuser_data、毎日の開始時間と終了時間を格納したテーブルをuser_logsとする。このときテーブル図は以下のようになる。

user_logs
カラム名 設定 内訳
id int(10) PRIMARY_KEY,AUTO INCREMENT 主キー
day datetime NOT NULL 日時
start_time int(10) NOT NULL 開始時間
end_time int(10) NOT NULL 終了時間

user_data
カラム名 設定 内訳
id int(10) PRIMARY KEY,AUTO INCREMENT 主キー
start_time int(10) NOT NULL 開始時間
end_time int(10) NOT NULL 終了時間
sarary_time int(10) NOT NULL 時給

6.サイトのフォルダー構造

フォルダーの階層などは以下の通り。尚、図の四角はフォルダー、緑枠はデザインに関連する部分、青枠はMySQLなどプログラムに関するファイルだ。なるべく各部分を切り分けられるだけ、切り分けてみた。



7.DBと接続する

CURD(Insert,Update,Select,Delete)について

CURDとは、データーベースの挿入、更新、選択、削除などの一連の操作を表した物だ。まずCURDの各命令の書き方を確認する。

本アプリケーションでは、このSELECT文のみを使って一月の残業時間を計算していく。

SQL文をPHPで書く(1)

今度はSQLのクエリを実行する為に必要なSQL文の書き方を紹介していく。今回の場合「2012年の○月」「2012年の△月」など、違う月毎に結果を分けなくてはならないので、SQLに変数を代入する必要がある。以下は「変数i番目のidのデータを出力(選択)して欲しい」と言う時に使う方法だ。


$sql = "SELECT * FROM table1 WHERE id ={$i}";

PHPMySQLに接続する(1)

以下に説明するやり方は、「PHPからMySQLデーターベースに接続する方法(PHPプログラミング初心者入門講座)」を参考にした物だ。

PHPプログラミング初心者入門講座(2007年)



自分はこの記事を参考に、各クエリの実行結果を(連想)配列で出力するようなクラス、メソッドを作成している。各メソッドの働きは以下の通り。

  • OutPutUserLogs:○年△月の残業記録(user_logs)を出力する
  • OutPutUserData:労働契約上の情報(user_data)を出力する
  • InsertUserLogs:残業記録(user_logs)に新たな記録を挿入する
  • DeleteUserLogs:残業記録(user_logs)のid番目の要素を削除する

ソースコード(MySQL_connect.php)

PHPMySQLに接続する(2)

今度は実際にデーターベースのデーターをページ上に出力してみよう。まず○年△月をユーザーに選ばせるフォーム部分が下記31行目〜54行目までに当たる。このとき一度選んだ物が元に戻らないようにselected関数を定義し、一度選んだ項目が再表示されるようにしている。

さらに65行目から82行目までforeach文を使ってデーターベースのクエリの出力件数分だけ、繰り返しhtmlのタグを出力している。各日付の残業時間をその都度加算し、その月の残業時間を出力している。

ソースコード(timerecord.php)

8.デザイン面での工夫

デザインの設計図

デザインの設計図は以下のようになる。後で見返すと、全部が角丸にならなかった所が反省点だ。



このようなサイトの骨組みの事を「ワイヤーフレーム」と呼ばれる。

ヘッダー部分、メタ情報(キーワードなど)、フッター部分を切り分けている

デザイン面ではPHPを使って、ヘッダー、メタ情報、フッター部分をrequire_once文を使ってそれぞれ、common/header.php、common/meta_info.php、common/footer.phpの3つに切り分けている。こうする事でヘッダーの仕様が変わったときに全ページ変更しなくて済むようにしている。例えばcommon/footer.phpではヒアドキュメントを使い、各ページから呼び出せるようにしている。

ソースコード(footer.php)

外枠の角丸はツールを使用した

画面の外枠の角丸は「二十歳街道まっしぐら」さんで紹介されていた、「CSS3 Generator」を使って作った。

角丸・グラデーション・影を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」:(二十歳街道まっしぐら)(2011年)



CSS3 Generator



最後に

何とかクリスマスまでに間に合ってよかったです。最後まで読んで下さった皆様ありがとうございました。あとはてなブックマークのコメントに、


PHPやるなら、IDENetBeansオススメですよー(*´Д`) (id:toma-stkさん)

とあったのでNetBeansを早速インストールさせて頂きました。バージョン管理のコミットも楽だったので、末永く使わせて頂きます。又良い環境やサイトがありましたら、ご紹介のほう宜しくお願い致します。(2012.12.24)