Symfony勉強会 #6 Silexチュートリアル

 ツイート 3  シェア 0  Hatena 5

symfony-logo

先日、Symfony勉強会 #6 Silexワークショップに参加しました。

Silexは全くの初心者だった私ですが、ワークショップでシンプルなCRUDアプリを作成しながらSilexの基本を学ぶことができました。composerの使い方も同時に学ぶことができてよかったです。忘れないうちにワークショップで学んだ内容を整理しておきます。

ワークショップで使用したチュートリアルの本家ソースコードは下記に置かれています。
https://github.com/chisei/silex_tutorial

この記事のソースコードは下記に置いてあります。
https://github.com/karakaram/silex-tutorial

動作確認環境

  • PHP5.3.12

目次

  1. 開発するアプリの仕様
  2. 事前準備
  3. 会員登録フォームの表示
  4. 会員登録ロジックの作成
  5. テストを書いてリファクタリング

開発するアプリの仕様

仕様

member テーブルに対し、登録・更新・参照を行うアプリケーションを作成する

テーブル定義


CREATE TABLE `member` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(255) NOT NULL,
  `password` varchar(64) NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`),
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ルーティング


GET     /member/         会員情報表示
GET     /member/register 会員登録フォーム表示
POST    /member/register 会員登録処理
GET     /member/edit     会員編集フォーム表示
POST    /member/edit     会員編集処理

事前準備

HelloWorldを済ませておく

事前にHelloWorldを表示するところまで進めておきます。SilexのインストールからHelloWorldは下記の記事が参考になるかもしれません。

Silexをcomposerからインストールする

私は、ドキュメントルート直下にsilexディレクトリを作成し、その中にsilexをインストールしました。ディレクトリは下記の構造になっています。


silex
├── composer.json
├── composer.lock
├── composer.phar
├── web
│  ├── index.php
│  └── .htaccess
│
└── vendor
    ├── autoload.php
    ├── composer
    ├── pimple
    ├── silex
    └── symfony

データベース設定

データベース、テーブル、ユーザーを作成します。この記事では、下記のSQLを実行したことを前提にコーディングしています。


--データベース作成
CREATE DATABASE silex DEFAULT CHARACTER SET utf8;

--テーブル作成
CREATE TABLE `silex`.`member` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(255) NOT NULL,
  `password` varchar(64) NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--ユーザー作成
GRANT ALL PRIVILEGES ON *.* TO 'admin'@'localhost' IDENTIFIED BY 'admin' WITH GRANT OPTION;

会員登録フォームの表示

/member/registerにGETでリクエストした際、会員登録フォームを表示します。

記事の都合上、一気にtwigテンプレートまで書きますが、ルーティング、twigと段階を踏んで少しずつ進めるとよいです。

twigのダウンロード

テンプレートエンジンにtwigを使用します。composer.jsonを下記のように編集します。


{
    "minimum-stability": "dev",
    "require": {
        "silex/silex": "1.0.*",
        "twig/twig": "1.8.*"
    }
}

下記コマンドを実行してtwigをダウンロードします。


php composer.phar upate

index.php

HelloWorldが書かれているindex.phpを下記のように変更します。


// /silex/web/index.php

require_once __DIR__.'/../vendor/autoload.php'; 

$app = new Silex\Application(); 
$app['debug'] = true;

$app->register(new Silex\Provider\TwigServiceProvider(), array(
	'twig.path' => __DIR__ . '/../views',
));

$app->get('/member/register', function() use($app) { 
    return $app['twig']->render('member/register.html.twig');
}); 

$app->run(); 

twigテンプレートの作成

silexフォルダの直下に、viewディレクトリを作成し、その中にtwigテンプレートを作成します。


{# /silex/view/member/register.html.twig #}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>会員登録</title>
</head>
<body>
<form action="{{ app.request.baseUrl }}/member/register" method="post" class="well">
<div>
メールドレス
<input type="text" name="member[email]" value="" />
</div>
<div>
パスワード
<input type="password" name="member[password]" value="" />
</div>
<button type="submit" class="btn">登録</button>
</form>
</body>
</html>

動作確認

http://localhost/silex/web/member/register にアクセスして動作確認します。

ルーティングでエラーが出る方は、.htaccessを確認してください。HelloWorldを試したばかりの方はハマリどころだと思います。本記事の構造だと、.htaccessは下記のようになります。


<IfModule mod_rewrite.c>
    Options -MultiViews

    RewriteEngine On
    RewriteBase /silex/web
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

会員登録ロジックの作成

会員の登録フォームができましたので、この画面からPOSTリクエストを送信し、DBに情報を保存するところまで作成します。

記事の都合上、一気に書いていますが、ルーティング、twig、Doctrineのインストールと段階を踏んで少しずつ進めるとよいです。

Doctrineのダウンロード

DBアクセスにDoctrineを使用します。composer.jsonを下記のように編集します。


{
    "minimum-stability": "dev",
    "require": {
        "silex/silex": "1.0.*",
        "twig/twig": "1.8.*",
        "doctrine/dbal": "2.2.*",
        "doctrine/common": "2.2.*"
    }
}

下記コマンドを実行してDoctrineをダウンロードします。


php composer.phar upate

index.php

index.phpを下記のように変更します。


// ...
$app = new Silex\Application(); 
// ...
$app->register(new Silex\Provider\DoctrineServiceProvider(), array(
    'db.options' => array(
        'driver' => 'pdo_mysql',
        'dbname' => 'silex',
        'host' => 'localhost',
        'user' => '',
        'password' => ''
    )
));
// ...
$app->post('/member/register', function() use($app){
    $request = $app['request'];
    $member = $request->get('member');

    $stmt = $app['db']->prepare("
       INSERT INTO member SET
         email = :email
        ,password = :password
    ");
    $stmt->bindParam(':email', $member['email']);
    $password = md5($member['password']);
    $stmt->bindParam(':password', $password);
    $stmt->execute();

    return $app['twig']->render('member/finish.html.twig', array(
        'member' => $member
    ));
});

twigテンプレートの作成

完了ページのテンプレートを作成します。


{# /silex/view/member/register.html.twig #}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>会員登録完了</title>
</head>
<body>
<div>
メールドレス
{{ member.email }}
</div>
<div>
パスワード
{{ member.password }} 
</div>
</body>
</html>

動作確認

http://localhost/silex/web/member/register にアクセスし、登録フォームからPOSTの動作確認を行います。

テストを書いてリファクタリング

このアプリはindex.phpにロジックが集中しており、画面が増えてくるとメンテナンスしづらくなりそうです。ワークショップでは、このあとMVCの形に変更する予定でしたが、変更途中で時間切れとなりました。消化不良だったので、自宅で続きをやってみました。

次回以降の記事では、ファンクショナルテストをかいてアプリケーションをガードし、コードをMVCの形にリファクタリングするまでを紹介します。

 ツイート 3  シェア 0  Hatena 5