— A Day in Serenity (Reloaded) — PHP, CodeIgniter, FuelPHP, Linux or something

<?php
$app = require __DIR__ . '/../../bootstrap/instance.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $contact_form = $app->resource->post
        ->uri('app://self/contact/form')
        ->withQuery([
            'name'    => $_POST['name'],
            'email'   => $_POST['email'],
            'comment' => $_POST['comment'],
        ])
        ->eager->request();
} else {
    $contact_form = $app->resource->get
        ->uri('app://self/contact/form')
        ->eager->request();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Contact Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<?php echo $contact_form; ?>
</body>
</div>
</html>

これで完了です。

$appにBEAR.Sundayのアプリケーションインスタンスが代入されます。後は、リソースクライアントを使ってapp://self/contact/formリソースを取得して、$contact_formに代入しています。

Webサーバを起動します。

$ php -S 0.0.0.0:8000 -t var/www/

http://localhost:8000/sample.php にブラウザからアクセスしてみます。

▼コンタクトフォーム BEAR.Sundayの場合と見た目は同じですが、コンタクトフォームが表示されました。

▼［Send］ボタンをクリック同じく確認ダイアログが表示されました。

▼検証エラー何も入力せずに送信していますので検証エラーが表示されました。

このようにBEAR.Sundayのリソースは他のシステムからも簡単に利用できます。

今日はここまでにします。

BEAR.Sundayでコンタクトフォームを作ってみる⑧へ続く。

過去記事

BEAR.Sundayでコンタクトフォームを作ってみる①　BEAR.SundayのインストールとSwiftMailerによるメール送信
BEAR.Sundayでコンタクトフォームを作ってみる②　フォームの作成
BEAR.Sundayでコンタクトフォームを作ってみる③　Twigのautoescapeと文字化けの修正
BEAR.Sundayでコンタクトフォームを作ってみる④　Aura Formの利用とAOP
BEAR.Sundayでコンタクトフォームを作ってみる⑤　アプリケーションリソースの利用
BEAR.Sundayでコンタクトフォームを作ってみる⑥　確認ダイアログの追加
BEAR.Sundayでコンタクトフォームを作ってみる⑦　マイクロコンテンツ　←今ここ

BEAR.Sundayでコンタクトフォームを作ってみる⑥

BEAR.Sundayでコンタクトフォームを作ってみる⑤の続きです。

昨日まででコンタクトフォームもかなりできてきましたが、まだ確認ページがありません。

それで、いろいろと考えてみたのですが、結局、きれいに確認ページを追加する方法は思いつきませんでした。もし、確認ページの作成方法についてベストプラクティスがありましたら、お教え願いたいです。

何もないのもなんですので、JavaScriptで確認のダイアログを出すようにしたいと思います。

bootstrap-confirmation v1.0のインストール

Twitter Bootstrapで確認ダイアログを出せるBootstrap Confirmationを使うことにします。

https://github.com/Tavicu/bootstrap-confirmation

まず、composer.jsonにtavicu/bootstrap-confirmationを追加します。Packagistに登録されていなかったので、repositoriesも追加しています。

--- a/composer.json
+++ b/composer.json
@@ -2,10 +2,17 @@
     "name": "kenjis/contact",
     "description":"n/a",
     "license": "proprietary",
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/Tavicu/bootstrap-confirmation.git"
+        }
+    ],
     "require": {
         "bear/package": "dev-develop",
         "ray/di": "dev-master",
-        "swiftmailer/swiftmailer": "@stable"
+        "swiftmailer/swiftmailer": "@stable",
+        "tavicu/bootstrap-confirmation": "dev-master"
     },
     "require-dev": {
         "bear/dev-package": "~0.1@dev"

composerコマンドでインストールします。

$ composer update tavicu/bootstrap-confirmation

var/www/assets/jsフォルダを作成し、そこにbootstrap-confirmation.jsのリンクを配置します。

$ mkdir -p var/www/assets/js
$ cd var/www/assets/js
$ ln -s ../../../../vendor/tavicu/bootstrap-confirmation/bootstrap-confirmation.js .

これでインストール完了です。

jQueryのインストール

jQueryが必要なのでインストールします。

--- a/src/Resource/Page/Contact.twig
+++ b/src/Resource/Page/Contact.twig
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>BEAR.Sunday Contact Form</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 </head>

確認ダイアログの設置

bootstrap-confirmation.jsを使い確認ダイアログを表示するようにします。

--- a/src/Resource/App/Contact/Form.twig
+++ b/src/Resource/App/Contact/Form.twig
@@ -1,3 +1,17 @@
+<script src="/assets/js/bootstrap-confirmation.js"></script>
+<script>
+$(document).ready(function () {
+    $('[data-toggle="confirmation"]').confirmation({
+        title: 'Are you sure to submit?',
+        btnOkClass: 'btn btn-sm btn-primary',
+        btnOkLabel: 'Yes',
+        onConfirm: function() {
+            $('form').submit();
+        }
+    });
+});
+</script>
+
 <div id="contact_form">
     <h1>Contact Form</h1>
 {% if code == 201 %}
@@ -29,7 +43,7 @@
             <label class="control-label" for="comment">{{ form['comment']['error'] }}</label>
         </div>

-        <input class="btn btn-default" type="submit" name="submit" value="Send">
+        <input data-toggle="confirmation" class="btn btn-default" type="submit" name="_submit" value="Send">
     </form>
 {% endif %}
 </div><!-- end of id="contact_form" -->

確認ダイアログを出す要素を指定するため、submitボタンのinputタグにdata-toggle="confirmation"を追加します。また、name="_submit"とname属性の値を_submitに変更しています。これは、submitのままだと$('form').submit()が動作しないためです。

ダイアログの設定は以下の通りです。

    $('[data-toggle="confirmation"]').confirmation({
        title: 'Are you sure to submit?',
        btnOkClass: 'btn btn-sm btn-primary',
        btnOkLabel: 'Yes',
        onConfirm: function() {
            $('form').submit();
        }
    });

OKの場合、$('form').submit();としてフォームを送信します。

これで以下のような確認ダイアログが表示されるようになりました。

▼確認ダイアログ