北海道のとある企業で働くエンジニアのブログ

北海道でエンジニアとして働いています。技術的なことや感じたことを書きます。最近はブロックチェーンにハマってます。

FuelPHP + MySQL で PHP Webアプリケーションを作ってみる　―　画面表示

PHP FuelPHP NetBeans

ここからは実際に画面を作っていきます。

画面デザイン

今回はこのような画面を作ってみたいと思います。
f:id:nw_ocean:20140405160402p:plain

FuelPHPで画面を表示してみる

プロジェクト作成

以前紹介したときと同様に、NetBeansでFuelPHPのプロジェクトを作ります。
[新規プロジェクト > PHPアプリケーション]を選択していき、PHPフレームワークのところでFuelPHPを選択します。
ここでは、プロジェクト名を「UserManagement」としました。
f:id:nw_ocean:20140405160453p:plain

base_urlの設定

app/config/config.php の base_url を下記のように書き換え、ベースとなるURLを設定します。

'base_url'  => '/usermanagement/public/',

Controllerの作成

controller 配下に list.php を下記の内容で作成します。

<?php

class Controller_List extends Controller
{
	public function action_index()
	{
		return Response::forge(View::forge('list/index'));
	}
}

Viewの作成

views 配下に list フォルダを作成し、その中に index.php を作成します。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>社員管理システム</title>
  <?php echo Asset::css('style.css'); ?>
</head>
<body>
  <div class="header">
    <h1>社員管理システム</h1>
  </div>
  <div class="main">
    <table class="search">
      <tr>
        <th>所属</th>
        <td>
          <select class="dept_code">
            <option selected>（選択してください）</option>
            <option>総務部</option>
            <option>経理部</option>
            <option>開発部</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>社員コード</th>
        <td><input type="text" class="emp_code small" value="" /></td>
      </tr>
      <tr>
        <th>社員名</th>
        <td><input type="text" class="emp_name wide" value="" /></td>
      </tr>
    </table>
    <div class="action_area">
      <button class="search_button">検索</button>
    </div>
    <table class="list">
      <tr>
        <th style="width: 100px;">所属</th>
        <th style="width: 100px;">社員コード</th>
        <th style="width: 200px;">社員名</th>
        <th style="width: 100px;">入社</th>
      </tr>
      <tr>
        <td>総務部</td>
        <td>00001</td>
        <td>総務　一郎</td>
        <td>2000/04/01</td>
      </tr>
      <tr>
        <td>総務部</td>
        <td>00002</td>
        <td>総務　次郎</td>
        <td>2001/04/01</td>
      </tr>
      <tr>
        <td>経理部</td>
        <td>00003</td>
        <td>経理　三郎</td>
        <td>2002/04/01</td>
      </tr>
      <tr>
        <td>経理部</td>
        <td>00004</td>
        <td>経理　史郎</td>
        <td>2003/04/01</td>
      </tr>
    </table>
  </div>
</body>
</html>

スタイルシートの作成

assets/css 配下に style.css を作成します。

body {
  font-size: 10pt;
}
.header {
  width: 100%;
  text-align: center;
}
.main {
  width: 100%;
}
.action_area {
  width: 100%;
  text-align: center;
  margin: 10px;
}
h1 {
  font-size: 12pt;
  margin: 30px;
}
table {
  margin-left: auto;
  margin-right: auto;
}
table.search {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
}
table.search th {
  background-color: #C2FFA3;
  width: 120px;
}
table.list {
  width: 600px;
  border-style: solid;
  border-width: 1px;
}
table.list th {
  background-color: #C2FFA3;
  width: 120px;
}
table.list td {
}
input.small {
  width: 100px;
}
input.wide {
  width: 300px;
}
button {
  width: 100px;
}

確認

Apacheを起動し、ブラウザで「http://localhost/usermanagement/public/list/」にアクセスして確認してください。

設定したファイル

今回作成したファイルは下記の通りです。
f:id:nw_ocean:20140405170306p:plain
f:id:nw_ocean:20140405170314p:plain


画面を表示することができたので、次はデータベースのアクセスを実装してみます。

関連